Chapter TWO

HTML
Content
 General concepts of Web design

 Basics of HTML
 HTML Tags and Attributes
 Text Formatting with HTML
 Tables in HTML
 Forms in HTML

 HTML frame implementation

1
1. General Concepts of Web Design
 As a web designer, you spend a lot of time creating pages and
change them until they look good in your browser.
 The way your site looks and performs is at the mercy of a number
of variables such as browser version, platform, monitor size, and
the preferences or special needs of each individual user.
 Your page may also be viewed on a mobile device like a cell phone,
or using an assistive device like a screen magnifier or a screen
reader.

2
Browser Version
 One of the biggest challenges in designing for the Web is dealing
with the different browsers.
 In the past browsers were so incompatible that web authors were
forced to create two separate sites, one for Internet Explorer and
one for Netscape.
 Things have improved dramatically now that browsers have better
support for web standards established by the World Wide Web
Consortium (W3C for short).
 Nearly all browsers in use today support HTML 4.01 and XHTML
standards, with only a few exceptions. 3
 A Web Page, Step by Step
 Step 1: Start with content. We add raw text content and see what
browsers do with it.
 Step 2: Give the document structure. We learn about HTML elements
and its structure.
 Step 3: Identify text elements. You’ll describe the content using the
appropriate text elements and learn about the proper way to use HTML.
 Step 4: Add an image. By adding an image to the page, we will learn
about attributes.
 Step 5: Change the look with a style sheet. We learn formatting content
with CSS.
4
 Step1. Start with Content
Rules Naming Conventions

It is important that you follow these rules and conventions when naming your
files:
 Use proper suffixes for your files._ HTML files must end with .html (some
servers allow .htm). Web graphics must be labeled .gif or .jpg (.jpeg is also ).
 Never use character spaces within filenames. It is common to use an
underline character or dash to visually such as robbins_bio. html or robbins-
bio.html.
 Avoid special characters such as?, %, #, /, :, ;, •, etc. Limit filenames to
letters, numbers, underscores, and hyphens.
 Filenames may be case-sensitive, depending on your server configuration.

 Keep filenames short. 5

What Browsers Ignore
 Line breaks (carriage returns)_. Line breaks are ignored. Text and elements will
wrap continuously until a new block element, such as a heading (h1) or paragraph
(p), or the line break (br) element is encountered in the flow of the document text.
 Tabs and multiple spaces_. When a browser encounters a tab or more than one
consecutive blank character space, it displays a single space. So if the document
contains: long, long ago the browser displays: long, long ago
 Unrecognized markup_. A browser simply ignores any tag it doesn’t understand or
that was incorrectly specified. Depending on the element and the browser, this can
have varied results. The browser may display nothing at all, or it may display the
contents of the tag as normal text.
 Text in comments_. Browsers will not display text between the special <!-- and --
> denote a comment.
6
Step2. Give the Document Structure
 Introducing... the HTML element

 Elements are identified by tags in the text source.

 A tag consists of the element name (usually an abbreviation of a

longer descriptive name) within angle brackets (< >).

 The browser knows that any text within brackets is hidden and not
displayed in the browser window. 7
Cont.…
 The element name appears in the opening tag (also called a start
tag) and again in the closing (or end) tag preceded by a slash (/).
 Be careful not to use the similar backslash character in end tags.
 The tags added around content are referred to as the markup.
 It is important to note that an element consists of both the content
and its markup (the start and end tags).
 Not all elements have content, however. Some are empty by
definition, such as the img element used to add an image to the
page.
8
Step 3: Identify Text Elements

 Introducing...semantic markup
 The purpose of (X)HTML is to provide meaning and structure to
the content
 It is not intended to provide instructions for how the content should
look (its presentation).
 Your job when marking up content is to choose the (X)HTML
element that provides the most meaningful description of the
content at hand. That is semantic markup

9
Step 4. Add an Image
 we’ll add an image to the page using the img element <img>

 Empty elements: are do not have text content because they are
used to provide a simple directive. E.g. image element (img), line
break (br), horizontal rule (hr).
 Attributes are instructions that clarify or modify an element. For the
img element, the src (short for “source”) attribute is required, and
provides the location of the image file via its URL. The syntax for
attributes is as follows:
 <element attribute-name="value">Content</element> or for empty
elements: or <element attribute-name="value" /> 10
Step 5. Change the Look with a Style Sheet

 Cascading Style Sheets (CSS)

11
2. Basics of HTML
 HTML, which stands for Hypertext Markup Language, is the
predominant markup language used for creating web pages.

 A markup language is a set of markup tags, and HTML uses markup tags to
describe web pages.

 HTML is written in the form of HTML elements consisting of HTML tags

surrounded by angle brackets (e.g. <html>) within the web page content.

 HTML allows images and objects to be embedded and can be used to

create interactive forms.

 It can embed scripts in languages such as JavaScript which affect the

behavior of HTML webpage and include CSS to define the appearance and
layout of text.
12
Cont.….
 The purpose of a web browser is to read HTML documents and display
them as web pages.
 The browser does not display the HTML tags, but uses the tags to
