Session 1

1. Matakuliah : M0114/Web Based Programming Tahun : 2005 Versi : 5 Session 1 Web Authoring & Web Programming

2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • menjelaskan konsep dasar pemrograman berbasis web menggunakan text editor dan GUI editor (C2) • menjelaskan perbedaan Front-end dan Back-end Issues (C2) • menjelaskan konvensi penamaan dokumen web (C2)

3. Outline Materi 1.1 Introduction – Creating Web Page 1.2 Text Editor and Lay-out Editor 1.3 Creating an Accessible Web Page 1.4 Front-End Issues 1.5 Back-End Issues 1.6 Sample A Simple HTML Program

4. 1.1 Introduction – Creating Web Page • We will be able to: • Distinguish between creating web pages using HTML text editor and a GUI HTML • Discuss web page design issues • Identify strategies for developing accessible Web pages • Identify front-end Web page design issues, such as interface • Identify back-end Web page design issues, such as bandwidth and page names • This course is appropriate for • Novices with little or no programming experience • Experienced professionals building substantial information systems continue..

5. 1.1 Introduction – Creating Web Page • Web page authoring is the process of creating Web pages. • There are many ways to create a Web page. This lessons will teach you to create Web pages using: • A text editor, such as: Notepad, Wordpad, etc. • A GUI editor, such as: MS-Frontpage, Dreamweaver, etc. • Each method creates similar pages, but the process are completely different. • Both method of Web page creation require a working knowledge of the Hypertext Markup Language (HTML), which is the language of Web. continue..

6. 1.1 Introduction – Creating Web Page Why still learn HTML??? • Most GUI editors have not kept pace with the evolution of HTML and do not provide options for using some of recently developed tags. • If considering learning a scripting language, such as JavaScript/VBScript, must learn how to write code from scratch. • So learning how to write HTML code in text editor will give you some these benefits: • Enable to create highly attractive & functional HTML documents, regardless of any other available software. • Learn fundamental of HTML, then update a page to the latest standard or recommendation. continue..

7. 1.1 Introduction – Creating Web Page History of the Internet • The Internet enables • Quick and easy communication via e-mail • International networking of computers • Packet switching • The transfer of digital data via small packets • Allows multiple users to send and receive data simultaneously • No centralized control • If one part of the Internet fails, other parts can still operate • Bandwidth • Information carrying capacity of communications lines continue..

8. 1.1 Introduction – Creating Web Page History of the World Wide Web • WWW • Allows computer users to locate and view multimedia-based documents • Introduced in 1990 by Tim Berners-Lee • Internet today • Mixes computing and communications technologies • Makes information constantly and instantly available to anyone with a connection

9. 1.2 Text Editor and Lay-out Editor • Differences between text editor and layout editor: • In text editor you must type HTML code manually. • In GUI editor to create the HTML code automatically or combine both. • We can use any text editor to write HTML code. • The only requirement: • Save the file text with a filename extension of .htm or .html continue..

10. 1.2 Text Editor and Lay-out Editor • GUI (Graphical User Interface): a program that provides visual navigation with menus and screen icons, and performs automated functions at the click of a button. • GUI editor enables you to create HTML pages without touching the actual code. • Just simply point click with mouse, and the code is generated by the program. • Popular GUI editors: • Macrodmedia Dreamweaver MX 4.5, • MS-Frontpage/Frontpage Express, • Adobe GoLive, • Netscape Composer, • Allaire HomeSite, etc.

11. 1.3 Creating an Accessible Web Page • When create a Web page, must ensure that it will be accessible to visitors of your site. • An Accessible Web page has two (2) characteristic: • First, user-friendly interface, or we call “front-end” • This Includes eye-catching graphics and well-structured information so that readers can gain the maximum benefit from your content as quickly as possible. • Secondly, should download easily to your visitors’ computer. This ability depends on the Web server and the network, also know as the “back-end”. • Careful design enables you to inform and please as many visitors as possible.

12. 1.4 Front-End Issues • A Web page acts as an interface for information we provide. • You can structure information in: tables, forms, and other less-formal ways. • An accessible Web page should: • Incorporate attractive images and graphical elements • Contain constantly updated hyperlinks and content. • Use tables wisely. • Present carefully designed forms. • Use the most current technologies appropriate for the page. • Use images sparingly. Image can clutter the page and create bandwidth problems. • Be easily navigable and without dead ends. • Include alternative navigation links, for example: when defining an image map for a Web site, should provide standard hypertext links to the site as well. continue..

13. 1.4 Front-End Issues • Image map: a set of coordinates on an image that creates a “hot spot.” When the hot spot is clicked, it acts as a hyperlink. • The Web present several obstacles to accessibility: • Have no control over the ways in which users will access and view your pages. • Don’t which browser user use. • Nor can you direct them to certain areas of the pages or site. • No control over the speed with which user will download your pages.

14. 1.5 Back-End Issues • When using Web documents to communicate over a network, we should ensure that they operate as efficiently as possible. • HTML pages require a relatively small amount of space on a hard drive, because their file size is small, also easy to download over a network. • When a Web pages have a several graphics, we will generally download each graphic as well. • But images file can be quite large. This file usually takes some time to download over a network. • Files image like JPEG and GIF support compression, to speed-up download time. • Any file downloaded over a network requires bandwidth. continue..

15. 1.5 Back-End Issues • To download a large file in a short amount of time, you need more bandwidth. If you cannot get more bandwidth, you need more time to download the file. • Bandwidth: the rate of data transfer over a network connection; measured in bits per second. • We must consider some back-end when design an accessible Web page: • Make sure do not reference several large file, except very important. • Should avoid using too small image files. Because difficult to determine an acceptable download size for files associated with an HTML page. continue..

16. 1.5 Back-End Issues • Consider the total size of your pages, including all images, plug-ins and other programs. • As general rule, your pages should not exceed 100 KB without a very good reason.

17. 1.6 Sample A Simple HTML Program <HTML> <HEAD> <TITLE>Header</TITLE> <meta name="Microsoft Theme" content="rmnsque 011"> </HEAD> <BODY> <CENTER> <H3>Welcome to</H3><H3><font color="#0000FF">Web Based Programming&nbsp; Class</font></H3><P> <H2><font color="#FF0000"><blink> <marquee align="middle" bgcolor="#FFCC66">Bina Nusantara University</marquee> </blink></font></H2> </BODY> </HTML>

18. End of Session 1