Chapter 2 Web Programming Best

Internet Programming Chapter Two HTML and CSS
Chapter Two
2.1.Hypertext Mark-up Language (HTML)

There are a number of tools and languages that are used to write web pages.
This hand-out provides an overview of these. We will be using some of these tools during this
course.
Mark-up Languages
There are many mark-up languages around and in use. For now, those that we are interested in
are HTML and XML.
Mark-up means anything that is added to a document to add special meaning or provide extra
information about it.
Mark-up languages can be classified as one of these four types:
 Stylistic – indicating how the document should be presented e.g. adding bold or italics.
HTML has tags e.g.<font>, <b> and <i> for stylistic mark-up - we'll see more of these
when we start working with HTML.
 Structural – indicating how the document should be structured. In HTML, examples are
<h1>, <h2> etc, <p> and <div>.
 Semantic – informing about the content of the data. In HTML, <title> is an example of
this.
 Functional – adds functionality to the marked-up data, e.g. hyperlinks in HTML,
embedded sound files etc.
The main language used for writing web pages is HTML.
 HTML tells a browser what text and images to display and how to format the text e.g.
show it in bold or italics or to show it in a particular colour.
 A HTML file is just a text file – so you can start writing HTML in a simple editor like
Windows Notepad.
 The HTML language is defined as a set of tags that are used to surround the text that will
appear on the web page or to precede a piece of text. For example, the tag that denotes
the start of a web page is <html>.
 Most tags in HTML have a start tag and an end tag. The start tag looks like <html> and
the end tag looks like </html>.
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like
FrontPage, Dreamweaver, Claris Home Page, or Adobe PageMill instead of writing your mark-
up tags in a plain text file. But
 If you want to design professional web pages using these tools will not be enough. You
must be familiar with html codes.
 Results of these editors are big and sometimes chaotic code. Maintaining this code is
very difficult.
 If you want to design dynamic web pages in future you will need to know html codes.
Page 1 of 49 KMU Compiled by:-Samuel A.
 If you need forms in your pages to send information to server and return result pages
back to browser you will need to know html codes.
.
2.1.1.Tags, Elements and Attributes of the tags
HTML is basically a series of markup tags that identify the elements and content of a
web page.As we have already seen, a tag name is enclosed in angle brackets (<>) and most tags
are a pair – a starting tag and an end tag. The end tag includes a forward slash (/) after the
opening angle bracket (<). So, for example, the tag that denotes the beginning and end of a web
page is:
<HTML>
</HTML>
Tags are not case-sensitive i.e. <html> and <hTmL> are the same as <HTML>.
 However, it is good practice to be consistent i.e. to always use either upper case (<HTML>)
or lower case (<html>) as this makes the HTML more readable.
 It is also good practice to use white space and indentation, as again, this makes the HTML
more readable. Indentation is especially useful for showing tags that are nested inside other
tags – we will see nested tags later.
Examples of tags are <b>, </b> and <p> (for a paragraph break).
An element is the content between the opening and closing tags.

So, for example, the line below is an element (this is HTML that would show the given text in
bold):
<b>Ethiopia has 13 months of sunshine</b>
Tags can also contain one or more attributes that modify what the tag does. An attribute is a
name-value pair inside the opening tag. Attributes can provide additional information about the
HTML elements on your page. This tag defines the body element of your HTML page: <body>.
With an added bgcolor attribute, you can tell the browser that the background color of your page
should be red, like this: <body bgcolor="red">. For example, the tag that denotes a paragraph
is <P>. To centre a paragraph on the web page, you can specify the align attribute with a value of
„center‟:
<P align=center>This is a centred paragraph of text.</P>
Note: the „center‟ attribute value is the American spelling for „centre‟. The non-American
spelling will not work. This also applies when using colour attributes – the spelling is „color‟.

2.1.2.Basic HTML codes

All web pages must contain a basic set of tags that tell the web browser that the page is a HTML
document. They also mark the main sections of the web page.
These are shown in the HTML below.
To create this web page, type this HTML into a new Notepad/Wordpad document, and make
sure to save it as .html (you may need to change the File Type from .txt to All Files when you are
saving).
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META NAME=”keywords” CONTENT=”Kotebe Metropolitan University, Ethiopia,

KMU, education”>
<META NAME=”description” CONTENT=” Kotebe Metropolitan is one of the
university located in Addis Ababa, Ethiopia”>
<TITLE>My Website – first page</TITLE>
</HEAD>
<BODY>
<P>This is the body of the web page.</P>
</BODY>
</HTML>

Descriptions of these tags