interpret the content of the page.
 WWW Consortium (W3C) is the organization that develops guidelines
and specifications for many web technologies including HTML.
 HTML document is created using a simple text editor like notepad or
any other text editor.
 Notepad can edit HTML, and at the same time you are able to view
what you edit, in a web browser.
13
HTML, HEAD, TITILE and BODY Tags

 The entire web page document is contained within an <html> tag.

 The <html> tag is called the root element because it contains all
the elements in the document, and it cannot not be contained
within any other element.
 Every web page starts with <html> tag and ends with </html>.

 Let us first see how a plain html code looks like. 

 <html><head> <title>Page title here </title></head>
<body>
Our body content here 
</body></html>
14
Cont.…
 The total code is divided into two parts and both the parts are kept
inside <html> tags.
 The first part inside this html tags is the head and it starts with
<head> and ends with </head>.
 The second part starts with <body> and ends with </body> tag.
 Inside the <body> tag we keep all our content which we want to
display to our web page users. Whatever we place in <body> will
be displayed by the browser to the web users.

15
16
 Cont.…
 <HEAD>   </HEAD> The web page should have only one head tag.
 The head tag starts with <head> and ends with </head>. The text or tags
that are inside the head tag will not be displayed in the browser window
 One of the important tags which is put inside <head> is <title> </title> tag.
 Title tags are used to give title to the browser window and it displayed at
the top left side of the window. 
 Title tags are also important for our search engine point of view. We should
keep most important keywords inside the title tag.
 Example: <html><head><title> First Example </title></head>

<body>Here is the first example for Internet Programming</body></html>

 It is also possible to put JavaScript code and CSS in head section.17

The <BODY> Element
 This is where we will place our content for our visitors.

 A <body> element may contain anything from a couple of paragraphs

under a heading to more complicated layouts containing forms and tables.
The <title> Element
 You should specify a title for every page that you write inside the <title>
element. This element is a child of the <head> element. It is used in
several ways:
 It displays at the very top of a browser window.
 It is used as the default name for a bookmark in browsers.
 Its is used by search engines that use its content to help index pages.

18
Cont.…
Example: Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>

</head>

19
3. HTML tags and their attributes
 Attributes provide additional information about HTML tags.
 HTML tags can have attributes
 Attributes provide additional information about a tag
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
 The syntax for attributes is as follows:
 <element attribute-name="value"> Content </element>

Or for empty elements:

 <element attribute-name="value" />
 Example: the background color of HTML document can be changed using
“bgcolor” attribute of the <body> tag. 20
<html> attribute
Setting HTML Language
 The HTML lang attribute can be used to declare the language of a Web page or a
portion of a Web page. This is meant to assist search engines and browsers.
 According to the W3C recommendation you should declare the primary
language for each Web page with the lang attribute inside the <html> tag, like
this:
 <html lang="en">
 …
 </html>
 ISO 639-1 defines abbreviations for languages. In HTML, they can be used in
the lang attributes
21
<body> Attributes
Content
 HTML Heading
 HTML Paragraph, browser ignore, insert image

 Style (background color, text color, font face, text size, alignment)

 Formatting( bold , italic, underline, sup, sub, mark highlight, strike, del, ins )

 Comment, Special Character

 Link( <a>, link to email)

 Table

 List (ordered, unordered)

 Frame

 Form
22
<body> Attributes
Background Color
 You can change background color of your web page by using
<BODY> tag attribute bgcolor
 <body bgcolor=”green”>
 Color can be specified using color name or RGB value. The
following also sets background color to green:
 <body bgcolor=”#00FF00”>

23
Background Image

 We can use a background picture for web page instead of

background color.
 You must have an image to do this.
 Then you can use background attribute of <BODY> tag
as follows:
 <body background="image1.gif">

24
Text Color
 We can also set the text color of the web page just like background
color. We use text attribute of <BODY> to do this.
 <body bgcolor=”yellow” text="red">

Example:
<body bgcolor="yellow" text="#FF0000">
Page with yellow background color and red text color

25
Other <body> attributes
• alink: Sets the color for active links or selected links.

• link: Sets a color for link text.

• vlink: Sets a color for visited links - that is, for linked text that you

have already clicked on.

E.g. <body alink="blue" link="red" vlink="green">

<a href="first.html">first page</a><br>
<a href="heading.html"> second page</a><br>
<a href="textcolor.html">third page</a><br>
<a href="mailto:[email protected]">Send an e-mail to home at
gmail</a></body> </html>
26
Creating Links
 A hyperlink (or link) is a word, group of words, or image that you
can click on to jump to a new document or a new section within the
current document.
 Web pages can contain links that take you directly to other pages or
specific parts of the given page. These links are known as
hyperlinks.
 Links are specified in HTML using the <a> tag. A link is specified
using the <a> element. This element is called anchor tag as well.

27
Attribute of <a>
 The href Attribute
 The target attribute

 The title attribute

28
The href Attribute
 A link in HTML is always composed of two parts, the clickable part
(the link text) and the URL (the destination site, page or resource).
The URL is specified using href attribute. Here is an example:

