HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what

HTML:AN

INTRODUCTION

Document Structure• HEAD: Provides information about the

document to browsers and agents. Some elements include:– TITLE: Tell what the document is about

(ideally). Typically displayed at the top of the browser.

– SCRIPT: include a script.– STYLE: create a style sheet.– META: define meta information.– LINK: relationship between documents.– OBJECT: include an object.

TITLE

• Include only one in each document.

• Should succinctly describe the document’s content.

• Keep title under 64 characters.

• Should not contain other HTML tags.

BODY

• Otherwise optional, it is often included because it allows the designer to set presentational values for attributes associated with the tag.– Background Color (BGCOLOR; can use color

name or hexidecimal RGB value for color).– Font Color for Text (TEXT, LINK, VLINK).– Background Images: (BACKGROUND).

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.0 FRAMESET//EN” “http://www.w3.org./TR/REC-html40/frameset.dtd”>

<HTML><HEAD><TITLE> Welcome to the White House</TITLE></HEAD>

<BODY background=“/WH/images/bg.gif” bgcolor = #FFFFFF” text=“#000000” link=“0000BB” vlink=“BB0000”>

Sample HTML Code of Tags Introduced So Far.

Basic Body Elements

• Headings: H1 to H6<H1> The White House </H1>

<H2> Vice-Presidential Suite </H2>

<H3> Secretary’s Office </H3>

• ALIGN:<H2 ALIGN=“LEFT”> The White House </H2>

<H2 ALIGN=“RIGHT”> The White House </H2>

<H2 ALIGN=“CENTER”> The White House </H2>

Basic Body Elements

• Paragraphs: <P> … </P><P STYLE=“font-family:Ariel;text-align:justify>

The White House is a place of action and suspense. </P>

• Use of Physical and Logical Style Elements:– Physical Elements: <B>, <BIG>, <I>,

<SMALL>, <STRIKE>, <TT>, <U>.– Logical Elements: <CITE>, <CODE>, <EM>,

• Subscript and SuperScript: SUB, SUP

Basic Body Elements• Special Characters:

– © Copyright symbol– ® Registered symbol– Nonbreaking space– < Less than symbol– > Greater than symbol– & Ampersand– " Double quote

Basic Body Elements

• Line Breaks: <BR> Forces a line break but does not insert an extra blank line.– CLEAR Attribute: Provides flow control for

text that is next to an image or other object.

Basic Body Elements

• No Break: <NOBR> – All the text that start and end with the NOBR

tags will not have line breaks inserted. Will force horizontal scrolling.

• Addresses: <ADDRESS> – Used to hold addresses. Browsers usually

displays in italics.

Basic Body Elements

• Comments: <! -->– Text appearing within comment tags is ignored

by browsers. Use comments to help make sense out of your HTML coding.

Lists

• Unnumbered (bulleted) lists<UL> </UL>

• Numbered lists<OL> </OL>

• Definition lists<DL> </DL> Definition List

<DT> Defined item in a definition list.

<DD> Definition of an item in a definition

list.

Ordered List

<H2> Important things to do today</H2>

<OL>

<LI> Eat breakfast

<LI> Take a nap

<LI> Eat dinner

</OL>

Ordered List

Important things to do today1. Eat breakfast

2. Take a nap

3. Eat dinner

Unnumbered Lists<H3> Things in the refrigerator

<UL>

<LI> Road Kill Wiggle

<LI> Sewer Soup

<LI> Rancid Relish

</UL>

Unnumbered Lists

Things in the refrigerator• Road Kill Wiggle• Sewer Soup• Rancid Relish

Definition List

<H4> Language List </H4>

<DL>

<DT> Java </DT>

<DD>An object-oriented language

<DT>Fortran</DT>

<DD> A scientific language

<DT>Perl</DT>

<DD>A text processing language

</DL>

Definition List

Language ListJava

An object-oriented language

Fortran A scientific language

Perl A text processing language

Nested Lists<OL>

<LI>Types of Horses</LI>

<UL>

<LI>Race</LI>

<LI>Nag</LI>

</UL>

<LI>Types of Pigs</LI>

<UL>

<LI>Sloppy</LI>

<LI>Fat</LI>

</UL>

</OL>

Nested Lists

1. Types of Horses • Race

• Nag

2. Types of Pigs • Sloppy

• Fat

HTML:

LINKS

Creating Links

• To create a link in HTML, you need two things:– The name of the file (or the URL of the file) you

want to link to…– The text that will serve as the “hot spot” -- that

is , the text that will be highlighted in the browser, which your readers can then select to follow the link.

– To create a link in an HTML page, use the HTML link tag <A> …</A>.

The Link Tag

<A HREF=“../menu.html”>Go back to Main Menu</A>

