REPUBLIC OF TANZANIA

PRESIDENT’S OFFICE

PUBLIC SERVICE MANAGEMENT

TANZANIA PUBLIC SERVICE COLLEGE

TECHNICIAN CERTIFICATE IN INFORMATION AND

COMMUNICATION TECHNOLOGY (NTA LEVEL5)

TEACHING NOTES

MODULE TITLE: INTERNET AND WEB APPLICATION

MODULE CODE: IT 523

Table of Content

1
s
HTML Tags...........................................................................................................................................9
HTML Elements....................................................................................................................................9
HTML Element Syntax.........................................................................................................................9
Web Browsers......................................................................................................................................10
The head Element................................................................................................................................11
The title Element..................................................................................................................................11
HTML head Elements.........................................................................................................................12
HTML Versions...................................................................................................................................12
HTML Declaration..............................................................................................................................12
Common Declarations...........................................................................................................................12
HTML5..............................................................................................................................................13
HTML 4.01........................................................................................................................................13
XHTML 1.0.......................................................................................................................................13
HTML Line Breaks.............................................................................................................................14
HTML Lines............................................................................................................................................14
HTML Formatting Tags...........................................................................................................................15
html text formatting tags.......................................................................................................................15
HTML Comment Tags........................................................................................................................15
HTML Lists...........................................................................................................................................15
An ordered list:..................................................................................................................................16
An unordered list:..............................................................................................................................16
HTML Unordered Lists.........................................................................................................................16
HTML Ordered Lists.............................................................................................................................16
HTML Description Lists.....................................................................................................................16
HTML Colors......................................................................................................................................17
Color Values.........................................................................................................................................17
HTML Tables......................................................................................................................................17
The Input Element...............................................................................................................................25
Text Fields............................................................................................................................................26
Password Field.....................................................................................................................................26
Radio Buttons......................................................................................................................................26

2
 Checkboxes..........................................................................................................................................27
Submit Button......................................................................................................................................28
The Fieldset element............................................................................................................................29
Inline Styles..........................................................................................................................................32
Internal Style Sheet.............................................................................................................................33
External Style Sheet.............................................................................................................................33
html style tags summary.....................................................................................................................33
Deprecated Tags and Attributes.........................................................................................................34
1. CSS Selectors...............................................................................................................................34
i. The element Selector....................................................................................................................34
ii. The id Selector.............................................................................................................................34
iii. The class Selector.....................................................................................................................34
Grouping Selectors..............................................................................................................................35
CSS Background....................................................................................................................................35
i. Background Color.......................................................................................................................35
ii. Background Image.......................................................................................................................36
iii. Background Image - Repeat Horizontally or Vertically.......................................................36
iv. Background Image - Set position............................................................................................37
v. CSS3 the background-size Property...........................................................................................38
vi. CSS3 The background-origin Property.................................................................................38

3
 INTERNET AND WEB

INTERNET

Internet can be defined as the globally interconnection of computer networks.

The Internet is a global system of interconnected computer networks that use the standard
Internet protocol suite (TCP/IP) to link several billion devices worldwide.

It is a network of networks that consists of millions of private, public, academic, business, and
government networks, of local to global scope, that are linked by a broad array of electronic,
wireless, and optical networking technologies.

The Internet is also often referred to as the Net.

No one owns Internet, although several organizations in the world over collaborate in its
functioning and development. That is,it operates without a central governing body.

REGIONAL INTERNET REGISTRY (RIR)

A regional Internet registry (RIR) is an organization that manages the allocation and
registration of Internet number resources within a particular region of the world.

Internet number resources include IP addresses and autonomous system (AS) numbers.

Regional Internet Registry divides the world into five regions:

 Africa, delegated to AfriNIC.

 North America
 Asia and Pacific region
 Latin America and the Caribbean region
 Europe, the Middle East, and Central Asia.

INTERNET SERVICE PROVIDER (ISP)

An Internet service provider (ISP) is an organization that provides services for accessing,
using, or participating in the Internet.

That ISP must have an officially registered Autonomous System Number (ASN).

Examples of internet services provider are TTCL, Satcom., Start Tel and SimbaNet.

4
WORLD WIDE WEB (WWW)

World Wide Web (simply The Web), is an internet service for global set of documents, images
and other resources, logically interrelated by hyperlinks and referenced with Uniform Resource
Identifiers (URIs).

Hyperlink is a reference to data that the reader can directly follow either by clicking or by
hovering or that is followed automatically.

