Build Simple Websites Using Commercial Programs

HTML, CSS,
i
PART ONE: STRUCTURING DOCUMENTS FOR THE WEB
LABORATORY I: Basics of HTML Structure and Text Formatting
Objectives:
 Acquire skills of the basic structure of hypertext MarkupLanguage
 Implement the basic structure tags of web pagedevelopment
 Commenting thetags
 Use HTML basictags
HTML Basic Structure

HTML stands for Hyper Text Markup Language, which is the most widely used language
on Web to develop web pages.
 Hypertext –refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a web page are calledHypertext
 Markup – using HTML to simply markup a text document with tags that tell a
web browser how to structure it todisplay
To create a simple webpage, follow the followingsteps
Step 1: open notepad /notepad++ (windows-> all programs->accessories->notepad)
Step 2: write the codes shown below on the texteditor
<! DOCTYPE html>

<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1> This is a heading </h1>
<p> Document Content goes here…..</p>
</body>
</html>
Step 3: save the file with the extension of file name .html example simple.html
Step 4: Open the file with the web browser to produce the following output.
1
The above example of HTML document uses the following tags:
<! DOCTYPE ….>this tag defines the document type and HTML version
<html>this tag encloses the complete HTML document and mainly comprises of document
header which is represented by <head>…</head>, document title which is represented by
<title>…</title> and document body which is represented by <body>…</body> tags.
<head>this tag represents the documents header which can keep other HTML tags like <title>,
<link> etc. It may contain elements that are designed for search engines to process or elements
that change the overall appearance of the webpage. But elements in the header do not display
directly as normal webpage content.
<title>the title <title> tag is used inside the <head> tag to mention the document title
<body>this tag represents the document’s body which put the text and elements to be displayed
in the main browser windows and also keeps other HTML tags like <h1>, <div>, <p>etc
<h1>this tag represents the heading
<p>this tag represents a paragraph
HTML Basic Tags
Heading Tags
Any document starts with a heading. HTML have six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5> and <h6>. While displaying any heading, browser adds one line
before and one line after that heading.
2
Example: Heading tags
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading1</h1>
</body>
</html>
The above program will produce the following result
Align headings and Horizontal Line

It is possible to align headings in left, right and center. The HTML code shown below
demonstrates the align headings in left, right, center and horizontal line. The align attribute uses
left, right and center value to align text headings in their respective sides of the browser. And the
tag <hr /> is used to create horizontal line.
3
Example: alignment and horizontal line
<!DOCTYPE html>
<html>
<head>
<title> align and horizontal line Example</title>
</head>
<body>
<h1 align="center">Centered and horizontal line heading </h1><hr />
<h1 align="left"> Left Aligned Heading</h1><hr />
<h1 align="right"> Right aligned Heading</h1><hr />
</body>
</html>
This will produce the following result
N: B. The content of the paragraph can be centered using <center>…. </center> tag.
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and closing </p> tags as shown below in the example:
when a browser displays a paragraph, it usually inserts a new line before the next paragraph and
adds a little bit of extra vertical space
4
Example: Paragraphing
<! DOCTYPE html>

<html>
<head>
<title> Paragraph Example</title>
</head>
<body>
<p> Here is a first paragraph of text. </p>
<p> Here is a second paragraph of text.</p>
<p> Here is a second paragraph of text.</p>
</body>
</html>
Line Break Tag
The <br /> element is used when opening and closing of tags is not needed and to start from the
next line. There should be a space between the character br and the forward slash because older
browsers will have trouble rendering the line break.
Example: Line break
<!DOCTYPE html>
<html>
<head>
<title> Line Break Example</title>
</head>
<body>
<p> Good morning <br /> This is the sample program of line break <br /> Is that working <br /> Thanks<br /> Have nice t
</body>
</html>
PreserveFormatting
Any text between the opening <pre> and the closing </pre> tag will preserve the formatting of
the source document. This tag keeps the text to follow the exact formate of how it is written in
the HTML document.
Example : preserve formatting
<!DOCTYPE html>
<html>
<head>
<title> Preserve Formatting Example</title>
</head>
<body>
<pre>
functionpreservingFunction(strText){ alert (strText) }
</pre>
</body>
</html>
Comments – comments use the following syntax

