![Page 1: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/1.jpg)
Creating Webpages
An Introduction to the Basics of HTML and Graphic Design
Richard Smyth
Technology Teacher
Stoneham High School
![Page 2: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/2.jpg)
Part I: HTML Basics
![Page 3: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/3.jpg)
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)
![Page 4: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/4.jpg)
Tags are like parentheses . . .
( )<html> </html>
![Page 5: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/5.jpg)
. . . like parentheses inside of parentheses
( [ ] )<html><title> </title></html>
![Page 6: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/6.jpg)
The Basic HTML Tags
<html><head></head><body>
</body></head>
![Page 7: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/7.jpg)
![Page 8: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/8.jpg)
Example of the <head> tag
<html><head><title>Circulatory System</title></head><body>
Etc.
![Page 9: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/9.jpg)
![Page 10: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/10.jpg)
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>
![Page 11: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/11.jpg)
Part 2:
Basic Graphic Design Principles
![Page 12: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/12.jpg)
Common Sense Design Principles
Legibility Navigability Lay-out Keep It Simple
![Page 13: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/13.jpg)
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
![Page 14: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/14.jpg)
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
![Page 15: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/15.jpg)
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
![Page 16: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/16.jpg)
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
![Page 17: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/17.jpg)
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.
![Page 18: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/18.jpg)
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
![Page 19: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/19.jpg)
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
![Page 20: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/20.jpg)
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
![Page 21: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/21.jpg)
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
![Page 22: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/22.jpg)
Part 3:
Final Considerations
![Page 23: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/23.jpg)
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”
![Page 24: Creating Webpage: An Intro to the Basics of HTML and Graphic Design](https://reader033.vdocuments.net/reader033/viewer/2022061202/547aaa5cb4af9f110c8b456a/html5/thumbnails/24.jpg)
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