Tag Description
<DOCTYPE> This tag is called a prologue identifier. It does not have to be on
a web page and is often omitted. It indicates that the document
uses the specified HTML version (in this case, version 4.0,
which is the current version)
<HTML> This tag denotes the beginning and end of the web page
</HTML>
<HEAD> This tag marks the header section of the page – it contains the
</HEAD> page title and other information about the document
<META> meta tags must be contained within the HEAD tags and are used
to provide information about the page that cannot be defined by
any other tags. Such information can be extracted by web servers
and clients for identifying, indexing and cataloguing documents.
One of the uses of the META tag is to give search engines
(like Google, Yahoo) information about the web page. The tags
in the code above would mean that if someone searched for any
of the „keywords‟ (Kotebe Metropolitan, university, Ethiopia,
KMU, education) in a search engine, this page would be found.
The search engine would show the text for the „description‟ on
the listing of found pages.
Some search engines actively search the web for information –
these will pick up the information from the Meta tags. Others
allow you to submit information about your web site to them –
for example, Yahoo provides a section to suggest a web site.
There is also a web site called Submit I! (www.submit-it.com)
that allows you to submit your web site to multiple search
engines.
<TITLE> The title tag is used to specify a title for the page. This title will
</TITLE> display in the browser‟s title bar when the web page is displayed
in a browser. The title should be consistent across all the pages
in a web site – so that as a user can see in the title bar and the
Windows task bar what site they are on. The title should also
indicate what part of the site the page is in e.g. „Kotebe
Metropolitan University – Departments‟
<BODY> the body section is the part of the page that a user will see in a browser
</BODY> – it contains all the text, images etc that make up the page content,
along with HTML tags to format the text. It can also be used to specify
attributes that affect the whole page e.g. the background colour

Attributes of Body tag

The attributes you can set for the page in the BODY tag are as follows:
You can set page-level properties in the BODY tag. Some of these are listed in the table below.
Attribute Description & Sample values
BACKGROUND Background image – the specified image will be tiled across
the page. If you do not want the image to tile, you can try to
size the image (using a graphics package such as PhotoShop)
so that it fills one page
e.g. <BODY background=”bgImage.gif”>
BGCOLOR Background colour – colours in HTML can be specified by
name – but the name must be one of the set of reserved names
(red, blue, green etc – see the HTMLib Reference for a full
list - navigate to the section about the BODY tag, then find
the section about BGCOLOR).
Alternatively, a colour can be specified by a value. The value
uses a combination of three pairs of hexadecimal numbers.
Each pair represents the amount of red, green and blue in the
colour. The value must be preceded by a #. For example,
black is #000000, white is #ffffff.
See section Error! Reference source not found. (below) about
Using Colours in Web Pages for more information.
e.g. <BODY bgcolor=”red”>
or <BODY bgcolor=”#
TEXT Text colour – specifies the colour for all text that does not
have a colour specified otherwise.
e.g. <BODY text=”green”>
LINK, VLINK, Link colours – the colours for links, visited links and active
ALINK (ALINK links can be specified (a link is active while it is being clicked
only applies on on – this colour will only apply on Netscape browsers)
Netscape browsers) <BODY link="red" vlink="green" alink="blue">
TOPMARGIN, Setting the margins – the left, right, top and bottom margins
LEFTMARGIN, of the page can be specified, in pixels; the margins are
RIGHTMARGIN, relative to the sides of the browser window. It is usual to set
BOTTOMMARGIN the top and left margins so that the page does not appear to be
flush with the top left corner of the browser
<BODY topmargin="30" bottommargin="30"
leftmargin="30" rightmargin="30">

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
Example
<h1>This is a heading</h1>
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search
engines use your headings to index the structure and content of your web pages. Since users may
skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then less important H3
headings, and so on.
Examples
This example demonstrates the tags that display headings in an HTML document.
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Paragraphs
Paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
The ALIGN attribute can be used to position the paragraph – possible values are center, right,
left.
e.g. <P ALIGN="left">
HTML Rules (Lines)

The <hr /> tag is used to create a horizontal rule (line) or it provides a line to divide sections of
text – normally displays as a horizontal line.
Example
<hr />
<hr />
This example demonstrates how to insert a horizontal rule.

<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<hr />
<hr />
</body>
</html>
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
Attributes of <HR> tag
 SIZE: height or thickness of the line, specifies the number of pixels
 WIDTH: number of pixels for the width (length across the page) of the line; or can specify a
% of the total page width e.g. "50%"; default is 100% or the entire page width.
 ALIGN: left, right or center
 COLOR: specify the colour of the line - a colour name or HTML colour value
e.g. <HR size="10" width="80%" align="center" color="#FF0000">
HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br />a para<br />graph with line breaks</p>
The <br /> element is an empty HTML element. It has no end tag.
<br> or <br />

In XHTML, XML, and future versions of HTML, HTML elements with no end tag (closing tag)
are not allowed. Even if <br> works in all browsers, writing <br /> instead is more future proof.
HTML Comments
Comments can be inserted in the HTML code to make it more readable and understandable.
Comments are ignored by the browser and are not displayed.
Comments are written like this:
Example