A uniform resource locator, abbreviated as URL (also known as web address, particularly
when used with HTTP), is a specific character string that constitutes a reference to a resource.

The following are some parts of URL:

 Protocol
 Domain name
 Directory (folder)
 Filename and file extension

The following example shows these parts in a URL:

Hypertext Transfer Protocol (HTTP) is the main access protocol of the World Wide Web.

WEBSITE (WEB SITE)

Is a set of related web pages served from a single web domain.

A website is hosted on at least one web server, accessible via a network such as the Internet or a
private local area network through an Internet address known as a Uniform resource
locator(URL).

5
WEB BROUSER

Browser is a software application used to locate, retrieve and display content on the World Wide
Web, including Web pages, images, video and other files.

A browser is software that is used to access the internet. A browser lets you visit websites and do
activities within them like login, view multimedia, link from one site to another, visit one page
from another, print, send and receive email, among many other activities.

Examples of browsers are:

 Microsoft Internet Explorer,

 Google's Chrome,
 Mozilla Firefox,
 Apple's Safari and
 Opera.

WEB SEARCH ENGINE

A web search engine is software that is designed to search for information on the World Wide
Web.

Search engines utilize automated software applications (referred to as robots, bots, or spiders)
that travel along the Web, following links from page to page, site to site.

Popular examples of search engines are Google, Yahoo!, and MSN Search

IFORMATION SEARCHING

There are a number of different components to search skills:

6
  Knowing what information you need - understanding your topic and knowing the key
concepts you should research
 Knowing where to find information.
 Knowing how to search the sources - using keywords etc.
 Recording your searches.

HOW TO IMPROVE THE SEARCH RESULTS

The following are some few points to prove your search results:

 Use specific word rather than broad category.

 Use quotation marks to search for specific phrase.
 Use the Boolean operators (AND, OR and Not which is represented by -) appropriately.
 Use synonyms or alternative search terms.
 Search only for specific web site or domain. To narrow the search to specific site type the
search term you are looking followed by Site : then followed by site name.

For example: viruses site:www.microsoft.com (with no spaces between Site: and site name)

 Specify format of documents you want.

For example. “Electronic records”: ppt

E-learning

E-learning is an inclusive term that describes educational technology that electronically or

technologically supports learning and teaching. It refers to the use of electronic applications and
processes to learn. Is essentially the network-enabled transfer of skills and knowledge.

E-learning applications and processes include Web-based learning, computer-based learning,

virtual classrooms and digital collaboration.

E-learning may either be synchronous or asynchronous.

Synchronous learning refers to the exchange of ideas and information with one or more
participants during the same period of time. Examples are online real-time live teacher
instruction and feedback, Skype conversations, and chat rooms or virtual classrooms where
everyone is online and working collaboratively at the same time.

Asynchronous e-learning is the one that the learner and the trainer are not necessarily supposed
to be online at the same time. Materials, communications, collaborations can be done at each
individual’s convenient time, only limited by pre-defined deadlines known to the parties
concerned. Asynchronous learning may use technologies such as email, blogs, wikis, and

7
discussion boards, as well as web-supported textbooks, hypertext documents, audio video
courses etc.

E-Commerce

Is used to describe business that is conducted over the Internet using any of the applications that
rely on the Internet, such as e-mail, instant messaging, shopping carts, Web services, among
others. Electronic commerce can be between two businesses transmitting funds, goods, services
and/or data or between a business and a customer.

With e-commerce, sellers can display their products, and buyers are able to select from a range
of goods or services available and above all the payment can be made using available online
payment systems.

Podcasting

Podcasting allows subscribers to subscribe to a set of feeds to view syndicated Web site content.
With podcasting, you have a set of subscriptions that are checked regularly for updates and
instead of reading the feeds on your computer screen, you listen to the new content on your iPod
(or similar device).

A podcast is a digital medium consisting of an episodic series of audio, video, PDF, or ePubfiles
subscribed to and downloaded through web syndication or streamed online to a computer or
mobile device.

VoIP

Voice over Internet Protocol, or VoIP, telephone products connect to VoIP, or Internet
telephony, systems, which use packet-switched telephony to transmit calls over the Internet as
opposed to the circuit-switched telephony used by the traditional Public Switched Telephone
Network (PSTN).

Internet Mail Services

