Building Your Web Page
Understanding HTML Syntax
Codes used to create HTML document--tags
Rules when using HTML tags
Always enclosed in < and > angle
brackets
Can be upper or lower case--no difference
Tags that have to be turned on and off are
called container tags
Tags used by themselves--empty tags
No spaces can be inserted in a tag
Parts of HTML Document
HTML documents consist of three parts
Header--includes the title of the document
Body--includes the main text of the
document
Footer--includes the author and date
revised
HTML Structural Tags
Certain tags must appear in every document
<HTML and </HTML> The entire
document must be between these tags.
<HEAD> and </HEAD> Defines a
header for the document.
<TITLE> and </TITLE>
Identifies the document to the reader.
<BODY> and </BODY> All
document information must be between these tags.
Exercise 1
Open Notepad from Accessories
Turn on word wrap in Notepad by selecting
Edit pull-down menu, choose Word Wrap
Key in a simple document with:
title--Your Name
body--Welcome to the web page of your name
Save the file as yourname.htm
Example
<HTML>
<HEAD>
<TITLE>Educational Service
Center</TITLE>
</HEAD>
<BODY>
Welcome to the Web page of the Educational
Resource Center.
</BODY>
</HTML>
Saving and Viewing Web Pages
Save the document
Windows 3.1 save as .htm
Windows 95 save as .html
Viewing
Open browser
File menu choose Open File
Select the location where you saved it
Select your document and choose Open or OK
Troubleshooting
Check all the tags to make sure they are
typed correctly
are without spaces
Remember brackets and slashes must be used
correctly
Resave and Reload to your browser
Using Head Tags
There are six head tags <H1>…</H1>
Level 1 is the largest to level 6 the
smallest.
These tags describe what the text is not
how it will be displayed--the browser decides that
Not all browsers display text in the same
way
Heading make you page easy to read
Use the tags in order
Break Tag
You can insert lines in a word processor by
pressing the enter key
In HTML you need to use the empty line break
tag <BR>
This tag needs no ending tag code
Exercise 1 continued
Lets change the look of the web page
Delete the body and insert the following
<H1>Welcome to Your Name Web
Page</H1>This page is currently under construction.
Save the document, switch to Netscape and
reload
Note: the text size has changed and is
on two separate lines even though you typed one line.
Style Tags
Changing the Font Size
<FONT SIZE>
Increase or decrease font size using numbers
1 to 7 (#3 is normal text size)
smallest is 1 to largest 7
Tag does not include automatic breaks so you
can change within a sentence
Paragraph Tags
<P>
Equal to pressing the enter key twice
Like the break tag it is empty and requires
no ending code
This tag allows spaces between paragraphs
like that in a word processor
Horizontal Rule Tag
<HR>
Draws a line between text
Divider between different topics on a page
Indent Tags
<DD>
Works like the TAB key in a word processor
<BLOCKQUOTE>
container tag that indents all lines from
both sides
</BLOCKQUOTE> ending code
Creating Lists
Ordered Lists (Numbered Lists)
This command automatically numbers a list as
viewed in the browser
<OL>…</OL> define where the
list begins and ends
<LI> empty tag placed at the
beginning of each line of the list
Creating Lists
Unordered List (Bulleted List)
This places a bullet before each item in a
list
<UL>…</UL> define the
beginning and end of the list
<LI> placed at the beginning of each
line of the list
Creating Lists
Definition Lists (Glossary List)
This creates a definition list…word then
definition
<DL>…</DL> defines the
beginning and end of the list
<DT> placed at beginning of the term
<DD> placed before definition
Exercise
Add a horizontal line between you welcome
message and the rest of your page.
Create a list of items to be placed on your
page
Choose either bulleted or numbered
Use the paragraph tag to place three lines
between the list and the final line
Create a line that blinks
Write the following: "Comments sent
to"
Background Color
Change the color of your web page
<BODY BGCOLOR="RRGGBB">
Locate at the beginning of the body text
Color code represents the amount of red,
green, and blue
Numbers and sometimes letters represent
the colors (F--full color)
Hexadecimal format--numbering system
HEX Format for Basic Colors
Changing Text Color
Basically the same method as background
<BODY TEXT="RRGGBB">
Watch to be sure that your page is readable
in the browser. Some colors are difficult to read
Visit web site to determine color values
http://www.users.interport.net/~giant/COLOR/1ColorSpecifer.html
Exercise
Change your background color to something
you like
Now select a text color
Color your headline a different color from
the text
Creating Links
Linking to other files (relative linking)
Tag called anchor--tells browser where to
find the file
<A HREF="path/filename.html">anchor
text</A>
<A HREF> Creates an anchor to a
reference (a location you specify)
the </A> closes the anchor
the anchor text is what you click on to
activate the hypertext link
Creating Links
Linking to other sites (absolute linking)
You need to be very specific and watch the
typing--this link is to a web address
<A HREF="http://www.disney.com">Disney</A>
Remember the text Disney will be
displayed, highlighted, and underlined in the browser
Creating Links
Linking to the same file
This allows the reader to jump to a place in
the document without having to read the whole thing
First--must leave a bookmark or pointer in
the file then create the link
Pointer tag <A NAME="xxxx">
Link tag <A HREF="#xxxx">anchor
text</A>
You must include the # to tell the browser
to look for the pointer and not a different file.
Creating Links
Mail to links
Way to receive messages from visitors to
your web page
<A HREF="mailto:e-mail
address">anchor text</A>
Link Color
Three different types of link but usually
only two colors are used for types of links
Unvisited links LINK=
Visited links VLINK=
Active links--this changes so fast not
usually necessary to change
Add the link color commands to the Body
color tag code line
<BODY BGCOLOR="0099BB"TEXT="6600DD"LINK="00FF00"VLINK="FF0000">
Exercise
Create a link that takes you to the Walt
Disney site at www.disney.com
Test it
Graphics
Copyright--be careful and be sure you check
before using the graphic
Loading depends on
size of the graphic, small loads much
faster
type of graphic--.gif faster load than
.jpeg
Graphics
.GIF type of file used for clip art
Graphics Interchange Format
.JPEG type of file used for photos
Joint Photographic Expert Group format
<IMG SRC> Image Search--searches for
the graphic and loads it into your Web page
Be sure to put graphics files in same
directory as web page to make loading faster
Graphics
Downloading Graphics Files
Great search engine for web
"stuff"
http://www.looksmart.com
Search for backgrounds, animations,
clip art, etc.
Find file you want to download (download
OR)
Position the mouse over the image and
right click and hold down
Choose Save this Image As
Save As dialog box appears
Save to directory where you have web
page files
Click OK (graphic is saved to your
selected location)
Be
sure that you credit the site from which you took the graphic!
Graphics
Alignment
Where will the image appear on your page
(automatically left)
<IMG SRC="graphic
filename"ALIGN=RIGHT>
You can choose Right, Left, Middle,
Bottom, Texttop
Exercise
Graphics
Select a graphic that represents you to be
the theme graphic for your page
Select an animated graphic to represent a
e-mail concept and position it at the bottom of your page
Tables
Three tags to create tables
<TABLE>…</TABLE>
<TR>…</TR> defines a row of
cells
<TD>…<TD> indicates the
table data and specifies the table cell
Table Borders
BORDER=# where # is the width of the
border
code is placed inside the Table tag
<TABLE BORDER=5> number between 3
& 10
Tables
Table Size
If not specified, size determined by data
used
To change decide the percentage of the
window’s width you want the table to occupy
50% would cover 1/2 the window
100% would cover whole window
Tables
Table Cells
Specify the data in the cell
align the data ALIGN=XXX inside <TD>
left, right or center
align vertically VALIGN=XXX inside
<TD>
top, bottom or middle
Creating Frames
Frames divide a single browser window into
multiple windows
Sub-windows then can view different pages
Two types of web documents
Body documents--display in a single window
Frameset documents--divided window with
URLs referencing to the document the browser is to display in the windows
Creating Frames
Replace the <BODY> tag with
<FRAMESET>…</FRAMESET>
You must now include tags that indicate the
number of frames to be viewed on the page
Once this is done use the
<FRAME SRC="filename"> to
tell the browser what to show in the window
Creating Frames
Split the window vertically
Change the <BODY> to <FRAMESET
COLS="25%,50%,25%">
On the next line indicate the files to be
viewed in each frame
<FRAME SRC="filename">
<FRAME SRC="filename">
<FRAME SRC="filename">
The web page will have three vertical
windows with each of the referenced files on view
Creating Frames
Splitting Horizontally
Change in the FRAME SRC command the COLS
to ROWS
<FRAME SRC
ROWS="25%,50%,25%">
This creates specified percentage frames
for the window of any browser
Creating Frames
Elastic frames
Enlarges or gets smaller depending on how
much room is left in the window
<FRAME SRC="25%,50%,*">
This creates a window of 25% one of 50%
and the last whatever is left over
It is a good idea to always create one
elastic window to account for different screen sizes
Web pages can be frustrating and exciting
all at the same time
HTML is easy once you understand the
structure
HTML editors will create your pages BUT for
troubleshooting or page problems, you need to understand the code
| 
Fly