html: an introduction. document structure head: provides information about the document to browsers...
TRANSCRIPT
![Page 1: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/1.jpg)
HTML:AN
INTRODUCTION
![Page 2: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/2.jpg)
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.
![Page 3: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/3.jpg)
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.
![Page 4: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/4.jpg)
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).
![Page 5: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/5.jpg)
<!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.
![Page 6: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/6.jpg)
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>
![Page 7: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/7.jpg)
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
![Page 8: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/8.jpg)
Basic Body Elements• Special Characters:
– © Copyright symbol– ® Registered symbol– Nonbreaking space– < Less than symbol– > Greater than symbol– & Ampersand– " Double quote
![Page 9: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/9.jpg)
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.
![Page 10: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/10.jpg)
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.
![Page 11: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/11.jpg)
Basic Body Elements
• Comments: <! -->– Text appearing within comment tags is ignored
by browsers. Use comments to help make sense out of your HTML coding.
![Page 12: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/12.jpg)
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.
![Page 13: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/13.jpg)
Ordered List
<H2> Important things to do today</H2>
<OL>
<LI> Eat breakfast
<LI> Take a nap
<LI> Eat dinner
</OL>
![Page 14: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/14.jpg)
Ordered List
Important things to do today1. Eat breakfast
2. Take a nap
3. Eat dinner
![Page 15: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/15.jpg)
Unnumbered Lists<H3> Things in the refrigerator
<UL>
<LI> Road Kill Wiggle
<LI> Sewer Soup
<LI> Rancid Relish
</UL>
![Page 16: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/16.jpg)
Unnumbered Lists
Things in the refrigerator• Road Kill Wiggle• Sewer Soup• Rancid Relish
![Page 17: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/17.jpg)
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>
![Page 18: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/18.jpg)
Definition List
Language ListJava
An object-oriented language
Fortran A scientific language
Perl A text processing language
![Page 19: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/19.jpg)
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>
![Page 20: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/20.jpg)
Nested Lists
1. Types of Horses • Race
• Nag
2. Types of Pigs • Sloppy
• Fat
![Page 21: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/21.jpg)
HTML:
LINKS
![Page 22: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/22.jpg)
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>.
![Page 23: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/23.jpg)
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.”
![Page 24: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/24.jpg)
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
![Page 25: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/25.jpg)
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 (..).
![Page 26: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/26.jpg)
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.
![Page 27: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/27.jpg)
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.
![Page 28: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/28.jpg)
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).
![Page 29: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/29.jpg)
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>
![Page 30: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/30.jpg)
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.
![Page 31: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/31.jpg)
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.
![Page 32: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/32.jpg)
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.
![Page 33: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/33.jpg)
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
![Page 34: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/34.jpg)
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>.
![Page 35: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/35.jpg)
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>
![Page 36: HTML: AN INTRODUCTION. Document Structure HEAD: Provides information about the document to browsers and agents. Some elements include: –TITLE: Tell what](https://reader036.vdocuments.us/reader036/viewer/2022062716/56649dff5503460f94ae83ec/html5/thumbnails/36.jpg)
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)