E-mail is an electronic message sent from one device to another. While many messages go from
computer to computer, e-mail can also be sent and received by mobile phones, PDAs and other
portable devices. With e-mail, you can send and receive personal and business-related messages
with attachments, such as photos and documents.
To receive e-mail, you need an account on a mail server. This is similar to having a postal box
where you receive letters. One advantage over regular mail is that you can retrieve your e-mail
from any location on earth, provide that you have Internet access. Once you connect to your mail
server, you either download your messages to your computer or wireless device, or use your web
browser to read them online.

8
To send e-mail, you need a connection to the Internet and access to a mail server that forwards
your mail to its final destination. The standard protocol used for sending Internet e-mail is called
SMTP, short for Simple Mail Transfer Protocol.

IMAP and POP3 are the two most commonly used Internet mail protocols for retrieving emails.

IMAP (Internet Message Access Protocol) is a standard protocol for accessing e-mail from your
local server. IMAP (the latest version is IMAP Version 4) is a client/server protocol in which e-
mail is received and held for you by your Internet server. IMAP requires continual access to the
server during the time that you are working with your mail.

Another protocol which is used in receiving e-mail is POP (Post Office Protocol 3). Post Office
Protocol version 3 (POP3) is a standard mail protocol used to receive emails from a remote
server to a local email client. POP3 allows you to download email messages on your local
computer and read them even when you are offline.

E mail Addresses
An email address identifies an email box to which email messages are delivered.Email
addresses have a similar look and feel to them. It is this similar look and feel that ensures the
proper delivery of email. Each email address has three sections. Let’s look at the example below
and discuss each section.

 Username: Each person will be assigned a name that is commonly called a Username,
ID or User Account. No two people will have the same username with the same email
provider. The username is considered the “local part” of the address. .
 @ Symbol: Following the username is a @ symbol. The @ symbol separates the
username, or local address, from the last section.
 Domain: The last section of an email address is the hostname, domain name or server. In
the examples above, Yahoo.com forms domain part.

The combination of the three sections creates the email address.

9
Some Useful Terms

Inbox
Emails that have been received by the user in their account

Outbox/Sent items
Emails that have been sent by the account owner to other users

Drafts
Emais that have been composed but unfinished and not yet sent to the destination address.

Spam
Spam is unwanted e-mail messages, frequently with commercial content, sent in large quantities
to an indiscriminate set of recipients.

Password
A secret code which is a combination of characters used in conjunction with the username in

order to authenticate the email account user.

WEB SITE DEVELOPMENT TOOLS

In order for one to develop a website, the following are important components:

(1) Software

The basic software needed for web development is an Editor. The editor is any application
software that can be used to write your code in given language. A file written in a given language
is then saved in a certain extension acceptable for that file type. For instance, a file written in
HTML is saved with .html extension.
The simplest editor that comes with windows operating system is a “notepad”. There exists
editors that are more programmer friendly Notepad ++.

HTML can be edited by using a professional HTML editor like:

 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

Another needed software is web browser, which will be used by developer to test the web pages.

10
(2) The Language

You need to understand a language and its syntax in order to properly develop a website. The
basic one is HTML, which is markup language.
Other languages do exist such as JavaScript, PHP, and ASP.NET etc., to provide dynamic
scripting features.
If a website involves the use of databases for storage and retrieval of data, a language like SQL is
important to achieve querying.

INTRODUCTION TO HTML
HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language.

 HTML is a markup language.
 A markup language is a set of markup tags.
 The tags describe document content.
 HTML documents containHTML tags and plain text.
 HTML documents are also called web pages.

In practical terms, HTML is a collection of platform-independent styles (indicated by markup

tags) that define the various components of a World Wide Web document. HTML was invented
by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

HTML Tags

HTML markup tags are usually called HTML tags.

 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag or opening tag, the second tag is the end tag or
closing tag.
 The end tag is written like the start tag, with a slash before the tag name
 HTML documents are defined by HTML elements.

HTML Elements

HTML documents are defined by HTML elements. An HTML element is everything from the
start tag to the end tag:

11
HTML Element Syntax

<start tag > content <end tag >

 An HTML element starts with a start tag / opening tag and ends with an end tag /
closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes

HTML Attributes

 HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

E.g.
<a href=” anotherpage.html”> the Link name </a>

“a” is a tag, “href” is an attribute and “anotherpage.html” is a value

Note:
 One element can have more than one attributes
 Not all elements have the same attributes. Some attributes apply to some element and they do
not apply to others.
 Some attributes are applicable in more than one element

Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to
read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of
the HTML page is to be presented/displayed to the user:

