Lesson 2

Introduction to HTML
Lesson 2: HTML Tags
Lesson 2
HTML Tags
Lesson 2 - HTML Tags
Copyright 1999, Pinnacle Software Solutions Inc.
13
Lesson 2: HTML Tags
Lesson Objectives
Page Formatting Tags
Text Formatting Tags
List Tags
Hot Links
META Tags
2.1
All HTML tags, including the HTML tags discussed in the lesson, will belong to at
least one of the following three important categories for HTML tags:
1. Document Tags: Tags required for all HTML documents. Document tags
include the following: <HTML><HEAD><TITLE><BODY>. As discussed
previously, these are the basic elements of an HTML page.
2. Container Tags: HTML tags that include both a start tag and an end tag. Note
that all Document tags are Container tags.
3. Empty Tag: Tags that have a start tag only and no end tag.
14
Lesson 2: HTML Tags
Paragraph Tag
A web browser begins a new paragraph
only when it encounters a <P>tag.
Carriage returns in HTML files have no
effect.
All whitespace is ignored by browsers.
Although the <P> tag can function as a single or paired tag, it is better to use it in
a pair, as <P></P>. This indicates to the browser where a paragraph is both
beginning or ending. Remember that the browser ignores all carriage returns.
Practice Exercise
Type in the following within the <BODY> tags of default.htm:
<P>
WhiletypinganHTMLdocumentwecanusehardreturnsjust
soitiseasierforustoreadit.
However,thereturnswillnotshowupinthebrowserwindow
whentheHTMLdocumentisviewed.Onlywhenthebrowser
encountersanother<P>tag,itcreatesablanklinebefore
thetext.
</P>
15
Lesson 2: HTML Tags
Break Tag
An empty tag; not paired.
Simply like hitting enter/return key.
Forces text to the next line.
As mentioned previously, browsers ignore extra spaces and carriage returns.

Unlike the <P> tag, <BR> tag does not insert another line of blank space; it
simply forces the text after the break tag to the next line. It breaks the line.
Practice Exercise
ABCCorporation
123SomeStreet
GreatCity,ST11111
Now, add <BR> tags as follows and see the difference:
ABCCorporation<BR>
123SomeStreet<BR>
GreatCity,ST11111<BR>
16
Lesson 2: HTML Tags
Comment Tag
Written as: .
Browsers ignore text found within these
comment tags.
Useful for documentation.
When your web pages become overloaded with complex content and nested
tables, comment tags can help by indicating and clarifying divisions within the
HTML document.
Practice Exercise
<!Thisisthehistoryofthecompany>
ABCCorporationwasstartedin1990byJohnSmith.
Note: The browser will only show you the line above starting from ABC
Corporation... Content in comment tags is information for web developers to
update the page. Comments make it easier to discern the layout of the page.
17
Lesson 2: HTML Tags
Preformatted Tag
Container tags: <PRE></PRE>.
Shows text laid out exactly as written - The
only exception to the rule.
Instead of ignoring spaces and returns, the
browser shows text layout as written.
Very useful for lining up text and numbers.
Practice Exercise
<PRE>
$200.56
$332.09
$32.45
$5.88
$1,600.75
</PRE>
Note: When using the <PRE> tag, do not make your lines too long because the
browser will not wrap text included within these tags.
18
Lesson 2: HTML Tags
Blockquote Tag
Written as:
<BLOCKQUOTE></BLOCKQUOTE>.
Left indents the text within these tags.
Used for quotations and speeches.
Should be nested within the <P></P>tags.
Practice Exercise
Type in the following within the <BODY> tags of default.htm and note the
spacing of the text in the <BLOCKQUOTE> tags and the text in <P> tags:
<P>
HerearesomeinterestingquotesfromInnerReflections,a
diaryprintedbytheSelfRealizationFellowship.
<BLOCKQUOTE>
Silenceandseclusionarethesecretsofsuccess.Inthis
modernlifeofactivity,thereisonlyonewaytoseparate
yourselffromitsceaselessdemands:getawayfromitonce
inawhile.
</BLOCKQUOTE>
<BLOCKQUOTE>Plainlivingandhighthinkingmakefor
contentment.
</BLOCKQUOTE>
<BLOCKQUOTE>
Asamirrorreflectsallthingsheldbeforeit,sowhenyour
mindmirroriscalm,youwillbeabletoseereflectedinit
thetruequalityofothers.
</BLOCKQUOTE>
TheSelfRealizationFellowshipisbasedinLosAngeles,CA.
</P>
Practice Exercise
Incorporate the following tags in a new page:
1.
2.
3.
4.
<P>
<BR>
Comment <!-<PRE>
-->
19
Lesson 2: HTML Tags
5. <BLOCKQUOTE>
20
Lesson 2: HTML Tags
Horizontal Rule Tag