This example demonstrates how to insert a hidden comment in the HTML source code.
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
This is a regular paragraph
2.1.3.Advanced HTML Codes

HTML Text Formatting
HTML defines a lot of elements for formatting output, like bold or italic text.
<B></B>: Bold - The text between the tags displays as bold

<U></U>: Underline - The text between the tags is underlined
<I></I>: Italics - The text between the tags is italicize
<FONT></FONT>: Use to change the font size, colour and face (family) of the text
between the tags, using these attributes:
 SIZE: a value from 1 to 7; can also specify +/- value to change the size relative to the
base font of the web page e.g. <FONT SIZE=4>changes to size 4</FONT> or
<FONT SIZE=+2>changes the size to the base font size plus 2 e.g. to 5 if the default
base font is used.
 COLOR: change the colour of the font (see section Error! Reference source not
found. about Using Colours)
 FACE: set the font family e.g. Arial, Verdana. More than one face should be
specified – as if the first one is not installed on the client PC, then the second one will
be used and so on e.g. <FONT FACE="Verdana,Arial" COLOR ="red"> - if the PC
has Verdana installed, it will be used, otherwise Arial will be used.
Note: Verdana and Arial are commonly used fonts on web pages, as they are very
readable and look good. Fonts that look good on Word documents are not necessarily the
best to use for web pages.
<CENTER></CENTER>: Causes all the lines of text between the tags to be centered
on the page.
<sup></sup>: defines a super scripted text. For example X2, X<sup>2</sup>.
<sub></sub>: defines a subscripted text. For example H2O, H<sub>2</sub>O
<MARQUEE></MARQUEE>: Causes the text between the tags to scroll across the
screen. Attributes that can be used are:
 ALIGN: specifies how the text around the Marquee should align with the
Marquee; values are left, right, top, middle, bottom
 BEHAVIOR: specifies how the text moves across the screen – the default,
scroll, causes the text to start at one side of the window, scroll all the way
across and off the screen, then start again; slide causes the text to stop when it
reaches the second side of the window; alternate causes the text to bounce
from side to side.
 BGCOLOR: specifies a background colour for the Marquee (as per other
colour attributes).
 DIRECTION="LEFT"|"RIGHT" |"UP"|"DOWN": indicates the
direction marquee text will move. "LEFT" (the default) causes marquee text
to move from right to left on the screen.
"RIGHT" causes marquee text to move from left to right on the screen. UP
and DOWN do the same as their name implies.

 WIDTH="W": defines the horizontal width “W” of a marquee on a

page. “W” can be expressed as a percentage “W%” (of the total width of the
page) or simply as a whole number without the percent (indicating the number
of pixels wide). By default, the width of a marquee is equal to the width of a
page.
 HEIGHT="H": defines the vertical height “H” of a marquee on a page. “H”
can be expressed as a percentage “H%” (of the total height of the page) or
simply as a whole number without the percent (indicating the number of
pixels high). By default, the height of a marquee is equal to the height of the
tallest text in the marquee, plus a small space of 1 to 5 pixels above and below
the text.
Note: this tag only works on Internet Explorer browsers. A similar effect can be achieved
on Netscape browsers using a Java Applet or client-side JavaScript.
Other Text Formatting Tags

Tag Description
<big> Defines big text
<em> Defines emphasized text
<small> Defines small text
<strong> Defines strong text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be
used in the text. To display a less than sign (<) in HTML, we have to use a character entity.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the
start of an HTML tag. If we want the browser to actually display these characters we must insert
character entities in the HTML source.
A character entity has three parts:

 an ampersand (&),
 an entity name or a # and
 an entity number, and
 Finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will
remove 9 of them. To add spaces to your text, use the character entity.
The Most Common Character Entities:

Result Description Entity Name Entity Number
non-breaking space
< less than < <
> greater than > >
& Ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Some Other Commonly Used Character Entities:

Result Description Entity Name Entity Number
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
§ Section § §
© Copyright © ©
® registered trademark ® ®
× Multiplication × ×
÷ Division ÷ ÷

HTML Lists
HTML supports ordered, unordered and definition lists.
<OL></OL>: Ordered List – used to display a list of items, where the items are numbered in
sequence.
Each item in the list should be preceded by an <LI> tag (it does not need a closing tag).
The following attributes can be specified:
TYPE: to specify what numbering system is used – possible values are:
 (TYPE=A) -capital letters. e.g. A, B, C ...
 (TYPE=a) - small letters. e.g. a, b, c ...
 (TYPE=I) - large roman numerals. e.g. I, II, III ...
 (TYPE=i) - small roman numerals. e.g. i, ii, iii ...
 (TYPE=1) - the default numbers. e.g. 1, 2, 3 ...
 START: to specify if the list should start at a value other than 1