12
The Minimal HTML Document

Every HTML document should contain certain standard HTML tags. Each document consists of
head and body text. The head contains the title, and the body contains the actual text that is made
up of paragraphs, lists, and other elements.
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>

The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end
tags).

HTML element

This element tells your browser that the file contains HTML-coded information. The file
extension .html also indicates this is an HTML document and must be used. (If you are restricted
to 8.3 filenames (e.g., LeeHome.htm, use only .htm for your extension.)

The head Element

The <head> element is a container for all the head elements. Elements inside <head> can include
scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.

The title Element

The <title> tag defines the title of the document.

The <title> element is required in all HTML/XHTML documents.

The <title> element:

13
  defines a title in the browser toolbar
 displays a title for the page in search-engine results

HTML head Elements

Tag Description
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
Defines the relationship between a document and an external
<link>
resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

BODY
The second--and largest--part of your HTML document is the body, which contains the content
of your document (displayed within the text area of your browser window).

HTML Versions
Since the early days of the web, there have been many versions of HTML:

version year

HTML 1991

HTML + 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML 5 2012

HTML Declaration
The declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page
100% correctly if it knows the HTML version and type used.

14
Common Declarations
HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML HEADINGS

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are
typically displayed in larger and/or bolder fonts than normal body text. The first heading in each
document should be tagged <H1>.
The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between
1 and 6 specifying the level of the heading.

Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Note:
 Browsers automatically add some empty space (a margin) before and after each heading.
 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.
 H1 headings should be used as main headings, followed by H2 headings, then the less
important H3 headings, and so on. Do not skip levels of headings in your document. For
example, don't start with a level-one heading (<H1>) and then next use a level-three
(<H3>) heading.
Html Paragraphs

Paragraphs are defined with the <p> tag.

Unlike documents in most word processors, carriage returns in HTML files aren't significant. In
fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are
automatically compressed into a single space when your HTML document is displayed in a

15
browser. So you don't have to worry about how long your lines of text are. Word wrapping can
occur at any point in your source file without affecting how the page will be displayed.

<P>Welcome to the world of HTML.

This is the first paragraph.
While short it is
still a paragraph!</P>

In the source file there is a line break between the sentences. A Web browser ignores this line
break and starts a new paragraph only when it encounters another <P> tag.

Important: You must indicate paragraphs with <P> elements. A browser ignores any
indentations or blank lines in the source text. Without <P> elements, the document becomes one
large paragraph.
Browser will ignore the extra spaces because it has its own set of rules on spacing that do not
depend on the spaces you put in your source file).
NOTE: The </P> closing tag may be omitted. This is because browsers understand that when
they encounter a <P> tag, it means that the previous paragraph has ended. However, since
HTML now allows certain attributes to be assigned to the <P> tag, it's generally a good idea to
include it.
Using the <P> and </P> as a paragraph container means that you can center a paragraph by
including the ALIGN=alignment attribute in your source file.

HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
The <br> element is an empty HTML element. It has no end tag.

HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

You can use the following attributes to control the appearance of a horizontal rule:
• align The align attribute instructs the Web browser to align the horizontal rule to the right, left,
or center of the browser application window.
• noshade The noshade attribute instructs the Web browser to display the horizontal line without
shading the line.
• size The size attribute (measured in pixels) controls the thickness of the horizontal rule.

16
• width The width attribute defines the length of the line. You can specify the horizontal rule’s
width either in pixels or as a percentage of the browser application window’s width. For
example, if you set the width to 50 percent (width=“50%”), the browser will draw a horizontal
rule with a length equal to half the width of the browser window.

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italictext. These HTML
tags are called formatting tags.

html text formatting tags

Tag Description

<b> Defines bold text

<em> Defines emphasized text 

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->

Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
17
HTML Lists
An ordered list: An unordered list:

1. The first list item  List item

2. The second list item  List item
3. The third list item  List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:

 Coffee
 Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
18
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee

- black hot drink

Milk

- white cold drink

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light.

Color Values
Colors are defined using a hexadecimal (hex) notation 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 (hex
00). The highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
Color Color HEX Color RGB

  #000000 rgb(0,0,0)

  #FF0000 rgb(255,0,0)

  #00FF00 rgb(0,255,0)

  #0000FF rgb(0,0,255)

  #FFFF00 rgb(255,255,0)

  #00FFFF rgb(0,255,255)

  #FF00FF rgb(255,0,255)

  #C0C0C0 rgb(192,192,192)

  #FFFFFF rgb(255

