INTRODUCTION TO HTML
1
Contents
Getting Started..
What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
2
What the following term mean:
Web server: a system on the internet containing one or
more web sites
Web site: a collection of one or more web pages
Web pages: single disk file with a single file name
Home pages: first page in website (index page)
URL – universal Resource Locator-identifies a resource
globally
Think about the followings before working your Web pages.
Think about the sort of information (content) you want to put on the
Web.
Set the goals for the Web site.
Organize your content into main topics.
Come up with a general structure for pages and topics.
3
Definition of terms
HTML – Hypertext mark-up Language (nick-named HoT
MetaL!).
Web pages on the internet are written using HTML
HTML is a collection of platform independent styles
indicated by mark-up tags, that describe various components
of the World Wide Web.
Web Browser – a software program that can be used to view
HTML documents. Examples are:- Netscape, Internet
Explorer, Mozilla, Opera, Mosaic, e.t.c
4
What is a HTML document?
Plain text files that can be created using any text
editor program( e.g. DOS Edit, Notepad, WordPad,
e.t.c.)
The document must be saved with the extension
.HTML
Examples can be Poly.html, index.html,
guestbook.html
5
What is HTML?
A language for formatting text and telling the browser what to
do, and what properties to use.
A series of tags that are integrated into a text document.
What are tags? ;
A tag is an element surrounded by angular brackets and used
for text formatting.
surrounded with angle brackets like this
<B> or <I>.
Most tags come in pairs, the first one called opening tag and
the second is closing tag.
exceptions: <P>, <br>, <li> , <img>tags …
The opening tag turns the action on, and the closing one
turns it off.
6
The closing tag (off switch) starts with a forward slash.
For example ,<B> text </B>
Tags can be embedded, for instance, to do this:
<HEAD><TITLE> Your text </HEAD></TITLE> it won't work.
The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
HTML Tags are not case sensitive.
Many tags have attributes that add qualifiers to them
For example, <P ALIGN=CENTER> centers the paragraph following it.
Some browsers don't support some tags and some of
their attributes.
7
Basic HTML Document Structure
<HTML>
See what it
<HEAD> looks like:
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
8
How to Create and View an HTML document?
1.Use an text editor such as notepad to write the document.
2.Save the file as filename.html on a PC. This is called the
Document Source.
3.Open Internet Explorer or Netscape (or any browser) Off-
Line
4.Switch to Internet Explorer
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any other Web
page in Internet Explorer.
9
7.You may now switch back and forth between the
Source and the HTML Document
⚫ Switch to Notepad with the Document Source
⚫ Make changes
⚫ Save the document again
⚫ Switch back to Internet Explorer
⚫ Click on REFRESH and view the new HTML Document
⚫ Switch to Notepad with the Document Source......
10
All normal webpages consist of a head and a body.
Head
Body
The head is used for text and tags that do not show directly
on the page.
The body is used for text and tags that are shown directly
on the page.
Tags in header section
<HEAD>...</HEAD>-- contains information about the document
<TITLE>...</TITLE>-- puts text on the browser's title bar.
11
Tags in Body
The body of the document contains all that can be seen when the user loads
the page.
Let's talk Text
Heading: <H1> </H1>, <H2> </H2>, …. <H6> </H6>
Center:<Center> </Center>
Paragraph: <P> </P>
Line Break: <Br> (End a Line – Forces a line break)
Phrase Markups: <I>italics</I> ,<B>bold</B>,
<U>underline</U>
<PRE>, <CODE>, <CITE> for citations
<DFN>, <EM> for emphasis
<STRONG> for emphasis
Comment: <!– Comment --> (Defines a Comment)
12
Text Formatting
Let's talk Text
Phrase Markups: <I>italics</I> ,<B>bold</B>,
<U>underline</U>
<sub> subscript </sub> (Defines subscripted text)
<sup> superscript </sup> (Defines superscripted text)
<pre>text</pre>writes text exactly as it is, including spaces.
<em>text</em>usually makes text italic
<strong>text<strong>usually makes text bold
13
HTML lists
HTML supports unnumbered, numbered and
definition lists.
Lists can be nested such that one list is created inside
another.
A list is Simply an arrangement of items in a logical
order. Each list item can be marked by a bullet or a
number showing its position in the list
Simple example of list is
Apples
Peach
oranges
14
UnNumbered Lists
A form of list where each list item is bulleted.
To create unnumbered list, follow these steps.
o Start with the <UL> tag , meaning unnumbered list
o Enter <LI> (list item tag ) followed by the individual item;
</LI> .
o End the entire list with a closing list </UL> tag.
o Example
<UL>
<LI> Nyeri </LI>
<LI> Thika </LI>
<LI> Kisii </LI>
</UL>
The <UL> tag has one attribute called ‘type’ that determines bulleting style used.
15
Numbered(Ordered Lists)
An ordered list is one in which each item is identified by a
numeric number
The <OL> tag is used for creating numbered lists.
<LI> Item </LI> tag identifies each list item
List must be closed with the </OL> tag
Example
<OL type =“i”>
<LI>Drogba </LI>
<LI>McCain </LI>
<LI>Essien </LI>
<LI>Oliech </LI>
</OL>
16
Definition Lists
A definition list is used for providing the description of certain
terms and acronyms used in documents.
A definition list must start with the <DL> tags. Each term to be
defined is marked by the <DT> tag. Finally the actual definition
begins with the <DD> tag.
An example is as follows:
<DL>
<DT> NCSA
<DD>National Centre for Supercomputing Applications
</DL>
Lists can be nested inside one another such that one list appears within
another list.
17
Exercise
Write HTML code that produces the following lists
1. A few New England States
o Vermont
o New hampshire
o Maine
2. Two midwestern states
▪ Michigan
▪ Indiana
▪ Illinois
▪ Texas
18
Add Images
Use <IMG SRC=image filename> tags
How to specify Relative pathnames
Attributes of IMG tag
-width,
height
-Alt
-Align
-<Img src=my.gif width=50 height=50 align=right
alt=“My image”>
19
Examples on adding images
Let's assume you have an image file called "peter.jpg" in the same
folder/directory as your HTML file. It is 200 pixels wide by 150 pixels
high.
<img src="peter.jpg" width="200" height="150">
You can add a short description as follows:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter">
you can add one as follows using the longdesc attribute:
<img src="peter.jpg" width="200" height="150"alt="My friend Peter"
longdesc="peter.html">
20
Adding links to other pages
The Anchor tag is used for adding links to other pages.
What makes the Web so effective is the ability to define
links from one page to another, and to follow links at
the click of a button. A single click can take you right
across the world!
Links are defined with the <a> tag. Lets define a link to
the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.
21
Linking to internet pages
To link to a page on another Web site you need to give the full Web
address (commonly called a URL), for instance to link to www.w3.org
you need to write:
This is a link to
<a href="http://www.w3.org/">link to w3 </a>
You can also creates links to sections of the same document using the
anchor tag. Example
<a href=“#section3”> Go to section 3 </a>
Section 3 linked to above must have been defined with a name as
follows <a name=“section3”> section 3</a>
22
Image and E-mail links
You can turn an image into a hypertext link, for example,
the following allows you to click on the company logo to get
to the home page:
<a href=“/“><img src="logo.gif" alt="home page"></a>
A link can also be created that users can click on to compose
and send e-mail. The mailto keyword must be used in such
links. For example:-
<A href=“MAILTO:[email protected]”> Send mail to
Registrar </A>
23
Changing background Colors
You can apply hex or name values to attributes of the <BODY> tag to
designate the color of your page's regular text and linked text. The TEXT
attribute sets the color of the regular text. The LINK attribute controls the
color of linked text. VLINK designates the color of a visited link; it's helpful
when you're presenting a list of links because it lets your users distinguish
the pages they've already visited. Finally, ALINK designates the color that
links become when clicked. ALINK is usually the same value as VLIN.
example
<BODY BGCOLOR=“pink" TEXT="#000000" LINK="#33FFFF"
VLINK="#330066" ALINK="#330066">
24
<Pre> Tag
This tag is used for adding preformatted text .. For instance:
. <pre>
void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);
if (next)
next->prev = prev;
parent = null;
}
</pre>
Which renders as:
void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);
25
How to make colors changes?
Hexadecimal number :
Color names : <Font color=white>
Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
Spot color
<FONT COLOR=#66ffcc>WENT'99</FONT>
Image Background
<BODY BACKGROUND=bgimg.gif >
26
HTML Tables
Tables are used for information as well as for layout. You can stretch
tables to fill the margins, specify a fixed width or leave it to the browser to
automatically size the table to match the contents.
The following tags are used when creating tables:
<TABLE> - marks the beginning of a table
<CAPTION> - defines text that contains table title
<TR> - defines a table row and must have a closing tag </TR> -- table row
closing tag
<TH> - defines table header column and must be terminated with a
closing tag, </TH>
27
Table tags
<TD> - defines a table data cell and must be
terminated with a closing tag, </TD>
The <TABLE> tag must finally terminated at the end
of a table, using the </TABLE> tag. Example:
28
Tables - examples
. Tables consist of one or more rows of table cells.
Here is a simple example:
Year Sales
2000 $18M
2001 $25M
2002 $36M
The markup for this is:
<table border="1">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>
29
Structure of a HTML table
<TABLE border=“” bgcolor=xxx cellpadding=xxx cellspacing=xxx>
<TR> <!– - first table row -->
<TD></TD>
<TD></TD>
</TR>
<TR><!– second row of the table starts here -- >
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
HTML By Mr. Wafula Erick 30
Table attributes
The table tag can contain the following attributes or qualifiers
With – sets a value for the table width measurement
Height – sets a value for the table height
Border – defines border thickness of the table
Cellpadding – defines spacing between the cell border and the cell
contents
Cellspacing – defines the space between two cells in a table
Bgcolor – specifies the background color of the table
Example
<TABLE border=2 width=“40%” height =“65%” cellpadding=4
cellspacing=6 bgcolor=“pink”>
31
Sample table
<TABLE border=2 width=“40%” height =“65%”
cellpadding=4 cellspacing=6 bgcolor=“pink”>
<TR>
<TD>Cell1</TD>
<TD>cell2</TD>
</TR>
<TR>
<TD>cell3 </TD>
<TD>cell4</TD>
</TR>
<TR>
<TD>cell5</TD>
<TD>cell6</TD>
</TR>
</TABLE>
32
Cell Spacing
By contrast the cellspacing attribute sets the
space between the cells. Setting the cell spacing
. to 10:
<table border="1" cellpadding="10"
cellspacing="10">
has the effect:
Year Sales
2000 $18M
2001 $25M
2002 $36M
33
Table Width
You can set the width of the table using the
. width attribute. The value is either the width in
pixels or a percentage value representing the
percentage of the space available between the
left and right margins. For instance to set the
width to 80% of the margins:
<table border="1" cellpadding="10" width="80%">
which has the effect:
Year Sales
2000 $18M
2001 $25M
2002 $36M
34
Cells that span more than one row or column
Let's extend the above example to break out sales by north
. and south sales regions:
Sales
Year
North South Total
2000 $10M $8M $18M
2001 $14M $11M $25M
The heading "Year" now spans two rows, while the
heading "Sales" spans three columns. This is done by
setting the rowspan and colspan attributes respectively.
The markup for the above is: as shown on the next page
35
<TABLE border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Year</th><th
colspan="3">Sales</th></tr>
<tr align="center"><th>North</th><th>South</th>
<th>Total</th></tr>
<tr align="center"><td>2000</td>
<td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td>
<td>$14M</td><td>$11M</td><td>$25M</td></tr>
</TABLE>
36
Rowspan and Colspan
Rowspan – attribute that specifies the
number of rows that a table cell cuts across
Colspan – attribute that specifies the
number of columns that a table cell cuts
across.
E.g <TD rowspan=2 colspan=4>
37
assignment
Write html code that produces the following table
PHYSICAL MEASUREMENTS
SURNAME
WIDTH HEIGHT EYE COLOR
Wamboi 32 42 blue eyes
Lucy 14 5.6 feet white
Kenn & Mbugua pink
38
HTML FORMS
.
39