Eg. <a href=” http://mail.yahoo.com”> Yahoo mail</a>

Here:
 Clickable part (link text): Yahoo mail
 URL: http://mail.yahoo.com

29
The target attribute
 It is used to specify where to display the contents of a selected
hyperlink. If set to:
 _blank : then a new window will be opened to display the loaded
page
 _self : then loads the new page in current window. By default its
_self.
 Example: a link that opens on a new window

<a href="first.html" target="_blank"> First Page</a>

30
The title attribute
 The title attribute is used to type a short description of the link.

 If you place the cursor over the link, you will see the text in the title
attribute.
 Example:

<a href="http://www.html.net/" title="Visit html.net and learn

HTML">Learn HTML </a>

31
Linking to email
 It is also possible to make a link to an e-mail address.

 It is done in almost the same way as when you link to a document.

 The only difference between a link to an e-mail and a link to a file
is that instead of typing the address of a document, you
type mailto: followed by an e-mail address.
 Example:

 <a href="mailto:[email protected]">Send an e-mail to home at

gmail</a>
 When the link is clicked, the default e-mail program
32
HTML Comments
 Comments are piece of code which is ignored by any web browser.
 It is good practice to comment your code,
 especially in complex documents,

 to indicate sections of a document, and

 any other notes to anyone looking at the code.
 Comments help you and others understand your code.
 HTML Comment lines are indicated by the special beginning tag <!-- and ending
tag --> placed at the beginning and end of every line to be treated as a comment
and for multiple line placed before the first line and end of the last line to be
treated as a comment.
 For example: Given line is a valid comment in HTML
 <!-- This is commented out --> 33
Working with Colors
 It can be used to change the background of your webpage, the color of your text or the content

of a table.

 HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red,

Green, and Blue color values (RGB).

 The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest

value is 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting

with a # sign.

 For example: Red = #FF0000, Green = #00FF00, Blue = #0000FF

 Cyan (blue and green) = #00FFFF

 Magenta (red and blue) = #FF00FF

 Yellow (red and green) = #FFFF00

Eg. <body bgcolor=”red”> and <body bgcolor=”#FF0000”> will change the background color

in to red. 34
4. Text formatting with HTML and background changing
 HTML Headings
 Helps to organize the document into sections, just as you might do when writing
a book.
 A heading element briefly describes the topic of the section it introduces.
Headings are defined with the <h1> to <h6> tags.
 <h1> defines the largest heading and <h6> the smallest heading.
 Example:

<body> <h1>this is heading level 1. </h1><h2>this is heading level 2. </h2>

<h3>this is heading level 3. </h3><h4>this is heading level 4. </h4>
<h5>this is heading level 5. </h5><h6>this is heading level 6.
</h6></body>
Heading tags are block tags, and you must specify opening and closing tags. 35
HTML Paragraphs
 Authors traditionally divide their thoughts and arguments into

sequences of paragraphs.

 Along with using headings to structure your Web page, you can add

structure by grouping common text into paragraphs.

 Paragraphs are defined with the <p> tag.

 Example:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

 The <p> element is a block element. 36

The align attribute
 You can use align attribute to align your paragraphs.

 Paragraphs can be left aligned, center aligned, right aligned or justified.

 You can do this by using align attribute. Align attribute can be used with

other tags like headers, table, etc.

 Example:

<h1 align="left"> Heading Aligned Left </h1>

<h2 align="center"> Heading Aligned Center </h2>

<h3 align="right"> Heading Aligned right</h3>

<h3 align="justify"> Heading Aligned Justify</h3> 37

HTML Fonts
 The <font> tag is used to add font type, size, and color to the text on your site.

 The font tag is has three attributes called size, color, and face to customize your

fonts.

Font Size:

 You can set the size of your font with size attribute. The range of accepted values

is from 1(smallest) to 7(largest). The default size of a font is 3.

 Example:

<font size="1">Font size="1"</font> <font size="2">Font size="2"</font>

<font size="3">Font size="3"</font> <font size="4">Font size="4"</font>

<font size="5">Font size="5"</font> <font size="6">Font size="6"</font>

<font size=“7">Font size=“7"</font> 38

Font Face
 You can set any font you like using face attribute.‘

 Instead they will default to Times New Roman of your font with size attribute.

 Example:

<font face="Times New Roman" size="5"> Times New Roman </font> <br>

<font face="Verdana" size="5"> Verdana </font> <br>

<font face="Comic sans MS" size="5"> Comic Sans MS </font> <br>

<font face="WildWest" size="5"> WildWest </font> <br>

<font face="Algerian" size="5"> Algerian </font> <br>

 A visitor will only be able to see your font if they have that font installed on

their computer.
39
Font Color
 You can set any font color you like using color attribute.

 You can specify the color that you want by either the color name or
hexadecimal code for that color.
 Example:

<font color="#0000FF">This text is blue color</font>

<font color="red">This text is red</font>

40
Formatting Tags
 In HTML, there are many tags that you can use to enhance and change the look

of the text.

 You can make text bold, italicized, or underlined.

