Web 2 Tags and Attributes

Web Development 1
HTML Tags
Ø Every HTML element consists of a tag

name, sometimes followed by an optional
list of tag attributes, all enclosed in angle
brackets (< and >).
Ø Tag and attribute names are not case

sensitive.
i.e. <html> or <HTML>
Ø A tag attribute's value, if any, follows an

equal sign (=) after the attribute name.
i.e. <BODY BACKGROUND="logo.gif">
HTML Tags and Attributes

Page 1 of 32
Web Development 1
Types of HTML Tags
Ø There are two types of tags: container and

empty.
Ø Container tags have both an opening and a

closing and are used to surround the text
within your document for presentation by
the tag. The closing tag name is preceded
by a forward slash.
i.e. <TITLE>Welcome to my
homepage</TITLE>
Ø Empty tags use only an opening and tell

the browser to perform an instruction such
as breaking to the next line, inserting a
horizontal line or inserting an image.
i.e. <BR>, <HR>, <IMG src=“name”>

Page 2 of 32
Web Development 1
Headings
Ø HTML defines six levels of headings that

can be used to structure a text flow into a
more readable, more manageable
document.
Ø Inside the BODY element, heading

elements H1 through H6 are generally
used for major divisions of the document.
Ø Heading are used in order of importance,

not based on how they render in the
browser. H1 is the most important; H6 is
the least important.
Ø The size of the text surrounded by a

heading element varies from very large in
an <H1> tag to very small in an <H6> tag.
i.e. <H1> Web Development </H1>

Page 3 of 32
Web Development 1
Headings Example
<HTML> As displayed
<HEAD> by the browser.
<TITLE>Example
Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>

Page 4 of 32
Web Development 1
More Example on Headings
What would be the output of the following html

code?
<HTML>
<HEAD>
<TITLE>Car Debugging</TITLE>
</HEAD>
<BODY>
<H1>Engine Tune-Up</H1>
<H2>Change The Oil</H2>
<H2>Change the Spark
Plugs</H2>
<H3>Prepare the New
Plugs</H3>
<H4>Remove the
Guards</H4>
<H4>Check the
Gap</H4>
</BODY>
</HTML>

Page 5 of 32
Web Development 1
Paragraph
Ø One of the most commonly used tags in

HTML is the paragraph marker, which is
used to break apart blocks of text into
separate paragraphs.
Ø Each paragraph starts with <P> and ends

with the corresponding </P> tag.
Example:
<BODY>
This is the first paragraph, at the very
beginning of the body of this document.
<P> The tag above signals the start of this
second paragraph. When rendered by a
browser, it will begin slightly below the end of
the first paragraph, with a bit of extra white
space between the two paragraphs. </P>
This is the last paragraph in the example.
</BODY>

Page 6 of 32
Web Development 1
Paragraph Example
<HTML> As displayed
<TITLE>Example
Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<P>Paragraph 1, ... </P>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>

Page 7 of 32
Web Development 1
Line Break <BR>
Ø Line breaks allow you to decide where the

text will break on a line or continue to the
end of the window.
Ø A <BR> is an Empty Element, meaning
that it may contain attributes but it does not
contain content.
Ø The <BR> element does not have a
closing tag. The closing tag, </BR>, is not
required as this element marks a position
and does not contain content.
Example:
<BODY>
This is the first paragraph, at the very beginning
of the body of this document. <BR> The tag
above signals the start of this second
paragraph. When rendered by a browser, it will
begin slightly below the end of the first
paragraph, with a bit of extra white space
between the two paragraphs. <BR> This is the
last paragraph in the example. </BODY>

Page 8 of 32
Web Development 1
Horizontal Rule
Ø The <HR> element causes the browser to

display a horizontal line (rule) in your
document.
Ø Horizontal rules give you a way to visually

separate sections of your document.
Example:
<BODY>
This text is directly above the rule.
<HR>
And this text is immediately below.
<P>
Whereas this text will have space before the
rule.
<P>
<HR>
<P> And this text has space after the rule.
</BODY>

Page 9 of 32
Web Development 1
<HR> Attributes
Ø Key attributes for use with the <HR>

element:
Attribute Description Default Value
SIZE height of the rule in 2 pixels

pixels
WIDTH width of the rule in 100%

pixels or
percentage of
screen width
NOSHADE draw the rule with a not set (3D
flat look instead of look)
a 3D look
ALIGN aligns the line (Left, Center
Center, Right)
COLOR sets a color for the No set

rule (IE 3.0 or later)