6
Anything after will not be displayed. It can still be seen in the source
code for the document, and any other notes to anyone looking at the code. 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.
Non-breaking Spaces
Use a non breaking space entity to give space between words. For example when coding
the “the Student at BDU” in a paragraph, we should use the similar to the following code
<!DOCTYPE html>
<html>
<head>
<title> Non breaking Space Example</title>
</head>
<body>
<p>
this program is developed by "the Student at BDU."
</p>
</body>
</html>
Presentational Elements
We are familiar with the ability to make text bold, Italic, or underline in Microsoft word
processor. In HTML, the following presentational elements are used:
The <b> Element
Anything that appears in a <b> element is displayed in bold, like the word “bold” here.
The syntax is <b>bold</b>
The content of a <b> element will be displayed in the same way as the content of the
<strong>element. It is used to indicate that its content have strong emphasis.
The syntax is <strong>content</strong>
7
The <i> Element
the content of an <i> element is displayed in italicized text, like the word “italic” here.
The syntax is <i>italic</i>.
The content of an <i> element will be displayed in the same way as the contents of the <em>
element. It is used to indicate that its contents have emphasis.
The <u> Element
The content of a <u> element is underlined with a simple line. The syntax is <u>Underlined</U>
to produce results like Underlined.
The <s> and <strike> Element
<s> is just the abbreviated form of <strike> which is used to display texts with strikethrough.
Strikethrough is a thin line through the text.
The <tt> Element
The content of a <tt> element is written in monospaced font like that of a teletype machine. It is
used to make each character having the same size. The syntax is <tt>monospaced</tt>.
The <sup> Element
The content of a < sup > element is written in superscript; it is displayed half a character’s height
above the other characters and is also often slightly smaller than the text surrounding it. The
<sup > element is especially helpful in adding exponential values to equations, and adding the st,
nd, rd, and thsuffixes to numbers such as dates.
Example : Written on the 31 < sup >st< /sup > February.
The <sub> Element
The content of a < sub > element is written in subscript; it is displayed half a character ’ s height
beneath the other characters and is also often slightly smaller than the text surrounding it.
Example: the molecular formula of water is H < sub > 2 < /sub >O.
The <big> Element
The < big > element was introduced to make the contents of this element one font size larger
than the rest of the text surroundingit.
Example: The following word should be < big > bigger < /big > than those around it.
The <small> Element
8
The < small > element is the opposite of the < big > element, and its contents are displayed one
font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has
no effect.
Example: The following word should be < small > smaller < /small > than those around it.
The <del> and <ins> Elements
Anything that appears within <ins>…</ins> element is displayed as inserted text where as the
content that appears within <del>… </del> element is displayed as deleted text.
All the above presentational elements are coded as shown below
<!DOCTYPE html>
<html>
<head>
<title> Presentational Elements Example </title>
</head>
<body>
<p>I am a <b>Student</b> at BDU.</p>
<p> I am doing <i>Internet Engineering</i> program<br />
to <u>understand</u><del>user-side</del><ins>client side</ins> programming</p>
<p>If I make <s>mistake</s> in the source code, my Teacher give <tt>correction</tt></p>
<p>the date is 21<sup>st</sup> October</p>
<p> to show the subscript example like H<sub>2</sub>0 </p>
<p> whatever the text<big>bigger</big> or <small>Smaller</small>, It is readable</p>
</body>
</html>
9
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections
or subsections of a page. For example: you might want to put all of the footnotes on a page
within a <div> element to indicate that all of the elements within that <div> element relate to the
footnotes.
The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follow
Example: Grouping thecontent
<! DOCTYPE html>

<html>
<head>
<title>Div and Span Example </title>
</head>
<body>
<div id="menu" align="center">
<a href="/index.html">HOME</a>|
<a href="/about/contact_us.html">CONTACT</a>|
<a href="/about/index.html">ABOUT</A>|
<a href="/about/dept_info.html">DEPARTEMENT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h3>Content Articles</h3>
<P> Actual Contentgoes here......</p>
the above is the output of the div tag example<hr />
</div>
<P> here is the span example output</p>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red"> div tag</span> along with CSS</p>
</body>
</html>
10
Phrase elements
Some of the elements in the phrase elements are working similar to the presentational elements.
For example the words written in an <em>element will look like the words in an <i>element but
the <em>element is supposed to indicate the addition of emphasis.
<em> and <strong> for emphasis
The content of an <em> and <strong> elements are intended to be a point of emphasis and strong
emphasis respectively in the part of document. Browsers display the strong emphasis in a bold
font whereas the <em> emphasis in an italic font.
Example: <p> the <em>emphasis</em> should be given if texts are written in <strong>bold and
italic </strong> font
<cite>, and <q> for quotations and citation
The <q> element is used to add a quote within a sentence. The text enclosed in a <q>…</q>
elements will be embedded in double quotes.
For example: <p> As Albert Einstein said, <q> Learn from yesterday, live for today, hope for
tomorrow</q>. </p>
The <cite> element is used if we are quoting a text. The source should be placed between an
opening <cite> tag and closing </cite> tag. The content of the source is displayed in an italicized
font.
11
Example: <P> these tags are taken from <cite>Internet and world wide web</cite> book
Marked Text
Any text that appear within the <mark>…</mark> element is marked with yellow ink.
Text Abbreviation
To abbreviate a text, it should be placed inside the opening <abbr> and closing </abbr> tags. The
title attribute should contain the full description.
Special Terms
The <dfn> ….</dfn> element or HTML definition element allows you to specify that you are
introducing a special term. Its usage is similar to italic words in the midst of a paragraph.
Example: Phrase elements
<!DOCTYPE html>
<html><head><title> Phrase Elements Example </title></head>
<body>
<p> the <em> emphasis </em> should be given if texts are written within <strong> bold and italic</strong> font type. </p>
<p> As Albert Einstein said, <q> Learn from yesterday, live for today, hope for tomorrow</q>.</p>
<p> these tags are taken from <cite> Internet and World Wide Web</cite> book. </p>
<p>the following word has been <mark> marked</mark> with yellow</p>
<p> my best friend's name is <abbr title="Geberemedehin">Gebrie</abbr>.</p>
<p> The following eord is a <dfn> special</dfn> term.</p>
</body>
</html>
12
Exercise
1. OpenthetexteditorandwriteHTMLbasicstructurethatcontainstitle“Bahirdaruniversity”,
heading“BahirDarInstituteoftecchnology”andthebodythefollowingtext
“BahirDarinstituteoftechnologyisOneoftheinstituteinBahirdaruniversitythatincludesfive
schools”
Then save it as example.html and run it to see the result.
2. WritetheHTMLprogramthatincludeheading1“Ethiopia”withinwhichparagraphs“Ethiopiais
theeastAfricacountry.Ethiopiahasmanytouristattractingplaceslikelalibla,axume,laketanahighl
andmonasteriesetc”andheading2“Regions”withinwhichparagraphs“therearetwo cities
and nineregions.”
3. WriteHTMLprogramtogetthefollowingoutput
13
LABORATORY II: List and Link
Objectives:
 Use unordered list tag in HTML scriptprogram
 Use ordered list tag in HTML scriptprogram
 Write link tags in the HTML script programs to refer to anotherpage
