1
CHAPTER TWO
Web page development using
HTML
Eyasu D.
3
HTM
L• HTML stands for Hypertext Markup Language
• It is the markup language used for creating web pages
• 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>).
• HTML tags normally come in pairs like <b> and </b>.
• HTML is not a programming language, is a markup language
4
• HTML elements form the building blocks of all
websites.
• HTML allows images and objects to be embedded
and can be used to create interactive forms.
• It can embed JavaScript which affect the behavior
of HTML webpage.
• HTML can also be used to include Cascading Style
Sheets (CSS) to define the appearance and layout of
text.
• World Wide Web Consortium (W3C) is the organization
that develops guidelines and specifications for HTML.
• The W3C website is found at www.w3.org.
5
HTML Document
• A text document containing markup tags
• The tags tell the browser how to display the document
• Should have a .htm or .html file name extension
• Can be created using a simple text like Notepad,
editor
Notepad++, Sublime, WordPad, ….
6
HTML Document Structure
• An HTML document has the following basic structure:
<html>
<head>
<title>page title</title>
</head>
<body>
</body>
</html>
7
HTML Terms
• Tag
• a piece of code that acts as a label that a web browser
interprets
• Used to tag or "mark-up" pieces of text. Once tagged, the text
becomes HTML code to be interpreted by a web browser.
Tags look like this: <tag>
• Element
• A complete tag, having an opening <tag> and a closing
</tag>.
• Attribute
• Is a property value that customizes or modifies an HTML
• Elements will often have multiple attributes.
8
HTML Elements
• Names enclosed in angle bracket < and >
• Commonly have a start tag and end tag
• Start tag format: <tag_name>
• End tag format: </tag_name> [ note the / after < ]
• E.g. <strong>bold text</strong>
• Some tags may not have end tags
• E.g. <br>, <hr>
• Tags may have attributes
• <tag_name attr1=“val1” attr2=“val2”
…>…</tag_name>
• E.g. <font face=“arial” size=“9”>Hello</font>
• Not case sensitive
9
HTML Tags
• html
• everything in the document should be within <html> &</html>
• head
• Contains information which is not displayed in the browser
• May contain other tags in it such as <title> </title> tag.
• format: <head>…</head>
• title
• sets the title of the web page to be displayed in the browser‟s title
bar.
• found within the <head> tag.
• format: <title>…</title>
10
HTML Tags
• body
• Contains the visible part of the web page
• What we place here will be displayed to our visitors.
• Contains several other tags and content in it
• format: <body>…</body>
• attributes:
• bgcolor=“color”
• background=“img url”
• text=“text color”
• link=“link color”
• alink=“active link color”
• vlink=“visited link color”
11
HTML Tags
• headings
• Predefined formats for text presentation
• Six(6) heading formats defined in HTML: <h1> up to <h6>
• <h1> the largest font size
• <h6> the smallest font size
• Format:
• <h1>…</h1>
• E.g. <h2>a text in heading two</h2>
• bold
• makes a text appear in bold
• Format: <b>…</b> or <strong>…</strong>
• E.g. <b>a text in bold</b>
12
HTML Tags
• italics
• makes a text appear in italics
• Format: <i>…</i> or <em>…
</em>
• E.g. <i>a text in italics</i>
• underline
• makes a text appear underlined
• Format: <u>…</u>
• E.g. <u>underlined text</u>
• paragraph
• defines a paragraph
• Format: <p>…</p>
13
HTML Tags
• E.g. <p>this is a paragraph of text. it has a new line before
and after it.</p>
• The browser inserts a new line before and after the text in the
paragraph tag.
• attribute:
• align=“alignment” {left, right, center, justify}
• line break
• inserts a new line
• Format: <br>
• E.g. line one <br> line two <br> line three <br> line
four
14
HTML Tags
• horizontal rule
• inserts a horizontal line
• Format: <hr>
• attributes:
• width=“width” {absolute: in pixels or relative: in %}
• noshade
• color=“color” {browser dependent}
• E.g. <hr width=“75%” noshade color=“#FF0000”>
• sub/sup
• define either a subscript or a superscript
• Format: <sub>…</sub> ; <sup>…</sup>
• E.g. X<sub>1</sub><sup>2</sup> + 2X<sub>3</sub>
15
HTML Tags
• Formatting Tags
<b></b> bold
< i> < /i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
16
HTML Tags
• Lists: Unordered, Ordered and Definition lists
• Unordered Lists (ul)
• Define bulleted lists
• Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
• Atribute:
• type=“bullet type” {disc, circle, square}
• E.g.
<ul type=“square”>
<li>book</li><li>marker</li><li>chalk</li></ul>
17
HTML Tags
• Ordered Lists (ol)
• define numbered lists
• Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
• Atribute:
• type=“number type” {1, i, I, a, A}
• E.g.
<ol type=“i”> <li>book</li><li>marker</li><li>chalk</li></ol>
18
HTML Tags
• Definition Lists (dl)
• define a list of term-description pairs
• Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
• E.g.
<dl>
<dt>book</dt><dd>something that we read …</dd>
<dt>marker</dt><dd>something we write with
…</dd>
19
HTML Tags
• images
• insert images in an html document
• Format: <img> {no end tag}
• Attributes:
• src=“img url” --> Location of image file(relative or absolute)
• alt=“alternate text” --> Substitute text for display
• border=“border width” -- > Size of border, 0 for no border
• width=“image width” -- > Number of pixels of the width
• height=“image height” -- > Number of pixels of the height
• supported image formats:
• gif, jpg/jpeg, png
• E.g. <img src=“assets/images/logo.gif” alt=“Site Logo”>
20
HTML Tags
• anchor
• defines a hyperlink or a named anchor
• used for navigation
• Format: <a>…</a>
• Attributes:
• href=“url”
• target=“target” { _self, _blank }
• name=“anchor name”
•E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com” target=“_blank”>Google</a>
21
HTML Tags-Target Attribute
• The target attribute specifies where to open the
linked document.
• The target attribute can have one of the following
values:
• _blank - Opens the linked document in a new window
or tab
• _self - Opens the linked document in the same
window/tab as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of
the window
22
HTML Tags
• Navigation with anchors
• named anchors
• named places in an html document
• Format: <a name=“anchor_name”></a>
• E.g. <a name=“top”></a>
• linking to anchors
• Format:
• <a href=“#anchor_name”>link text</a> {on the same page}
• <a href=“url#anchor_name”link text</a> {on a different page}
• E.g.
• <a href=“#top”>Top of page</a> {assuming the example above}
• <a href=“http://www.ddu.edu.et/history.htm#establishment”>
Establishment of DDU</a>
23
HTML Tags
Tables
• Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag
• 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.
• Tags involved: <table>, <tr>, <td>, <th>, <caption>
• NB: If you do not specify a border attribute, the table will
be
displayed without borders.
Table headers
• Headers in a table are defined with the <th> tag.
• The text in a <th> element will be bold and centered.
24
HTML Tags
Format:
<table>
<capti
on>tab
le
captio
n</cap
tion>
<tr>
<
t
d
>
25
HTML Tags
• E.g.
<table>
<caption align=“center” valign=“bottom”>table 1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
</table>
26
Example <table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Mulugeta G.</td>
<td>Internet Programming</td>
<td>3</td>
</tr>
<tr>
<td>Damana D.</td>
<td>Android Programming</td>
<td>3</td>
</tr>
<tr>
</table>
27
HTML Tags
• Table attributes:
• align=“alignment” {left, center, right}
• bgcolor=“color” --> - background colour (inside cells)
• width=“table width” {absolute or relative}
• border=“border width” -- > width of border
• bordercolor=“color”
• cellspacing=“space amount” {in pixels}-> separation
between cells
• cellpadding=“padding amount” {in pixels}-> around data
inside cell
28
HTML Tags
• Table row attributes:
• align=“alignment” {left, center, right}
• bgcolor=“color”
• height=“height”
• valign=“alignment” {top, middle, bottom}
• Table data/heading attributes:
• align=“alignment”
• valign=“alignment”
• width=“width”
• bgcolor=“color”
• Unless otherwise specified, <tr> and <td> inherit attributes of
<table> whenever it applies.
Attribute Value Description
29
align Left Specifies the alignment of a table according
Center to
right surroundingtext
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
%
Pixels Specifies the height of a table
30
HTML Tags
• Cells spanning multiple rows/columns
• Two additional attributes of <td> and <th>
• colspan=“num columns”
• rowspan=“num rows”
E.g. (colspan)
<table>
<tr>
<td
colspan
=“2”>
Cell
1</td>
<td>Ce
ll
31
HTML Tags
• E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td>
</tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
• E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell 3</td>
</tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
32
Example <table border="1">
<tr>
<th colspan=“2”>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Alemayehu</td>
<td>Bekele</td>
<td rowspan=“2”>Internet
Programming</td>
<td>3</td>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>2</td>
</tr>
<tr>
</table>
33
Example
Tables: align and width attributes
Align – determines position
of text within a cell <table
<tr>
border="1" align="center">
Width – determines width <th colspan="2"
of row relative to width="60%">Name</th
>
table <th
rowspan="2">Course<
/th>
<th
rowspan="2">Year</t
h>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
34
HTML Tags
• HTML Comments
• Comments are not displayed by the browser, but they can
help to document your HTML source code.
• insert commented text in an html document
• Format: <!-- comment text -->
• Notice that there is an exclamation point (!) in the opening
tag, but not in the closing tag.
• E.g. <!-- this is a comment text -->
35
HTML Special
Characters
• Special characters (named characters)
• Not found on the standard keyboard
• e.g. ©
• used by HTML
• e.g. <
• ignored by browsers
• e.g. blank spaces
• Format:
• &code;
• Examples:
• © © < < & &
space
• & reg; ® ™ ™
Character Code Short name Character name 36
" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
  non-breaking space
