Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
21 views

Chapter 2 HTML Ibit Ip

Uploaded by

umarhanif696
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Chapter 2 HTML Ibit Ip

Uploaded by

umarhanif696
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 88

HTML 1: Overview

Chapter 2

Textbook to be published by Pearson Ed in early 2014


http://www.funwebdev.com
Objectives
1 HTML Defined and its
History 2 HTML Syntax

3 Semantic Markup
4 Structure of HTML

5 Quick Tour of HTML


6 HTML
Semantic Elements
▪ Section 1 of 6

HTML defined + its history


Brief History of HTML
• ARPANET of the late 1960s
• jump quickly to the first public specification
of the HTML by Tim Berners-Lee in 1991
• HTML’s codification by the World-Wide Web
Consortium (better known as the W3C) in
1997.
HTML Syntax
What is a markup language?

HTML stands for


Hyper Text Markup Language.
HTML is not a programming language.
HTML is a markup
(document formatting) language.
HTML is a compiler-free language
(i.e. ignores errors)
Markup Language
A markup language is a
set of markup tags.

The purpose of the tags is to


group and describe page content.
Markup
What is it again?

• At its simplest, markup is a way to indicate


information about the content
• This “information about content” in HTML is
implemented via tags (aka elements).

• HTML does the same thing but uses textual tags.


What is the W3C?
Standards

• The W3C is the main standards organization for the World


Wide Web.
• To promotes compatibility the W3C produces
recommendations (also called specifications).
• In 1998, the W3C turned its attention to a new specification
called XHTML 1.0, which was a version of HTML that used
stricter XML (Extensible Markup Language) syntax rules.
XHTML
Partying like it’s 1999

The goal of XHTML with its strict rules was to make page rendering
more predictable by forcing web authors to create web pages
without syntax errors.

The XML-based syntax rules for XHTML are pretty easy to follow.
The main rules are:
• lowercase tag names,
• attributes always within quotes,
• and all elements must have a closing element (or be self-
closing).
HTML5
Three main aims

By 2009, the W3C stopped work on XHTML 2.0 and instead


adopted the work done by WHATWG and named it HTML5.

• There are three main aims to HTML5:


• Specify unambiguously how browsers should deal with invalid
markup.
• Provide an open, non-proprietary programming framework (via
Javascript) for creating rich web applications.
• Be backwards compatible with the existing web.
Section 2 of 6

HTML SYNTAX
HTML Elements
• HTML documents are text files made up of HTML
elements. they are defined using HTML tags.
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters
< and >
• The surrounding characters are called angle
brackets
HTML Tags:
▪ HTML tags normally come in pairs like <b> and
</b>
▪ The first tag is the start tag, <b>

▪ the second tag is the end tag </b>

▪ The text between the start and end tags is the


element content
▪ HTML tags are not case sensitive, <b> means the
same as <B>
E.g. <html> … </html>
start tag end tag (with a /)
This is an HTML element:
<b>This text is bold</b>
❑ The HTML element starts with a start tag: <b>
The content of the HTML element is:

This text is bold

❑ The HTML element ends with an end tag: </b>

❑ The purpose of the <b> tag is to define an HTML


element that should be displayed as bold.
<b>This text is bold</b>

start tag content end tag


Some Common Tags used in HTML
<html>Content Here</html> <b>Content Here</b>
Text placed between the angled brackets describes Bold
the Web page <font>Content Here</font>
Opening tag is very first displayed in the markup after Describes the font you’re using
DOCTYPE
Closing tag is the very last displayed in the markup
• <q>Content Here</q>
• <title>Content Here</title> Displays quotation marks around content
Text placed between the angled brackets describes
• &nbsp;
the title of the Web page

• <body>Content Here</body> Adds a space


Text placed between the angled brackets describes
the visible page content
• <br />
Adds a line break
• <h1>Content Here</h1> Empty/Self-Closing tag
<br /> —space before the slash mark makes it
Text placed between the angled brackets displays as a
compatible with older browsers
heading
h1 (largest heading), h2, h3, h4, h5, h6 (smallest
heading)
• <hr />
Adds a horizontal line
• <p>Content Here</p>
Text placed between the angled brackets displays as a • <img />
paragraph Adds an image to your page

• <i>Content Here</i> Italics


Some Common Tags used in HTML
<a>Content Here</a>
Displays a hyperlink

