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

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. 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 Outline Materi

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 Header Welcome to Web Based Programming Class Bina Nusantara University

18. End of Session 1