Introduction to HTML
By
Dr. Hawa Nyende
[email protected]
Lesson objectives
Upon completion of this chapter, the student should be able
to:
Define HTML
Have a clear understanding of tags
Be a able to create a simple HTML document and save it.
Be able to format an HTML document
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like
<html>
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
Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox)
is to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to
interpret the content of the page:
Example
<html>
</html>
Each one of those is called a tag.
<html> is a starting tag and </html> is a closing tag.
Think of a tag like talking to a browser ,or better yet give
it instructions.
Example Cont’d
<html> instructs the browser to open an HTML document.
</html> instructs the browser to close an HTML document.
<head>: tells the Web browser that this is the beginning of header for the
page
<title>: tells the Web browser that this is the beginning of the title of the
page
<body>: tells the Web browser that this is the beginning of the Web page
content (body)-- everything you want to say and see on your page will
follow this tag
HEAD TAGS
Every HTML document needs a pair of HEAD tags.
<HTML>
<HEAD>
</HEAD>
</HTML>
TITLE TAGS
The only thing we have to concern ourselves with in the
HEAD tags are the TITLE tags.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</HTML>
THE BODY TAG
The bulk of the page goes in the BODY tags.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Place text in the body
<HTML>
<HEAD>
<TITLE>My first webpage!</TITLE>
</HEAD>
<BODY> Hello Hawa! Today is great </BODY>
</HTML>
Saving HTML document
o When your in Notepad, click file then save as.
o You will be presented with a dialog box. Make a new folder by
clicking on the new folder icon and name it what you want.
o Then double click on it to open it up. Where it says File name:
type in any name with a.html as a file extension (e.g.
page1.html) ,Where it says Save as type: make sure it says All
Files(*.*)
Saving changes
Whenever you make a change to your
document, just save it, then hit the Reload
button on your browser.
In some instances just hitting the reload
button doesn't quite do the trick... in that
case hit Reload while holding down the
SHIFT key.
Opening HTML document
Click file ,then open and browse your file and open it.
Or double click your file to open it.
Note:
What you made is a skeleton HTML document. This is the
minimum required information for a web document and all
web documents should contain these basic components.
The document title is what appears at the very top of the
browser window.
Colors, images and hyperlinks
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light.
HTML colors are defined using a hexadecimal notation (HEX)
for the combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0
(in HEX: 00). The highest value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting
with a # sign.
Sample -colors
Example 1: background color
<html>
<head’’>
<title></title>
</head>
<body bgcolor="#CCFFCC">
Something really cool
</body>
Try it yourself and tell us the output.
Using images
The image must already been saved before we can use it, preferably
in the same folder as the HTML code.
Can specify image with the <IMG/> (image) tag.
<BODY> <IMG/> </BODY>
We must also specify the source and the size.
<BODY><IMG SRC=“ball.gif” WIDTH=“130” HEIGHT=“101”/>
</BODY>
You can use Microsoft Paint to get the exact size of the image.
Using images –Cont’d
The browser can figure out how big the image is all by itself.
But we give the dimensions then because, the browser can simply
reserve a space for the image, then load the rest of page.
Once the entire page loads it can go back and fill in the
images.
Without dimensions, when it runs into an image, the browser has
to pause loading the page, load the image, then continue loading
the page.
So, the browser functions much better with image dimensions.
Adjust image size in a web page
<BODY>
<IMG SRC=”ball.gif" WIDTH=“300” HEIGHT=“101”/>
</BODY>
We can however adjust the dimensions until the image appears
the way we want it on the web page.
<BODY><IMG SRC="chef.gif" WIDTH=“40”
HEIGHT=“200”/>
</BODY>
The same image has now been changed in size!
Setting background images
<html>
<head><title></title>
</head>
<body background="swirlies.gif">Something really cool
</body>
Using images cont’d
In order for the image to show up, the browser has to be
able to find it.
For now, we want the image to be in the same folder as
your HTML document ( e.g.page1.html).
Example 2
<html><head><title></title></head>
<body background="bluebar.gif">Something really cool
</body>
</html>
The image in the example must be in the same folder with
the file in order for it to appear or the browser must be
able to locate it.
Formatting Text and
hyperlinks
Formatting Tags and attributes
Tags
<b> <u>
<i><strong>
<font><tt>
Attributes
Align, face, color, size.
Able to nest tags properly
Making things bold
We use the <b> tag to bold content in html.
<html>
<head><title></title>
</head>
<body>Something really <b>cool</b>
</body>
</html>
What we are (more or less) telling the browser is: at the <b> start
making things bold, and at the </b> stop making things bold.
Making things italic
To make thing italic ,use the<i> tag.
<html>
<head><title></title>
</head>
<body>Something <i>very</i> <b>good</b>
</body>
</html>
Underlining text
Use the <u> tag.
<html>
<head><title></title>
</head
<body><u>Something</u> <i>very</i> <b>good</b>
</body>
</html>
Using a combination of tags
<html>
<head><title></title>
</head>
<body>Something really <i><b>cool</b></i>
</body>
</html>
Nested tags
The above is an example of nested tags.
If you are going to use tag pairs in combination (which
you will probably be doing quite a bit), then to avoid
confusing the browser, they should be nested, not
overlapping.
illustration
<i><b></i></b>
Overlapping tags.... Bad
<i><b></b></i>
Nested tags.... good
Changing font size
First add the <FONT> tags...
<body>Something really <font>good</font></body>
Then specify a SIZE attribute.
<body>Something really <font size=8>good</font></body>
attributes
a <TAG> tells the browser to do something.
An ATTRIBUTE goes inside the <TAG> and tells the
browser how to do it.
Default Font
the default value is a value that the browser assumes if you have not
told it otherwise.
Every browser has a default font setting - font name, size and color.
Unless you have messed with it the default is probably Times New
Roman 12pt (which translates into 3 for our purposes) and it's black.
But we can specify font names other than the defaults. Like ARIAL
and COMIC SANS.
a <TAG> tells the browser to do something. An ATTRIBUTE goes
inside the <TAG> and tells the browser how to do it.
<FONT SIZE=6> …
Font
<BODY>Something really <FONT
FACE="ARIAL">good</FONT></BODY>
The font will only display if your viewer has that font installed
on their computer. Otherwise, they will only see the default
font
Arial and Comic Sans MS are pretty widely distributed with
Windows.
Example
<html>
<head><title></title></head>
<body> <font size=4 face=“arial”>
</font>
</body>
</html>
Specifying more than one font face
<html>
<head><title></title></head>
<body>
<font face=“arial, helvetica, lucida sans">This is DCS
1207</font> </body> </html>
The browser looks for ARIAL. If it finds it, it uses it. If not, it
goes on to HELVETICA. If it can't find that, it looks for
LUCIDA SANS. And if it can't find that it uses the default
font.
Using more than one attribute in Font tag.
<html>
<head><title></title></head>
<body>Something really <font color="#ff0000"
face=“arial" size="7">good</font>
</body>
</html>
headings
Headings range from 1-6.
<h1>Something really cool<h1>
<h2>Something really cool<h2>
<h3>Something really cool<h3>
<h4>Something really cool<h4>
<h5>Something really cool<h5>
<h6>Something really cool<h6>
Align attribute
A useful heading attribute is ALIGN.
<h2 align="left">Something really cool<h2>
<h2 align="center">Something really cool<h2>
<h2 align="right">Something really cool<h2>
Linking on the Web
Source
Anchor
Document 1 Link
(reference) Destinatio
n
Here is a link to
document 2
Document 2
This is document 2.
Hypertext Links
Hypertext is the essence of the Web!
A link is specified with the href (hypertext reference) attribute
of <a> (the anchor tag)
The content of <a> is the visual link in the document
<a href=“target.html”>This is a link</a>
Relative addressing of targets is easier to maintain and more
portable than absolute addressing
Targets within Documents
• If the target is not at the beginning of the document, the target
spot must be marked
• Target labels can be defined in many different tags with the id
attribute
<h1 id = "baskets"> Baskets </h1>
• The link to an id must be preceded by a pound sign (#)
▫ target is in the same document
<a href = "#baskets"> Baskets </a>
▫ target is in a different document
<a href = "myAd.html#baskets”> Baskets </a>
Image Hyperlinks
Links can include images in their content
<a href = “cit.html“>
<img src = “computer.jpg"
alt = “Picture of a sample Computer in Lab 4" />
Info on Lab 4 </a>
working with lists
Un ordered list
<ul></ul>
Example
This is an unordered list
• something red
• something blue
• something old
• something new
Add a list item
<body>
Today’s shopping list
<ul>
<li> Matooke</li>
<li> Sugar</li>
<li>Salt</li>
<li>Meat</li>
<li>Charcoal</li>
</ul>
</body>
Ordered list
<body>
What I want on my birthday
<ol>
<li>a big red truck </li>
<li>a real fast speedboat </li>
<li>a drum set </li>
<li>a BB gun </li>
<li>a Melanie Griffith </li>
</ol></body>
Horizontal rule
<body>
<hr width=20%>
<hr width=50%>
<hr width=100%>
<hr width=20>
<hr width=50>
<hr width=100>
</body>
Screen resolution
The screen resolution is measured in pixels.
Most commonly used screen resolution are 640 pixels by
480 pixels, 800x600 and 1024x768 pixels.
Qn. What does this have to do with anything?
a. It has a lot to do with how your pages will look to them.
Screen resolution
It is a very good idea to check your page at other
resolutions. Your carefully crafted layout might fall apart
at other resolutions. Especially if you design your page at
a higher resolution.
View your creation at a lower resolution and you might
be surprised.
Tables and Forms
Working with Tables
Chapter objective
Have a clear understanding of different table tags and attributes like;
Colspan
Rowspan
Cellpadding
Cellspacing
Border
align
<table>
<tr>
<td>
<th>
The three major tags
<TABLE>
The main tag. Used to tell the browser "this is a table",
along with some attributes like size, border width and a
few other things.
<TR>
TableRow defines a horizontal row of <TD> (TableData)
cells.
<TD>
Specifies an indiviual block or cell in a table row.
table
A table is made up of rows which in turn are made up of
cells...
A cell is an intersection of a row and column.
tables help will help you make quality html documents
and so you need to learn all the tags.
Example 1
<html><head><title></title></head>
<body>
<table>
<tr>
<td>Bricks</td>
</tr>
</table>
</body>
</html>
...which gives us this:
Bricks
Example 2
<html><head><title></title></head>
<body>
<table border=1>
<tr><td>Bricks</td>
</tr>
</table> </body>
</html>
border
Example
<html><head><title></title></head>
<body>
<table border=“25”>
<tr>
<td>Bricks</td>
</tr>
</table></body>
</html>
Table size
When no sizes are specified the table is only as big as it needs to
be.
<html><head><title></title></head>
<body>
<table border=3>
<tr>
<td>Bricks, sand and water</td>
</tr></table>
</body>
</html>
Table width
<html><head><title></title></head>
<body>
<table border=“3” width=“50”>
<tr>
<td>Bricks</td>
</tr>
</table></body>
</html>
Working with table height
<html><head><title></title></head>
<body>
<table border=“3” width=“100” height=“75”>
<tr>
<td>Bricks</td>
</tr>
</table>
</body>
</html>
Aligning cell data
Use is be made of the align attribute.
<table border=“3” width=“100” height=“75”>
<tr>
<td align="center">Bricks</td>
<td align="right"> Sand </td>
<td align="left"> Water </td>
</tr>
</table>
Default value
The default value is (usually) align="left".
The default value is the value that the browser assumes if
you have not told it otherwise.
valign="middle“ is the default value as far as vertical
appearance of data in a cell is concerned.
Vertical appearance of data in a cell
example.
<table border=“3” width=“100” height=“75”>
<tr>
<td align="left" valign="top"> Bricks </td>
<td align="left" valign="bottom">Sand</td>
<td align="left" valign="middle">Water</td>
</tr>
</table>
Working with images in a table
example
<table border=“3” width=“100” height=“75”>
<tr>
<td align="left" valign="middle">
<img src=”ball.gif" width=“32” height=“32” alt=”ball”/>
</td>
</tr>
</table>
Specifying cell size
When no instructions are given to the browser, each cell
may (but not always) be different in size.
It's often a fine idea to specify how big each cell is.
Make sure your arithmetic is correct or what people see
may be drastically different than what you want them to
see!
Example
<table border=“3” width=“300” height=“75”>
<tr><td width=“150”>Bricks</td><td
width=“150”>Sand</td>
</tr></table>
These WIDTH attributes can also be expressed as a
percentage.
<table border=“3” width=“300” height=“75”>
<tr><td width=“50%”>Bricks</td><td
width=“50%”>Sand</td>
</tr></table>
Creating a table with an empty cell
<table border=“3” width=“300” height=“75” >
<tr>
<td width=“60%”>Bricks</td>
<td width=“20%”>Sand</td>
<td width=“20%”>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td> </td>
</tr>
</table>
CELLPADDING and CELLSPACING
CELLPADDING and CELLSPACING attributes are used
up front in the <TABLE> tag.
CELLPADDING is the amount of space between the
border of the cell and the contents of the cell.
CELLPADDING and CELLSPACING
By default, table cells tend to be squeezed close to each
other. To give your table cells a little more breathing room,
use CELLPADDING and CELLSPACING.
CELLSPACING controls the space between table cells.
Although there is no official default, browsers usually use a
default of 2.
CELLPADDING sets the amount of space between the
contents of the cell and the cell wall. The default is 1.
CELLPADDING is usually more effective than
CELLSPACING for spreading out the contents of the table.
CELLPADDING
CELLSPACING
example
<table border=“3” cellpadding=“12”>
<tr>
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td>Hoes</td>
</tr>
</table>
Example
<table border=“3” cellspacing=“12”>
<tr>
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr>
<td>Cement</td>
<td>Timber</td>
<td>Hoe</td>
</tr>
</table>
question
1. I've laid out my table with my dimensions but the table
doesn't show up right. Or it's fine in Browser A but looks
different in Browser B.
combining table attributes
<table border=“3” cellspacing=“12” cellpadding=“12”>
<tr>
<td>Bricks</td><td>Sand</td><td>Water</td>
</tr>
<tr>
<td>Cement</td><td>Timber</td><td>Hoe</td>
</tr>
</table>
Specifying colors
A cool feature of the newer browsers is the ability to
specify background colors for a table cell, row or the
whole table.
Use is be made of the bgcolor attribute as used in the
<body> tag.
Example 1
<table border=“3” bgcolor="#ffcc66">
<tr>
<td>Bricks</td><td>Sand</td><td>Water</td>
</tr>
<tr><td>Cement</td><td>Timber</td><td>Hoe</td>
</tr>
</table>
Example 2
<table border=“3”>
<tr bgcolor="#ff9999">
<td>Bricks</td>
<td>Sand</td>
<td>Water</td>
</tr>
<tr bgcolor="#99cccc">
<td>Cement</td>
<td>Timber</td>
<td>Hoe</td>
</tr>
</table>
Example 3
<table border=“3”>
<tr bgcolor="#ffccff">
<td>Bricks</td>
<td>Sand</td><td>Water</td>
</tr>
<tr>
<td bgcolor="#ff0000">Cement</td>
<td>Timber</td>
<td bgcolor="#3366ff">Hoe</td>
</tr>
</table>
colspan and rowspan
COLSPAN (Column Span) and ROWSPAN
(Row Span
example
<tr><td colspan=2>ed</td>
<td>rick</td></tr>
<tr>
<td>larry</td><td>curly</td><td>moe</
td>
</tr>
Combining attributes
<table border=3>
<tr><td colspan=3 align="center">
<b>ed</b></td>
</tr>
<tr><td>larry</td><td>curly</td>
<td>moe</td>
</tr>
</table>
We can make
<table border=3>
cell data a link
<tr>
<td colspan=3 align="center">
<a href="http://junior.apk.net/~jbarta/">ed</a>
</td>
</tr>
<tr>
<td>larry</td><td>curly</td><td>moe</td>
</tr>
</table>
Rowspan attribute
<table border=3>
<tr>
<td rowspan=2>ed</td>
<td>tom</td><td>rick</td>
</tr>
<tr><td>curly</td><td>moe</td>
</tr>
</table>
We can use these attributes in
combination.
<table border=3>
<tr>
<td rowspan=2>ed</td>
<td colspan=2>tom</td>
</tr>
<tr><td>curly</td><td>moe</td>
</tr>
</table>
Tables and lists
<table border=3>
<tr>
<td>ingredients for apple pie
<ul>
<li>apples
<li>flour
<li>sugar
<li>cinnamon</ul>
</td>
</tr>
</table>
Nested tables
<table border=3 width=200 height=100>
<tr>
<td>
<table border=3>
<td<tr>
>ed</td>
</tr>
</table>
</td>
</tr>
</table>
Centering a table
<center>
<table border=3 width=200 height=100>
<tr>
<td>
<table border=3>
<tr><td>ed</td>
</tr>
</table> </td>
</tr>
</table>
</center>
Working with Forms
Adding interactivity to web
documents
FORM TAG
The basic construction of a html form is this...
<FORM> begin a form
<INPUT> ask for information in one of several different
ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
Type in your form tags in the body.
<html><head>
<title> Introduction to forms</title>
</head><body>
<form></form>
</body>
<html>
Basic input type is TEXT
<FORM>
<INPUT TYPE="text">
</FORM>
Every input needs a NAME.
<FORM>
We can if we want, type in a NAME AND VALUE.
<FORM>
<INPUT TYPE="text"
NAME="ADDRESS" VALUE=”Makerere">
</FORM>
Adding SIZE
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=10>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=20>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="
Makerere " SIZE=30>
</FORM>
Password fields
Very similar to the TYPE=TEXT is the
TYPE=PASSWORD.
It is exactly the same, except it displays *** instead of the
actual input. The browser will send you the input, it just
won't display it.
<FORM><INPUT TYPE="password"></FORM>
Remember that each <INPUT> must have a NAME.
<FORM><INPUT TYPE="password"
NAME="USERPASS"></FORM>
Radio buttons
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>
Radio buttons allow the user to choose one of
several options.
Inserting breaks
<FORM> <INPUT TYPE="radio" NAME="BEST
FRIEND">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>
Including Values
Each of the Radio Buttons must be assigned a VALUE.
<form>
<input type="radio" name="best friend" value=“Hamidah">
<br>
<input type="radio" name="best friend" value=” Hanifah">
<br>
<input type="radio" name="best friend" value=“Hibah">
</form>
Now label each button.
<form>
<input type="radio" name="best friend"
value=“Hamidah">Hamidah Babirye
<br>
<input type="radio" name="best friend"
value=”Hanifah">Hanifah Nakato
<br>
<input type="radio" name="best friend"
value=“Hibah">Hibah Kizza
</form>
Working with Checkboxes
<form>
<input type="checkbox" name=“Hamidah">
<br><input type="checkbox" name=”Hanifah">
<br><input type="checkbox" name=“Hibah">
<br><input type="checkbox" name=“Drake">
</form>
give each check box a different NAME
Each Check Box gets the same VALUE.
<form>
<input type="checkbox" name=“Hamidah"
value="yes">
<br>
<input type="checkbox" name=”Hanifah" value="yes">
<br>
<input type="checkbox" name=“Hibah" value="yes">
<br>
<input type="checkbox" name=“Drake" value="yes">
</form>
OK, let's label each box.
<form>
<input type="checkbox" name=“Hamidah Babirye
<br>
<input type="checkbox" name=”Hanifah"
value="yes">Hanifah Nakato
<br>
<input type="checkbox" name=“Hibah" value="yes">
Hibah Kizza
<br>
<input type="checkbox" name=“Drake"
value="yes">Drake Kiyingi
</form>
Summary
For Check Boxes the NAME changes
and the VALUE stays the same and
with Radio Buttons, the VALUE changes
but the NAME stays the same