e.g.
<OL TYPE=1 START=3>
<LI>this is the first list item text
</OL>
<UL></UL>: Unordered List – used to display a list of items; the items are usually bulleted (not
numbered); and separated by white space. Each item in the list should be preceded by an <LI>
tag.
An Unordered List can be nested inside another Unordered List. It uses type attribute and the
possible values are circle, square and disc.
<LI>: List Item - used to denote an item in an Ordered List or an Unordered List. The <LI>
should appear immediately after the opening <OL> or <UL> tag.
Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a description of each
item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.
2.1.4.Hypertext links
In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can
point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An
anchor is a term used to define a hyperlink destination inside a document.
The HTML anchor element <a>, is used to define both hyperlinks and anchors. We will use
the term HTML link when the <a> element points to a resource, and the term HTML anchor
when the <a> elements defines an address inside a document..
An HTML Link
Link Tags
Tag Description
<a> Defines an anchor
Link syntax:
<a href="url">Link text</a>
The start tag contains attributes about the link. The element content (Link text) defines the part to
be displayed.
Note: The element content doesn't have to be text. You can link from an image or any other
HTML element.
The href Attribute
The href attribute defines the link "address".This <a> element defines a link to KMU:

<a href="http://www.KMU.edu.et/">Visit KMU</a>
The code above will display like this in a browser:
Visit KMU!
The target Attribute
The target attribute defines where the linked document will be opened. The code below
will open the document in a new browser window:
Example
<a href="http://www.kmu.edu.et/"
target="_blank">Visit KMU</a>
The name Attribute

When the name attribute is used, the <a> element defines a named anchor inside a HTML
document. Named anchor are not displayed in any special way. They are invisible to the
reader.
Named anchor syntax:
<a name="label">Any content</a>
The link syntax to a named anchor:
<a href="#label">Any content</a>
The # in the href attribute defines a link to a named anchor.
Example:
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>

A link to the Useful Tips Section from the same document:
<a href="#tips">
Jump to the Useful Tips Section</a>
A link to the Useful Tips Section from another document:
<a href="http://www.w3schools.com/html_tutorial.htm#tips">
Jump to the Useful Tips Section</a>
2.1.5.Graphical links
An image can be used as a hyperlink by surrounding it with the Anchor tag. For example, to link
the image of the CS to the intranet on KMU-server:
<A HREF="//kmu-server">
<IMG SRC="images/KMU_Faculty_Technology.jpg" WIDTH=500 HEIGHT=375
ALT="Kotebe Metropolitan University FBE" BORDER=0></A>
The border attribute is useful when an image is hyperlinked. If the border attribute is not set to 0,
or is not specified at all, the image will have a blue line around it, to indicate a hyperlink. Often,
it is preferable not to have the blue line, so the border attribute should be set to a value of 0.
2.1.6.E-mail links
Using html it is also possible to create E-mail links.
How to create an email link?
To create an e-mail link on your page, all you need to do is use the standard link tag. The trick is
in what you use as the address of the link. To force the browser to read it as an e-mail link, you
use "mailto:" rather than "http://" to begin the address. After the "mailto:", you will use your e-
mail address rather than a Web address, like this:
<a href="mailto:your_email_address">E-mail Me!</a>

Yes, all you need to do is replace the your_email_address with your e-mail address. Here is an
example, to create an email link to myself, I might place something like john@pageresource.com
in that space, like this:
<a href="mailto:john@pageresource.com">Give me some mail!</a>
Here is the resulting link:
Give me some mail!

If you click on the link, your browser will bring up a window for you to send an e-mail, with the
e-mail address already filled in.
You can also create the subject of the message so the viewer doesn't have to fill in something in
the subject line. You do this by adding a "?" at the end of your e-mail address and then your
subject, like this:
<a href="mailto:john@pageresource.com?subject=Hey John">Mail Me!</a>
The example link is below, notice that when you click it, the subject field of your email message
is already filled in with "Hey John".
2.1.7.Tables
There is a set of HTML tags that can be used to define tables on web pages.
Tables are a very useful way to control the layout of your pages. Various attributes can be used
to define the size and colour of the table.
Tag Attributes Description
<TABLE> This tag denotes the beginning and end of a table definition
</TABLE>
ALIGN "left", "right" or "center" – alignment on the page
BACKGROUND URL of an image to use as the table background - image is tiled

