Lesson Three: FILE LINKING

Websites are a collection of individual files that are linked together using hypertext. HTML (Hypertext Markup Language) is a third generation computer language that creates such pages. Linking files covers not just creating a means to go from one web page to another, but also is the means to insert picture files, music files, movie files, and create a connection to an e-mail program for the purpose of communication between viewer and website owner.

Website addresses, like any file, have three components to their names: a file path, a file name, and a file extension. Web pages use the .htm, .html, or ,shtml extensions. If the web page is in the same location (i.e., folder/directory), the path portion can be ignored when giving the address. If the web page is on a different server from the page containing the href tag, then the path starts with "http://" to denote that hypertext transfer protocol must be invoked. The path then contains the domain name of the site and whatever folder/directory designations necessary.

Hypertext Reference (href)

<a> anchor tag
<a href = ""> </a>(internal and external; relative and absolute addressing)
<a name = " "> with accompanying <a href = " # "> </a>
<a href = "mailto: "> </a>; for email contacts
<a href = " .mp3"> </a> and <a href = " .mov"> </a> for sound and movie bites
<a href = " " title = " "> to provide link explanation when cursor points to
Examples:
<a href = "second.html">Go to second page</a>
<a name = "level1" /> elsewhere on another page <a href = "second.html#level1">Go to Level One entry</a>
<a href = "http://ravencatt.org" title = "Link to BUAI info on JJ's teaching site" >BUAI 150 information</a>
<a href = "mailto:jjohnson@shawnee.edu">Contact me</a>
<a href = "lizard.mov">Movie clip of running lizard</a>

Images

Picture are available as files containing the digitized images. The file formats that are safest to use are jpg (also seen as jpeg and jpe) and gif. These two can be viewed on just about any viewer available on the Internet. Other formats may not be compatible with some web browsers. Jpg is better with photographs, preserving the colors; while gif is more versatile, allowing special features like animation and transparency.

<body background = " "> </body>
Example: <body background = "whitesilk.jpg"> </body>

<img src = " " attribute(s) = "" />
Attributes:
alt = " "; align = top, middle, bottom(default); align = left, right; vspace = " ", hspace = " "(pixels); border = " " (pixels)
Examples:
<img src = "logo.gif" alt = "Company logo" />
<img src = "pic45.gif" align = "top" />
<img src = "car.jpg" align = "left" vspace = "5" hspace = "10" />
<img src = "gidg.jpg" border = "12" />
<img src = "http://www.shawnee.edu/pictures/bear.gif" alt = "University mascot" />

Picture as link

<a href = " "><img src = " " /></a>
Example: <a href = "rosegarden.html"><img src = "rose.jpg" /></a>


Lesson 4: Tables, Frames and Forms

Return to main page