Bold Text - The <b> Element:

 Anything that appears in a <b>...</b> element is displayed in bold.

 The <b> tag makes text to be displayed in bold face.

E.g. <p>The use nuclear energy needs <b> safety caution </b> because of the

associated danger. </p>

Italic Text - The <i> Element:

 Anything that appears in a <i>...</i> element is displayed in italicized face.

41
E.g.. <p>The following word uses a <i>italicized</i> typeface.</p>
Underlined Text - The <u> Element:
 Anything that appears in a <u>...</u> element is displayed with
underline.
E.g. <p>The following word uses <u>underlined</u>
typeface.</p>
Strike Text - The <strike> Element:
 Anything that appears in a <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text.
E.g. <p>The following word uses a <strike>strikethrough</strike>
typeface.</p>

42
Create Line Breaks - The <br> Element:
 The <br> tag inserts a single line break.

 You can also use <br /> which does the same.

 Whenever you use the <br> element, anything following it starts on a new

line.

 This tag is an example of an empty element, where you do not need opening

and closing tags, as there is nothing to go in between them.

 The <br /> element has a space between the characters br and the forward

slash. If you omit this space, older browsers will have trouble rendering the

line break.

E.g. Hello<br /> You come most carefully upon your hour.<br>
43
Thanks<br /> Markan
Horizontal Rules - The <hr> Element
 <hr> stands horizontal rules are used to visually break up sections
of a document or used to separate content in an HTML page.
 The <hr> tag creates a horizontal line in an HTML page.

E.g. <p>This is paragraph one and should be on top</p> <hr>

<p>This is paragraph two and should be at bottom</p>

44
Preserve Formatting - The <pre> Element:
 Sometimes you want your text to follow the exact format of how it
is written in the HTML document.
 In those cases, you can use the preformatted tag (<pre>).
 The <pre> tag defines preformatted text.
 Text in a pre-element is displayed in a fixed-width font, and it
preserves both spaces and line breaks.
E.g. <pre>
function testFunction( int a, int b ){
int sum = a + b;
alert (sum);
return;
}
</pre>
45
Subscript and Superscript Text:
 The <sub> tag defines subscript text. Subscript text appears half a
character below the baseline.

 Subscript text can be used for chemical formulas, like H2O.

 The <sup> tag defines superscript text. Superscript text appears half
a character above the baseline.
 Superscript text can be used for mathematical expressions like x2+y.

Example:

<p> The chemical formula for water is H₂O </p>

<p> Solve 5X²+6X+10 </p>

46
Big and small Text
 The <big> tag displays texts in big. The content of the <big>
element is displayed one font size larger than the rest of the text
surrounding it.
 The <small> tag renders a smaller text. The content of the <small>
element is displayed one font size smaller than the rest of the text
surrounding it.
E.g. <p>The following word uses a <small>small</small>
typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>

47
Bidirectional Text - <bdo> Tag
 bdo stands for bidirectional override.

 The <bdo> tag allows you to specify the text direction and override
the bidirectional algorithm.
 This is especially useful for languages like Hebrew and Arabic
where text is written from right to left.
 Example:

<bdo dir="rtl">Here is some Hebrew text!</bdo>

48
Special Characters
 Characters within HTML documents that are not part of a tag are
rendered as-is by the browser.
 However, some characters have special meaning and are not
directly rendered, while other characters can't be typed into the
source document from a conventional keyboard.
 Special characters need either a special name or a numeric
character encoding for inclusion in an HTML document.
 E.g.

49
Working with Graphics and Images
 Images are very important to beautify as well as to depicts many
concepts on your web page.
 It is often said that a single image is worth than thousands of words.
 In HTML, images are defined with the <img> tag. 
 The <img> tag has attributes, but not closing tag.

 To display an image on a page, you need to use the src attribute.

 The value of the src attribute is the URL of the image you want to
display.
 Syntax for inserting an image:

<img src="url" alt="Alternative Text"/> 50

The alt attribute
 The required alt attribute specifies an alternate text for an image, if
the image cannot be displayed.
 The alt attribute provides alternative information for an image if a
user for some reason cannot view it (because of slow connection,
an error in the src attribute).
E.g. <img src=“coffee.png" alt=“Coffee Cup/>
<img src=“coffe.png" alt=“Coffee Cup/>

51
The width and height attributes
 To define the height and width of the image, rather than letting the
browser compute the size, use the height and width attributes.

The attributes:
 width: sets width of the image. This can have a value like 10
(pixels) or 20% (percentage of the available window size) etc.
 height: sets height of the image. This can have a value like
10(pixels) or 20% (percentage of the available window size) etc.
E.g. <img src=”coffee.png” height=”50” width=”100”>

52
The border attribute
 The border attribute sets a border around the image. This will have
a value like 1 or 2 etc.
The align attribute
 The align attribute sets horizontal alignment of the image and takes
value either left, right or center.
 Example:
 <img src="coffee.png" alt="Highland coffee" width="100"
height="100" border="2" align="right" title=“Coffee cup" />

53
The hspace and vspace attributes
 hspace: sets horizontal space around the image. This will have a