across all the table cells (can also put in a TD or TH element – see
below). Works on Internet Explorer & Netscape browsers but may not
work on others.
BGCOLOR
Background colour for the whole table
BORDER
The size of the border around the whole table. BORDER="0" means
that the table will have no border; BORDER="1' means the border will
be size 1, and so on. The thickness and style of the border varies
between different browsers.
BORDERCOLOR The border is drawn around all cells in the table – not just around the
outside of the table.
Colour of the border (if the border is present i.e. BORDER attribute
has a value greater than 0) – a named colour or an RGB hex value e.g.
BORDER = "1" BORDERCOLOR ="red"
BORDERCOLORLIGHT Or
BORDERCOLORDARK BORDER = "1" BORDERCOLOR ="#ff0000"
These two attributes can be used to specify a light and a darker colour
to use in the border (if the border is present) - this gives the border a 3-


CELLSPACING D effect e.g.
BORDER = "1" BORDERCOLORLIGHT="#ff0000"
BORDERCOLORDARK ="#ff6699"
CELLPADDING
The amount of space, in pixels, between cells in the table. The default
is 2 if it is not specified.
COLS
The amount of space, in pixels, between the borders of a cell and the
actual cell content/data. The default is 1 if it is not specified.
The number of columns in the table. This does not have to be

HEIGHT specified, but if it is, it may help the browser to display the table faster
(because the browser can know in advance how many columns are
going to be displayed). However, this may not have any effect on some
WIDTH browsers.
The height of the table in pixels or as a percentage of the browser

window size e.g.
HEIGHT="800" or HEIGHT="60%"
The width of the table in pixels or as a percentage of the browser

window size e.g.
WIDTH="640" or WIDTH="100%"
<TR> Identifies the start and end of a row in the table.

</TR> Must be contained inside a table i.e. in between the <TABLE> and
</TABLE> tags.
There should be a <TR> and </TR> tag for every row in the table.
ALIGN
Alignment of the text in the cells in this row – to the LEFT, CENTER
or RIGHT of the cells
VALIGN
Vertical alignment of the text in the cells – to the TOP, MIDDLE or
BOTTOM of the cells. Another possible value is BASELINE – this
specifies that all the text in the row should be vertically aligned to the
BACKGROUND same baseline. If this is not specified, text is aligned to the centre of
BGCOLOR the cells by default.
BORDERCOLOR All as described for the TABLE tag.
BORDERCOLORLIGHT
BORDERCOLORDARK
HEIGHT


<TD> Identifies the start and end of a data cell in a row in the table. A
</TD> <TD></TD> must be contained in side a table row. A row can have
multiple data cells; each row in the table should normally have the
same number of cells. E.g. <TR><TD>this is one cell</TD></TR>
ALIGN Alignment of the text in this cell – to the LEFT, CENTER or RIGHT
of the cell.
VALIGN
Vertical alignment of the text in the cell – to the TOP, MIDDLE or
BOTTOM of the cell. Another possible value is BASELINE – this
specifies that all the text in the row should be vertically aligned to the
same baseline. If this is not specified, text is aligned to the centre of
ROWSPAN the cell by default.
A cell can span a number of rows – the default is

to span one row only. Setting a value for this attribute causes the cell
to span that number of rows e.g. <TD ROWSPAN=2>. If a cell spans
COLSPAN more than one row, the <td></td> in the spanned rows should be
omitted.
A cell can span a number of columns – the default is to span one

column only. Setting a value for this attribute causes the cell to span
NOWRAP that number of columns e.g. <TD COLSPAN=2>. If a cell spans more
than one column, the <td></td> tags for the subsequent, included cells
should be omitted.
BACKGROUND If nowrap is specifed in a <td> tag, it means that any text display in the
BGCOLOR cell will not be wrapped i.e. it will not go onto the next line. This can
BORDERCOLOR force the width of the cell to be big enough to accommodate all the
BORDERCOLORLIGHT text in it.
BORDERCOLORDARK
HEIGHT All as described for the TABLE tag.

2.1.8.Image maps
Graphics or images can be placed on a web page (as well as using them as the page or table
background). The tag to do this is the <IMG> (IMaGe) tag.
The basic syntax for this tag is:
<IMG SRC=image_URL WIDTH=x HEIGHT=y BORDER=z ALT="alternative text">
For example, to insert an image of the Faculty of Natural and Computational Science :
<IMG SRC="images/KMU.jpg" WIDTH=500 HEIGHT=375 ALT="Kotebe Metropolitan
University FCS" BORDER=0>
The tag does not require a closing tag. The attributes are as follows:
 SRC - The image_URL is the full web path to the image. If the image is in the same
website as the page on which it is being displayed, then the relative path can be used (see
section Error! Reference source not found., about the Anchor tag, for more information).
 WIDTH - x is the width, in pixels, of the image
 HEIGHT - y is the height, in pixels, of the image
