HTML Lists Basic Guide

 HTML is a markup language for describing web
documents (web pages).
 HTML stands for Hyper Text Markup Language
 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document
content.
What is HTML?

4
HTML History
 HTML 2.0
 HTML 3.2
 HTML 4.0
– All formatting is separated into a style sheet.
 HTML 4.01
– Makes the future upgrade from HTML to XHTML in a
simple process.
 XHTML – sometimes referred to as HTML 5
– The future of HTML standard
– Almost identical to HTML 4.01

HTML Editors
 HTML can be edited by using a professional
HTML editor like:
– Adobe Dreamweaver
– Microsoft Expression Web
– CoffeeCup HTML Editor
 However, for learning HTML we recommend a
text editor like Notepad (PC).
 We believe using a simple text editor is a good
way to learn HTML.

Follow the 4 steps below to create your first web page with
Notepad.
Step 1: Open Notepad
To open Notepad in Windows 7 or earlier:
Click Start (bottom left on your screen). Click All Programs.
Click Accessories. Click Notepad.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
Step 3: Save the HTML Page
Select File > Save as in the Notepad menu.
Name the file "index.htm" or any other name ending with htm.
UTF-8 is the preferred encoding for HTML files.6
HTML Editors

7
 HTML Elements
 HTML elements are written with a start tag, with an end tag,
with the content in between:
 <tagname>content</tagname>
 The HTML element is everything from the start tag to the
end tag:
 <p>My first HTML paragraph.</p>
What are Element / Tags?
End tag
Element contentStart tag
</h1>My First Heading<h1>
</p>My first paragraph.<p>
<br>

9
8
<!DOCTYPE html>
<html>
<head>
9 <title>Welcome</title>
10 </head>
11
12 <body>
13 <p>Welcome to HTML!</p>
14 </body>
15 </html>
Creates a head element
Creates a title element,
which contains the text
Welcome
Creates a p element within the
body, which displays welcome
text
HTML Example

Example Explained
10
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the
document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <p> and </p> describes a paragraph

HTML Page Structure
 Main HTML Elements / Tags
11

12
HTML Attributes
<p align=“right”> welcome </p>
Element Attribute Name Attribute Value
HTML elements can have attributes.
Attributes provide additional information about an
element.
Attributes are always specified in the start tag.
Attributes come in name/value pairs like: name="value"
content

13
Headings
 Heading Types
– <H1 ...> ... </H1>
– <H2 ...> ... </H2>
– <H3 ...> ... </H3>
– <H4 ...> ... </H4>
– <H5 ...> ... </H5>
– <H6 ...> ... </H6>
 Attributes: ALIGN
– Values: LEFT (default), RIGHT, CENTER
 Nesting tags
– Headings and other block-level elements can contain
text-level elements, but not vice versa

14
Headings, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="CENTER">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>

16
P – The Basic Paragraph
 Attributes: ALIGN
– LEFT (default), RIGHT, CENTER. Same as headings.
– Whitespace ignored (use <BR> for line break)
– End Tag is Optional:
<BODY>
<P>
Paragraph 1
</P>
<P>
Paragraph 2
</P>
<P>
Paragraph 3
</P>
</BODY>
Fully-Specified
<BODY>
Paragraph 1
<P>
Paragraph 2
<P>
Paragraph 3
</BODY>
Equivalent with Implied Tags

17
<html>
<head>
<title>Text Layout</title>
</head>
<body>
<p>
This is a paragraph of text <br/>
made up of two lines.
</p>
<p>
This is another paragraph with a
  GAP   between
some of the words.
</p>
<p>
   This paragraph is <br/>
indented on the first line <br/>
but not on subsequent lines.
</p>
</body>
</html>
Paragraph, Example

You can add comments to your HTML source by using the following
syntax:
Example

Note:
 There is an exclamation point (!) in the opening tag, but not in the
closing tag.
 Comments are not displayed by the browser, but they can help
document your HTML.
With comments you can place notifications and reminders in your
HTML:
HTML Comment Tags

20
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Comment, Example

21
HTML Text Formatting Elements
Tag Description
<u> Under line
<b> Bold text
<big> Big text
<em> Emphasized text
<i> Italic text
<tt>… </tt> specify typewriter-like (fixed-width) font
<small> Small text
<strong> Strong text
<sub> Subscripted text
<sup> Superscripted text

22
Tag Description
<br/> Break-enter
<hr/> Horizontal line
<Pre> Defines preformatted text
<abbr> abbreviation
<strike> Defines deleted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a mathematical variable

23
The most common entities
Display Description Name
Non-breaking space  
< Less than <
> Greater than >
& Ampersand &
“ Quotation mark "
‘ Apostrophe '

HTML Computer Code
Elements
 Normally, HTML uses variable letter size,
and variable letter spacing.
 This is not wanted when displaying