value like 10 or 20% etc.
 vspace: sets vertical space around the image. This will have a value
like 10 or 20% etc.
 The title attribute
 The title attribute specifies a text title. The browser displays the
title when the mouse passes over the link.

54
Cont.…
E.g. <body> Just checking img tag.
<img src="coffee.png" alt="Highland coffee" align="left"
hspace="50“ vspace="100“ title=“coffee cup” /> </body>

55
Tables in HTML
Creating Tables
 Tables are defined with the <table> tag.
 A table is divided into rows with the <tr> tag, and each row is
divided into data cells with the <td> tag.
 td stands for "table data," and holds the content of a data cell.
 A <td> tag can contain text, links, images, lists, forms, other tables,
etc.
Table headers
 Headers in a table are defined with the <th> tag.
 The text in a <th> element will be bold and centered. 56
Example:
<table border="1">
<tr>
<th>Header 1</th> <th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr>
</table>
 If you do not specify a border attribute, the table will be displayed
without borders. Sometimes this can be useful, but most of the
time, we want the borders to show.
57
 Attributes of table
 The attributes of a table will be applied on the whole table element
which include one or more rows (<tr>), header cells (<th>) or data
cells (<td>).
Attribute Value Description
Align Left Specifies the alignment of a table according to surrounding text
Center
Right
Bgcolor rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
Background Image url Sets background image of the table
Border Pixels Specifies the width of the borders around a table
Bordercolor rgb(x,x,x) Specifies the color used for the border
#xxxxxx
colorname
Cellpadding Pixels Specifies the space between the cell wall and the cell content
Cellspacing Pixels Specifies the space between cells
Width Pixels Specifies the width of a table
%
Height Pixels Specifies the height of a table 58
%
Example
<table border="5" bordercolor="green" bgcolor="gray">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td>

<td bgcolor="red">Row 1 Cell 2</td>

<td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table> 59
Class Work

60
Class Exercise
<table border="5">

<tr>

<th>Name</th>

<th>ID</th>

<th>Course</th>

</tr>

<tr><td>Rahel</td>

<td>3478/10</td>

<td>Object Oriented Programming</td></tr>

<tr><td>Yonathan</td>

<td>2378/10</td></tr>

<tr><td>Internet Programming</td></tr>

</table> 61
 Table Cellpadding and Cellspacing
 There are two attribiutes called cellpadding and cellspacing which
you will use to adjust the white space in your table cell.
 Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content within.
Example:
<table border="1" cellpadding="15" cellspacing="10">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table>
62
Attributes of rows and cells
 This attributes will be applicable only to the header cell or the data
cell if it is used with <th> or <td> tag while it will affect the whole
content of the row if it is used by the <tr> tag.
Attribute Value Description
Align Left | right | center | Aligns the content in a cell
justify

Bgcolor rgb(x,x,x) Specifies a background color for a cell

#xxxxxx
Colorname

Colspan Number Specifies the number of columns a cell should span

Rowspan Number Sets the number of rows a cell should span
Height Pixels Sets the height of a cell
% (percent)

Width Pixels Specifies the width of a cell

%(percent)

Valign top|middle|bottom Vertical aligns the content in a table row

63
Spanning rows and cells
 It’s sometimes necessary for data to span multiple rows or columns.
 This is achieved via the rowspan and colspan attributes,
respectively.
<table border="1">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td></tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td></tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr></table> 64
Vertical alignment of cell content
 If you set your table’s width to a small value, or if you have a lot of
content in one cell and relatively little in an adjacent one,
something else becomes apparent:
 web browsers vertically align content in the middle of cells.
 You can use the valign attribute to set where the text is displayed
vertically.
 The attribute can be added to a row or cell start tag, and set to the
desired value.

65
Using a Header, Body, and Footer:
 Tables can be divided into three portions: a header, a body, and a foot.
 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.
Example: <table border="1" width="100%">
<thead> <tr>
<td colspan="3">This is the head of the table</td> </tr> </thead>
<tfoot> <tr>
<td colspan="3">This is the foot of the table</td> </tr> </tfoot>
<tbody> <tr>
<td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td></tr> </tbody>
<tbody> <tr>
<td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> Table 1: examples of table header, body and footer </tr></tbody>
</table> 66
Practice 2.1

Create a table that displays an exam

schedule for your department?

67
Using Ordered and Unordered List
 The most common HTML lists are ordered and unordered 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

Unordered List
 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).
 The “type” attribute can be used to specifies the style of the bullet
points of the list items, its value includes disc, square and circle.
68
Cont.…
Example:
<ul>
<li>Banana</li>
<li>Orange</li>
</ul>
How the HTML code above looks in a browser:
• Banana
• Orange

69
Ordered List
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items are marked with numbers.
Example:
Types of fruits are:
<ol>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
How the HTML code above looks in a browser:
Types of fruits are:
1. Banana
2. Orange
3. Apple 70
The start attribute:
 If you want a numbered list to start at a number other than “1,” you can use the start

attribute to specify another starting number.

Example

<ol start="17">

<li>Highlight the text with the text tool.</li>

