9/7: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources...
8
9/7: HTML & Website Design • Website design considerations • HTML (Hypertext Markup Language) • Resources on the WWW image courtesy of http://www. dreamweaver .com
-
Upload
alisha-jennings -
Category
Documents
-
view
214 -
download
2
Transcript of 9/7: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources...
9/7: HTML & Website Design
• Website design considerations
• HTML (Hypertext Markup Language)
• Resources on the WWW
image courtesy of http://www.dreamweaver.com
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
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
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="1-19.htm">Return from whence you came...</A>
</body></html> Show it
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.
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
Building a Web Page
• Next homework– 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, etc.
Suggestion: GeoCities • With a browser, access http://www.geocities.com.• Click on the “build a webpage” graphic. • 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.