(to find the width and height of an image – if you are using Windows XP or 2000, if you
point the mouse at the file and hover, the image dimensions, in pixels, are displayed).
The width and height of the image do not have to be specified, however, it is preferable
to specify them. This is because many browsers will use this information to set aside the
space required for the image, and then continue to display the text around the image
while the graphic is downloading. This is useful because images can take longer than text
to download over the internet.
In addition, if the image URL is not found or if the user has turned off the downloading
of images in the browser, the space that would be occupied by the image is marked on the
page. Specifying the height and width mean that the page will still display as desired by
the author.
 ALT – This is a short piece of text that describes the image. If the user has turned off the
downloading of images or if the image URL cannot be found, many browsers will display
the ALT text in place of the images. This text will also be displayed to the user when the
mouse is pointed at the image.
 BORDER – specifies the thickness of the border around the image. A value of 0 means
no border. Values of 1,2 etc. increase the border thickness.

HTML Image Maps

Image maps are images with clickable areas (sometimes referred to as "hotspots") that
usually link to another page. If used tastefully, image maps can be really effective. If not,
they can potentially confuse users.
To create an image map:

First, you need an image. Create an image using the usual method (i.e. via an image editor,
then save as a gif or jpeg into your website's image folder).
Use the HTML map tag to create a map with a name. Inside this tag, you will specify where
the clickable areas are with the HTML area tag
Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute to
define which image map to use (the one we just specified).
Image Map Example
HTML Code:
<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />
<map id ="muellermap" name="muellermap">

<area shape ="rect" coords ="90,80,120,151" href ="javascript:alert('Me');" alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href =http://en.wikipedia.org/wiki/Mount_Cook alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="http://www.natural-environment.com/places/mueller_hut.php" alt="Mueller Hut"
/>
</map>
HTML Sound and video

Placing a video on your web site is a great way to attract your visitor's attention. It also makes
your site much more interesting and entertaining for your visitors.
Adding Video
This tag allows you to insert a video clip into your web page. The starting tag is
<EMBED SRC="URL" WIDTH="XX" HEIGHT="XX" AUTOSTART="VALUE"> and the
closing tag is </EMBED>. Nothing goes between the two tags.
URL is replaced with the internet address of the video file. The two XX's are replaced with the
desired width and height of the movie and controls. VALUE is replaced with either
TRUE - Movie automatically starts

FALSE - Movie starts when play button is pushed
E.g. index.html - Notepad
....<BODY>

<EMBED SRC="video.avi" WIDTH="125" HEIGHT="150" AUTOSTART="FALSE">
</EMBED>
</BODY>....
OR
The <img> tag also helps you to connect video to your page the only thing to be changed from
the above is its attributes specially no use of “src” instead “dynsrc” <img dynsrc=
“yourfile.extension”>
<img dynsrc="avseq12.dat" width=100 height=100>
The following are its tags to be added while you use video files on your pages
1. Start = “ ” when to start playing the movie mouseover or fileopen can be included.
2. Dynsrc = “URL” play a movie file located on the URL.
3. LOOP =INFINITE |-1 |# of loops how many times to loop the movie
2.1.9.Forms
HTML Forms are used to select different kinds of user input.
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
Form Tags
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindex> Deprecated. Use <input> instead
<form>
.
input elements
.
</form>
Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute.
The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
How it looks in a browser:
First name:
Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field
is 20 characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Male
Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number
of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
I have a bike:
I have a car:
I have an airplane:

The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to the server. The
form's action attribute defines the name of the file to send the content to. The file defined in the
action attribute usually does something with the received input.
<form name="input" action="html_form_submit.asp" method="get">

Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_submit.asp". The page will show you the
received input.
This example demonstrates how to create check-boxes on an HTML page. A user can select or
unselect a checkbox.
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>
I have a bike:
I have a car:
I have an airplane:
This example demonstrates how to create radio-buttons on an HTML page.
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons with the
same name become unchecked
</p>
</body>
</html>
Male:
Female:
When a user clicks on a radio-button, the button becomes checked, and all other buttons with the
same name become unchecked
This example demonstrates how to create a simple drop-down box on an HTML page. A drop-
down box is a selectable list.
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Volvo
This example demonstrates how to create a text-area (a multi-line text input control). A user can
write text in the text-area. In a text-area you can write an unlimited number of characters.
This example cannot be edited because our editor uses a textarea for input,
and your browser does not allow a textarea inside a textarea.

The cat w as playing in the gard
This example demonstrates how to create a button. On the button you can define your own text.
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
This example demonstrates how to add a form to a page. The form contains two input fields and
a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
</body>
</html>
Mickey
Type your first name:
Mouse
Type your last name:
Submit
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.

2.1.10.Frames
With frames, you can display more than one Web page in the same browser window.
Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a no frame section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)
Examples
Vertical frameset
This example demonstrates how to make a vertical frameset with
three different documents.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Horizontal frameset
This example demonstrates how to make a horizontal frameset with three different documents.
html>
<frameset rows="25%,50%,25%">
<frame src="frame_c.htm">