Written as: <HR>.
Empty tag (not paired).
Simply draws a horizontal line in your
document.
Size: Thickness of the line (pixels).
Width: (pixels).
Align: Left, Right or Center.
Noshade: Solid line; this tag stands on its
own.
Practice Exercise
<HRWidth=75%Align=CenterSize=4>
Practice Exercise
Lets try the NOSHADE attribute that simply creates a solid line. Type in the
following within the <BODY> tags of default.htm:
<HRWidth=75%Align=CenterSize=4NOSHADE>
21
Lesson 2: HTML Tags
Heading Tags
HTML has six levels of headings
numbered 1 through 6, with 1 being the
largest.
Headings are typically displayed in larger
and bolder fonts than normal body text.
The syntax of the heading element is:
<Hy>Text of Heading</Hy>where y is a
number between 1 and 6 specifying the
level of the heading.
Practice Exercise
<H1>ThisisHeadingLevel1thebiggestheading.</H1>
<H2>ThisisHeadingLevel2</H2>
Thisisregulartext.
<H6>ThisisHeadingLevel6thesmallestheading
level.</H6>
Note: The Heading tag also works like a <P> tag. It inserts a blank line after its
ending heading tag which means that you can not include heading text and
regular text on the same line.
Practice Exercise
<H3>ThisisHeadingLevel3</H3>And,thisisregulartext.
Thisisthesameas:
<P>
And,thisisregulartext.
</P>
22
Lesson 2: HTML Tags
Text Attributes
For Bold Text: <B></B>
can also use <STRONG></STRONG>.
For Italics Text: <I></I>
can also use <EM></EM>or
<CITE></CITE>.
For Underline Text: <U></U>.
For Teletype (Monospaced text):
<TT></TT>
Practice Exercise
<B>Thisisboldedtext</B>
<I>Thisisitalicizedtext</I>
<U>Thisisunderlinedtext</U>
<TT>Thisisteletypetext</TT>
23
Lesson 2: HTML Tags
Common List Tags

Ordered Lists:
<OL></OL>and <LI>
Unordered Lists:
<UL></UL and <LI>
Definition Lists:
<DL></DL>and <DT>, <DD>
Ordered Lists are numbered lists. Unordered Lists are simply bulleted lists.
The HTML syntax for both these lists is very similar. The list is enclosed by the
<OL></OL> and <UL></UL> tags, and within these tags, each list item is
indicated by the empty <LI> tag.
An example of an ordered list:
<OL>
<LI>Firstitem.
<LI>Seconditem.
<LI>Thirditem.
</OL>
An example of an unordered list:

<UL>
<LI>Anitem.
<LI>Anotheritem.
<LI>Otheritem.
</UL>
The Definition List tags are quite common since most browsers display them
consistently. The list is enclosed within the Definition List tags: <DL></DL>, while
the list itself employs the empty tags: Definition Term <DT> and Definition <DD>.
An example of a definition list:
<DL>
<DT>HTML
<DD>HypertextMarkupLanguage
<DT>SGML
<DD>StandardizedGeneralMarkupLanguage
</DL>
24
Lesson 2: HTML Tags
Other List Tags