<li>Select the Character tab.</li>

<li>Choose a typeface from the pop-up menu.</li>

</ol>

The resulting list items would be numbered 17, 18, and 19, consecutively.

17. Highlight the text with the text color.

18. Select the Character tab.

19. Choose a typeface from the pop-up menu. 71

Cont.…
Attribute Value Description

Start number Specifies the start point for the list items

Type 1 Specifies which kind of bullet points will be

I used
i
A
a

72
Cont.…
Example:
Types of fruits are:
<ol type=”I”>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
 
This produces the following attribute:
Types of fruits are:
I. Banana
II. Orange
III. Apple
73
Nesting Lists
 One list can be put inside another to create nested list.
Example:
<ol>Types of Computer:
<li>Super computer</li>
<li>Mainframe computer</li>
<li>Mini computer</li>
<li>Micro computer</li>
<ul>
<li>Desktop computer</li>
<li>Laptop Computer</li>
<li>Palmtop computer</li>
</ul>
</ol> 74
HTML Description Lists
 HTML also supports description lists.
 A description list is a list of terms, with a description of each term.

 The <dl> tag defines the description list, the <dt> tag defines the

term (name), and the <dd> tag describes each term: 
<dl> This produce the following outputs
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
75
Class Work
Write the HTML code for the following output.

76
HTML Block and Inline Elements
 Every HTML element has a default display value depending on
what type of element it is.
 The default display value for most elements is block or inline.

Block-level Elements
 A block-level element always starts on a new line and takes up the
full width available .
 The <div> element is a block-level element.

Eg <div>Hello</div this produce the following output

<div>World</div>
77
Inline Elements
 An inline element does not start on a new line and only takes up as
much width as necessary.
 This is an inline <span> element inside a paragraph.

Example

<span>Hello</span>
<span>World</span>
 This produces the following outputs

78
Practice 2.2
 Write a code that displays the courses that you are currently taking
(use unordered list)?
 Write a code that displays your favorite books in order list?
 Write the HTML code for the following output.

79
HTML frames implementations
 Frames can divide the screen into separate windows. 

 Each of these windows can contain an HTML document.

 A file that specifies how the screen is divided into frames is called a
frameset.
 The frameset page lacks a <body> element (although it still
requires head and title elements) and instead uses a <frameset>
element, which sets the attributes for how the frames are
positioned.
 The frameset element houses frame elements, which define the
location and attribute of each frame. 80
Cont.…
 When a frameset page is loaded, the browser automatically loads each of the
pages associated with the frames.
 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 element holds two or more frame elements.
 Each frame element holds a separate document.
 The frameset element states only how many columns or rows there will be in the
frameset and it uses <frameset> tag.
 The <frame> tag defines one particular window (frame) within a frameset. 81
 Cont.…
 Eg. <frameset cols="25%, 75 %">
   <frame src="frame_a.html" />
   <frame src="frame_b.html" />
</frameset>
 The frameset column size can also be set in pixels (cols="200,500"), and
one of the columns can be set to use the remaining space, with an asterisk
(cols="25%,*").
 You cannot use the body element together with the frameset element.
 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 a body
element. 82
Cont.…
Attributes of frameset
Attribute Value Description
Cols pixels Specifies the number and size of
% columns in a frameset

*
Rows pixels Specifies the number and size of
% rows in a frameset

83
Cont.…
Example:
<frameset cols="30%,*">
<frame src="frame-one.html" />
<frame src="frame-two.html" />
</frameset>
This produces the following output:

84
Nested Frames
 Framesets may be nested to any level.

 In the following example, the outer FRAMESET divides the available space into

three equal columns.
 The inner FRAMESET then divides the second area into two rows of unequal height.

Example:
<FRAMESET cols="33%, 33%, 34%">
<frame src=”one.html”>
<FRAMESET rows="40%, 50%">
<frame src=”two.html”>
<frame src=”three.html”>

</FRAMESET>

<frame src=”four.html”></FRAMESET> 85
Cont.…
You can also nest framesets, to create a combination of columns &
rows:
<frameset rows="120,*">
<frame noresize=”noresize” src="frame-one.html">
<frameset cols="150,*">
<frame src="frame-two.html">
<frame src="frame-three.html">
</frameset>
</frameset>

86
 Practice 2.3
 Create a web page that is divided in to three equal rows
and the first row is divided in to two columns.

87
Forms in HTML
 HTML forms are used to pass data to a server.

 Users generally "fill" a form by modifying its controls (entering text, selecting list
items, etc.) before submitting the form for further processing by server (e.g., to a
Web server, to a mail server, etc.).
 Forms are a vital tool for the webmaster to receive information from the web surfer,
such as: their name, email address, credit card, etc.
 You may store that data into a file, place an order, gather user statistics, register the
person to your web forum, or maybe subscribe them to your weekly newsletter.
 A form will take input from the site visitor and then will post to your back-end
application such as CGI, ASP, PHP script etc.
 Then your back-end application will do required processing on that data in whatever
way you like.
88
Cont.…
 We can define the form in HTML using the <form> tag.