Lists
Unordered Lists
The <ul> tag stands for unordered list which is used to make a list of bullet points. Each bullet
point or line you want to write should then be contained between opening <li> tags and closing
</li> tags. li- stands for list item. The type of the bullet can be square, disc, circle and so on.
The figure shown below is the output of the unordered lists of the HTML program shown in the
example below with the square, disc and circle bulletin.
14
Example: Unordered lists
<!DOCTYPE html>
<html>
<head>
<title> Unordered Lists Example </title>
</head>
<body>
<p> the following is Unordered list using square bullet</p>
<ul type="square">
<li>Bahirdar University</li>
<li> Addis Abeba University</li>
<li>Arba Minch University</li>
<li> GondarUniversity</li>
<li> AwassaUniversity</li>
</ul>
<p> the following is the Unordered list using the default bullet or disc bullet</p>
<ul type="disc">
</ul>
<p> the following is the Unordered list using the circle bullet</p>
<ul type="circle">
</ul></body></html>
Ordered Lists
In an order list, rather than prefixing each point with a bullet point, we can use either numbers
(1,2,3), letters(A,B,C), or roman numerals(i,ii,iii) to prefix the list item.
An order list is contained inside the <ol>element. Each item in the list should then be nested
inside the <ol>element and contained between opening <li>and closing </li>tags
15
If you would rather have letters or roman numerals than Arabic numbers, we can use the
following attribute type on the <ol> element.
Value for type attribute Description Example
1 Arabic numerals(the default) 1, 2, 3, 4, 5
A Capital letters A, B, C, D, E
a Small letters a, b, c, d, e
I Large roman numerals I, II, III, IV, V
i Small roman numerals i, ii, iii, iv, v
The figure shown below is the output of the ordered lists of the HTML program shown in the
example below with the Arabic numerals, capital letters, small letters, large roman numerals and
small roman numerals.
16
Example: Ordered List
<!DOCTYPE html>
<html>
<head>
<title> ordered Lists Example </title>
</head>
<body>
<p> the following is ordered list using arabic numerals (the default)</p>
<ol type="1">
</ol>
<p> the following is the ordered list using the small roman numerals </p>
<ol type="i">
</ol>
<p> the following is the ordered list using Large roman numerals</p>
<ol type="I">
</ol>
<p> the following is the unordered list using capital letters</p>
<ol type="A">
</ol>
<p> the following is the unordered list using small letters</p>
<ol type="a">
</ol>
</body>
</html>
17
Definition Lists
The definition list is a special kind of list for providing terms followed by a short text definition
or description for them. Definition lists are contained inside the < dl > element. The < dl >
element then contains alternating < dt > and < dd > elements. The content of the < dt > element
is the term you will be defining. The < dd > element contains the definition of the previous < dt >
element.
Nested Lists
Lists can be nested inside other list. The items in the list may have its own list items so that this
list items can be nested inside the outer list item as shown below.
Example: definition and nested lists
<!DOCTYPE html>
<html>
<head><title> Definition and Nested Lists Example </title></head>
<body>
<p> The following is example of definition list</p>
<dl>
<dt>Unordered List</dt>
<dd> A list of bullet points.</dd>
<dt>An Ordered list</dt>
<dd> An ordered list of points, such as a numbered set of steps.</dd>
<dt>definition List</dt>
<dd>A list of terms and definitions.</dd>
</dl>
<p> the following is example of nested list</p>
<ol type="I">
<li>Addis Ababa University</li>
<li> Bahir Dar University</li>
<ol type="i">
<li>Bahir Dar institute of technology</li>
<li>College of Science</li>
<li>College of Social Science</li>
</ol>
</ol>
</body></html>
18
The start Attribute

Start attribute is sometimes used for ordered list to specify the starting point of number we need.
The syntax of the start attribute for different numbering system will be the following:
<ol type=”1”start=”4”> -numerals start with4.
<ol type=”I”start=”4”> -numerals start withIV.
<ol type=”i”start=”4”> -numerals start withiv.
<ol type=”a”start=”4”> -Letters start withd.
<ol type=”A”start=”4”> -Letters start withD.
Basic Links
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link that user can click in a
browser.
The syntax of the anchor is <a href=”Document URL” . . . attributes-list>Link Text</a>
href- is an attribute that references the link web page URL and title attribute is also used in the
<a> tag to display in a tooltip when we hover over the link and also the target attribute is used to
open the link page either on new browser or on the same browser windows.
Syntax: <p> <a href =http://www.Google.com/ title=”Search the web with Google”
target=”_blank”>Google</a> is a very popular search engine.</p>
19
Example: linkanddefinition the results willbe
<!DOCTYPE html>
<html>
<head>
<title> Definition and Nested Lists Example </title>
</head>
<body>
<p><a href="" title="Click on the link to open the website">
Bahir Dar University</a> is the website of bahirdar University</p>
</body>
</html>
Base Path tag