<ol>Content Here</ol>
Displays an ordered list
Uses numbers for list items

<ul>Content Here</ul>

Displays an unordered list


Uses bullets for list items

<li>Content Here</li>
Used in an unordered or ordered list to separate the items in
a list
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<center>Content Here</center>
Centers content on a page
Tag Attributes
▪ Attributes can provide additional information about the
HTML elements on your page.

▪ Attributes always come in name/value pairs like this:


name="value" & are always added to the start tag of an
HTML element.
<body bgcolor="red">
<table border="0">
Quote Styles, "red" or 'red'?
Elements and Attributes
▪ Many start tags define attributes that provide
additional information

▪ E.g. <html xmlns = http://www.w3.org/1999/xhtml">

start tag attribute name attribute value


Meta Tag
▪ HTML interacts with the search engines through
using meta tag

These words are compared with words


in search requests

<head>
<meta name=“keywords” content=“lecture notes, html,
form, feedback”>
<meta name=“description” content = “this web site
describes …”>
</head>
Description of a page seen on searching
Section 4 of 6

STRUCTURE OF HTML
HTML Page Structure

doctype
html
head
body
HTML Page Structure
<!DOCTYPE...> This tag defines the document type and HTML
version.

The first tag in an HTML document , This tells the browser reading
<HTML> the page that the text that follows should be read as HTML
The head contains descriptive elements about the document

<TITLE> Example </TITLE>


<TITLE> to mention the document title

<BODY>
This is where you would include the text and
images on your Web page.
</BODY>

</HTML> Everything inside this element is shown inside the


main browser window.
Structure of a Web Page
▪ All Web pages <HTML>

share a common <HEAD>


structure <TITLE> Example </TITLE>

▪ All Web pages </HEAD>

should contain a <BODY>


pair of This is where you would include

▪ <HTML>, <HEAD>, the text and images on your


Web page.
<TITLE>, and
<BODY> tags </BODY>

</HTML>
Here is how basic HTML code is structured …
A more complete document
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
1 DOCTYPE
(short for Document Type Definition)

Tells the browser (or any other client software that is reading this
HTML document) what type of document it is about to process.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
HTML, Head, and Body
2 The <html> element is sometimes called the root element as it
contains all the other HTML elements in the document.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
Head and Body
HTML pages are divided into two sections: the head and the body,
which correspond to the <head> and <body> elements.
3 The head contains descriptive elements about the document
4 The body contains content that will be displayed by the browser.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
Inside the head
You will notice that the <head> element contains a variety of
additional elements.
5 The first of these is the <meta> element. Our example declares that
the character encoding for the document is UTF-8.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
Inside the head
6 Our example specifies an external CSS style sheet file
that is used with this document.
7 It also references an external Javascript file.
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
Head Tags
Tag Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
<style> Defines a style in a document
<script> Defines a script, such as a JavaScript
Section 5 of 6

QUICK TOUR OF HTML


Sample Document
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />

<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>

<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
8

<p><small>Copyright &copy; 2012 Share Your Travels</small></p>


</body> 9
1 Headings <h1>, <h2>, <h3>, etc

XHTML provides six headers,


<html xmlns =
called header elements, for "http://www.w3.org/1999/xhtml"
specifying the relative >
importance of information <head>
<title>Internet and WWW
<h1> … </h1>, <h2> … </h2> to How to Program -
<h6> … </h6> Headers</title>
</head>

<body>

<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>

</body>
</html>
Paragraphs <p></p>
Paragraphs are the most basic unit of text in an HTML document.

The HTML a senifed tnemele >p<paragraph :


Example:
<!DOCTYPE html>
<html>
<body> Result:

<p>This is a paragraph.</p> This is a paragraph.


<p>This is a paragraph.</p> This is a paragraph.
<p> >This is a paragraph.</p> This is a paragraph.

<html>
<body>
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P> Heading 2
<H2> Heading 2 </H2> Paragraph 2,….
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3> Heading 3
<P> Paragraph 3, ….</P> Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P> Heading 5
<H6> Heading 6</H6>
Paragraph 5,….
<P> Paragraph 6, ….</P>
</BODY></HTML> Heading 6
Paragraph 6,….
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.