HTML Tables

Tables are defined with the <table> tag.

19
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables,
etc.

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

The <table> element can carry the following common attributes.Align, bgcolor, border,
cellpadding, cellspacing, dir, frame, width

The align attribute

Although it is deprecated, the align attribute is still frequently used with tables. When used with
the <table> element, it indicates whether the table should be aligned to the left (the default),
right, or center of the page. (When used with cells, as you will see shortly, it aligns the content of
that cell.) The syntax is:

align="center"

The bgcolor Attribute

The bgcolor attribute sets the background color for the table. The value of this attribute should be
either a hex code or color name. The syntax is:
20
bgcolor="#rrggbb"

The border Attribute

If you use the border attribute, a border will be created around both the table and each individual
cell. The value for this attribute is the width you want the outside border of the table to be in
pixels. If you give this attribute a value of 0, or if you do not use this attribute, then you should
not get any borders on either the table or any cells.
The syntax is
border="0"

The cellpadding Attribute (deprecated)

The cellpadding attribute is used to create a gap between the edges of a cell and its contents. The
value for this attribute can either be the amount of space or padding you want inside each wall of
the cell in pixels or a percentage value (as a percentage of the width of the table).
As you can imagine, if two cells both contain writing, and there is no gap between the edge of
the cells and the writing, the contents can become hard to read.
cellpadding="5" or cellpadding="2%"

The cellspacing Attribute

The cellspacing attribute is used to create a space between the borders of each cell. The value for
this attribute can either be the amount of space you want to create between the cells in pixels or a
percentage value (as a percentage of the width of the table).
cellspacing="6" or cellspacing="2%"

The frame Attribute

The frame attribute is supposed to control the appearance of the outermost border of the whole
table, referred to here as its frame, with greater control than the border attribute. If both the frame
and border attributes are used, the frame attribute takes precedence. The syntax is:
frame="frameType"
The following table shows the possible values for frametype.

Value Purpose
Void No outer border (the default)
Above A border on top only
below A border on bottom only
hsides A border on top and bottom
lhs A border on left side of table
rhs A border on right side of table
vsides A border on left and right sides of table
box A border on all sides
border A border on all sides

The width Attribute

21
The width attribute is used to specify the width of the table in pixels, or as a percentage of the
available space. When the table is not nested inside another element, the available space is the
width of the screen; otherwise the available space is the width of the containing element.
width="500" or width="90%".

The <tr> Element

The <tr> element is used to contain each row in a table. Anything appearing within a <tr>
element should appear on the same row. It can carry five attributes, four of which have been
deprecated in favor of using CSS.

The align Attribute (deprecated)

The align attribute sets the horizontal alignment for the content of the cell.
align="alignment"
The possible values for the align attribute are left, right, center, justify

The bgcolor Attribute (deprecated)

The bgcolor attribute sets the background color for the cell. The value of this attribute should be
either a hex code or a color name.
bgcolor="#rrggbb"

The colspan Attribute

The colspan attribute is used to specify how many columns of the table a cell will span across.
The value of the colspan attribute is the number of columns the cell stretches across.
colspan="n"

The rowspan Attribute

The rowspan attribute specifies the number of rows of the table a cell will span across, the value
of the attribute being the number of rows the cell stretches across. Merging rows Using the
rowspan Attribute will be explained later.
rowspan="n"

The valign Attribute

The valign attribute allows you to specify the vertical alignment for the content of the cell.
Possible values are top, middle, bottom, and baseline

Splitting up Tables Using a Head, Body, and Foot

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content of the table.
The separation of the parts of the table allows for the richer formatting of tables by browsers. For
Example, when printing a table, browsers could print the head and foot of a table on each page if
the table spreads more than one side. Aural browsers could allow users to navigate between
content and headers or footers with additional information easily. Indeed, Netscape 6 was the
22
first browser that allowed you to create a table where the header and footer remain fixed while
the body scrolls if the table does not fit on the. The three elements for separating the head, body,
and foot of a table are:
❑ <thead> to create a separate table header
❑ <tbody> to indicate the main body of the table
❑ <tfoot> to create a separate table footer
A table may contain several <tbody> elements to indicate different “pages” or groups of data.

Note that the <tfoot>element must appear before the <tbody>element in the source
document.
Example:
<table>
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
</table>

Adding a <caption> to a Table