Page 10 of 32
Web Development 1
<HR> Example
<HTML> As displayed
<TITLE>Example
Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<P>Paragraph 1,
<BR>
Line 2
<BR>
<HR>
Line 3
<BR>
…
</P>
<H2>Heading 1</H2>
<P>Paragraph 2, …
<BR>

Page 11 of 32
Web Development 1
Character Formatting
Ø Character formatting elements allows you

to:
v Specify the appearance of individual

characters (bold, italic, typewriter)
v Include special characters (characters
with accents, copyright and registration
marks, and so on)
v Create preformatted text (text with
spaces and tabs retained)
v Align text left, right, justified, and
centered
v Change the font, size, and color
Ø HTML provides two general ways to apply

formatting to text, the physical style and
logical style.

Page 12 of 32
Web Development 1
How to Format Characters

with Physical Tags
Ø Physical style tags indicate exactly the
way text is to be formatted (bold, underline,
etc.). This type of tag gets its name
because it indicates a specific change in
appearance.
Ø In general, all character formatting tags

work the same. Each has a starting tag and
an ending tag. All of the text that falls
between the two tags inherits the specified
format. In addition, you can nest formatting
tags inside one another to combine effects.
<B> Bold
<I> Italic
<TT> Monospaced typewriter font
<U> Underline
<S> Strike through
<BIG> Bigger print than the
surrounding text
<SMALL> Smaller print
<SUB> Subscript
<SUP> Superscript

Page 13 of 32
Web Development 1

with Physical Tags
<I>Italic</I>
Ø To create italic text, insert an <I> tag in the
document, followed by a </I> tag. Any text
between these two tags will be displayed in
italics when viewed by a browser.
i.e. <I>This is Italic text.</I>
<B>Bold</B>
Ø To create bold text, insert <B> and </B>
tags. Any text falling between these two
tags will appear in boldface type.
i.e. <B>This is Bold text.</B>

Page 14 of 32
Web Development 1

with Physical Tags
<TT>monospaced</TT>
Ø To create text that is displayed in a
monospaced font (such as Courier), use
the <TT> and </TT> tags. Text falling
between these two tags will be displayed in
a fixed-width font, similar to the output from
a teletype machine or typewriter.
i.e. <TT>Teletype appears

monospaced</TT>
<S>Strike-through</S>
Ø To create strike-through text, which is text
with a single horizontal line running
through it, use the <S> and </S> tags.
i.e. <S>Strike-through text</S>

Page 15 of 32
Web Development 1

with Physical Tags
<U>underline</U>
Ø Underlined text can be displayed using the
<U> and </U> tag pair. You should use
these tags only when absolutely
necessary, as underlined text is not widely
supported by Web browsers.
i.e. <U>Underlined text</U>
<BIG></BIG> and <SMALL></SMALL>

Ø You can change the font size of normal
text. Using the <BIG> and </BIG> tags will
increase the size of the indicated text
relative to the default size. <SMALL> and
</SMALL> will make the text smaller.
i.e. <BIG>Big is not small</BIG>

<SMALL>Small is not big</SMALL>

Page 16 of 32
Web Development 1

with Physical Tags
<SUP>superscript</SUP> and
<SUB>subscript</SUB>
Ø You can also format text as either

superscript or subscript, which is text that
appears slightly above or below the current
line, respectively. Superscript and subscript
numbers are often used in mathematical
equations or to indicate footnotes. Using
the <SUP> and </SUP> tags will mark text
as superscript (slightly above the current
line). <SUB> and </SUB> will mark text as
subscript (slightly below the current line)
Example:
Superscript text appears <SUP>above</SUP>
Subscript text appears <SUB>below</SUB>

Page 17 of 32
Web Development 1

with Logical Tags
Ø Logical style tags take the approach that

what's really important is the type of
information being displayed, rather than
exactly how it is displayed. This is similar to
the common element tags for paragraphs
or headings. They don't indicate how the
text is to be formatted, just how it is to be
used in a document.
Ø Logical style tags might, for example,

indicate a definition, a snippet of code, or
an emphasized word.

Page 18 of 32
Web Development 1

with Logical Tags
<EM>emphasis</EM>
Ø When you want to add importance to a
section of text, you can use the logical style
tag called emphasis. Using the <EM> and
</EM> tags will usually display the
indicated text in italics. However,
remember that with logical tags, the actual
appearance of the text is determined by the
end user's Web browser, not your HTML
document. Example:
<P>Say it with <EM>emphasis</EM></P>

Page 19 of 32
Web Development 1

