2. WWhhaatt iiss aann HHTTMMLL FFiillee??
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display
the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text
editor
3. DDoo YYoouu WWaanntt ttoo TTrryy IItt??
If you are running Windows, start Notepad.
Type in the following text:
<html>
<head>
<title>My first Page</title>
</head>
< body>
This is my first homepage. <b>This text is
bold</b>
</body>
</html>
Save the file as "mypage.htm".
4. EExxaammppllee EExxppllaaiinneedd
<html> - the tag that tells the browser that this is the
start of an HTML document
</html> - the tag that tells the browser that this is the
end of the HTML document
The text between the <head> tag and the </head> tag is
header information.
The text between the <title> tags is the title of your
document.
The text between the <body> tags is the text that will
be displayed in your browser.
The text between the <b> and </b> tags will be
displayed in a bold font.
5. HHTTMM oorr HHTTMMLL EExxtteennssiioonn??
When you save an HTML file, you can use
either the .htm or the .html extension.
6. HHTTMMLL EElleemmeennttss
HTML documents are text files made up of
HTML elements.
HTML elements are defined using HTML tags.
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>
7. HHTTMMLL TTaaggss
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 normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
The text between the start and end tags is the element
content
HTML tags are not case sensitive, <b> means the
same as <B>
8. TTaagg AAttttrriibbuutteess
Tags can have attributes.
Attributes provide additional information to an
HTML element.
Attributes always come in name/value pairs like
this: name="value".
Attributes are always specified in the start tag of
an HTML element.
Attributes and attribute values are also case-insensitive.
Note: “Always quote attribute values.”
Double style quotes are the most common, but
single style quotes are also allowed.
9. BBaassiicc HHTTMMLL TTaaggss
HTML <body> tag
The body element defines the documents' body. It
contains all the contents of the document (like
text, images, colors, graphics, etc.).
Example:
<html>
<head>
</head> <body>
The content of the document......
</body>
</html>
10. BBaassiicc HHTTMMLL TTaaggss
Optional Attributes
Attribute Value Description
Specifies the color of the visited
links in the document.
rgb(x,x,x), #xxxxxx
colorname
vlink
Specifies the color of the text in
the document.
rgb(x,x,x), #xxxxxx
colorname
text
Specifies the color of all the links
in the document.
rgb(x,x,x), #xxxxxx
colorname
link
The background color of the
document.
rgb(x,x,x), #xxxxxx
colorname
bgcolor
An image to use as the
background.
background file_name
Specifies the color of the active
links in the document.
rgb(x,x,x), #xxxxxx
colorname
alink
11. BBaassiicc HHTTMMLL TTaaggss
Note: The most important tags in HTML are
tags that define headings, paragraphs and line
breaks.
Headings
- are defined with the <h1> to <h6> tags. <h1>
defines the largest heading. <h6> defines the
smallest heading.
- Headings are always displayed in a bold font.
- HTML automatically adds an extra blank line
before and after a heading.
12. BBaassiicc HHTTMMLL TTaaggss
• Optional Attributes
Attribute Value Description
Specifies the alignment of the text in
the header.
left
center
right
justify
align
13. BBaassiicc HHTTMMLL TTaaggss
Paragraphs
- Paragraphs are defined with the <p> tag.
- HTML automatically adds an extra blank line
before and after a paragraph.
- Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p
14. BBaassiicc HHTTMMLL TTaaggss
• Optional Attributes
Attribute Value Description
Specifies the alignment of the text
within the paragraph.
left
center
right
justify
align
15. BBaassiicc HHTTMMLL TTaaggss
Line Breaks
The <br> tag is used when you want to end a line,
but don't want to start a new paragraph.
The <br> tag forces a line break wherever you
place it.
The <br> tag is an empty tag. It has no closing tag.
16. BBaassiicc HHTTMMLL TTaaggss
Comments in HTML
The comment tag is used to insert a comment in
the HTML source code.
A comment will be ignored by the browser.
You can use comments to explain your code,
which can help you when you edit the source
code at a later date.
Example:
<!-- This is a comment -->
17. BBaassiicc HHTTMMLL TTaaggss
HTML <hr> tag
The <hr> tag inserts a horizontal rule.
In HTML the <hr> tag has no end tag.
Attribute Value Description
Specifies the width of the horizontal
rule
width pixels, %
Specifies the thickness (height) of the
horizontal rule.
size pixels, %
When set to true the rule should render
in a solid color, when set to false the
rule should render in a two-color
"groove".
noshade noshade
Specifies the alignment of the
horizontal rule.
center,
left, right
align
18. HHTTMMLL TTeexxtt FFoorrmmaattttiinngg
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
19. HHTTMMLL TTeexxtt FFoorrmmaattttiinngg
"Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
20. HHTTMMLL TTeexxtt FFoorrmmaattttiinngg
Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation
<acronym>Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
21. HHTTMMLL CChhaarraacctteerr EEnnttiittiieess
Some characters like the < character, have a
special meaning in HTML, and therefore
cannot be used in the text.
Character Entity
- Has three parts
1. an ampersand (&)
2. an entity name or a # and an entity number
3. a semicolon (;)
Note that the entities are case sensitive.
22. HHTTMMLL CChhaarraacctteerr EEnnttiittiieess
The Most Common Character Entities:
Result Description Entity NameEntity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
“ quotation mark " "
‘ apostrophe ' '
24. LLiinnkkss
HTML uses a hyperlink to link to another document on
the Web.
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to
another document.
An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.
Syntax:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href
attribute is used to address the document to link to, and the
words between the open and close of the anchor tag will be
displayed as a hyperlink.
25. LLiinnkkss
The Target Attribute
With the target attribute, you can define where the linked
document will be opened.
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When
using named anchors we can create links that can jump directly
into a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.
Syntax:
<a name="label">Text to be displayed</a>
<a href="#label"> Text to be displayed</a>
The name attribute is used to create a named anchor. The name
of the anchor can be any text you care to use.
26. LLiissttss
HTML supports ordered, unordered and definition lists.
Unordered Lists
- The list items are marked with bullets (typically small black
circles).
- An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
Ordered Lists
- The list items are marked with numbers.
- An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
Definition Lists
- This is a list of terms and explanation of the terms.
- A definition list starts with the <dl> tag. Each definition-list term
starts with the <dt> tag. Each definition-list definition starts with
the <dd> tag.
27. LLiissttss
• How it looks like
Numbered list:
1. Apples
2. Bananas
3. Lemons
4. Oranges
Letters list:
A. Apples
B. Bananas
C. Lemons
D. Oranges
• Examples
<h4>Numbered list:</h4>
<ol>
<li>Apples</li> <li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
28. LLiissttss
• How it looks like
Lowercase letters list:
a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:
I. Apples
II. Bananas
III. Lemons
IV. Oranges
• Examples
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
29. LLiissttss
• How it looks like
Lowercase Roman numbers
list:
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
• Examples
<h4>Lowercase Roman
numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
– </ol>
30. LLiissttss
• How it looks like
Disc bullets list:
• Apples
• Bananas
• Lemons
• Oranges
Circle bullets list:
o Apples
o Bananas
o Lemons
o Oranges
• Examples
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
31. LLiissttss
• How it looks like
Square bullets list:
Apples
Bananas
Lemons
Oranges
• Examples
<h4>Square bullets
list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
32. TTaabblleess
allow you to position elements easily on a
Web page.
help your Web pages look more organized
and professional.
are useful when you want to arrange text and
images into rows and columns, making the
information straightforward and clear to the
Web page visitor.
33. TTaabblleess
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr>
tag), and each row is divided into data cells
(with the <td> tag).
The letters td stands for "table data," which is
the content of a data cell. A data cell can
contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
34. TTaabblleess
Example:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Open table.html to show how it is rendered.
35. TTaabblleess
Tables and the Border Attribute
- If you do not specify a border attribute the table will be
displayed without any borders. Sometimes this can be useful, but
most of the time, you want the borders to show.
Headings in a Table
- Headings in a table are defined with the <th> tag.
- Example: Open tableHeading.html
Empty Cells in a Table
- Table cells with no content are not displayed very well in most
browsers.
- Borders around the empty table cell are missing (NB! Mozilla
Firefox displays the border).
- To avoid this, add a non-breaking space ( ) to empty data
cells, to make the borders visible.
36. HTML TAG FUNCTION
<table> Indicates the beginning & end of the table
</table> All other tags will be inserted within these
tags
<tr></tr> Indicates the beginning & end of table row
Rows consist of heading or data cells
<th></th> Indicates the beginning & end of a table
heading cell
Heading cells default to bold text and
center alignment
<td></td> Indicates the beginning & end of a table
data cell
Data cells default to normal text and left
alignment
37. HTML TAG ATTRIBUTE FUNCTION
<table> align table alignment (left, center, right)
</table> bgcolor sets background color for table
border sets width of table border (pixels)
cellspacing spacing between cells
cellpadding spacing within cells
cols number of columns
width table width relative to window width
<tr></tr> align horizontally aligns row (left,right,center,justify)
bgcolor sets background color for row
valign vertically aligns row (top, middle, bottom)
<th></th> align horizontally aligns cell (left,right,center,justify)
<td></td> bgcolor sets background color for cell
colspan no. of columns spanned by a cell
rowspan sets no. of rows spanned by a cell
valign vertically aligns cell (top, middle, bottom)