To add a caption to a table you just use the <caption> element after the opening <table> tag and
before the first row or header.
<table>
<caption>Spanning columns using the colspan attribute</caption>
<tr>

HTML Entities/ escape characters

Reserved characters in HTML must be replaced with character entities.

Characters, not present on your keyboard, can also be replaced by entities.

23
For if you use the less than (<) or greater than (>) signs in your text, the browser might mix them
with tags.

The following table shows Some Useful HTML Character Entities:

Result Description Entity Name Entity Number

  non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

INSERTING AN IMAGE
The <img> tag lets you place a graphics image (whether of converted text or a picture or
drawing), on a Web page. A typical <img> tag contains a single src attribute, which tells the
Web browser the pathname of the graphics file. Therefore, most of your image tags will be of the
form
<img src=“path/filename”>.
Note the value of the src attribute contains both the path and filename of the graphics file. For
example, the following code instructs the Web browser to retrieve and display the picture in the
file named photo.jpg stored in the images folder on the Web server.
<img src="images/photo.jpg" width="300 height="155">
Proper HTML coding requires that you place all <img> tags between the start and end body tags
(<body></body>) that enclose the Web page content the browser displays onscreen. The
following simple HTML code, when processed by a Web browser will display the graphics
image house.jpg:

<html>
<head><title>Image of a House</title>
</head>
<body>
<center><img src="house.jpg" width="400" height="175"></center>
</body>
</html>

In addition to placing a simple image tag within an HTML document, you have several attributes
that control the image within the browser window:

24
• alt The alt attribute supplies alternate text for browsers that do not display graphics or for
browsers where the user has turned off the display of graphics. Alternate text is also used by
browsers as a tool tip (the text displays in a box near the mouse pointer, when the mouse hovers
over the image) and by reader programs for the visually impaired.
<img src="images/photo.jpg" alt="Photo of Florida Sunset">
• height and width The width and height attributes define the size of the image displayed within
the browser window. Always specify the width and height attributes in your image tags so the
browser can display the remainder of your Web page text while waiting for images to download.
When you specify the width and height attributes in an <img> tag, the browser reserves space for
the images, even if they load slowly, and the document text will flow around where the images
are supposed to go.
<img src="images/photo.jpg" width="200" height="55">
• border The border attribute gives the pixel-width of the border the Web browser is to draw
around an image. If you use an image as the anchor for a hyperlink, the browser will draw a
border around the picture. As such, drawing a border around pictures may make the visitor think
the picture is a hyperlink. Therefore, it is recommended that you set the border attribute to zero
(0).
<img src="images/photo.jpg" width="200" height="55" border="0">