with Logical Tags
<STRONG>strong emphasis</STRONG>
Ø If a particular section of text is very
important, you can mark it with strong
emphasis by using the <STRONG> and
</STRONG> tag pair. Most browsers tend
to display strongly emphasized text in
boldface. Example:
<P>Say it with<STRONG>emphasis</STRONG></P>
<CITE>citation</CITE>
Ø The <CITE> and </CITE> tags are used to
insert a citation to give credit for a short
quotation in the body of the document.
Citations are typically displayed in italics.
Example:
<P>A citation gives credit where it’s due.

<CITE>Anonymous, 2003</CITE></P>

Page 20 of 32
Web Development 1
Preformatted Text
Ø Preformatted text allows you to break away

from the normal rules of HTML and quickly
specify exactly how a section of text will
appear in the reader's Web browser.
Ø When you're using preformatted text, you

don't need to use the HTML markup tags-
the text will appear exactly as you've typed
it, complete with spaces, line breaks, and
empty lines. Preformatted text is always
displayed in a monospaced, fixed-width
font.
Ø The PRE tag (where pre stands for

preformatted), which consists of the
beginning and ending tags <PRE> and
</PRE> allows you to format the text the
way you want it.

Page 21 of 32
Web Development 1
Preformatted Example
<HTML>
<HEAD>
<TITLE>
Preformatted Text
</TITLE>
</HEAD>
<BODY>
<PRE>
( )
Moo ( oo )
\ /------------\
|| |\
||-------W|| *
|| ||
</PRE>
</BODY>
</HTML>

Page 22 of 32
Web Development 1
Font Element
Ø The <FONT> tag lets you change the size,

style, and color of text. It should be used
like any other physical or logical style tag
for changing the appearance of a short
segment of text.
Function:
Set the font size for text
Attributes:
COLOR (extension), FACE (Internet
Explorer) and SIZE (extension)
End Tag:
</font>, always used
Example:
<FONT SIZE=5 COLOR="purple">This text

will be big and purple.</FONT>

Page 23 of 32
Web Development 1
The COLOR Attribute
Ø The color attribute for the <font> tag sets

the color of the enclosed text. The value of
the attribute may be expressed in either of
two ways: as the red, green, and blue
(RGB) components of the desired color or
as a standard color name. Enclosing
quotes are recommended, but not required.
Ø The RGB color value, denoted by a