To link HTML documents related to the same website, it is not required to give a complete URL for every
link rather use <base> tag in the HTML document header- used to give a base path for all the links.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="">
</head>
<body>
<p>Click following link</p>
<a href="/bdu/index.html" target="_blank">Bahir Dar University</a>
</body>
</html>
Here, <a href=”/bdu/index.html” is being considered as <a href=http://www.bdu.edu.et/bdu/index.html.
A page Section Link

To create a link to a particular section of a given webpage by using name attribute, use the
following two-step process
i. Create a link to the place where we want to reach within a webpage and name itusing
<a …> tag as follows:
<h1>HTML Text Links <a name=”top”></a></h1>

20
ii. To create a hyperlink to link the document and place where we want toreach:
<ahref=”/bdu/html_text_links.html#top”>Go to the Top</a>
Download Links
To create text link to make PDF, DOC or ZIP files downloadable, simply give complete URL of
the downloadable files as follows:
<a href=http://www.bdu.edu.et/page.pdf>Download PDF</a>
E-mail Addresses Link

Mailto links are links on web pages that instead of pointing to a web page URL or anchor, they
point to an email address. Then when a reader clicks on the link, an email client opens and they
can send a message to that email address. To create a link on your website that opens an email
window, we simply use a mailto link. For example:
<a href=”mailto:webdesign@aboutguide.com”>Send email to the Web Design Expert</a>
Exercise
1. Include the following lists and their sub lists and links in the laboratory I exercise3
Branches of our hotel
A. Bahirdarbranch
i. Mainhotel
ii. Hotelb1
iii. Hotelb2
B. Markosbranch
i. Markhotel
ii. Selamhotel
C. Dessiebranch
Click the links below to visit the sites
Bahirdar
branchMarkos
branchDessie
21
branch
22
LABORATORY III: Marquee and Multimedia
Objectives:
 Implement HTML marquee that rotate texts in specifieddirection
 Define different behavior of HTMLmarquee
 Adding image in the web page and using the image as thelink
 Adding audio in the web page and using audio as the background of thepage
 Adding video in the webpage
HTML Marquees
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down the page depending on the settings. This is created by using HTML <marquee> tag. The
HTML marquee may not be supported by some browsers so that javascript or CSS can be used to
create the same effect.
A simple syntax to use HTML <marquee> tag is:
<marquee attribute_name=”attribute_value” …. More attributes>
One or more lines or text message or image
</marquee>
The <marquee> Tag Attributes
Important attributes for the HTML <marquee> tag are:

 width-this specifies the width of themarquee
 height –this specifies the height of themarquee
 direction-this specifies the direction in which marquee should scroll like up, down,
left orright.
 behavior-specifies the type of scrolling of the marquee like scroll, slide andalternate.
 scrolldelay-specifies how long to delay between eachjump.
 scrollamount-specifies the speed of marqueetext.
 loop-specifies how many times to loop. The default value is infinite (loopsendless).
23
 bgcolor-specifies background color in terms of color name or color hexvalue.
 hspace-specifies horizontal space around themarquee.
 Vspace-specifies vertical space around themarquee.
Example 1: basics of marquee tag
<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag </title>
</head>
<body>
<marquee>This is basic example of marquee tag</marquee>
</body>
</html>
Example 2: marquee with specified width
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>
Example 3: the text scrolls from left to right with a speed of 10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width="50%" direction="right" scrollamount="10">
this text will scroll from left to right and speed 10</marquee>
</body> 23
</html>
Adding Image
Images are added to a site using the <img> element, which consists at least two attributes: the
srcattribute to indicate the source of the image (It tells the browser where to find the image)- the
value is the URL and an alt attribute to provide a description of the image.
Syntax to add photo: <imgsrc=”photo.gif” alt=”my photo” />

The height and width attributes
The size of the image can be determine using height and width attribute –the value of these
attributes can be specified in terms of either pixels or percentage of its actual size.
Syntax: <imgsrc=”testimage.png” alt=”Test Image” width=”150” height=”100” />
Set Image Border and Alignment
By default image will have a border around it and align at the left side of the page, the thickness
can be specified in terms of pixels using border attribute. A thickness of 0 means no border
around the picture. Using align attribute, the image can be align at the center or right.
Syntax: <imgsrc=”testimage.png” alt=”Test Image” border=”3” align=”right” />
Using Image as a Link
To use the image as a link, place the image between the opening <a> tag and closing </a> tag.
The images are used to create graphical buttons or links to other pages.
Syntax: <a href=”../index.html” title=”Click here to return to the Test
page”><imgsrc=”testimage.png” width=”150” height=”100” border=”3” alt=”Test
Image” /></a>Image example
<!DOCTYPE html>
<html>
<head>
<title> Image Example </title>
</head>
<body><p> this is image insertion and image link example</p>
<imgsrc="testimage.png" width="150" height="100" border="3" alt="Test Image" />
<p> click on the logo to return the webpage of the university</p>
<a href="" target="_blank" title="Cleck here to open the home page"><imgsrc="logo.png" width="150" height="100" border="3" alt=
</body>
</html>
24
Produced result
Adding Video and Audio