<form>
input elements
</form>
 The most important element inside form element is the input element.

 The input element is used to accept user information.

 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, and more.
 The most used input types are described in the next subsections.
89
Working with Text Fields and Passwords
Text Field
 You can create text field by using:
 <input type="text">
 This defines a one-line input field that a user can enter text into.
 Text fields have two important attributes: name and value.
 The name attribute gives name to the text field for identification purpose and to
make it easily accessible.
 The value attributes sets content of the text field.

Eg <form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form> 90
Attributes for <input type=”text”> tag
 name: The name attribute is required for identifying the input field
name.
 value : The value attribute specifies default text that appears in the
field when the form is loaded. When you reset a form, it returns to
this value.
 size: By default, browsers display a text-entry box that is 20
characters wide, but you can change the number of characters using
the size attribute.
 maxlength: By default, users can type an unlimited number of
characters in a text field regardless of its size.
 You can set a maximum character limit using the maxlength
attribute if the forms processing program you are using requires it.
 Eg: <input type="text" name="username" size="8"
maxlength="8">
91
Practice 2.4
 Create a web page that has a form for course registration;
use your registration slip as a guide.
 Create a web page that has a form for signing in to an
email.

92
Password
 A password field works just like a text entry field, except the
characters are obscured from view using asterisk (*) or bullet (•)
characters, or another character determined by the browser.
 <input type="password" /> defines a password field:

Eg. <form>
Password: <input type="password" name="pwd">
</form>
 How the HTML code above looks in a browser:

93
Text Area
 At times, you may want your users to be able enter multiple line of
text.
 For these instances, use the <textarea> element that is replaced by
a multi-line, scrollable text entry box when displayed by the
browser.
 Example:

<textarea name="comment"> Tell us what you feel about our

tutorial with 50 words or less. </textarea>

94
Text Area attributes:
 name – name is used to identify the text area.
 rows - specifies the number of lines of text area should display.
 Scrollbars will be provided if the user types more text than fits in
the allotted space.
 cols - specifies the width of the text area measured in number of
characters.
Eg. <textarea name="comment" rows="5" cols="100"> Tell us
what you feel about our tutorial with 50 words or less. </textarea>

95
<form>
First name:<br> <input type="text"
name="firstname" value=“Aster"><br />
Last name:<br> <input type="text"
name="lastname" ><br>
Show Max Length <br><input type=
"text“ name="username" size="8"
maxlength="8" /><br>
Password:<br> <input type="password"
name="pwd"><br>
Write comment here <br>
<textarea name="comment" rows="15“
cols=“50"> Tell us what you feel
about our tutorial with 50 words or less.
</textarea>
</form> 96
Using Buttons, Checkboxes and Selection Lists

Radio Buttons
 Radio buttons are a popular form of interaction.
 Radio buttons let a user select ONE of a limited number of choices.
 Only one value will be sent for a given group of radio buttons

97
Cont.…
 <input type="radio"> defines a radio button.

Eg. <form method=”post” action=”register.php” >

<input type="radio" name="sex" value="male"
checked=“checked" / > Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

98
Radio button attributes are:

 name: sets name of the radio button

 value: sets the value of the radio button. This is the data sent to
server when the user submits the form.
 checked: sets whether the radio button is checked by default or not.
It accepts the value checked.

99
Practice 2.5
 Create a web page that let students choose their department; use the
list of department in your faculty as a guideline.
 Use a checkbox to create a web page that will enable students to
select a subjects they enjoy most (more than one selection is
possible).

100
Checkboxes
 Check boxes allow for multiple items to be selected for a certain group of
choices.
 The check box's name and value attributes behave the same as a radio button.
 We can defines a checkbox like <input type="checkbox" />.
 Checkboxes let a user select ONE or MORE options of a limited number of
choices.
Eg. <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>
 
101
Checkbox attributes are:
 name: sets name of the checkbox
 value: sets the value of the checkbox. This is the data sent to server when the user submits the
form.
 checked: sets whether the checkbox is checked by default or not. It accepts the value checked.

 E.g. What type of food do you like?

<ul>

<li><input type="checkbox" name="genre" value=" spaghetti "

checked="checked"> Spaghetti</li>

<li><input type="checkbox" name="genre" value="pizza" checked="checked">

Pizza</li>
<li><input type="checkbox" name="genre" value="sandwich">Sandwich </li>

<li><input type="checkbox" name="genre" value="Burger">Burger</li>

</ul>
102
Selection lists
 Drop down menus are created with the <select> and <option> tags.
 <select> is the list itself and each <option> is an available choice
for the user.
 E.g.
Educational level: <br>
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select>

103
Attributes of Select
Attribute Value Description
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected
name text Specifies the name of a drop-down list
size number Specifies the number of visible options in a drop-
down list

Attribute of Option
Attribute value Description
selected selected Specifies whether the option is selected or not
when the form loads

104
Scrolling Lists
 To make the menu display as a scrolling list, simply specify the
number of lines you’d like to be visible using the size attribute.
 Example:
