View
218
Download
1
Category
Tags:
Preview:
Citation preview
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)
Recommended