Embed Size (px)
DESCRIPTION
for the Video Game & Web Design class at Stoneham High School in Stoneham, MA
Citation preview
Creating Webpages
An Introduction to the Basics of HTML and Graphic Design
Richard Smyth
Technology Teacher
Stoneham High School
Part I: HTML Basics
Introduction to HTML
HTML = “hypertext markup language” HTML = the “tags” behind the scenes of
a webpage HTML tags come in pairs:
<html></html> Use the VIEW pulldown menu to view
the “Document Source” (the html file)
Tags are like parentheses . . .
( )<html> </html>
. . . like parentheses inside of parentheses
( [ ] )<html><title> </title></html>
The Basic HTML Tags
<html><head></head><body>
</body></head>
Example of the <head> tag
<html><head><title>Circulatory System</title></head><body>
Etc.
Example of what you find between the <body> tags
<body><h1>The Circulatory System</h1><hr><ul><li><a href=“blood.html”>Blood</a><li><a href=“heart.html”>Heart</a><li><a href=“lungs.html”>Lungs</a></ul></body>
Part 2:
Basic Graphic Design Principles
Common Sense Design Principles
Legibility Navigability Lay-out Keep It Simple
Common Sense Design Part 1:Legibility
Make sure your page is readable! Avoid light-colored text on dark or black
backgrounds Avoid garish or clashing colors
Common Sense Design Part II:Navigability
Your webpage should have a consistent navigation scheme
Always include links to the website homepage and the CHS homepage
Put the navigation links/buttons in the same place on each webpage in the site
Common Sense Design Part III:Lay-out
Have a master plan for consistency Use tables to create a grid Avoid clutter Don’t be afraid to use white space Use graphics to break up text
Common Sense Design Part IV:Keep It Simple
Include only what is necessary Avoid glitz for the sake of glitz
(e.g. animated images, blinking text) Keep images on page to a minimum
Four Design Principles: CRAP
Contrast Repetition Alignment Proximity
Source: Robin Williams and John Tollett. The Non-Designer’s Web Book: An easy guide to creating, designing, and posting your own web site. Berkeley, CA: Peachpit Press, 1998.
Four Design Principles:Contrast
Strong contrast attracts the eye and helps create a hierarchy of information
Contrast creates focal points for the eye Use text size that is bigger, bolder or a
very different style to create contrast Contrast can also be achieved by using
color or increasing the size of graphics
Four Design Principles:Repetition
Repetition creates consistency and unity
Repeat your color scheme from page to page: background color, colored links, etc.
Use repetition in formatting, layout, graphics, and navigation buttons
Four Design Principles:Alignment
Strict alignment makes for clearer communication, is more attractive to the eye, and creates unity
Choose one alignment and use it on the entire webpage: left, right, or center
Avoid centering Alignment connects parts of the page
together
Four Design Principles:Proximity
When items are close together, they appear to have a relationship
Group together information that belongs together
By grouping, you minimize the number of focal points on a page
By grouping, you are organizing
Part 3:
Final Considerations
Some Technical Matters
Start by creating a folder for all of your documents and store all files in here
Name your documents somename.html Images must be in GIF or JPEG formats To appropriate images from the web,
click and hold on the image (or right-click) and select “Save this image as”
Plan Ahead!
Think about who your audience is Think about what your purpose is Create a visual map of your site Collect images that you will use Finish a paper draft one week before
the project due date