Select the fruits you like:
<select name="fruits" size="6" multiple="multiple">
<option>Orange</option>
<option>Apple</option>
<option selected="selected">Banana</option>
<option selected="selected">Mango</option>
<option> Avocado</option>
<option>Pineapple</option>
<option>Papaya</option>
<option>Strawberry</option>
</select>

105
Cont.…
 This produce the following output

106
Grouping menu options
 You can use the optgroup element to create conceptual groups of
options.
 The required label attribute in the optgroup element provides the
heading for the group.
<select name="icecream" multiple="multiple“ size=“8”>
<optgroup label="traditional">
<option>vanilla</option>
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praline</option>
<option>Nut surprise</option>
<option>Candy corn</option>
</optgroup>
</select>
107
Cont.…
 This produces the following output:

108
Button
 There are a number of different kinds of buttons that can be added to web
forms.
 Some are: submit button, reset button, and client side button.

Submit Button
 When clicked, the submit button immediately sends the collected data in the
form to the server for processing.
 Submit button is defined as follows:

 <input type="submit">

 Submit button has the following attributes:

 value: this sets the text displayed on the button as a label.
109
 name: used to give name to the submit button
Cont.…
E.g. <input type=”submit” name=”info” value=”Send”>
Reset Button
 The reset button returns the form controls to the state they were in
when the form loaded.
 This clears the text users typed into text fields, and removes
selections made.
 Reset button can be defined as follows:
 <input type="reset">
 E.g. <input type="reset" name="reset">
110
Client Side Button
 This is a button that is used to trigger a client-side script when the user
clicks on that button.
 This is used to execute scripting language such as JavaScript.
 It has no predefined function on its own, as submit and reset buttons do.
 Client side button can be defined as follows:
 <input type="button">
 Client side button has the following attributes:
 value: this sets the text displayed on the button as a label.
 name: used to give name to the button

Example: <input type=”button” name=”adder” value=”Add”> 111

Image Button
 This type of input control allows you to replace the submit button with an image
of your choice.
 The image will appear flat, not like a 3-D button.
 Image button can be defined as follows:
 <input type="image">

Image button attributes:

 src: sets the image to be used as the submit button
 value: text displayed on the button
 name: name of the submit button

Example:
 <input type="image" src="coffee.png" alt="Submit" width="48"
height="48"> 112
File selection control
 Web forms can collect more than just data.
 They can also be used to transmit external documents from a user’s hard drive.
 For example, a printing company could use a web form to receive artwork for a
business card order.
 A magazine could use a form on their site to collect digital photos for a photo
contest.
 The file selection control makes it possible for users to select a document from
the hard drive to be submitted with the form data.
 It is added to the form using our old friend the input element with its type set to
file.
 Example: <input type="file"> 
113
Cont.….
 The browser displays a “file” input as a text field with a button that allows
the user to navigate the hard drive and select the file for upload.
 Example: <input type="file" name="photo" /> 

 It is important to note that when a form contains a file selection input

element, you must specify the encoding type (enctype) of the form as
multipart/form-data and use the POST method.
 Example:

<form action=“ " method="post“ enctype="multipart/form-data">

<p> Send a photo to be used as your online icon:<br>

<input type="file" name="photo" /></p>

</form> 114
Linking HTML Forms with PHP Scripts

 To create a link between PHP scripts and HTML forms, we need to

use the functionalities of buttons, and the attribute of the <form
tag>, specifically “action” and “method”.
 Submit buttons: When activated, a submit button submits a form. 
 A form may contain more than one submit button.

115
Linking HTML Forms with PHP Scripts

 Action and method:

 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
(how to write scripts will be discussed in the coming chapters).
 The file defined in the action attribute usually does something with
the received input:
 <form name="input" action="action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
116
Inserting Multimedia
 You can add music or video into your web page.

 The easiest way to add video or sound to your web site is to use
<embed> tag.
 The src attribute of <embed> tag defines what video/audio file to
embed into the page.
 This tag causes the browser itself to include controls for the
multimedia automatically.
 Example:

<embed src="example.mpeg" autostart="false" />

117
Cont.….
 The following is the list of important attributes for <embed> element.

 align - determines how to align the object. It takes either center, left or right.

 autostart - Indicates if the media should start playing automatically.

Netscape default is true, Internet Explorer is false.
 loop - Specifies if the sound should be played continuously (set loop to
true), a certain number of times (a positive value) or not at all (false). This is
supported by Netscape only.
 playcount - Specifies the number of times to play the sound. This is
alternate option for loop if you are using IE.
 hidden - Defines if the object shows on the page. A false value means no
and true means yes.
118
Cont.….
 height – set height of the object.
 width – set width of the object.

 pluginspage - Specifies the URL to get the plugin software.

 name - A name used to reference the object.

 src - URL of the object to be embedded. This can be any

recognizable by the user's browser. It could be .mid, .wav, .mp3, .avi
and so on).
 volume - Controls volume of the sound. Can be from 0 (off) to 100
(full volume). This attribute is supported by Netscape only.
 Controller – whether to show controllers like play, stop, pause, etc.
119
Many Thanks!!
Questions??

120