Background Graphics
Sometime you may want Web browsers to load an image and use it as a background when
displaying a page. Some people like background images and some don't. In general, if you want
to include a background, make sure your text can be read easily when displayed on top of the
image.
Background images can be a texture (linen finished paper, for example) or an image of an object
(a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. Using a feature called tiling; a
browser takes the image and repeats it across and down to fill your browser window. In sum you
generate one image, and the browser replicates it enough times to fill your window. This action
is automatic when you use the background tag shown below.

The tag to include a background image is included in the <BODY> statement as an attribute:
<body background="filename.gif">

25
WORKING WITH LINKS
Of all the things that html can support, links can be named as the most important contributor of
the Worls Wide Web. This is because the “web” structure of the WWW is made possible by the
use of links which make navigation between documents possible. In html we have four kinds of
links
 Links to another document within the same website
 Links to a different website
 Links to an E mail
 Links within the same page (internal link)

a. Linking to another document in the same website

Generally put, links make use of the anchor tag <a>. the tag operates with the attribute href
which indicates the source of the document that the link is pointing to. The syntax for links is
<a href= “pagename.html”>Link text</a>
Pagename refers to the name of the page/document pointed to. this is the document that will
open when the link is clicked
Linktext refers to the text that will appear to the website visitor as a link. Other objects such as
images can as well be set as links; you only need to place them between the <a> and the </a>
tags.

E.g. <a href= “about us.html”> About US</a>

Just in case the page/document linked to is in another folder inside the root folder, you need to
specify the right path. Suppose we have the folder called documents, inside the root folder, and
in that folder we have the page to be linked to called contacts.html we will refer to it as
documents/contacts.html. It will appear as follows:

<a href= “documents/contacts.html”> Abut US</a>

If the document is in the folder that holds the root folder then you locate is as
href=”../filename.html”. The two dots .. refers to “one step back”.
E.g. suppose our page contact.html is in the folder that holds our root folder then we would
locate is as :

<a href= “../contacs.html”>

b. Linking to another website

The syntax in this case is just the same. The difference is that in this case you specify the URL
for the website you are referring to. The following illustrates this;
26
<a href= http://www.kiu.ac.tz> Connect to KIU DAR</a>

will link to the website www.kiu.ac.tz the moment the user clicks on the words “Connect to KIU
DAR”.

c. Linking to an E mail address.

This is a special link that triggers the default email application installed in the sytem. For most
windows users, when the link is clicked, it opens Microsoft Outlook. If Microsoft outlook is
configured you can send the e mail to the address specified in the link. It works as follows:
<a href="mailto:someone@example.com">Send Mail</a>

HTML FORMS

The <form> tag is used to create an HTML form for user input. HTML forms are used to pass data to a
server.

The <form> element can contain one or more of the following form elements:

 <input>
 <textarea>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

1. The Input Element

The most important form element is the <input> element.

The <input> element is used to select user information.

Note: The <input> element is empty, it contains attributes only.

An <input> element can vary in many ways, depending on the type attribute. An <input>
element can be of type text field, checkbox, password, radio button, submit button, button and
more.
27
The most common input types are described below.

i. Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

ii. Password Field

<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:

iii. Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY 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>

Example:

<!DOCTYPE html>

<html>

28
<body>

<form action="">

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons
with equal name become unchecked.</p>

</body>

</html>

iv. Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Example:

<!DOCTYPE html>

<html>

<body>

<form action="">

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

</body>
29
</html>

v. Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:

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 "demo_form_action.asp". The page will show you the
received input.

2.The label element

The <label> tag defines a label for an <input> element.

The <label> element does not render as anything special for the user. However, it provides a
usability improvement for mouse users, because if the user clicks on the text within the <label>
element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to
bind them together.

Example:

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp">

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

<label for="female">Female</label>
30
<input type="radio" name="sex" id="female" value="female"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

3.The Fieldset element

The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Example:
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
Results:

4.The select element

The <select> element is used to create a drop-down list.
31
The <option> tags inside the <select> element define the available options in the list.
Example:

<!DOCTYPE html>

<html>

<body>

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

</body>

</html>

The <optgroup> is used to group related options in a drop-down list.

If you have a long list of options, groups of related options are easier to handle for a user.

Example:

<!DOCTYPE html>

<html>

<body>

<select>

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

32
<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</optgroup>

</select>

</body>

</html>

5.Textarea Element

The <textarea> tag defines a multi-line text input control.

The size of a text area can be specified by the cols and rows attributes, or even better; through
CSS' height and width properties.

<!DOCTYPE html>

<html>

<body>

<textarea rows="4" cols="50">

Text area

</textarea>

</body>

</html>

HTML STYLES- CSS

 CSS is used to style HTML elements.

 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 CSS was introduced together with HTML 4, to provide a better way to style HTML
elements.

CSS Syntax
A CSS rule set consists of a selector and a declaration block:
33
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly braces.
Example:
p {color:red;text-align:center;}
To make the CSS code more readable, you can put one declaration on each line, like this:

p{
    color: red;
    text-align: center;
}

WAYS TO INSERT CSS

SS can be added to HTML in the following three ways:

 Inline styles
 Internal style sheet
 External style sheet

Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an
element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example below shows how to change the text color and the left margin of a
paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are
defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
<style>
34
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

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>

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.The following is a cascading order:

1. Browser default

2. External Style sheet

3. Internal Style sheet (in the head section)

4. Inline style (inside an html element)

From above order:

 Number 4 has the highest priority

 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.

html style tags summary

Tag Description

<style> Defines style information for a document

<link> Defines the relationship between a document and an external resource

Deprecated Tags and Attributes

In HTML 4, several tags and attributes were used to style documents. These tags are not
supported in newer versions of HTML.
Avoid using the elements: <font>, <center> and <strike>, and the attributes: color and bgcolor.

1. CSS Selectors
CSS selectors allow you to select and manipulate HTML element(s).
35
CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types,
attributes, values of attributes and much more.
i. The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned,
with a red text color)
Example:
p{
    text-align: center;
    color: red;
}
ii. The id Selector
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
Example:
#para1 {
    text-align: center;
    color: red;
}
iii. The class Selector
The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the name of the
class:
In the example below, all HTML elements with class="center" will be center-aligned:
Example:
.center {
    text-align: center;
    color: red;
}
 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:

