Computer Resource Centre – Piliyandala Education Zone
Prince of Wales College, Moratuwa
Web Designing & Development Workshop - HTML
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
1
Web Designing and Development
One of the major service of the Internet is World Wide Web. It consists or millions of web sites. Each
web site is having its own web address (URL – Uniform Resource Locator)
Eg.
http://www.google.com
http Protocol (Hypertext Transfer Protocol)
www host name (World Wide Web)
google.com Domain name
.com top level domain such as .gov, .edu, .net, .org, .lk, .uk)
Different between Static and Dynamic Web Pages
A static web page is one that has been written once, like a word processing document, and then
saved onto the web server. It’s like a file. If you could access the web server at a file system level,
move the file over to your computer, and then open it up locally in your web browser, it should look
exactly the same as if you looked at it through the Internet. Any changes to a static web page need to
be made manually, and then saved again.
A dynamic web page is created on the fly. It doesn’t actually exist on the web server until a web
browser requests it. When a request is made, web server runs whatever program will create the web
page. That program creates the page dynamically and returns it to the web server, which then passes it
along to the web browser.
HTML (Hypertext Markup Language) is used to design web pages. Web Editors such as Microsoft
Front Page, Macromedia Dream Viewer are also used to develop web pages.
Web Browsers are used to brows the web. Eg. Internet Explorer, Nescape Navigator, Opera, Mozilla
Fire fox are examples for web browsers.
HTML (Hypertext Markup Language).
HTML programs consist of Markup Tags. It is not a programming language. It’s a markup language.
There are two types of Tags.
1. Container Tags
These tags consist in pairs.
Eg. <Html> ...............................</Html>
<Head>................................<Head>
2. Non Container Tags
These are single Tags.
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
2
Eg. <Br>
<Hr>
<Img src................>
A simple HTML program is showing below. Its output is also shows there.
<Html>
<Head>
My First Web Page X
<Title>My First Web Page</Title>
</Head> Welcome
<Body> Sri Lanka
Welcome <br>
Sri Lanka
</Body>
</Html>
Use the Note Pad software (Start-->All Programs-->Accessories-->Note Pad) to type this HTML
Program and save it by giving file name and “.html”. Eg.
File --> Save --> MyWeb.html
File Name Extension
Then go to the Microsoft Internet Explorer or any other web browser and open that file. You can see
the web page if you correctly typed that HTML Code. Now you can do some changes and save the
HTML program again and refresh the Browser.
File -->Open-->Brows--> MyWeb.html
HTML started with <Html> Tag and ended with </Html>
HTML Program consists of Head and Body.
Within the Head Tags you can type the “Title”, Java Scripts or Cascading Style Sheets
and Meta Tags. <Head> ..... </Head>
Eg.
<Head>
<Title>My First Web Page</Title>
<style type="text/css">
body{background-color:#d0e4fe;}
h1{color:orange;text-align:center;}
</style>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
3
<script type="text/javascript">
function displayDate()
{document.getElementById("demo").innerHTML=Date();}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords"
content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP" />
</Head>
Web Contents such as Text, Pictures, Video Clips, and Sound Clips, Scripts are writing
within Body Tags.
<Body>
Welcome <br>
Sri Lanka
</Body>
How to Display Headings on a web page
There are 6 Heading Levels
<H1> Sri Lanka </H1> Largest Heading Size
<H2> Sri Lanka </H2>
<H3> Sri Lanka </H3>
<H4 align=”center”> Sri Lanka </H4>
<font color=”blue” >
<H5> Sri Lanka </H5>
</font>
<H6> Sri Lanka </H6> Smallest Heading Size
Change the font Size, Font Colures and Font faces
<Font Size=”5” Color=”Red” Face=”Garamond”>Welcome to Sri Lanka</Font>
You can use colour name or colour number. Colour number is hexadecimal and it consists of 6 digits
starting with #. First two numbers indicating Red colour, Second two numbers indicating Green colour
and last two numbers indicating Blue colour.
Color = “#66CC5F”
#66CC5F
Output
Red Green Blue Welcome
Sri Lanka
<BR> Tag is used for Line Break Hello ….
Eg. Welcome<br>Sri Lanka<br>Hello ….
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
4
Font Effects
Tags Description
<B>Hello Sri Lanka</B> Boldface
<I> Hello Sri Lanka</I> Italic
<em> Hello Sri Lanka</em> Emphasis
<cite> Hello Sri Lanka</cite> Citation
<U> Hello Sri Lanka</U> Underline
21<SUP>st</SUP> Superscript (21st)
CO<SUB>2</SUB> Subscript (CO2)
How to draw a Horizontal Line across a web page
<Hr>
Change the Attributes of Horizontal Line
<Hr Size=”3” Color=”Blue” Width=”50 %” align=”left” noshade>
How to insert a picture to a web page.
<Img src=”flower.jpg”>
Picture File Name should be write with extension.
Picture file and html file should be saved in the same place.
If the picture file in different location you should have to
specify the path of that file
Eg. <Img src=”images/flower.jpg”>
Attributes of the Image Tag
You can change the Width, Height, of a Picture or insert a border around a picture by using following
attributes.
<p align=”center”>
<Img src=”flower.jpg” Width=”300” Height=”200” Border=”2”>
</p>
Attributes of the Body Tag
You can change the colour of a web page or can be insert a picture to a web page.
How to change the colour of a web page
Eg.
<Body bgcolor=”green”>
<Body bgcolor=”pink”>
<Body bgcolor=”#66cc33”>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
5
How to insert a background picture of a web page
Eg.
<Body background=”blue hills.jpg”>
Relative path is best
<Body background=”picts/blue hills.jpg”>
Absolute path
<Body background=”d:/picts/mypics/blue hills.jpg”>
Output
Insert a Hyperlink to a web page
History
<A Href=”hist.html”>History</A>
Link to hist.html file. Label is History.
You can click on
the “History” to go
to “hist.html file.
Insert a Hyperlink to a web site
<A Href=”http://www.google.com”>Google</A>
Link to a web site Label
Insert an Email Link
<A Href=”mailto:samantha@gmail.com”>Contact Me</A>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
6
Hyperlinks to same page
Example
<a href="#C1">Jump to Chapter 1</a><br>
<a href="#C2">Jump to Chapter 2</a><br>
<a href="#C3">Jump to Chapter 3</a><br><br>
<h2 id="C1">Chapter 1</h2>
<p align="justify"> jsdjflksd sdjfdsj fdsfjsdlkf fdsf sjfsdkljf fjds
jsdjflksd sdjfdsj fdsfjsdlkf fdsf sjfsdkljf fjds
jsdjflksd sdjfdsj fdsfjsdlkf fdsf sjfsdkljf fjds
</p>
<h2 id="C2">Chapter 2</h2>
<p> jsdjflksd sdjfdsj fdsfjsdlkf fdsf sjfsdkljf fjds
jsdjflksd sdj fdsj fdsfjsdlkf fdsf sjfsdkljf fjds
jsdjflksd sdjfdsj fdsfj sdlkf fdsf sjfsdkljf fjds
</p>
<h2 id="C3">Chapter 3</h2>
<p> jsdjflksd sdjfdsj fdsf jsdlkf fdsf sjfsdkljf fjds
jsdjflksd sdjfdsj fdsfjs dlkf fdsf sjfsdkljf fjds
jsdjflksd sdjfdsj fdsfjs dlkf fdsf sjfsdkljf fjds
</p>
How to Insert a Table to a web page
Name Grade
Ravi 11C
Soma 11A
This table has 2
<Table border=”1” width=”30%” bgcolor:”pink”> Columns and 3 Rows.
<Tr><Th>Name</Th><Th>Grade</Th></Tr>
<Tr><Td>Ravi</Td><Td>11C</Td></Tr>
<Tr><Td>Soma</Td><Td>11A</Td></Tr>
</Table>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
7
Merge Cells of a Table
Merge Cells
Name Subject This table has 3
Science Maths Columns and 4 Rows.
Ravi 65 68
Soma 76 57
<Table border=”3” width=”50%”>
<Tr><Th rowspan=”2”>Name</Th><Th colspan=”2”>Subject</Th></Tr>
<Tr><Th>Science</Th><Th>Maths</Th></Tr>
<Tr><Td>Ravi</Td><Td>65</Td><Td>68</Td></Tr>
<Tr><Td>Soma</Td><Td>76</Td><Td>57</Td></Tr>
</Table>
Insert Pictures into a Table
Computers Picture
Desktop DeskComputer.jpg
Laptop.jpg
Laptop
If you don’t want to show the borders of
the table, keep the border = 0
<Table border=”1”>
<Tr><Th>Computers</Th><Th>Picture</Th></Tr>
<Tr><Td>Desktop</Td><Td><Img src=”DeskComputer.jpg”></Td></Tr>
<Tr><Td>Laptop</Td><Td><Img src=”Laptop.jpg”></Td></Tr>
</Table> Cell Spacing
<Table border=”1” cellpadding="5" cellspacing="10">
<Tr><Td>Hello</Td>
<Td>Hello</Td></Tr> Cell Padding
……………………..
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
8
Inserting Special Symbols to a web page
Symbol HTML Code
> >
< >
£ £
¥ ¥
space
Insert Comment on the HTML Program
<! --This page is used to display maps of different Countries -->
Insert Marquee (Flying text or object)
<marquee>Welcome</marquee>
<marquee><img src=”winter.jpg” width=”100”></marquee>
<marquee direction = “right” behavior = “alternate” scrolldelay=”200”>Welcome</marquee>
IFRAME (Inline frame)
<IFRAME id=frame2 src="Temp.htm" scrolling="no" frameborder="0" height="150">
</IFRAME>
Insert a Form and Form Objects
Eg.
<html><head>></head><body>
<h3 align=”center”>Login</h3>
<form name="form1" method="post" action="login.php">
Login ID: <input type="text" name="login" /><br><br>
Password : <input type="password" name="pwd" />
<br><br><input type="submit" value="Login" />
</form>
<body></html>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
9
Form Object HTML Code
input box <input type="text" name="firstname" />
text area box <textarea name="textarea" cols="40" rows=”3”></textarea>
radio button <input type="radio" name="radiobutton"
value="radiobutton">
check box <input type="checkbox" name="checkbox"
value="checkbox">
button <input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit" value="clear">
<input type="button" name="Submit" value="ok">
List / menu <select name="city">
<option>Colombo</option>
<option>Matara</option><option>Galle</option>
</select>
Compare GET vs. POST
The following table compares the two HTTP methods: GET and POST.
GET POST
BACK button/Reload Harmless Data will be re-submitted (the browser
should alert the user that the data are
about to be re-submitted)
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
10
Encoding type application/x-www- application/x-www-form-urlencoded
form-urlencoded or multipart/form-data. Use multipart
encoding for binary data
History Parameters remain in Parameters are not saved in browser
browser history history
Restrictions on data Yes, when sending No restrictions
length data, the GET method
adds the data to the
URL; and the length of
a URL is limited
(maximum URL length
is 2048 characters)
Restrictions on data type Only ASCII characters No restrictions. Binary data is also
allowed allowed
Security GET is less secure POST is a little safer than GET
compared to POST because the parameters are not stored
because data sent is in browser history or in web server
part of the URL logs
Never use GET when
sending passwords or
other sensitive
information!
Visibility Data is visible to Data is not displayed in the URL
everyone in the URL
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
11
Inserting a Frame to a Web Page
Frames are used to divide the Browser into several parts and load several html files to each frame.
Divide the Browser into two Rows
<HTML>
<head>
</head>
<frameset rows =”60%, 40%”>
<frame src = “Summary.html”>
<frame src = “Details.html”>
</frameset>
<body>
</body>
</HTML>
Divide the Browser into two Columns
<HTML><head></head>
<frameset cols =”30%, 80%”>
<frame src = “Topics.html”>
<frame src = “Details.html”>
</frameset>
<body></body></HTML>
Lists
Order list
<ol> Output
<li>pencils</li> 1. Pencills
<li>pens</li> 2. Pens
<li>erasers</li> 3. Erasers
</ol>
<ol type="a" start=3></font>
Output
<li>pencils</li>
c. Pencills
<li>pens</li>
d. Pens
<li>erasers</li>
e. Erasers
</ol>
Output
Unorder list
Cricket
<ul > football
<li>Cricket</li> rugby
<li>football</li>
<li>rugby</li>
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
12
</ul>
Output
<ul type="circle"> o Cricket
<li>Cricket</li> o football
<li>football</li> o rugby
<li>rugby</li>
</ul>
Definition List
<dl>
<dt>CPU</dt>
<dd>Central processing Unit is the brain of the Computer. Central processing Unit is the brain of the
Computer. Central processing Unit is the brain of the Computer. Central processing Unit is the brain of
the Computer. Central processing Unit is the brain of the Computer. Central processing Unit is the
brain of the Computer. </dd>
<dt>CU</dt>
<dd>Control Unit controls all the parts of the computer. Control Unit controls all the parts of the
computer. Control Unit controls all the parts of the computer. Control Unit controls all the parts of the
computer. Control Unit controls all the parts of the computer. </dd>
</dl>
Output
CPU
Central processing Unit is the brain of the Computer. Central
processing Unit is the brain of the Computer. Central processing
Unit is the brain of the Computer. Central processing Unit is the
brain of the Computer. Central processing Unit is the brain of the
Computer. Central processing Unit is the brain of the Computer.
CU
Control Unit controls all the parts of the computer. Control Unit
controls all the parts of the computer. Control Unit controls all the
parts of the computer. Control Unit controls all the parts of the
computer. Control Unit controls all the parts of the computer.
Piliyandala Zonal Computer Resource Centre, Prince of Walse College, Moratuwa. Tele 2646496
