Part 2--HTML Basics
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://web_address">Sparks’
Fly</A>
Remember the text Sparks’ Fly
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
Sparks’ Fly site at http://members.tripod.com/cynthiasparks
Test it
Graphics
A picture is worth a thousand words,
that’s why it take a thousand times longer to load!! Heather Carr
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="file_name">
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)
Graphics Sites
www.flash.net/~krys
www.4yeo.com
www.tgn.net/~pambytes/default.html
www.windyweb.com/design
www.kidsdomain.com
www.freeimages.com
www.gifanimations.com
Alignment—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
Good Luck
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 the exciting page or to solve problems, you need to understand the
code
Where to hang your website
Free servers that are willing to host
http://www.freewebsites.net
Select your host based on your needs
Program used to create site
Method of upload to site
Size of website
| 
Fly