To add playable video and audio to the webpage for the user, the non-standard <embed> tag is
required. Non-standard means the <embed> tag will not validate if we try to validate our
webpage. Non standard tags are not listed in the HTML recommendation.
The <embed> tags includes srcattribute, autostart, autoplay, width and height attributes. The
autoplay and autostart attribute is used to play the audio and video automatically if they are set to
true otherwise set the value to false and the user should click on the play button to start playing
the audio and video.
The syntax :<embedsrc=”source URL” autostart=”false/true” autoplay=”false/true” width=”
“ height=” “></embed>
Adding Background music to the webpage
To add a background sound to the webpage, it can be used <embed>, <object>, and <bgsound>
tags. Since <embed> tag supports most browser, we used this tag in our lesson. The <embed> tag
includes src, autoplay, autostart and hidden attributes. The < embed> tag is used to embed music,
videos and other kinds of multimedia in the webpage. The hidden attribute should be set to false
to hide the sound clips control panel.
Syntax: <embed src=”audio/video/image file” autostart=”true” autoplay=”true”
hidden=”true”></embed>
25
Example: Basic HTML multimedia example
<!DOCTYPE html>
<html>
<head>
<title> HTML Multimedia Tag </title>
</head>
<body>
<p> this is example of adding video</p>
<embed src="video.mp4" type="video/mp4" autoplay="false" width="150" height="144"></embed>
<p>this is example of adding audio</p>
<embed src="audio.mp3" type="audio/mp3" autoplay="false" width="150" height="144"></embed>
<p><marquee scrollamount="5"> the background sound is playing now</marquee></p>
<embed src="bgaudio.mp3" autoplay="true" hidden="true" loop="infinity"></embed>
</body>
</html>
The produced result is
Exercise:
1. Adding Lake Tana image as the background image of your web page and use yourphoto
as linkimage
2. Add your favorite music as the background audio of your webpage
3. Add video music or other video files in to your webpage
26
LABORATORY IV: HTML Tables
Objectives:
 Creating tables in HTML script using basic tableelements
 Defining table backgroundcolors
 Define different tableattributes
 Creating nestedtables
Basic Table Elements and Attributes

To arrange data like text, image, links, other tables and so on into rows and columns of cells, the
HTML tables are used. The tables are created using <table> tag in which the <tr> tag is used to
create table rows, the <td> tag is used to create data cells and the <th> element is used to create
table heading.
The table below contains three column and three rows of records created by the HTML script
program shown below in the example
27
Example: Creating simple table having heading, rows and columns
<!DOCTYPE html>
<html><head><title> HTML table example
</title></head><body>
<p> This is the HTML table with Heading</p>
<table border="1">
<tr>
<th>Name</th>
<th>Status</th>
<th>Salary</th>
</tr>
<tr>
<td>Solomon Tesfa</td>
<td>Lecturer</td>
<td>8400</td>
</tr>
<tr>
<td>Mengistu Belay</td>
<td>Ass.Lecturer</td>
<td>5200</td>
</tr>
<tr>
<td>yebeltalTegegn</td>
<td>Lab Assistance</td>
<td>3000</td>
</tr>
</table></body></html>
Cellpadding and Cellspacing Attributes

To adjust the white space in the table cells cellpadding and cellspacing attributes are used. The
cellspacing attribute defines the width of the border and cellpadding represents the distance
between cell borders and the content within a cell.
28
Colspan and Rowspan Attributes
To merge two or more columns into a single column, colspan attribute is used and to merge two
or more rows, rowspan is used.
Table Backgrounds
The table background is set using one of the following two ways:
 bgcolor attribute-using this attribute the background color for whole table or for one cell
can beadjusted.
 Background attribute- using this attribute the background image for whole table or for
one cell isadjusted.
Example: background color of the table
<!DOCTYPE html>
<html>
<head>
<title> HTML table example </title>
</head>
<body>
<p>HTML background, cellpadding,cellspacing,colspan and rowspan</p>
<table border="1" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>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>
</body>
</html>
29
Table caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table. In addition to the caption, tables can be divided into three portions: a header, a body, and
footer. The three elements for separating the head, body, and foot of a table are:
 <thead> -to create a separate tableheader.
 <tbody> - to indicate the main body of thetable.
 <tfoot> - to create a separate tablefooter.
A table may contain several <tbody> elements to indicate different pages or groups of data. But
it is notable that <thead> and <tfoot> tags should appear before<tbody>
The height and width of the table can be adjusted in terms of pixels or percentage of available
screen area.
The result produced for the example shown below is:
30
Example: table caption
<!DOCTYPE html>
<html>
<head>
<title> HTML table example </title>
</head>
<body>
<p> Table width/Height, Caption, header and footer are shown below</p>
<table border="1" width="500" height="150">
<caption> This is the caption</caption>
<thead><tr><td colspan="4">This is the head of the table</td></tr></thead>
<tfoot><tr><td colspan="4">This is the foot of the table</td></tr></tfoot>
<tbody><tr>
<td>row 1,column1</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</body>
</html>
Nested Table
Nesting tables simply means making a table inside another table. Nesting table can lead to
complex table layouts. Nested tables always need to be placed between <td>…</td> tags of the
outer container table. The following HTML code creates a table with one row and two column
and inside the second column again creates another table (nested table) with two rows.
31
Example:Nestedtable Produced result willbe:
<!DOCTYPE html>
<html>
<head>
<title> HTML Nested table example </title>
</head>
<body>
<table border="5" bordercolor="red">
<tr><td>First Column of Outer table</td>
<td><table border="5" bordercolor="green">
<tr><td>First row of Inner
Table</td></tr>
<tr><td>Second row of Inner Table</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Exercise
1. Create the following table and add this table in to the web page and fill the row
withrecords
Staff Members with their Salaries
Name Months
Jan. Feb. Mar. Apr. May Jun. Jul.
2. Change the background color togreen
32
LABORATORY V: HTML Forms
Objectives:
 Create single line text, multi-line text and password input textboxes
 Create check box and radio buttons in the webpage
 Create submit and normal buttons in the web page using HTMLscripts
 Implement file upload in the web page using HTMLscripts
 Implement hidden file controls in HTMLscripts