38
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD> Heading 1
<BODY>
Paragraph 1,….
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 2
Line 2 <BR> Line 3 <BR>…. Line 3
</P> ….
</BODY>
</HTML>
39
Horizontal Rule, <HR>

▪ The <HR> element causes the


browser to display a horizontal
line (rule) in your document.
▪ <HR> does not use a closing tag,
</HR>.

40
Horizontal Rule, <HR>
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)

Aligns the line (Left,


ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)

41
Horizontal Rule, <HR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 2
<HR>Line 3 <BR> _________________________
</P> __
</BODY>
Line 3
</HTML>

42
Divisions <div>
This <div> tag is also a container element and is used to
create a logical grouping of content
• div element
Generic container for any block-level content
Syntax: <div>
content
</div>
Links <a>
• Links are created using the <a> element (the “a” stands for
anchor).
• To create a link to another document by using the href
attribute
• A link has two main parts: the destination and the label.
<a href="http://www.centralpark.com">Central Park</a>

Destination Label (text)

<a href="index.html"><img src="logo.gif" /></a>

Label (image)
Links
Source
<p>Linking to Google:
<a href="http://www.google.com">
Google
</a>
</p>

Output
Linking to Google: Google
Linking Webpage
▪ One of the most important XHTML features
is the hyperlink
– Link to another resources, such as web page,
image, etc.

▪ Achieve by using the anchor tag <a>:


– To a web page:
<a href=“http://www.eie.polyu.edu.hk”>PolyU</a>
anchor attribute
The name on the Web page
Value of the attribute: that represents this link
The address of the Web page
strong tag lets the text to be
displayed with bold font Other
<body> similar tags include
<h1>Here are my favorite <u> underline and <em> italic
sites</h1>

<p><strong>Click a name to go to that page.


</strong></p>
Four links create

<!-- Create four test hyperlinks -->

<p><a href = "http://www.polyu.edu.hk">PolyU</a></p>


<p><a href = "http://www.eie.polyu.edu.hk">EIE</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/~enpklun">
Dr Daniel Lun's Home</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/
~enpklun/ENG224/ENG224.htm">ENG224 Home page</a></p>
</body> Don’t introduce spaces between
different parts of a URL address
This line is shown with a bold font

Four links are included


Linking Email Addresses
▪ To a mail address:
<a href=“mailto:enpklun@polyu.edu.hk”> Email me
</a>
▪ With a subject:
<a href=“mailto:enpklun@polyu.edu.hk?subject=title”>
Email me
</a>
▪ Multiple recipients:
<a href=“mailto:address1,address2, address3”> Email me
</a>
Linking Images
▪ Background Image can be defined as an
attribute of the body tag:

<body background=“image.gif”>
▪ To show an Image inside a page:
<img src=“image.gif” border=“0” height=“256”
width=“256” alt=“text description of the
image”/>
▪ We can create an image hyperlink
<a href=“page1.html”>
<img src=“image.gif” …/>
</a>
Will scale to this size to display

<body>

<p><img src = "xmlhtp.jpg"


height = "238“ width = "183"
alt = "XML How to Program book cover"/>
<img src = "jhtp.jpg"
height = "238" width = "183"
alt = "Java How to Program book cover"/>
</p>
</body>

jhtp.jpg in fact cannot be found. With the


empty element: alt attribute, the statement is displayed if
do not markup text the image is not found
“alt” statement
(may not display the
same for Netscape)

The image displayed at


the specified size
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>This is my first homepage.
<b>This text is bold</b>
<BODY STYLE="BACKGROUND-COLOR: YELLOW ;">
<p>My country is Pakistan</p>
<p>Linking to Google:
<a href="http://www.google.com">Google</a></p>
<a href=“mailto:hmalik786@Hotmail.com”> Email me </a>
<h1>This is a heading</h1>
<IMG SRC="simpsonsfamily.png"> </IMG>
<h5 align="left">This is a left align headings </h5>
<h5 align="center">This is a centered heading </h5>
<h5 align="right">This is a heading aligned to the right </h5>
</BODY>
Color
▪ 2 ways to specify:
– Use hexadecimal numbers
– RGB format: FF: strongest, 00 weakest
• #FF0000
• #00FF00
• #0000FF
– Use color names
• Black, White, Red, Cyan, Green, Purple, Magenta,
Blue, Yellow, OrangeRed, SpringGreen, BlueViolet,
Gold, DarkGoldenrod, Burlywood, …
Color
▪ Background color:
– <body bgcolor=“#00FF00”> … </body>
– <body bgcolor =“green”> … </body>
▪ Text color, links, visited links and activated
links:
– <body bgcolor =“white” text=“black” link=“purple”
vlink=“blue” alink=“yellow”>
▪ Font color:
– <font color=“green”> … </font>
16 Basic Colors
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00
Character Formatting
In this chapter you will learn how to enhance your page with
Bold, Italics, and other character formatting options.
Objectives
Upon completing this section, you should be able to
1. Change the color and size of your text.
2. Use Common Character Formatting Elements.
3. Align your text.
4. Add special characters.
5. Use other character formatting elements.

