Introduction to Web Site Development
Lecture 2:
More HTML
Department of Computer Science
California State University, Los Angeles
Quick Recap 0
HTML is case insensitive
<HTML></HTML> is OK
<Html></htML> is OK
Quick Recap 1
An HTML page is a tree of HTML elements
The beginning and end of each element in an HTML
page must be marked by start and end tags
Some elements may be declared minus their end tags
For example, void elements with no content such as BR
Use <BR> instead of <BR></BR>
Some elements may be declared with self-closing tags
For example, void elements with no content such as BR
Use <BR /> instead of <BR> or <BR></BR>
Quick Recap 2
An HTML page always begins with a DOCTYPE
header (it is not an HTML element or tag)
<!DOCTYPE HTML>
Required for legacy reasons (XHTML)
Next up we place the HTML element
Must contain a HEAD element, followed by a BODY
element
The HEAD element contains metadata, such as
the TITLE element
Quick Recap 3
The BODY element contains flow content
Flow content is any element that can be used
within the BODY element (stuff you want to
show up in your webpage)
Paragraphs, images, tables, code, etc.
Here are the flow content elements we covered in
class last week
P, BR, H1, H2, H3, H4, H5, H6
B, I, STRONG, EM, SMALL, SUB, SUP
Quick Recap 4
The P element contains phrasing content
Phrasing content is any element that can be used
within the P element
Text, images, videos, etc.
Here are the phrasing content elements we
covered in class last week
BR, B, I, STRONG, EM, SMALL, SUB, SUP
Global Attributes
HTML elements may specify attributes within the
start tag
Global attributes are attributes common to all
HTML elements
For now, we are only going to worry about two
global attributes
TITLE
DIR
The TITLE Attribute
Description
Displays a tooltip when you hover the mouse over an
HTML element
Values
Text content
Example
<P TITLE="This is a tooltip.">When you place the
mouse over this text, you will get a tooltip!</P>
The DIR Attribute
Description
Controls the direction of the content.
Values
RTL (right-to-left)
LTR (left-to-right)
Example
<P DIR="RTL">Hey look, this is really weird!</P>
The HR Element
Description:
Used to render a horizontal rule (line)
Requirements:
Start Tag: REQUIRED
End Tag: FORBIDDEN
Usage:
Context: Where flow content is expected
Content Model: Empty
The HR Element
Examples:
<HR>
<HR />
The PRE Element
Description:
Used to render preformatted text
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where flow content is expected
Content Model: Phrasing content
The PRE Element
Examples:
<PRE>Preformatted text!</PRE>
<PRE>
Dreamworks Pictures
1000 Flower St.
Glendale, CA 90012
</PRE>
The CODE Element
Description:
Used to render preformatted code
Currently, poor browser support
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The CODE Element
Examples:
<CODE>Preformatted code!</CODE>
<CODE>
#include<iostream>
using namespace std;
void main()
{
cout << “Hello world!” << endl;
}
</CODE>
The SAMP Element
Description:
Used to render preformatted sample output
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The SAMP Element
Examples:
<SAMP>Preformatted output!</SAMP>
<SAMP>
Level 01:
Level 02:
Level 03:
Level 04:
</SAMP>
164
128
197
243
pts<BR>
pts<BR>
pts<BR>
pts
The KBD Element
Description:
Used to render preformatted sample output
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The KBD Element
Examples:
<SAMP>Preformatted output!</SAMP>
<SAMP>
Level 01:
Level 02:
Level 03:
Level 04:
</SAMP>
164
128
197
243
pts<BR>
pts<BR>
pts<BR>
pts
The ABBR Element
Description:
Used to mark an abbreviation or acronym
Use TITLE attribute to define abbreviation
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The ABBR Element
Example:
<ABBR title="Australia">AUS</ABBR>
The CITE Element
Description:
Used to mark a title of a work
Typically used in citations
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The CITE Element
Example:
<p><cite>Texture mapping on surfaces
of arbitrary topology using norm
preserving-based
optimization</cite>, The Visual
Computer, 2005, pp. 783-790</p>
The BDO Element
Description:
Controls the direction of text
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where phrasing content is expected
Content Model: Phrasing content
The BDO Element
Example:
<P>
<BDO DIR="RTL">Hey, this is weird!</BDO>
</P>
The OL Element
Description:
Defines an ordered list
Optional START attribute may be overridden
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage
Context: Use where flow content is expected
Content Model: Zero or more LI elements
The OL Element
Examples:
<OL start="3"><LI>1<LI>2</OL>
<OL>
<LI>Cereal</LI>
<LI>Strawberries</LI>
<LI>Bananas</LI>
</OL>
The UL Element
Description:
Defines an unordered list
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Use where flow content is expected
Content Model: Zero or more LI elements
The UL Element
Examples:
<UL>
<LI>Steven
<LI>Joe
<LI>Alan
</UL>
The LI Element
Description:
Defines an ordered or unordered list item
Use VALUE attribute to skip numbers in ordered lists
Requirements:
Start Tag: REQUIRED
End Tag: OPTIONAL
Usage:
Context: Use inside OL and UL elements
Content Model: Flow content
The LI Element
Example:
<OL START="3">
<LI>1
<LI VALUE="12">2
<LI>3
</OL>
Note that START and VALUE are not global
attributes. They are attributes specific to OL and LI,
respectively.
The DL Element
Description:
Defines a definition list
Useful for a things like a list of dictionary entries
Comments:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage
Context: Where flow content is expected
Content Model: Zero or more DT elements
The DT Element
Description:
Defines a definition term within a definition list
Must contain one or more DD elements (definitions)
Comments:
Start Tag: REQUIRED
End Tag: OPTIONAL
Usage:
Context: Before DD or DT elements inside DL
elements
Content Model: Phrasing content
The DD Element
Description:
Defines a definition description for a definition term
Requirements:
Start Tag: REQUIRED
End Tag: OPTIONAL
Usage:
Context: Use after DT or DD elements inside DL
elements
Content Model: Flow content
DL, DT, and DD Element Example
Example
<DL>
<DT>Steven</DT>
<DD>Old graduate student</DD>
<DD>Funny-looking guy</DD>
<DD>Your CS120 instructor</DD>
< DT>Joe</DT>
<DD>Steven's crazy newphew</DD>
<DD>Silly kid</DD>
<DD>Crazy about fishing</DD>
</DL>
© Copyright 2026 Paperzz