HTML Form Controls

HTML forms are required to collect some data from the site visitor. For example, during user
registration to collect information such as name, email address, credit card, and so on. There are
different types of form controls that are used to collect data using HTML form.
 Text inputcontrols
 Checkboxescontrols
 Radio boxcontrols
 Select boxcontrols
 File Selectboxes
 HiddenControls
 Clickable Buttons
 Submit and ResetButton
The HTML <form> tag is used to create an HTML form and it has the following sysntax:
<form action=”Script URL” method=”GET/POST”>
Form elements like input, text area, and so on.
</form>
The most frequently used form attributes are:
 action – backend script ready to process passeddata.
 method- is used to upload data (GET and POSTmethods)
 target- specifies the target windows or frame where the result of the script will be
displayed.
33
 enctype- specifies how the browser encodes the data before it sends it to the
server.
Text Input Controls

There are three types of text input used on forms:
 Single line text input controls – used to insert only one line user input like
search box or name. it is created by <input>tag
 Password input controls- a single line text input which is masked the character
as soon as a user enters it. It is created using HTML <input>tag.
 Multi-line text input controls- used to give details that may be longer than a
single sentence. It is created by using HTML <textarea>tag.
Example: the following program contains single line text, password and multi-line text input
controls.
<!DOCTYPE html>
<html>
<head>
<title> HTML Text Input Controls </title>
</head>
<body>
<form>
<p>Single line text input controls<p>
First name: <input type="text" name="first_name" /><br /> Last name: <input type="text" name="last_name" /><br
<p> Password input controls</p>
User ID: <input type="text" name="user_id" /><br /> Password: <input type="password" name="password" />
<p>Multiple-Line Text Input Controls</p> Description:<br />
<textarea rows="5" cols="50" name="description"> Enter description here ...
</textarea>
</form>
</body>
</html>
34
The produced result will be:
Some of the attributes of the <input> tag are:
 type- indicates the type of inputcontrols
 name-used to give a name to the control which is sent to the server to be

recognized and get thevalue
 value-used to provide an initial value inside thecontrol
 size-specify the width of the text-input control in terms ofcharacters
 maxlength-allow to specify the maximum number of characters a user can enter

into the textbox
 rows-indicates the number of rows of text areabox
 cols-indicates the number of columns of text areabox
Selection Control
If multiple options are available to be selected by the user, depending on the selection
requirement checkboxes, radio buttons and dropdown boxes can be used.
Checkboxes are used when more than one option is required to be selected. It is created using
HTML <input> tag and the type attribute is set to checkbox.
35
Radio buttons are used when out of many options; just one option is required to be selected. It is
created by using HTML <input> tag and type attribute is set to radio.
A select box, also called drop down box which provides option to list down various options in
the form of drop down list, from where a user can select one or moreoptions.
Some of the attributes of selection control are:
Type-indicates the type of input control. For checkbox the type set to checkbox and for radio
buttons the type set to radio
Name- used to give to the control which is sent to the server to be recognized and get the value
Value-the value that will be used if the checkbox is selected
Checked- set to checked if you want to select it by default
Example: the HTML code below shows the three selectioncontrols
<!DOCTYPE html>
<html>
<head>
<title> HTML selection Controls </title>
</head>
<body>
<form>
<p>Checkbox Control<p>
<input type="checkbox" name="chemistry" value="chem">Chemistry
<input type="checkbox" name="Biology" value="bio">Biology
<input type="checkbox" name="Physics" value="phys">Physics<br />
<p>Radio Button Control</p>
<input type="radio" name="sex" value="M">Male
<input type="radio" name="sex" value="F">Female<br />
<p>Select BoxControl</p>
<selectname="dropdown">
<option value="chem" selected>Chemistry</option>
<option value="bio"> Biology</option>
<option value="phys">Physics</option>
</select>
</form>
</body>
</html>
36
Creating Buttons
Buttons are most commonly used to submit a form, to clear or reset a form and even to trigger
client –side scripts. The buttons are created using the HTML <input> tag and set the type
attribute to submit, reset or button based on the required buttontype.
Example: the HTML code to show the type of buttons
<!DOCTYPE html>
<html>
<head>
<title> HTML button type example </title>
</head>
<body>
First name: <input type="text" name="first_name" /><br /><br /> Last name: <input type="text" name="last_name" /><br /
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" value="Reset"/>
<input type="button" Value="Calculate" onclick="calculate()" />
</body>
</html>
The result produced for the three type of buttons are:
37
File Upload Box
To allow users to upload a file to the website, it is needed to use a file upload box which is
known as a file select box. It is created using the <input> element and type attribute is set to file.
Example: a file uploads box HTML source code
<!DOCTYPE html>
<html>
<head>
<title> HTML File upload example </title>
</head>
<body>
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
</body>
</html>
The result produced using internet explorer browser is
And the result produced using Firefox browser is
Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number. When a user will click next
page then the value of hidden control will be sent to the web server and there it will decide which
page has be displayed next based on the passed current page.
38
Example: the hidden form control HTML code
<!DOCTYPE html>
<html>
<head>
<title> HTML Hidden form control </title>
</head>
<body>
<form method="post" action="#URL#">
<input type="hidden" value="08:03:31" name="startTime" /> Username: <input type="text" name="userName" /><br />
Password: <input type="password" name="password" /><br /><br /><br />
<input type="submit" value="Login" />
</form>
</body>
</html>
The result produced for the hidden form is
Exercise:
Write the HTML code that construct the following form
39
LABORATORY VI: HTML Frames
Objectives:
 Write HTML code for frame set to createframes
 Acquire skills to write HTML script for horizontal and verticalframes
 Define different attributes of frameset and frame tags ofHTML
 Loading two different webpages in to twoframes