Menu Lists:
<MENU></MENU>and <LI>
Directory Lists:
<DIR></DIR>and <LI>
The Directory List tags and Menu List tags are not uniformly supported by all
browsers, so the results of using these lists will vary from browser to browser
(you may see, for example, a bulleted or an indented list). Similar to the lists
discussed on the previous page, these lists are enclosed by the <DIR></DIR> or
<MENU></MENU> tags and each list item is indicated by the empty <LI> tags.
Practice Exercise
Type in the following within the <BODY> tags of about.htm:
An example of a Directory List:
<DIR>
<LI>index.html
<LI>about.html
<LI>links.html
<LI>contact.html
</DIR>
An example of a Menu List:
<MENU>
<LI>SoupoftheDay
<LI>GrandeNachos
<LI>PotatoSkins
<LI>BuffaloWings
</MENU>
25
Lesson 2: HTML Tags
Nested Lists
HTML allows nested tags, i.e., tags within
tags.
Syntax for nesting tags:
<B><I><U>Hello</U></I></B>.
Useful for more complex layouts or for
outlines, table of contents, etc.
The style of numbers and bullets can be changed by adding the TYPE attribute in
<OL> or <UL>. For <OL>, assign TYPE as 1, a, A, I, j and for <UL>, assign disc
(default type), square, or circle.
Practice Exercise:
Type the following inside the <BODY> tags of about.htm:
<H1>Learn HTML
<OL>
<LI> Preface
<LI> Introduction
<LI> Chapter 1
<OL>
<LI> History of HTML
<UL>
<LI> Networks
<LI> Internet
<LI> World Wide Web
</UL
<LI> Structure of HTML
<LI> Basic Tags
</OL>
<LI> Chapter 2
</OL>
Note: The spacing used in the example above is only to make it easier for the
programmer to understand the code. It does not affect the layout seen in the
browser.
26
Lesson 2: HTML Tags
Anchor Tag
<A></A>tag : Anchor tag is used to create
hypertext links.
<HREF=location>: Optional attribute for the
<A>tag. The location will be shown
underlined in a different color in the browser.
The <A>Tag can link either to different parts
in the same web page, to different pages in
the same site, or to another web site.
Practice Exercise
Open default.htm and within the <BODY> tags type the following:
<AHREF=about.html>AboutUs</A>
<AHREF=http://www.yahoo.com>SearchinYahoo</A>
Practice Exercise
Now open about.htm, let us create Section Links (links within the same page).
1. Go to the top of the page, and in the next line after the <BODY> tag, type in
the following:
HistoryofABCCorporation
<AHREF=#founder>Informationaboutthefounder.</A>
2. Now go to the bottom of the page and type in:
<ANAME=section_name>Founder</A>
3. Open the about.htm file in the browser and click on the link at bottom which
will cause the page scroll to the bottom and show the word Founder.
27
Lesson 2: HTML Tags
Creating Other Hyperlinks

Link to E-mail address: <A> tag with mailto:
Syntax:
<A HREF=mailto:info@mysite.com>Write
to Us</A>
Link to FTP/Gopher site: same as web links
Syntax:
<A HREF=FTP URL>Download
shareware</A>
Practice Exercise
Open default.htm and at the bottom of the page before the </BODY> tag type
the following:
Copyright1999.ABCCorporation.AllRightsReserved.
<AHREF=mailto:webmaster@abc.com>EmailWebmaster</A>
Practice Exercise
Open default.htm and within the <BODY> tags type the following:
<AHREF=ftp://ftp.shareware.com/>Download</A>thelatest
versionofthiscoolsoftware!
28
Lesson 2: HTML Tags
Font Tag
Change the font face, size, and color for the
text between the font tags below.
<FONT FACE=fontname></FONT>
<FONT SIZE=+/- number></FONT>
<FONT COLOR=color></FONT>
To set a default font face, size, and color for
the whole HTML document, just add the
BASEFONT tag as follows:
<BASEFONT FACE=fontname>
Note: When using the font tag, remember to use a font that is common and likely
to be installed on most computers. When a browser is not able to access the
font on a users machine, it will revert back to its default font settings. And
remember that good design dictates the use of few fonts for the sake of
simplicity.
Practice Exercise
In one of the pages you have already created, insert the following lines. (Notice
that in the <basefont face> tag, there are three fonts listed. This tells the browser
to attempt to use Arial, and if thats not available on the users machine, to try
Verdana, and so forth. If none of them are available, the browser will use its own
default font.)
<BODY>
<BASEFONTFACE=Arial,Verdana,HelveticaSIZE=4
COLOR=Yellow>
Hithere!<BR>
Howdyoulanduphere?<BR>
<FONTFACE=VerdanaSIZE=+5COLOR=Green>Welcometomy
site.</FONT><BR>
Enjoy:)
</BODY>
29
Lesson 2: HTML Tags
Attributes of the Body Tag

