Introduction to
HTML
1
Definitions
W W W – World Wide Web.
(open source information space where documents and other web
resources are identified by URLs)
HTML – HyperText Markup Language – The Language of Web
Pages on the World Wide Web.
( A markup language is a set of markup tags. HTML documents are
described by HTML tags.)
HTML is a text formatting language
URL – Uniform Resource Locator.
Browser – A software program which is used to show web pages.
2
HTML
“Normal text” surrounded by bracketed
tags that tell browsers how to display web
pages.
Pages end with “.htm” or “.html”
3
Choosing Text Editor
There are many different programs that you can
use to create web documents.
These programs will generate the HTML Source
Code for you.
Standard Microsoft Windows text editors,
NotePad.
Textpad
4
Tags
Codes enclosed in brackets.
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <Title>
5
HTML Structure
• Each web page has a HEAD and a BODY.
• All web pages have required tags like
these:
<HTML> {begin the page}
<HEAD> {some set up instructions
</HEAD> are here}
<BODY> {the main part of the page
</BODY> is here}
</HTML> {end the page}
Creating a Basic Starting
Document
The HEAD of your document point to above window
part.
The TITLE of your document appears in the very top line
of the user’s browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the TITLE that is
added to the list.
The text in your TITLE should be as descriptive as
possible because this is what many search engines, on
the internet, use for indexing your site.
7
Setting Document Properties
Document properties are controlled by attributes
of the BODY element.
For example, there are color settings for the
background color of the page, the document’s
text and different states of links.
8
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
9
15. ORANGE 15. #FF7F00
Background Color
To set your document’s background color, you
need to edit the <BODY> element by adding the
BGCOLOR attribute.
The following example will display a document
with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
<BODY BGCOLOR=“WHITE”></BODY>
10
TEXT Color
The TEXT attribute is used to control the
color of all the normal text in the document.
The default color for text is black.
<BODY BGCOLOR=“yellow” TEXT=“red”></BODY>
11
Using Image Background
The BODY element also gives you ability of
setting an image as the document’s background.
An example of a background image’s HTML
code is as follows:
<BODY BACKGROUND=“hi.gif” BGCOLOR=“WHITE”></BODY>
12
Previewing Your Work
Once you have created your basic starting document
and set your document properties it is a good idea to
save your file.
To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled “Save As”.
3. In the “File Name” text box, type in the entire name of
your file (including the extension name .html).
13
Edit, Save and View Cycle
To preview Your Work, open a web browser and do
the following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.
14
Edit, Save and View Cycle
3. In the “Open” dialog box, click on the
“Browse” button and locate your web
document.
4. Click “OK” once you have selected your file.
The web browser will load the same
document but with the new revisions. This
process is the Edit, Save and View Cycle.
15
Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1
through H6 are generally used for major divisions
of the document.
H1: is be used as the highest level of heading, H2 as the
next highest, and so forth.
16
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>
17
Paragraphs, <P> </P>
Paragraphs allow you to add text to a document
in such a way that it will automatically adjust the
end of line to suite the window size of the
browser in which it is being displayed.
Each line of text will stretch the entire length of
the window.
18
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD> Paragraph 1,….
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
Heading 2
Paragraph 2,….
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
Heading 3
Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6>
Heading 5
<P> Paragraph 6, ….</P> Paragraph 5,….
</BODY></HTML> Heading 6
Paragraph 6,….
19
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.
20
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY> ….
</HTML>
21
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>.
22
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>
23
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>
The COLOR attribute of the FONT element.
E.g., <FONT COLOR=“red”>this text has color</FONT>
24
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.
25
Lists
1. Create an unordered list.
2. Create an ordered list.
3. Nested Lists.
26
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 …
27
List Elements
You have the choice of three bullet types: disc(default),
circle, square.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
List item …
List item …
List item …
28
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.
29
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, ……
30
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>
31
List Elements
i. List item …
ii. List item …
Text ….
iii. List item …
32
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>
33
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>
34
The output….
35
<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 What
<OL type="I" start="4">
<LI> Be careful </LI>
will
<LI> Do not look around</LI> be the
</LI> </OL> output?
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL> 36
The output….
37
Images
<IMG>This element defines a graphic image on the
page.
Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
Alternate Text (ALT): This is a text field that describes
an image or acts as a label. It is displayed when they
position the cursor over a graphic image.
Alignment (ALIGN): This allows you to align the image
on your page.
38
Images
Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in
pixels.
Border (BORDER): is for a border around the
image, specified in pixels.
39
Some Examples on images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a
text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast
40
HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends.
Everything between these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.
41
E-Mail (Electronic Mail)
E.g. mailto:[email protected]
The type of service is identified as the mail client
program. This type of link will launch the users mail
client.
<A HREF=“mailto:
[email protected]”>Send me
More Information </A>
42
Tables
The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
The table row elements usually contain table
header elements or table data elements.
43
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
44
Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
45
Tables Attributes
BGColor: Some browsers support background
colors in a table.
Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the
table cells as well.
Border: You can choose a numerical value for
the border width, which specifies the border in
pixels.
CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels. 46
Table Attributes
CellPadding: Cell Padding is the space
between the cell border and the cell
contents and is specified in pixels.
Align: tables can have left, right, or
center alignment.
Background: Background Image, will be
titled in IE3.0 and above.
BorderColor, BorderColorDark.
47
Table Header
Table Data cells are represented by the
TD element. Cells can also be TH (Table
Header) elements which results in the
contents of the table header cells
appearing centered and in bold text.
48
Table Data and Table Header
Attributes
Colspan: Specifies how many cell columns of the table
this cell should span.
Rowspan: Specifies how many cell rows of the table this
cell should span.
Align: cell data can have left, right, or center alignment.
Valign: cell data can have top, middle, or bottom
alignment.
Width: you can specify the width as an absolute number
of pixels or a percentage of the document width.
Height: You can specify the height as an absolute
number of pixels or a percentage of the document height.
49
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>
50
Table Data and Table Header Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th>
Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
51
Table Data and Table Header
Attributes
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2
52
Special Things to Note
• TH, TD and TR should always have end tags.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.
• By default, a table is flush with the left margin
53
What will be the output?
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav
Links</TD><TD colspan=“2”>Feature
Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>
<TR><TD width=“25%”>News Column 1 </TD>
<TD width=“25%”><News Column 2 </TD></TR>
</TABLE> 54
The Output
55
• END
56