Creating Frames
To create frames on a page, <frameset> tag is used instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of the <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Example: HTML code for creating frames
<!DOCTYPE html>
<html>
<head>
<title> HTML Frames Example </title>
</head>
<frameset rows="150,*,100">
<frame name="top" src="top_frame.html" />
<frame name="center" src="main_frame.html" />
<frame name="bottom" src="bottom_frame.html" />
</frameset>
</html>
The result produced will be:
40
From the above example change the rows attribute of the <frameset> tag by cols and change the
width to 25%, 50%, 25% to create all the three frames vertically as shown the result below.
Some important attributes of <frameset> tag are:

 cols-specify how many columns are contained in the frameset and the size of
eachcolumn.
 rows-specify the rows in the frameset the same as the colsattribute.
 border- specifies the width of the border of each frame inpixels.
 frameborder-specifies whether a three-dimensional border should be displayed
betweenframes.
 framespacing-specifies the amount of space between frames in a frameset.
And the <frame> tag has the followingattributes
 src-used to give the file name that should be loaded in the frame. Its value can
be anyURL.
 name-to give a name to a frame. It is used to indicate which frame a document
should be loadedinto.
 marginwidth-specify the width of the space between the left and right of the
frames borders and the framescontent.
 marginheight-specify the height of the space between the top and bottom of the
frames borders and itscontent.
 noresize-by default frames can be resized by clicking and dragging on the
borders of a frame. This attribute prevents a user to resize aframe.
 scrolling-controls the appearance of the scrollbars that appear on theframe.
 longdesc-provides a link to another page containing a long description of the
contents of theframe.
41
Browser Support for Frames
If a user is using any old browser or any browser which does not support frames then
<noframes> element should be displayed to the user. So it is important to place a <body>
element inside the <noframes> element because the <frameset> element is supposed to replace
the <body> element, but if a browser does not understand <frameset> element then it should
understand what is inside the <body> element which is contained in a <noframes> element. It is
nice to transfer message for the user having old browsers. For example Sorry!! your browser
does not supportframes.
One of the most popular uses of frames is to place navigation bars in one frame and then load the
main pages into a separate frame.
Example: the HTML code for the target frame and <noframe> tag
<!DOCTYPE html>
<html>
<head>
<title> HTML Target Frames Example </title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes><body>
<center><h2>Your browser does not support frames</h2></center>
</body></noframes>
</html>
And the menu frame source code is :
<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="" target="main_page">Google</a><br /><br />
<a href="" target="main_page">Bahir Dar University</a><br
/><br />
<a href="" target="main_page">Facebook User</a><br /><br
/>
</body>
</html>
42
Finally the main frame to display the result of the link will be
<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<center><h3>This is main page and content from any link will be displayed here</h3></center>
<p> so now click any link and see the result.</p>
</body>
</html>
The result produced by the above three HTML code will be
The HTML IFrames

The <iframe> tag defines a rectangular region within the document in which the browser can display a
separate document including scrollbars and borders. This tag can appear anywhere in the document. The
src attribute is used to specify the URL of the document that occupies the inline frame.
Example: usage of the <iframe> tag
<!DOCTYPE html>
<html>
<head>
<title> HTML IFrames Example </title>
</head>
<body>
<p> Document content goes here ...</p>
<iframesrc="menu.html" width="555" height="200"> Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here ...</p>
</body>
</html>
43
The result produced will be
Exercise
1. Create a frameset like the one shown below, where clicking a fruit loads a new page in
the main window. When the page loads in the main window, it will carry the details for
the appropriate fruit (to save time, you can use the images and fruit description pages in
the code download, but try to create the frameset and navigation on your own).
44
PART TWO: CASCADING STYLE SHEETS
The Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable. CSS handles the look and feel part of a web page.
Using CSS, the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as well as a variety
of other effects can be controlled.
The CSS syntax is made up of three parts: a selector, a property and a value.
Selector { property:value }
The selector is normally the HTML element or tag to be defined or changed the style. The
property is the attribute to be changed and each property can take a value. The property and the
value are separated by a colon and surrounded by curly braces.
There are four ways in which to apply CSS code to an HTML document. These are
a) inline
b) embedded
c) External
d) Imported
LABORATORY VII: Inline and embedded Style Sheet
Objectives:
 Write style sheet rules along with the HTML element using style attribute ofthose