BGCOLOR: Specify background color.
BACKGROUND: Specify background
image for document.
TEXT: Specify text color.
LINK: Specify link color.
ALINK: Specify active link color.
VLINK: Specify viewed link color.
Note: All color specification leading in HTML should be in the hexadecimal

notation. Currently the leading browsers support the names of common colors,
such as Black, White, Blue, Red, Yellow, Green, etc. HTML editors like MS
FrontPage, Allaire HomeSite, Adobe PageMill and Symantec VisualPage will
convert RGB colors into hexadecimal notation.
Practice Example
Lets try some different looks for our page by playing with the colors for the
background, text, and links:
<BODYBGCOLOR=BlackTEXT=WhiteLINK=YellowALINK=RED
VLINK=RED>
<H1>Hithere</H1>
<H2>WelcometoMYWebsite!!!</H2><BR>
Hopeyouareenjoyingtheday...Pleaselookaroundmysite
andletmeknowwhatyouthink...Signmyguestbook,
please...HaveFun!
<BR>
<AHREF=about.html>AboutMe</A><BR>
<AHREF=fav.html><MyFavoriteSites</A><BR>
<AHREF=http://www.yahoo.com/>SearchtheWeb</A><BR>
</BODY>
Practice Exercise
Try using some images for the background of the page:
30
Lesson 2: HTML Tags
<BODYBACKGROUND=images/filename.extTEXT=White
LINK=YellowALINK=REDVLINK=RED>
<H1>Hithere</H1>
</BODY>
31
Web Development
Lesson 2: HTML Tags
Summary
HTML tags are categorized as:
Document Tags, Container Tags, and Empty Tags.
Examples of Page Formatting Tags include <P> <BR> <HR>.

Example of Text Formatting Tags are <PRE>, <BLOCKQUOTE>, Heading
Tags, Font Tag, and <B>, <I>, <U>.
Lists can be coded as Unordered Lists, Ordered Lists, and Definition Lists.
Links are created using the Anchor Tag.
BODY attributes (Background color, image, text, link, active link, and viewed
link colors) are all specified in the <BODY> tag.
Copyright 1999. Pinnacle Software Solutions, Inc.
32
Web Development
Lesson 2: HTML Tags
Exercises
1. Why are Document Tags important?
2. How many levels of headings can we have using the headings tag?
3. What are the Common List Tags?
4. Which tag is used to create a hyperlink?
Copyright 1999. Pinnacle Software Solutions, Inc.
33

Lesson 2

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lesson 2

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to HTML

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

As mentioned previously, browsers ignore extra spaces and carriage returns.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2: HTML Tags

Horizontal Rule Tag

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Common List Tags

Copyright 1999, Pinnacle Software Solutions Inc.

An example of an unordered list:

Lesson 2: HTML Tags

Other List Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Creating Other Hyperlinks

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 2: HTML Tags

Attributes of the Body Tag

Lesson 2 - HTML Tags

Copyright 1999, Pinnacle Software Solutions Inc.

Note: All color specification leading in HTML should be in the hexadecimal

Lesson 2: HTML Tags

Lesson 2: HTML Tags

Examples of Page Formatting Tags include <P> <BR> <HR>.

Copyright 1999. Pinnacle Software Solutions, Inc.

Lesson 2: HTML Tags

Copyright 1999. Pinnacle Software Solutions, Inc.

Das könnte Ihnen auch gefallen