File to load whenlink is selected

Opening Tag

Text that will be highlighted

Closing Tag

“HREF” stands for “Hypertext REFerence.”

Example with List

<UL><LI><A HREF=“feeding.html”>Feeding Your Ostrich</A><LI><A HREF=“grooming.html”>Grooming Your Ostrich</A><LI><A HREF=“cleaning.html”>Cleaning Up After Your Ostrich</A><LI><A HREF=“taunting.html”>Taunting Your Ostrich</A></UL>

Feeding Your Ostrich

Grooming Your Ostrich

Cleaning Up After Your Ostrich

Taunting Your Ostrich

Relative Pathnames

Relative pathnames point to file based on their locations relative to the current file.

To specify relative pathnames in links, use UNIX-stylepathnames regardless of the system you actually have. This means that directory or folder names are separated byforward slashes (/), and use two dots to refer generically to the directory above the current one (..).

Relative PathnamesHREF = “file.html”

HREF = “files/file.html”

HREF=“files/morefiles/file.html”

HREF=“../file.html”

HREF=“../../files/ html”

file.html is located in the current directory.

file.html is located in the directory (or folder) called files (and the files directory is located in the current directory).

file.html is located in the morefiles directory, which is located in the files directory, which is located in the current directory.

file.html is located in the directory one level up form the current directory (the “parent” directory.

file.html is located two directory levels up, in the directory files.

Absolute Pathnames

Absolute pathnames point to the page by starting at the top of your directory hierarchy and working downward through all the intervening directories to reach the file.

Absolute pathnames point to files based on the absolute location on the file system.

Absolute pathnames always begin with a slash, which is the waythey are differentiated from relative pathnames.

Absolute PathnamesHREF =

“/u1/tbyrd/file.html

HREF=“/d|/files/html/file.html”

HREF=“/Hard Disk 1/HTML Files/file.html”

file.html is located in the directory /u1/tbyrd (typically UNIX).

file.html is located on the D: disk in the directories files/html (Windows systems).

file.html is located on the disk Hard Disk 1, in the folder HTML Files (typically on MacIntosh).

Linking to Web Documents• Remote pages are pages contained somewhere

on the Web other than the system you are currently working on.

• The HTML code for linking to these pages look exactly like the code for local pages except you use the URL of the Web page instead of the local address of the file.

<A HREF=“http://www.auburn.edu/”>Auburn Home Page</A>

Linking to Specific Locations• Instead of just linking to another document

and moving to the top of the page, you can set up link to a specific place within that page, for example, to the fourth major section down.

• Anchors are special places inside documents that can be linked to. Links can then jump to those special places inside the page as opposed to jumping just to the top of the page.

Linking to Specific Locations

Soft Fruits:Please choose a subtopic.

* Strawberries

* Blackberries

* Blueberries

BlackberriesBerries grow on canes.

BlueberriesBlueberries grow on bushes in colder

climates.

StrawberriesStrawberries are an herbaceous plant.

Linking to Specific Locations

Example 1: In the “berries.html” document. <H1><A NAME=“Strawberries”>Strawberries</A></H1>

<A HREF=“berries.html#Strawberries”>Strawberries</A>

Example 2: Within the same document.

<A HREF=#Strawberries>Strawberries</A>

Note:Anchor names and links are case sensitive. Make sure that the anchor name you used in the NAME attribute and the anchor name in the link after the # are identical.

Parts of URLs

http://daytona.raceway.com/home/www/files/race.html

protocol

hostname

directory and file name

http://auburn.eduftp://auburn.edugopher://auburn.edu

Tables in HTML

• The TABLE element allows the setup of text in columns and rows.

• A table must be enclosed in the <TABLE> </TABLE> tags.

• Within the table, the <TR> </TR> tag is used to designate rows.

• Individual cells are designated by <TH> </TH> for a header cell or <TD> </TD> for a data cell.

• A caption may also be included using the <CAPTION> </CAPTION>.

Table in HTML<TABLE BORDER><CAPTION> Soup of the Day</CAPTION><TR>

<TH>Monday<TH><TH>Tuesday<TH><TH>Wednesday<TH><TH>Thursday<TH><TH>Friday<TH>

</TR><TR>

<TD>Split Pea</TD><TD>New England<BR>Clam Chowder</TD><TD>Minestrone</TD><TD>Cream of <BR> Broccoli</TD><TD>Chowder</TD>

</TR></TABLE>

Attributes in Tables• align = left; align=right; align=center

• valign=top; valign=middle; valign=bottom

• width=size (px or %); height=size (px or %)

• bgcolor=color

• cellspacing=size; cellpadding=size; border=size– (for table tag in pixels)

• rowspan=value; colspan=value (The number of rows and columns throughout a table must be equivalent)