elements
 Define inline style sheets to format the text and the webpage
 Define the embedded style sheet to make the web pageattractive
 Define the text, background and other element of the web page using inlineand
embedded stylesheet
Inline Style Sheet

Style sheet rules can be applied directly to any HTML element using style attribute of the tag.
This should be done when there is a need to change the style of a particular HTML element.
Rules define in line with the element overrides the rules define in an external CSS file as well as
the rules defined in <style> element.
45
Example: style sheet rules along with the HTML elements using style attribute of those elements.
<! DOCTYPE html>

<html><head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=”color:red;”>This is red</p>
<p style=”font-size:20px;”>This is thick</p>
<p style=”color:green;”>This is green</p>
<p style=”color:green;font-size:20px”>This is thick and green</p>
</body>
</html>
This will produce the following result:
Example: the color and margin style sheet
<! DOCTYPE html>

<html><head>
<title> Inline Style Sheet</title>
</head>
<h1 style =”color:blue; margin-left:30px;”>This is a heading.</h1>
<p> this is a paragraph.</p>
</body>
</html>
46
Embedded Style Sheet
To make formatting of the HTML document using CSS easier, it is better to embed the entire
style sheet into the document. This creates an embedded style sheet. To embed a CSS inside an
HTML document, it can be defined the styles in the <head> section of the document. The style
sheet section always starts by defining the style’s types. To define an embedded style sheet, it
always start with:
<style type=”text/css”>
The body of the style sheet goes within <style type=”text/css”> and </style> and declares rules
for the HTML element. For example: p {font-size: 16pt} this means that when we use the p
element in our HTML document, the font size of the text enclosed within the <p> tag will be 16.
To add other attribute or properties to the p element, such as
p {font-size: 16pt;color:red;background-color:yellow}
Example: here is a sample embedded style sheet:
<! DOCTYPE html>

<html><head>
<title> embedded style sheet example</title>
<style type=”text/css”>body{background-color:yellow} h1{font-size:50;color:blue} p{font-size:14pt;color:red}
</style>
</ head>
<body>
<h1>Embedded Style Sheet Example</h1>
<p>theentireHTMLdocumentcanbeformattedusingembeddedcascadingstylesheet,it makesformattingawebpagemuc
</body>
</html>
47
Example: here is the embedded style sheet example to format text of the HTML page
<! DOCTYPE html>

<html><head>
<title> embedded style sheet example</title>
<style type=”text/css”>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color: green;
}
</style>
</head>
<body>
<p class=”read”>This is red</p>
<p class=”thick”>This is thick</p>
<p class=”green”>This is green</ p>
<p class=”thick green”>This is thick and green</p>
</body>
</html>
48
Exercise:
1. Develop the drop down menu like shown below using
cascading style sheet. When the curser is being over the
menu the menu will be drop down and also when the curser
is on the drop down items the color will be changed.( Note:
Use inline and embedded style sheetrules)
49

Build Simple Websites Using Commercial Programs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build Simple Websites Using Commercial Programs

Uploaded by

Copyright:

Available Formats

HTML, CSS,

HTML Basic Structure

<! DOCTYPE html>

HTML Basic Tags

The above program will produce the following result

Align headings and Horizontal Line

This will produce the following result

<! DOCTYPE html>

This will produce the following result

Line Break Tag

Example : preserve formatting

This will produce the following result

Comments – comments use the following syntax

This will produce the following result

This will produce the following result

<! DOCTYPE html>

<em> and <strong> for emphasis

<cite>, and <q> for quotations and citation

Example: Phrase elements

This will produce the following result

Then save it as example.html and run it to see the result.

Value for type attribute Description Example

1 Arabic numerals(the default) 1, 2, 3, 4, 5

I Large roman numerals I, II, III, IV, V

i Small roman numerals i, ii, iii, iv, v

The start Attribute

Base Path tag

Here, <a href=”/bdu/index.html” is being considered as <a href=http://www.bdu.edu.et/bdu/index.html.

A page Section Link

<h1>HTML Text Links <a name=”top”></a></h1>

<ahref=”/bdu/html_text_links.html#top”>Go to the Top</a>

<a href=http://www.bdu.edu.et/page.pdf>Download PDF</a>

E-mail Addresses Link

<a href=”mailto:webdesign@aboutguide.com”>Send email to the Web Design Expert</a>

Important attributes for the HTML <marquee> tag are:

 height –this specifies the height of themarquee

 scrolldelay-specifies how long to delay between eachjump.

 scrollamount-specifies the speed of marqueetext.

 hspace-specifies horizontal space around themarquee.

 Vspace-specifies vertical space around themarquee.

Example 1: basics of marquee tag

Example 2: marquee with specified width

Example 3: the text scrolls from left to right with a speed of 10

Syntax to add photo: <imgsrc=”photo.gif” alt=”my photo” />

Adding Video and Audio

The produced result is

Basic Table Elements and Attributes

Cellpadding and Cellspacing Attributes

Example: background color of the table

 <thead> -to create a separate tableheader.

 <tbody> - to indicate the main body of thetable.

 <tfoot> - to create a separate tablefooter.

The result produced for the example shown below is:

Staff Members with their Salaries

Jan. Feb. Mar. Apr. May Jun. Jul.

2. Change the background color togreen

HTML Form Controls

Text Input Controls

Some of the attributes of the <input> tag are:

 type- indicates the type of inputcontrols

 name-used to give a name to the control which is sent to the server to be

 value-used to provide an initial value inside thecontrol