</frameset>
</html>
(You can find more examples at the bottom of this page)
Frames
With frames, you can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
 The web developer must keep track of more HTML documents

 It is difficult to print the entire page
The Frameset Tag
 The <frameset> tag defines how to divide the window into frames
 Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the amount of screen area each row/column will
occupy
The Frame Tag
 The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of
the width of the browser window. The second column is set to 75% of the width of the browser
window. The HTML document "frame_a.htm" is put into the first column, and the HTML
document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
</frameset>
Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the
columns can be set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user
from doing this, you can add noresize="noresize" to the <frame> tag.
Add the <noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the <frameset></frameset>
tags! However, if you add a <noframes> tag containing some text for browsers that do not
support frames, you will have to enclose the text in <body></body> tags! See how it is done in
the first example below.
Navigation frame
This example demonstrates how to make a navigation frame. The navigation frame contains a list
of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three
links. The source code of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document

Cascading style sheets

What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file!
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly
brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a
later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
CSS Id and Class
The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors
called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Example
#para1
{
text-align:center;
color:red;
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {text-align:center;}

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
Example
p.center {text-align:center;}
Do NOT start a class name with a number! This is only supported in Internet Explorer.
CSS How To...

When a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is
shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.
Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>

<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3
will be:
color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
Multiple Styles Will Cascade into One

Styles can be specified:
 inside an HTML element
 inside the head section of an HTML page
 in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will
override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a
default value).
Note: If the link to the external style sheet is placed after the internal style sheet in HTML
<head>, the external style sheet will override the internal style sheet!
CSS Background
CSS background properties are used to define the background effects of
an element.
CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Background Color
The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
The background color can be specified by:

 name - a color name, like "red"

 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
In the example below, the h1, p, and div elements have different background colors:
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Below is an example of a bad combination of text and background image. The text is almost not
readable:
Example
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like
this:
Example
body
{
background-image:url('gradient2.png');
}
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;

Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the example above, the background image is shown in the same place as the text. We want to
change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
All CSS Background Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1
or CSS2).
Property Description Values CSS
background Sets all the background background-color 1
properties in one declaration background-image
background-repeat
background-attachment
background-position
inherit
background-attachment Sets whether a background scroll 1
image is fixed or scrolls with the fixed
rest of the page inherit
background-color Sets the background color of an color-rgb 1
element color-hex

color-name
transparent
inherit
background-image Sets the background image for url(URL) 1
an element none
inherit
background-position Sets the starting position of a left top 1
background image left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
background-repeat Sets if/how a background image repeat 1
will be repeated repeat-x
repeat-y
no-repeat
inherit
CSS Text
TEXT FORMATTING
This text is styled with some of the text formatting
properties. The heading uses the text -align, text-transform, and
color properties. The paragraph is indented, aligned, and the
space between characters is specified. The underline is removed
from the "Try it yourself" link.
Text Color
The color property is used to set the color of the text. The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.

Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and
the left and right margins are straight (like in magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
a {text-decoration:none;}
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
It is not recommended to underline text that is not a link, as this often confuses users.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px;}

All CSS Text Properties

or CSS2).
color Sets the color of a text color 1
ltr
direction Sets the text direction 2
rtl
normal
number
line-height Sets the distance between lines 1
length
%
normal
letter-spacing Increase or decrease the space between characters 1
length
left
right
text-align Aligns the text in an element 1
center
justify
none
underline
text-decoration Adds decoration to text overline 1
line-through
blink
length
text-indent Indents the first line of text in an element 1
%
none
text-shadow color
length
none
capitalize
text-transform Controls the letters in an element 1
uppercase
lowercase
normal
unicode-bidi embed 2
bidi-override
baseline
sub
super
top
text-top
vertical-align Sets the vertical alignment of an element 1
middle
bottom
text-bottom
length
%
normal
white-space Sets how white space inside an element is handled pre 1
nowrap
normal
word-spacing Increase or decrease the space between words 1
length
CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
CSS Font Families

In CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif Times New Roman Serif fonts have small lines at the ends on some
Georgia characters
Sans-serif Arial "Sans" means without - these fonts do not have
Verdana the lines at the ends of characters
Monospace Courier New All monospace characters have the same width
Lucida Console
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like
font-family: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example
p{font-family:"Times New Roman", Times, serif;}
For more commonly used font combinations, look at our Web Safe Font Combinations.
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font
size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
 Absolute size is useful when the physical size of the output is known
Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).
Set Font Size With Pixels

Setting the text size with pixels, gives you full control over the text size:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet
Explorer.
The text can be resized in all browsers using the zoom tool (however, this resizes the entire page,
not just the text).
Set Font Size With Em

