Building a Web Page With HTML
Objectives
Start Notepad
Write Basic HTML
Use HTML Tags
Enter Text
Save an HTML File
Use Colors in Web Pages
Use Various Formatting Techniques
What is the WWW?
World Wide Web
Supports multimedia and consists of a collection of linked documents known as Web Pages
What is a Web Site?
Where Are Pages Stored?
Web pages are stored where?
How do you publish web pages?
Hyperlinks
Link web pages together
Allow quick jumps to other pages
What is HTML?
HyperText Markup Language
HTML is a set of special instructions, called "tags" or "markups" that specify links to other documents as well as how the page should be displayed
Web browsers can interpret tags and display content accordingly
HTML is Platform Independent
HTML Tags
Tags begin and end with special symbols: < and >
Some tags must be opened and closed (closed with "/" symbol)
Examples:
<HTML> </HTML>
<BODY> </BODY>
<B> </B>
<HR> </HR>
Who Can Publish on the Web?
Anyone!
Styles are very diverse
Easy way to publish information for large audience
Elements of a Web Page
Title: identifies the subject/purpose, displays on browser’s title bar, is also the name of the page in your favorites
Body: information that displays in browser window
Background: similar to wallpaper in Windows, can be solid color, picture (repeating), standard white, etc.
Normal Text: makes up the main content of a web page, can be in many formats such as standard paragraph, bulleted, numbered, bold, italic, colored, underlined
Headings: usually larger, bold. HTML has six different styles of headings (1 through 6)
Images: icons, bullets, lines, photos, illustrations, or other picture
Horizontal Rule: lines across the page, used to separate different sections
Image Map: one image with many embedded links or hotspots
Animated Images: moving images
LINKS/HYPERLINKS: primary method used to navigate between pages. Clicking a link instructs the browser to go to a location or file, or to request a file from the server
Building a Web Page
Start Notepad
Turn on Word Wrap (under ‘Edit’ Menu)
Begin entering text
Save HTML file (remember where!) but don’t close Notepad
Open HTML file from within browser
Continue to make changes to HTML file, saving, and then refreshing browser to check changes
Viewing HTML Source
Load any web page in your browser
Find the "View Source" selection from a drop-down menu and select it.
The Basics
All pages start with the same tags:
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
this is where all the page content goes…
</BODY>
</HTML>
Web Page Organization
After purpose of page is defined, it is necessary to organize information
Linear Layout: displays web pages in a straight line
Hierarchical Layout: displays web pages in a tree-like structure
Webbed Layout: has no set structure, but shows connections/links from each page to each page
Avoid building web sites that are too narrow or too deep:
Narrow Web Site: a site in which the home page is the index, and all other pages are only accessible through the home page
Why is this bad?
Deep Web Site: a site in which the content web pages are buried beneath many other web pages
Why is this bad?
Linking
Links can be used to:
jump to pages within the site
jump to other pages outside of the site
send an email message
download a file
How To...
Start each page:
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
this is where all the page content goes…
</BODY>
</HTML>
Format Text:
For Heading Styles:
<H1>This is the heading 1 style!</H1>
<H6>This is the heading 6 style!</H6>
For Centering:
<CENTER>This is centered!</CENTER>
For Colored Text:
<FONT COLOR="#FF0000"> (starts font color)
</FONT> (ends font color)
Make a Horizontal Rule:
<HR> (makes a standard, full-width rule)
<HR WIDTH=50%> (makes a half width rule)
Center a Horizontal Rule
<CENTER><HR></CENTER>
(<HR> is a one-time use tag. It does not need to be ended with ‘/’)
Add a Background Color:
Instead of using only <BODY>, use
<BODY BGCOLOR="insertcolorcodehere">
For Example:
- <BODY BGCOLOR="#FF0000">
- This will create a red background
Add a Background Image:
Instead of using only <BODY>, use
<BODY BACKGROUND="insertimagenamehere">
For Example:
- <BODY BACKGROUND="family.jpg">
- Be sure that the image’s filename is spelled correctly (including capital letters) and is uploaded to your U of A directory.
Insert an image:
<IMG SRC="imagename.jpg">
Center an image:
<CENTER><IMG SRC="imagename.jpg></CENTER>
Create a link to a page within your site:
<A HREF="pagename.html">Click here.</A>
‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.
Create a link to an external page:
<A HREF="http://www.cnn.com">Click here.</A>
‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.
Create an email link:
<A HREF="mailto:wilbur@arizona.edu">Email me!</A>
‘Email me!’ will be the clickable text since it is between the <A HREF> and </A> tags.
<A HREF="photos.html"><IMG SRC="mydog.jpg"></A>
Additional Resources
Cool background images:
http://www.freebackgrounds.com
All kinds of images
Just right-click on any image you see online and select "Save picture as…" to save the image to your disk
See how a page was built (and use it for your own page!)
From the ‘View’ menu (in Internet Explorer), select ‘Source’. The source HTML will display.