preceding hash mark (#), is a six-digit
hexadecimal number.
Ø For example, to create basic yellow text,

you might use:
<P>Here comes the <FONT

color="#FFFF00"> sun</FONT>!</P>

Page 24 of 32
Web Development 1
The FACE Attribute
Ø Internet Explorer lets you change the font

style in a text passage with the face
attribute for the <FONT> tag.
Ø The font face displayed by the browser

depends on which fonts are available on
the individual user's system. The browser
parses the list of font names, one after the
other, until it matches one with a font name
supported by the user's system. If none
match, the text display defaults to the font
style set by the user in their browser's
Preferences. For example:
<P>This text is in the default font.

But,<FONT face="Braggadocio, Machine">
heaven only knows </FONT>
what font face is this one?</P>

Page 25 of 32
Web Development 1
The SIZE Attribute
Ø The most common use of the <FONT> tag

is to change the size of the font for a
character, word, phrase, or on any range of
text. The <FONT>...</FONT> tags enclose
the text, and the SIZE attribute indicates
the size to which the font is to be changed.
Ø The values of SIZE are 1 to 7, with 3 being

the default size. For example:
<P>Bored with your plain old font?

<FONT SIZE=5>Change it.</FONT></P>

Page 26 of 32
Web Development 1
Text Alignment
Ø Text alignment is the ability to arrange a

block of text such as a heading or a
paragraph so that it is aligned against the
left margin (left justification, the default),
aligned against the right margin (right
justification), or centered.
Ø To align an individual heading or

paragraph, use the ALIGN attribute to that
HTML element. ALIGN, which is an HTML
3.2 extension, has one of three values:
LEFT, RIGHT, or CENTER. For example:
<H2 align=LEFT>Who We Are</H2>

<H2 align=RIGHT>What We Do</H2>
<H2 align=CENTER>How To Reach Us</H2>

Page 27 of 32
Web Development 1
Special Characters and

Symbols
Ø Special Characters and Symbols not found
on the average keyboard can be inserted
using special character entities. These
special characters are specified in an
internationally accepted character set
known as the ISO-Latin-1 (ISO-8859-1).
Ø These characters are recognized in HTML

as they begin with an ampersand and end
with a semi-colon e.g. &value; The value
will either be an entity name or a standard
ASCII character number. For example:
<P>Web Development © 2003

All Rights Reserved</P>

Page 28 of 32
Web Development 1
Special Characters and

Symbols
Ø The following table represents some of the
more commonly used special characters.
Special Entity Special Entity

Character Name Character Name
ampersand & greater-than >

sign
asterisk &lowast; less-than <

sign
cent sign ¢ non-breaking

space
copyright © quotation "

mark
fraction ¼ registration ®

one qtr mark
fraction ½ trademark ™

one half sign

Page 29 of 32
Web Development 1
Other Character Formatting

Elements
<BASEFONT> </BASEFONT>
Ø Used to set the base font size. The size
attribute is an integer value ranging from 1
to 7. The base font applies to the normal
and preformatted text but not to headings,
except where these are modified using the
FONT element with a relative font size.
<BLOCKQUOTE></BLOCKQUOTE>
Ø This element is used to enclose block
quotations from other works or to indent
sections of a document. (It indents from
both sides in a browser) This element can
also contain most other formatting
elements such as Headings, paragraphs,
tables, etc.

Page 30 of 32
Web Development 1
Other Character Formatting

Elements
<ADDRESS></ADDRESS>
Ø The address element specifies information
such as authorship and contact details for
the current document. There is no support
for an alignment attribute with the
<ADDRESS> element. You will need to
use some other method if you want the
address displayed differently from left
aligned.
Example:
<P><BLOCKQUOTE>This is the first day

of the rest of your life, make it count.
</BLOCKQUOTE><CENTER><ADDRESS>180
Attwell Dr. Suite 130<BR>Toronto,ON
<BR>M9W 6A9</ADDRESS></CENTER></P>
This is the first day of the rest of your life, make it count.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
Page 31 of 32
Web Development 1
Writing Comments
Ø HTML comments describe the page itself

or provide some kind of indication of the
status of the page. Some source code
control programs can put page status into
comments, for example.
Ø Text in comments is ignored when the

HTML file is parsed.
Ø Comment tags consist of a beginning and

ending sequence of characters (""). For example:


Page 32 of 32

Web 2 Tags and Attributes

Uploaded by

Copyright:

Available Formats

You might also like

Web 2 Tags and Attributes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web 2 Tags and Attributes

Uploaded by

Copyright:

Available Formats

Web Development 1

Ø Every HTML element consists of a tag

Ø Tag and attribute names are not case

i.e. <html> or <HTML>

Ø A tag attribute's value, if any, follows an

i.e. <BODY BACKGROUND="logo.gif">

HTML Tags and Attributes

Types of HTML Tags

Ø There are two types of tags: container and

Ø Container tags have both an opening and a

Ø Empty tags use only an opening and tell

i.e. <BR>, <HR>, <IMG src=“name”>

HTML Tags and Attributes

Ø HTML defines six levels of headings that

Ø Inside the BODY element, heading

Ø Heading are used in order of importance,

Ø The size of the text surrounded by a

i.e. <H1> Web Development </H1>

HTML Tags and Attributes

HTML Tags and Attributes

More Example on Headings

What would be the output of the following html

HTML Tags and Attributes

Ø One of the most commonly used tags in

Ø Each paragraph starts with <P> and ends

HTML Tags and Attributes

HTML Tags and Attributes

Line Break <BR>

Ø Line breaks allow you to decide where the

HTML Tags and Attributes

Ø The <HR> element causes the browser to

Ø Horizontal rules give you a way to visually

HTML Tags and Attributes

Ø Key attributes for use with the <HR>

Attribute Description Default Value

SIZE height of the rule in 2 pixels

WIDTH width of the rule in 100%

COLOR sets a color for the No set

HTML Tags and Attributes

HTML Tags and Attributes

Ø Character formatting elements allows you

v Specify the appearance of individual

Ø HTML provides two general ways to apply

HTML Tags and Attributes

How to Format Characters

Ø In general, all character formatting tags

HTML Tags and Attributes

How to Format Characters

i.e. <I>This is Italic text.</I>

i.e. <B>This is Bold text.</B>

HTML Tags and Attributes

How to Format Characters

i.e. <TT>Teletype appears

i.e. <S>Strike-through text</S>

HTML Tags and Attributes

How to Format Characters

i.e. <U>Underlined text</U>

<BIG></BIG> and <SMALL></SMALL>

<P>Web Development © 2003

ampersand & greater-than >

asterisk &lowast; less-than <

cent sign ¢ non-breaking

copyright © quotation "

fraction ¼ registration ®

fraction ½ trademark ™