Chapter 2
Chapter 2
CHAPTER TWO
Web page development using
html
Fikru F..
2
Contents
HTML Basics
Introduction to XML
3
HTML
• HTML stands for Hypertext Markup Language
HTML Document
• A text document containing markup tags
<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>
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
• 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>
<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>
NB: The <caption> element puts a title above the
table
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
HTML Tags
• Table attributes:
• bordercolor=“color”
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.
29
Attribute Value Description
align Left Specifies the alignment of a table according to
Center surrounding text
right
cellpadding pixels Specifies the space between the cell wall and the cell
content
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>Cell 2</td> <td>Cell 3</td> </tr>
<tr>
<td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td>
</tr>
<tr> <td colspan=“4”>Cell 8</td> </tr>
</table>
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>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
32
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 table width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>IP</td>
<td align="center">3</td>
</tr>
<!– etc -->
34
HTML Tags
• HTML Comments
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
• Simultaneous multiple views
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
Used to divide the body into different sections (therefore, no need to use
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
• border = “value”
• bordercolor = “color”
• framespacing = “value”
43
HTML Tags
Frame Attributes
name = “frame_name”
noresize [= “noresize”]
allowtransparency = “value” { in % }
bordercolor = “color”
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><body>
<h1>Welcome to My Bookmarks !</h1>
</body></html>
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>
Your browser does not support frames.
</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>
</html>
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
• disabled=“disabled”
• checked=“checked”
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/Multiline input field
• Tag format:
<textarea>…</textarea>
• Attributes:
• name=“name”
• cols=“num_columns”
• rows=“num_rows”
• readonly=“readonly”
• wrap=“wrap_type” {off, hard, soft, virtual, physical}
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>
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.
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=“alignment” {left, center, right}
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.
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.
Blocks (Divisions)
In HTML, we can create divisions of an HTML document
using the <div> tag.
A <div> is a logical block tag that has no predefined meaning
or rendering
Very important for page layout design
The <div> tag works well with CSS
Tag format:
<div> … </div>
Attributes:
align=“alignment” {left, right, center} - define content
alignt.
73
web pages
• Provides more detailed attributes to elements than the ones
several contexts
• Clearly separates content from its presentation
• Cascading Order:
• Inline styles
• Internal styles
• External styles
• Browser default
• From highest to lowest
77
• The Id selector
• unlike the class selector, the Id selector always applies to
only one element and defined with “#”
• uses the id attribute of an HTML element to select a specific
element.
Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
<p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
<div id=“color”>some text</div>
81
CSS Fonts
• color property defines text color to be used for HTML element
• font-family property defines font to be used for HTML element
• font-size property defines text size to be used for HTML element
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
89
Examples:
Inline Example
• Add <h1> and <p> with some text to demonstrate the style attribute
Internal Example
• Add <h1>,<h1> and <p>,<p> with some text to demonstrate the
<style> element in side the <head> element using the 3 types of
selectors
• Tag-name/element name
• Class selector(.)
• Id selector(#)
External Example
• Add <h1> and <p> with some text to demonstrate with <link>
element
<link rel="stylesheet" type="text/css" href=“filename.css">
91
Example 1:
92
Example 2:
93
Introduction to XML
What is XML – EXtensible Markup Language?
• markup language much like HTML
• was designed to describe data, not to display data
• tags are not predefined - must define your own tags
• designed to be self-descriptive
XML
• XML is Not a Replacement for HTML (but HTML can be generated
from XML)
• XML is a complement to HTML.
• XML is a software- and hardware-independent tool for carrying
information.
• Difference between XML and HTML
• XML and HTML were designed with different goals:
• XML - designed to describe data, with focus on what data is
• HTML - designed to format & display data, with focus on how
data looks
• HTML- about displaying, while XML is carrying information
• HTML tags have a fixed meaning and browsers know what it is
while XML tags are different for different applications, and users
know what they mean.
HTML XML
• Fixed set of tags • Extensible set of tags
• Presentation oriented • Content orientated
• No data validation • Standard Data infrastructure
capabilities • Allows multiple output forms
• Single presentation
96
Disadvantage of XML
• XML is text (Unicode) based.
• Takes up less space.
• Can be transmitted efficiently.
• XML document can be displayed differently in different media.
• Html, video, CD, DVD,
• XML documents can be modularized. Parts can be reused.
• Easily readable by human users
• Very flexible and customizable (no finite tag set)
• Easy to use from programs (libs available)
• Easy to convert into other representations
• (XML transformation languages)
• Many additional standards and tools
• Widely used and supported
97
XML Rules
• Tags are enclosed in angle brackets.
• Tags come in pairs with start-tags and end-tags.
• Tags must be properly nested.
• <name><email>…</name></email> is not allowed.
• <name><email>…</email><name> is.
• Tags that do not have end-tags must be terminated by ‘/’.
• <br /> is an html example.
• Tags are case sensitive.
• <address> is not the same as <Address>
• XML in any combination of cases is not allowed as part of a
tag.
• Tags may not contain ‘<‘ or ‘&’.
• Documents must have a single root tag that begins the
100
Elements Vs Attributes
• Elements may have attributes that have a name and a value, e.g.
<section number=“1“>.
• What is the difference between elements and attributes?
• Only one attribute with a given name per element (but an
arbitrary number of subelements)
• Attributes have no structure, simply strings (while elements can
have subelements)
• As a rule of thumb:
• Content into elements
• Metadata into attributes
• Example:
• <person born=“1992-07-09“ died=“2018-06-07“>
• Alan Turing</person> proved that…
102
<article> Start
Tag
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article>
Content of
End
Eleme the
Tag
nt Element
(Subeleme
nts and/or
106
Namespaces
<library>
<description>Library of the CS Department</description>
<book bid=“HandMS2000“>
<title>Principles of Data Mining</title>
<description>
Short introduction to <em>data mining</em>, useful
for the IRDM course
</description>
</book>
</library>
Semantics of the description element is
ambigous
Content may be defined differently
Renaming may be
Disambiguation ofimpossible (standards!)
separate XML applications
using unique prefixes
108
Namespace Syntax
<dbs:book xmlns:dbs=“http://www-dbs/dbs“>
Namespace Example
<article>
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article>
110
?
END OF CHAPTER TWO
Next: Chapter Three