examples of computer code.
 The <kbd>, <samp>, and <code>
elements all support fixed letter size and
spacing.
24

25
HTML Text Formatting
Elements Example
...
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
...

26
HTML Text Formatting Elements,
Result

27
HTML Computer Code Elements
Example
...
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK
Acronym</ACRONYM>
...

28
HTML Computer Code Elements,
Result

29
6
7 <html >
8 <head>
9 <title>Contact Page</title>
10 </head>
11
12 <body>
13 <p>
14 Click
15 <a href = "mailto:deitel@deitel.com">here</a>
16 to open an email message addressed to
17 deitel@deitel.com.
18 </p>
19
20 <hr /> 
21
22 
23 
24 <p>All information on this site is <strong>©
25 Deitel & Associates, Inc. 2007.</strong></p>
26
Inserts a horizontal
rule, with a line break
before and after
Inserts the special
characters © and &
Physical Character Styles,
Example

30
27 
28 
29 
30 
31 <p><del>You may download 3.14 x 10<sup>2</sup>
32 characters worth of information from this site.</del>
33 Only <sub>one</sub> download per hour is permitted.</p>
34 <p><em>Note: < ¼ of the information
35 presented here is updated daily.</em></p>
36 </body>
37 </html>
Makes the 2
superscript
Makes the 1
subscript
Creates a strikethrough
effect
Emphasizes
text
Inserts the special
symbols < and ¼

31
HTML Lists
 Unordred Lists
 Ordered Lists
 Definition Lists

32
OL: Ordered (Numbered)
Lists
 OL Element
– <OL>
<LI>…
<LI>…
...
</OL>
– Attributes: TYPE, START, COMPACT
 List entries: LI
– <LI ...> ... </LI> (End Tag Optional)
– Attributes: (When inside OL) VALUE, TYPE
A sample list:
<OL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</OL>

INE2720 – Web Application Software Development 33
Nested
Ordered Lists
<OL TYPE="I">
<LI>Headings
<LI>Basic Text Sections
<LI>Lists
<OL TYPE="A">
<LI>Ordered
<OL TYPE="1">
<LI>The OL tag
<OL TYPE="a">
<LI>TYPE
<LI>START
<LI>COMPACT
</OL>
<LI>The LI tag
</OL>
<LI>Unordered
<OL TYPE="1">
<LI>The UL tag
<LI>The LI tag
</OL>
<LI>Definition
<OL TYPE="1">
<LI>The DL tag
<LI>The DT tag
<LI>The DD tag
</OL>
</OL>
<LI>Miscellaneous
</OL>

34
UL: Unordered (Bulleted) Lists
 UL Element
– <UL>
<LI>…
<LI>…
...
</UL>
 Attributes: TYPE, COMPACT
– TYPE is DISC, CIRCLE, or SQUARE
 List entries: LI (TYPE)
– TYPE is DISC, CIRCLE, or SQUARE
A sample list:
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>

INE2720 – Web Application Software Development 35
UL: Custom
Bullets
<UL TYPE="DISC">
<LI>The UL tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>COMPACT
</UL>
<LI>The LI tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>VALUE
</UL>
</UL>

36
HTML Links
 <a> to create a link to another
document.
 The target attribute
– <a href=“…”, target=“_blank”>xxx</a>
– Open the document in a new browser
window.
 The name attribute
– <a name=“abc”>
– <a href=“#abc”>Useful text</a>

1
8 <html >
9 <head>
10 <title>Internet and WWW How to Program - Links</title>
11 </head>
12
13 <body>
14
15 <h1>Here are my favorite sites</h1>
16
17 <p><strong>Click on a name to go to that page.</strong></p>
18
19 <p><a href = "http://www.deitel.com">Deitel</a></p>
20
21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
22
23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
24
25 <p><a href = "http://www.usatoday.com">USA Today</a></p>
26
27 </body>
28 </html>
Text between strong tags will
appear bold.
Elements placed between paragraph tags
will be set apart from other elements on the
Linking is accomplished in XHTML
with the anchor (a) element.
The anchor links to the page that’s
value is given by the href attribute.
The text between the a tags is the anchor for the
link.

Hypertext Links
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.

7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Contact Page
11 </title>
12 </head>
13
14 <body>
15
16 <p>My email address is
17 <a href = "mailto:deitel@deitel.com"> deitel@deitel.com
18 </a>. Click the address and your browser will open an
19 email message and address it to me.</p>
20
21 </body>
22 </html>
To create an email link include “mailto:”
before the email address in the href
attribute.
When a user clicks on an email link,
an email message addressed to the
value of the link will open up.

HTML Lists Basic Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML Lists Basic Guide

Similar to HTML Lists Basic Guide (20)

Recently uploaded

Recently uploaded (20)

HTML Lists Basic Guide