1. 9/12: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources on the WWW images courtesy of http://www.dreamweaver.comhttp://www.dreamweaver.com

2. Why Learn About Webpage Design? It will increase your understanding of design concepts in general It will increase awareness of customer needs It will help you understand webpage navigation. images courtesy of http://www.dreamweaver.comhttp://www.dreamweaver.com

3. Website design considerations Ease of navigation –no dead links, no dead endsno dead links –logical layout Proper labeling –bottom of each page Page size: consider the default screen size of 640x480 Speedy downloading –“fat” page = unvisited page“fat” page –image considerations

4. Hypertext Markup Language just a wee little page This is a web page. This is italics, bold face, and underlined. Return from whence you came... Show it

5. HTML elements Header: page elements that are not in the body. Title: shown in the blue bar at the top of the window. Metatags: keywords, language settings, etc. Body: what appears in the main window of the browser. Tags: pairs of markers that surround elements for formatting. Hyperlink: reference to a different file or fragment: IMG: hyperlink reference to an image file.

6. Resources on the Web Webpagesthatsuck.com “learn good design from looking at bad design”Webpagesthatsuck.com NCSA’s tutorial on HTML Guide to Creating a Successful Website

7. Homework #1: Building a Website Homework details –web page on a subject of your choice –Should include (at least) 1 page, 4 pictures, and 4 links to other web pages. –Should follow guidelines for good design. –Should be posted on a web site that advertises “free website hosting,” such as GeoCities, Xoom.com, Angelfire, Tripod, Homestead,GeoCitiesXoom.com AngelfireTripodHomestead

8. How to use GeoCities’ PageBuilder With a browser, access http://www.geocities.com.http://www.geocities.com Click on “Free web site – Sign up now!” Set up an account with Yahoo! if you don't have one already. Record your name & password. Click on Yahoo Page Builder, and the New folder icon. Use the icons on the page builder to design and create your web page. When finished designing your page, click the Save icon. This will automatically upload the page to the GeoCities website. Record the URL for your convenience. To edit your page, return to the GeoCities home page and click on the “Edit Web Page” graphic.

9. Alternatives to PageBuilder Microsoft Word Netscape Composer (part of Communicator) DreamWeaver (30-day trial downloadable from Macromedia.com) Lots and lots of other programs… Upload the files you create to GeoCities using FTP Manager

10. Homework #1: Building a Website Homework details –web page on a subject of your choice –Should include (at least) 1 page, 4 pictures, and 4 links to other web pages. –Should follow guidelines for good design. –Should be posted on a web site that advertises “free website hosting,” such as GeoCities, Xoom.com, Angelfire, Tripod, Homestead,GeoCitiesXoom.com AngelfireTripodHomestead