36
 p.center {
    text-align:center;
    color:red;
}

Grouping Selectors
In style sheets there are often elements with the same style:
To minimize the code, you can group selectors.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
    text-align: center;
    color: red;
}

2. 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

i. 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;
}

ii. Background Image

37
 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");
}

iii. Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
If you want the background image to repeat only horizontally the background-repeat property
is used with the value repeat-x .If you prefer vertically,repeat-y is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>
 Showing the image only once is specified by the background-repeat property:

Example
38
 body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

iv. Background Image - Set position

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;

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing
with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is
called a shorthand property.
The shorthand property for background is simply "background":
Example
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

It does not matter if one of the property values is missing, as long as the ones that are present are
in this order.

CSS3 contains several new background properties,

which allow greater control of the background element.
Some of which are

 background-size
39
  background-origin

v. CSS3 the background-size Property

The background-size property specifies the size of the background image.Before CSS3, the
background image size was determined by the actual size of the image. In CSS3 it is possible to
specify the size of the background image, which allows us to re-use background images in
different contexts.

You can specify the size in pixels or in percentages. If you specify the size as a percentage, the
size is relative to the width and height of the parent element.

Example 1
Resize a background image:
table {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

To stretch the background image to completely fill the content area set width and height to
100%.
Example 2
table {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

vi. CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.

Example
40
Position the background image within the content-box:
table{
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}

background-clip Property
Specify the painting area of the background:

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table {

width: 300px;

height: 300px;

padding: 50px;

background-color: yellow;

background-clip: content-box;

border: 2px solid #92b901;

</style>

</head>

<body>

<table>

41
<tr><td>The background-size property specifies the size of the background image. Before CSS3, the
background image size was determined by the actual size of the image. In CSS3 it is possible to specify
the size of the background image, which allows us to re-use background images in different contexts.

</td></tr>

</table>

</body>

</html>

The results of the above code will be as follows:

3. CSS Text
i. Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:

 a HEX value - like "#ff0000"

 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"

The default color for a page is defined in the body selector.

Example
body {
    color: blue;
42
 }

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}

ii. Text Alignment

The text-align property is used to set the horizontal alignment of a text. The possible values are
right, left, center and justify.
Example
h1 {
    text-align: center;
}
iii. 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 with values underline , line-through and overline.

Note: It is not recommended to underline text that is not a link, as this often confuses users.

iv. 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. The possible values are uppercase, lowercase,and capitalize.

v. Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.
Example
p{
    text-indent: 50px;
}

43
 4. CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.

i. Font Family
The font family of a text is set with the font-family property.
Note: If the name of a font family is more than one word, it must be in quotation marks, like:
"Times New Roman".

Example
p{
    font-family: "Times New Roman";
}

ii. 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;
}

iii. 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.
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

44
 You can specify the size in pixcel(px) or em. The size can be calculated from pixels to em using
this formula:

em= pixels/16

Example
h1 {
    font-size: 40px;
}

h2 {
    font-size: 2em;
}

iv. CSS font-weight Property

The font-weight property sets how thick or thin characters in text should be displayed.

Syntax:

Font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Number ranges from 100-900

400=normal

700=bold

Example

p{

font-weight: bold

5. css table
The look of an HTML table can be greatly improved with CSS.

i.
Table Borders
To specify table borders in CSS, use the border property.
Example
table{
   border: 1px solid black;
}

45
 ii. 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;
}

iii. 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:
The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example 1.
td {
    text-align: right;
}

Example 2.

td {
    height: 50px;
    vertical-align: bottom;
}

iv. 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;
}

v. Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:
Example

46
table, {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

6. css border
 The border-style property specifies what kind of border to display.
The possible border-style values are none, dotted, dashed, solid, double, groove, ridge, inset
and outset.
 The border-width property is used to set the width of the border.
 The border-color property is used to set the color of the border

Example:
p.one{
    border-style: solid;
    border-width: 5px;
border-color: #98bf21;
}

Note: The "border-color" property and “border-width” do not work if are used alone. Use the "border-
style" property to set the borders first.

 Border - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing
with borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property. This is called a shorthand property.
The border property is a shorthand for the following individual border properties:

 border-width
 border-style (required)
 border-color

Example
p{
    border: 5px solid red;
}

47
 7. css links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

In addition, links 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

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

i. 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;
}

ii. Background Color

The background-color property specifies the background color for links:
Example
a:link {
    background-color: #B2FF99;
}

48
a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

49