To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default
size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
In the example above, the text size in em is the same as the previous example in pixels.
However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger than it
should when made larger, and smaller than it should when made smaller.
Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the body
element:
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Our code now works great! It shows the same text size in all browsers, and allows all browsers to
zoom or resize the text!
All CSS Font Properties
or CSS2).
font Sets all the font properties in one font-style 1
declaration font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-family Specifies the font family for text family-name 1
generic-family
inherit
font-size Specifies the font size of text xx-small 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style Specifies the font style for text normal 1
italic
oblique
inherit
font-variant Specifies whether or not a text should be normal 1
displayed in a small-caps font small-caps
inherit
font-weight Specifies the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit

CSS Links
Links can be styled in different ways.
Styling Links
Links can be style with any CSS property (e.g. color, font-family, background-color).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover
Common Link Styles

In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The background-color property specifies the background color for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
CSS Lists
The CSS list properties allow you to:

 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
List
In HTML, there are two types of lists:
 unordered lists - the list items are marked with bullets
 ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Some of the property values are for unordered lists, and some for ordered lists.
Values for Unordered Lists
Value Description
None No marker
Disc Default. The marker is a filled circle
Circle The marker is a circle
Square The marker is a square
Values for Ordered Lists
Value Description
Armenian The marker is traditional Armenian numbering
Decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
Georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)

upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
Note: No versions of Internet Explorer (including IE8) support the property values "decimal-
leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", or "georgian" UNLESS a
DOCTYPE is specified!
An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
The example above does not display equally in all browsers. IE and Opera will display the
image-marker a little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is
explained below.
Cross browser Solution

The following example displays the image-marker equally in all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Example explained:
 For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left
All CSS List Properties

or CSS2).
list-style Sets all the properties for a list in one list-style-type 1
declaration list-style-position
list-style-image
inherit
list-style-image Specifies an image as the list-item marker URL 1
none
inherit
list-style-position Specifies if the list-item markers should inside 1
appear inside or outside the content flow outside
inherit
list-style-type Specifies the type of list-item marker none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
CSS Tables
The look of an HTML table can be greatly improved with CSS:
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:

Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table, th,
and td elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height

Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to
50px:
Example
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
td
{
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td
{
height:50px;
vertical-align:bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding property on td
and th elements:
Example
td
{
padding:15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Chapter 2 Web Programming Best

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 Web Programming Best

Uploaded by

Copyright:

Available Formats

Internet Programming Chapter Two HTML and CSS

2.1.Hypertext Mark-up Language (HTML)

An element is the content between the opening and closing tags.

<P align=center>This is a centred paragraph of text.</P>

Page 2 of 49 KMU Compiled by:-Samuel A.

2.1.2.Basic HTML codes

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN">

<META NAME=”keywords” CONTENT=”Kotebe Metropolitan University, Ethiopia,

Page 3 of 49 KMU Compiled by:-Samuel A.

Descriptions of these tags

Page 4 of 49 KMU Compiled by:-Samuel A.

Attributes of Body tag

Page 5 of 49 KMU Compiled by:-Samuel A.

Headings Are Important

Page 6 of 49 KMU Compiled by:-Samuel A.

HTML Rules (Lines)

This example demonstrates how to insert a horizontal rule.

e.g. <HR size="10" width="80%" align="center" color="#FF0000">

HTML Line Breaks

<br> or <br />

2.1.3.Advanced HTML Codes

Page 8 of 49 KMU Compiled by:-Samuel A.

<U></U>: Underline - The text between the tags is underlined

<I></I>: Italics - The text between the tags is italicize

<sup></sup>: defines a super scripted text. For example X2, X<sup>2</sup>.

<sub></sub>: defines a subscripted text. For example H2O, H<sub>2</sub>O

Page 9 of 49 KMU Compiled by:-Samuel A.

 WIDTH="W": defines the horizontal width “W” of a marquee on a

Other Text Formatting Tags

HTML Character Entities

A character entity has three parts:

Page 10 of 49 KMU Compiled by:-Samuel A.

Note that the entities are case sensitive.

The most common character entity in HTML is the non-breaking space.

The Most Common Character Entities:

Some Other Commonly Used Character Entities:

Page 11 of 49 KMU Compiled by:-Samuel A.

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

Page 12 of 49 KMU Compiled by:-Samuel A.

Here is how it looks in a browser:

<a href="url">Link text</a>

The href Attribute

Page 13 of 49 KMU Compiled by:-Samuel A.

<a href="http://www.KMU.edu.et/">Visit KMU</a>

The code above will display like this in a browser:

The target Attribute

The name Attribute

Named anchor syntax:

<a name="label">Any content</a>

The link syntax to a named anchor:

<a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor.

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Page 14 of 49 KMU Compiled by:-Samuel A.

A link to the Useful Tips Section from the same document:

A link to the Useful Tips Section from another document:

<a href="mailto:your_email_address">E-mail Me!</a>

<a href="mailto:john@pageresource.com">Give me some mail!</a>

Here is the resulting link: