Scribd
Upload
121 views

Computer Resource Centre - Piliyandala Education Zone Prince of Wales College, Moratuwa

1. HTML is used to design web pages and contains markup tags to define headings, paragraphs, images, and hyperlinks. It allows web developers to structure and style web content. 2. Static web pages are saved as files on a server, while dynamic pages are created programmatically when requested. 3. Basic HTML tags were demonstrated including headings, font styles, line breaks, images, and hyperlinks both within pages and to external websites or emails.

Uploaded by

jitha nipunika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
121 views

Computer Resource Centre - Piliyandala Education Zone Prince of Wales College, Moratuwa

1. HTML is used to design web pages and contains markup tags to define headings, paragraphs, images, and hyperlinks. It allows web developers to structure and style web content. 2. Static web pages are saved as files on a server, while dynamic pages are created programmatically when requested. 3. Basic HTML tags were demonstrated including headings, font styles, line breaks, images, and hyperlinks both within pages and to external websites or emails.

Uploaded by

jitha nipunika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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:[email protected]”>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


> &gt;
< &gt;
£ &pound;
¥ &yen;
space &nbsp;

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

You might also like