1 / 10

9/12: HTML & Website Design

9/12: HTML & Website Design. Website design considerations HTML (Hypertext Markup Language) Resources on the WWW. images courtesy of http://www.dreamweaver.com. Why Learn About Webpage Design?. It will increase your understanding of design concepts in general

kamil
Download Presentation

9/12: HTML & Website Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 9/12: HTML & Website Design • Website design considerations • HTML (Hypertext Markup Language) • Resources on the WWW images courtesy of http://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.com

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

  4. Hypertext Markup Language <html> <head> <title>just a wee little page</title> </head> <body> This is a web page. <I>This is italics,</I><B> bold face,</B><U>and underlined.</U> <A HREF=“9-12.htm">Return from whence you came...</A> </body> </html> 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: <A HREF=http://www.yahoo.com> IMG: hyperlink reference to an image file.

  6. Resources on the Web • Webpagesthatsuck.com“learn good design from looking at bad design” • 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,

  8. How to use GeoCities’ PageBuilder • With a browser, access 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,

More Related