60
Bold, Italic and other Character Formatting
Elements
▪ <FONT SIZE=“+2”> Two sizes bigger</FONT>
▪ The size attribute can be set as an absolute value from 1 to 7 or
as a relative value using the “+” or “-” sign. Normal text size is 3
(from -2 to +4).
▪ <B> Bold </B>
▪ <I> Italic </I>
▪ <U> Underline </U>
▪ Color = “#RRGGBB” The COLOR attribute of the FONT element.
E.g., <FONT COLOR=“#RRGGBB”>this text has color</FONT>
▪ <PRE> Preformatted </PRE> Text enclosed by PRE tags is
displayed in a mono-spaced font. Spaces and line breaks are
supported without additional elements or special characters.

61
Bold, Italic and other Character Formatting
Elements
▪ <EM> Emphasis </EM> Browsers usually display this
as italics.
▪ <STRONG> STRONG </STRONG> Browsers display
this as bold.
▪ <TT> TELETYPE </TT> Text is displayed in a mono-
spaced font. A typewriter text, e.g. fixed-width font.
▪ <CITE> Citation </CITE> represents a document
citation (italics). For titles of books, films, etc.
Typically displayed in italics. (A Beginner's Guide to
HTML)

62
Bold, Italic and other Character Formatting
Elements

<P> <FONT SIZE=“+1”> One Size One Size Larger - Normal – One Size
Larger </FONT> - Normal – Smaller
<FONT SIZE=“-1”> One Size Smaller Bold - italics - Underlined -
</FONT> <BR> Colored
<B> Bold</B> - <I> italics</I> - <U> Emphasized - Strong - Tele Type
Underlined </U> -
<FONT COLOR=“#FF0000”> Colored
</FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong </STRONG> -
<TT> Tele Type </TT> <BR>

63
Alignment

▪ Some elements have attributes for


alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules.
▪ The Three alignment values are : LEFT,
RIGHT, CENTER.
▪ <CENTER></CENTER> Will center
elements.

64
Alignment
▪ <DIV ALIGN=“value”></DIV> Represents a
division in the document and can contain
most other element type. The alignment
attribute of the DIV element is well supported.
▪ <TABLE></TABLE> Inside a TABLE, alignment
can be set for each individual cell.

65
Special Characters & Symbols
▪ These Characters are recognized in HTML as they
begin with an ampersand and end with with a semi-
colon e.g. &value; The value will either be an entity
name or a standard ASCII character number. They are
called escape sequences.
▪ The next table represents some of the more
commonly used special characters. For a
comprehensive listing, visit the W3C’s section on
special characters at:
http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html

66
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand &amp; & Greater-than &gt; >
sign
Asterisk &lowast; Less-than sign &lt; <
∗∗
Cent sign &cent; ¢ Non-breaking &nbsp;
space
Copyright &copy; © Quotation mark &quot; "
Fraction one &frac14; Registration &reg; ®
qtr ¼ mark
Fraction one &frac12; Trademark sign &trade;
half ½ ™ 67
Special Characters & Symbols
▪ Additional escape sequences support accented
characters, such as:
▪ &ouml;
– a lowercase o with an umlaut: ö
▪ &ntilde;
– a lowercase n with a tilde: ñ
▪ &Egrave;
– an uppercase E with a grave accent: È
NOTE: Unlike the rest of HTML, the escape sequences
are case sensitive. You cannot, for instance, use &LT;
instead of &lt;.

68
Additional Character Formatting Elements

▪ <STRIKE> strike-through text</STRIKE>