¡ ¡ ¡ inverted exclamation mark
¢ ¢ ¢ cent
£ £ £ pound
¤ ¤ ¤ currency
¥ ¥ ¥ yen
¦ ¦ ¦ broken vertical bar
§ § § section
¨ ¨ ¨ spacing diaeresis
© © © copyright
ª ª ª feminine ordinal indicator
« « « angle quotation mark (left)
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
37
Example
<table border="1" bgcolor="cyan">
<tr > <th colspan="4"> School of Computing </th> </tr>
<tr align="center">
<td> Chair 1 </td>
<td> Chair 2 </td>
<td> Chair 3 </td>
<td> Chair 4 </td>
</tr>
<tr>
<td> Computer Science </td>
<td> Information Technology </td>
<td> Software Engineering </td>
<td> Information Science </td>
</tr>
<tr> <td colspan="4" align="center"> Copy ©2012 </td> </tr>
</table>
38
Lab
Practice
39
HTML Tags
• Frames and Framesets
• Frames are a way of dividing the browser window
into several independent windows where each section
can load a separate HTML document
• Each frame can be independently loaded a different
url.
• Frameset - collection of frames in the browser
window
• The window is divided into frames in a similar way the
tables are organized into rows and columns.
• Advantages of Frames
• Improved performance (minimal page refresh)
• Flexibility
40
HTML Tags
Drawbacks of Frames
Fairly complex (for developer)
May confuse users (if not properly used)
Some (old) browsers may not support frames
URL masking, when printing and bookmarking
Frames are found in Framesets
Framesets define the „layout‟ of the frames it contains
Used to divide the body into different sections (therefore, no need
to use the body tag in the HTML)
Several frames can be included in a frameset
Framesets can be nested in one another to provide a more complex
layout.
41
HTML Tags
• Tag format:
Single frameset
Nested frameset
<frameset> <frameset>
<frame> <frame>
<frame> <frameset>
… <frame>
</frameset> <frame>
…
</frameset>
<frame>
…
</frameset>
42
HTML Tags
Frameset Attributes
• rows = “row dimensions” { ex. rows=“10%, 90%”
}
• cols = “column dimensions” { ex. cols=“20%, *,
30% }
• border = “value”
• bordercolor = “color”
• frameborder = “value” { 0, 1, no, yes }
• framespacing = “value”
43
HTML Tags
Frame Attributes
name = “frame_name”
src= “url” { url can be local or
external }
noresize [= “noresize”]
scrolling = “value” { auto, yes, no }
allowtransparency = “value” { in %
}
frameborder = “value” { 0, 1, yes,
no }
44
Example
45
Example
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” noresize scrolling=“no”>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</html>
nav.html
<html><body>
<a href=“http://www.google.com” target=“viewer”>google</a><br>
<a href=“http://www.yahoo.com” target=“viewer”>yahoo</a><br>
<a href=“http://www.altavista.com” target=“viewer”>altavista</a><br>
<a href=“http://www.msn.com” target=“viewer”>msn</a><br>
</body></html>
46
Example
47
Example
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” scrolling=“no”>
<frameset rows = “20%, *”>
<frame src=“title.html” noresize>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</frameset>
</html>
title.html
<html><bod
y>
<h1>
Welc
ome
48
Example
test.html
<html>
<head><title>HTML Target
Frames</title></head>
<frameset cols="200, *">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes>
<body> frames.
Your browser does not support
</body>
</noframes>
</frameset>
</html>
49
Example
main.html
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed
here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
menu.html
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com"
target="main_page">Google</a><br /><br />
<a href="https://mail.google.com/"
target="main_page">G-Mail</a><br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
50
HTML Tags
Inline Frames (iframe)
• iframes are also called floating frames
• Like frames
• But can occur anywhere in the <body> tag of an html document
• Unlike frames which should only occur in the <frameset> tag
• <iframe> tag defines a rectangular region within the
document in which the browser can display a
separate document
• Tag format:
<iframe></iframe>
51
HTML Tags
• Attributes of iframe
• src = “url”
• name = “name”
• height = “value”
• width = “value”
• scrolling = “value” { auto, yes, no }
• noresize [= “noresize”]
• align = “alignment” { left, right, middle, top,
bottom }
• allowtransparency = “value”
• frameborder – whether or not the borders of that
frame are shown = {1(yes) or 0(no)}
52
Example
<html>
<head>
<title>iFrame sample</title>
</head>
<body>
Below is the google site <br>
<iframe height="600px" width="600px"
src="http://www.google.com"
scrolling="auto"></iframe>
</body>
</html>
53
HTML Forms
• Used to gather data/input from users
• Client-side scripts can read input data
• To validate the data, prior to sending to server
• To use in local processing which may output web page
content that is displayed on the client
• The input is usually sent to a server-side script for processing
• The data can be sent in two methods: GET & POST
• GET
• for small and non-secure data
• Is the default method
• Data is sent as part of the request URL
Limitation in size of data
54
HTML Forms
• POST
• For large & secure data
• Input is sent as a data stream after the request URL
• Tags
• The <form> tag
• Contains all input elements in the form
• Defines the method of sending data
• Defines the server-side script responsible for accepting the
data
55
HTML Forms
• Attributes:
• name=“name”
• method=“method” {get, post}->used to upload data
• action=“url” {url of the server-side script to post data
to or backend script ready to process your passed data}
• enctype=“enctype” {multipart/form-data, text/plain,
…}
• multipart/form-data – used when uploading files
• Tag Format:
<form method=“post” action=“search.php” >
….
</form>
56
HTML Forms
• <input> tag:
• used to define input fields in a form
• several types of input fields, such as:
{textbox, listbox, checkbox, radio, button, select,
…}
• Attributes:
• name=“name” --> Used to give a name to the
control
• type=“type” --> {text, hidden, password, file,
submit, reset, button, checkbox, radio, image, …}
• value=“value” --> Used to provide an initial
value
57
HTML Forms
• The possible input types:
• text – input text box [Single line, Multiline or Password]
• hidden – a hidden field for storing values
• password – password input box
• file – input box for file uploading (browse)
• submit – a button that submits the form
• reset – a button that resets form fields to their original values
• button – a general purpose button
• checkbox – a check box
• radio – a radio button (option button)
• image – an image button that submits the form
58
HTML Forms
• HTML5 added several new input types:
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="month">
• <input type="number">
• <input type="range">
• <input type="search">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
•
59
HTML Forms
• Example for input
fields:
60
HTML Forms
• Other input fields
• <textarea> tag
• used to input
a large block
of
text/Multilin
e input field
• Tag format:
<textarea>
…</
textarea>
• Attributes:
61
HTML Forms
• <select> tag
• used to create a select box/ defines drop-down list
• Tag format:
• <select>
<option>…</option>
<option>…</option>
…
</select>
• Attributes:
• <select>
• name=“name”
• multiple=“multiple” {enables selection of multiple
items}
• disabled=“disabled”
62
HTML Forms
• <option>
• value=“value”
• selected=“selected”
• disabled=“disabled” {browser compatibility:
Firefox ?}
• Ex.
1. <select name=“department”>
<option value=“1”>Computer Science</option>
<option value=“2”>Information Tech.</option>
<option value=“3”>Computer Eng. </option>
</select>
2.Modify the above input so that Information Tech. is
63
HTML Forms
• submit & reset buttons
• Submit the data to a form handler
• the value attribute is the caption of the buttons
• To be submitted correctly, each input field must have name
attribute.
• The common way to submit a form to a server, is by using a
submit button.
Ex. <input type=“submit” value=“ok”>
• inserts a button with the caption (label) ok.
• file upload fields
Ex. <input type=“file” name=“doc”>
64
HTML Forms
• <label> tag
• used to give labels to input fields
•Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>
65
HTML Forms
• <fieldset> tag
• used to group input fields in a form
• the title/label of the group is set using the <legend> tag
• Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>
• Attributes:
• <legend>
• align=
“align
66
HTML Forms
• Example for input
types:
67
HTML Forms
• Presentation
• tables can be used to align form fields and their labels so that
the presentation of the form looks more regular.
• one possibility is to use:
• one table row per input field
• within a table row
• one column for the labels
• one column for the input fields
• the table borders can be set to 0 so that they are not visible
• other features of tables (rows & columns) can be adjusted as
required
68
HTML Forms
• Presentation (cont’d)
• Cascading Style Sheets (CSS) can be used to define further
presentation related attributes for input fields
• Ex. all text input fields should have font size of 10 and
background color of grey.
• will be discussed in the next section.
69
Example
• Create an HTML page which displays a login screen with
• a username field
• a password field
• a button to submit the form
• a button to reset the content of the form
70
Exercise
• Create an HTML page which displays student registration screen
with
• a name field
• an ID field
• a department field {select box with values:
1. Computer Science
2. Information Technology
3. Computer Engineering
• a semester field {select box with values:
1. I
2. II
• an academic year field
{select box with values: 1998-2000, 2000 default}
• a button to submit the form
• a button to reset the form
71
HTML Color
• HTML colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.
• Hex color codes: the intensity of red, green and blue
111
END OF CHAPTER
TWO Next: Chapter Three