DEL is used for STRIKE at the latest
browsers
▪ <BIG> places text in a big font</BIG>
▪ <SMALL> places text in a small
font</SMALL>
▪ <SUB> places text in subscript position
</SUB>
▪ <SUP> places text in superscript style
position </SUP>

69
Example
<P><STRIKE> strike-through text </STRIKE></BR>

<BIG>places text in a big font </BIG><BR>

<SMALL> places text in a small font</SMALL><BR>

<SUB> places text in subscript position </SUB>


Normal A3
<SUP> places text in superscript style position </SUP><BR>
4
</P> P

70
background color is yellow
<body bgcolor = “#ffff00”>
<p><font face="courier" color="green" size=“24”>
This is a test.</font> horizontal ruler
<hr />
<font face="times" color="red" >
This is a test.</font> the backslash is only to
</p> improve readability
<p>
<font face="arial" color="red" size=“+1”>
See the This is a test.</font>
difference
<br />
between <p>
and <br>
<font face="times" color="#ff00ff" size=“+2”>
This is a test.</font>
</p>
<p align = center><font face="courier" size=“+3”>
This is a test.</font>
</p> the text is placed at the center
</body>
size = 24

default size

size = +1, +2, +3


Lists
In this chapter you will learn how to create a variety of lists.
Objectives
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.

73
List Elements
▪ HTML supplies several list elements. Most list elements are
composed of one or more <LI> (List Item) elements.
▪ UL : Unordered List. Items in this list start with a list mark such
as a bullet. Browsers will usually change the list mark in
nested lists.
<UL>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
▪ List item …
▪ List item …

74
List Elements
▪ You have the choice of three bullet types: disc(default), circle,
square.
▪ These are controlled in Netscape Navigator by the “TYPE”
attribute for the <UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
▪ List item …
▪ List item …
▪ List item …

75
List Elements
▪ OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1. List item …
2. List item …
3. List item
▪ You have the choice of setting the TYPE Attribute to one of
five numbering styles.

76
List Elements

TYPE Numbering Styles


1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

77
List Elements

▪ You can specify a starting number for an ordered list.


<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>

78
List Elements
i. List item …
ii. List item …

Text ….

iii. List item …

79
List Elements
▪ DL: Definition List. This kind of list is different from the
others. Each item in a DL consists of one or more Definition
Terms (DT elements), followed by one or more Definition
Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>

HTML
Hyper Text Markup Language
DOG
A human’s best friend!

80
Nesting Lists
▪ You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
</UL>
81
What will be the output?

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>


<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
82
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support
<OL type="I" start="4"> What
<LI> Be careful </LI> will
<LI> Do not look around</LI> be the
</LI> </OL>
<LI>Swim to shore output?
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
83
Lists
HTML provides three types of lists

Unordered lists. Collections of items in no particular


order; these are by default rendered by the browser as
a bulleted list.
Ordered lists. Collections of items that have a set
order; these are by default rendered by the browser as
a numbered list.
Definition lists. Collection of name and definition
pairs. These tend to be used infrequently. Perhaps the
most common example would be a FAQ list.
What You’ve Learned
1 HTML Defined and its
History 2 HTML Syntax

3 Semantic Markup
4 Structure of HTML

5 Quick Tour of HTML


6 HTML
Semantic Elements
<html>
<head>
<title>Hire Me!</title>
</head>
<body>
<h1>Hire Me!</h1>
<p>I am Lee Park. Hire me for your company, because my work is <b>off the
hizzle</b>. As proof of my staggering computer skills and monumental work
ethic, please enjoy this electronic resume.</p>
<h2>Indispensable Skills</h2>
<p>My skills include:</p>
<ul>
<li>Fast typing (nearly 12 words/minute).</li>
<li>Extraordinary pencil sharpening.</li>
<li>Inventive excuse making.</li>
<li>Negotiating with officers of the peace.</li>
</ul>
<p>And I also know HTML!</p>
<h2>Previous Work Experience</h2>
<p>I have had a long and illustrious career in a variety of trades.
Here are some highlights:</p>
<ul>
<li>2008-2009 - Worked as a typist at <i>Flying Fingers</i></li>
<li>2010-2013 - Performed cutting-edge web design at <i>Riverdale
Farm</i></li>
<li>2014-2015 - Starred in Chapter 1 of <i>Creating a Website: The
Missing Manual</i></li>
</ul>
<hr /></body></html>

You might also like