WEBDESIGNLAB MANUAL
INTRODUCTIONTOHTML
Web site: A set of interconnected web pages, usually including a homepage, generally
locatedonthesameserver,andpreparedandmaintainedasacollectionofinformationbya person,
group, or organization.
WebPage:Awebpageisadocumentthat'screatedinhtmlthatshowsupontheinternet when you
type in or go to the web page's address.
TypesofWebPages:
Static web page:isdeliveredexactlyasstored,aswebcontentinthewebserver'sfile
system. Contents cannot be changed.
Dynamic web page: is generated by a web application that is driven by server-side
software or client-side scripting. Dynamic web pages help the browser (the client) to
enhance the web page through user input to the server. Contents can be changed as
evolution over time.
Browsers&theirtypes
A web browser (commonly referred to as a browser) is a software application for retrieving,
presenting and traversing information resources on the World Wide Web.
ThemajorwebbrowsersareGoogleChrome, Firefox, InternetExplorer,Opera,andSafari.
Client–ServerModel
The client–server model is a distributed application structure in computing that partitions
tasks or workloads between the providers of a resource or service, called servers, and service
requesters, called clients. Often clients and servers communicate over a computer network. A
server is a host that is running one or more server programs which share their resources with
clients. A client requests a server's content or service function.
1
WEBDESIGNLAB MANUAL
Web–Server
Web server refers to either the hardware (the computer) or the software (the computer
application) that helps to deliver web content that can be accessed through the Internet.
Themostcommonuseofwebserversistohostwebsites,butthereareotherusessuchas gaming,
data storage or running enterprise application.
Workingofdifferenttypesofweb pages
Thedifferent typesof webpages are:
Advocacy:Anadvocacywebpageisonesponsoredbyanorganizationtoinfluence opinion.
URL ends with .org
Businessandmarketing: Itisonesponsoredbyacommercialenterprisetosellor market
their services. URL ends with .com
News:Itprovidestimelyinformationaboutcurrenteventsandissues.
Informational:Thisincludesreports,researchfindings,schoolsandcollegeinformation. URL
ends with .edu or .gov.
Personal:Itiscreated byan individualforhis/[Link] tidle(~).
GeneralstructureofaWebPage
A basic HTML page contains a Head section and a Body section. The contents of the
head section are normally invisible in a web browser and mainly consists of some Metatags.
The Body consist of those HTML elements that you want to have displayed in yourbrowser.
2
WEBDESIGNLAB MANUAL
<html>
<head>
</head>
<body>
</body>
</html>
Scripting language: A scripting language or script language is a programming language
that supports the writing of scripts, programs written for a special runtime environment that
can interpret and automate the execution of tasks which could alternatively be executed one-
by-one by a human operator.
URL: Auniformresourcelocator(URL),alsoknownaswebaddress,isa specificcharacter string
that constitutes a reference to a resource. In most web browsers, the URL of a web page is
displayed on top inside an address bar. An example of a typical URL would be
"[Link]
PopularSearchEngines
Yahoo Search
GoogleSearch
Bing
[Link]
[Link]
Infospace
WWW: The World Wide Web (WWW) is a system of interlinked hypertext documents
accessed via the Internet. With a web browser, one can view web pages that may containtext,
images, videos, and other multimedia, and navigate between them via hyperlinks.
ILLUSTRATINGHTMLTAGSANDTHEIRATTRIBUTES
HTML:HyperTextMarkupLanguageisthemostwidelyusedlanguagetowriteweb [Link] is
a markup language.
Hypertext:Refers tothe wayinwhich web pagesarelinked together.
MarkupLanguage:Theusersimplymarkupsatextdocumentwithtagsthattellaweb browser
how to structure it to display.
CreatingHTML document :To begin codingHTMLuser needs onlytwothings:
1. A simple text editor(notepad).
2. Awebbrowser.
3
WEBDESIGNLAB MANUAL
SimplestepstocreateabasicHTMLdocument:
1. Opennotepador anothertexteditor.
2. Atthe top ofthe pagetype<html>
3. Add theopeningheader tag<head>
4. Onthenextlinetype<title> givetitleforpage</title>
5. Gotonext lineand type closingheadertag</head>
6. Goto next lineand typeopeningbodytag<body>
7. Goto next lineand typeclosingbodytag</body>
8. Finally, gotonextlineandtype</html>
9. Inthe filemenu,choosesaveas.
10. Inthesave astypeoptionbox,chooseall files.
11. Namethefile [Link]
12. Clicksave.
HTMLdocumentstructure: An HTML documentstartsandendswith<html>and
</html>[Link] [Link]
these two tags,the document is split into 2 sections:
1. The<head>……</head>elementscontainsinformationaboutthedocumentsuchas title
ofthedocumentetc.
2. The<body>….</body>elementscontainstherealcontentofthedocumentthatyousee on
your screen.
ATTRIBUTES:
Anattributeis usedtodefinethecharacteristicsofanelementand isplacedinsidethe
element’sopeningtag.Allattributesaremadeupof2parts:aname andavalue.
-Thename isthepropertyyouwant toset.
-Thevalue is whatyouwantthevalue ofthe propertytobe.
Example:<fontface=”arial”color=”red”>
4
WEBDESIGNLAB MANUAL
Exercises
1. Designapagehavingsuitablebackgroundcolourandtextcolourwithtitle“MyFirst Web
Page” using all the attributes of the Font tag.
Procedure:
1. Gotostart->all program–>accessories-> notepad.
2. Typethehtmlcode.
3. Includetitle ”myfirst webpage”in titletag.
4. Set thebackgroundfor thewebpagebyusingbgcolorattributes of thebodytag.
5. Usefont tagto displaytext.
6. Gotofile->save->savethefilewithhtml extension.
7. Runthe html codeusingbrowser.
<html>
<head>
<title>Myfirstwebpage</title>
</head>
<bodybgcolor="green">
<fontsize="16"color="white"face="Arial">WelcometoAITS, TIRUPATI...</font>
</body>
</html>
***************output***************
5
WEBDESIGNLAB MANUAL
2. CreateaHTMLdocumentgivingdetailsofyour[Name,Age],[Address,Phone]and[Register
Number, Class] aligned in proper order using alignment attributes of Paragraph tag.
Procedure:
1. Gotostart->allprogram–>accessories-> notepad
2. Typethehtmlcode
3. Align[name,age]tocenter byusingalign=”left ” of<p>tag
4. Align[register,number,class] torightusingalign=”right”of<p>tag
5. Goto file->save->savethefilewith html extension
6. Runthe html codeusingbrowser
<html>
<head>
<title>program02</title>
</head>
<body>
<palign="center">
Name: AITS<br>
Age: 16
</p>
<palign="right">
Address:AghraharampostTIRUPATI<br>Phone:
123535615
</p>
<palign="left">
Reg No:
20AK1A0501<br>
Class:2nd Sem C’s
</p>
</body>
</html>
7
WEBDESIGNLAB MANUAL
****************output*************
8
WEBDESIGNLAB MANUAL
3. WriteHTMLcodetodesignapagecontainingsometextinaparagraphbygiving
suitable heading style.
Procedure:
1. Gotostart->allprogram–>accessories->notepad
2. Typethehtmlcode
3. Use<h1>to<h6>tagto displayheading
4. Use<p>tagfortheparagraph
5. Goto file->save->savethefilewith html extension
6. Runthehtml codehtml usingbrowser
<html>
<head>
<title>program03</title>
</head>
<body>
<center>
<h1>BasicWebdesign Lab</h1>
</center>
<h2align="left">Definition</h2>
<h3align="left">Website</h3>
<p>
Aset of interconnectedweb pagesusuallyincludingahome pageandmanyother web pages
</p>
</body>
</html>
**************output**************
9
WEBDESIGNLAB MANUAL
4. Createapagetoshow differentcharacterformatting(B,I,U,SUB,SUP)tags.
p
viz: logbm =plogbm
Procedure:
1. Gotostart->allprogram–>accessories->notepad
2. Typethehtmlcode
3. Include<b>,<u>,<sup>,<sub>,tags
4. Goto file->save->savethefilewith html extension
5. Runthe html codeusingbrowsers
<html>
<head>
<title>program04</title>
</head>
<body>
<p><b><i>log</i></b><sub>b</sub>m<sup>p</sup>=p<b><i>log</i>
</b><sub>b</sub>m</p>
</body>
</html>
**************output**************
10
WEBDESIGNLAB MANUAL
5. WriteHTMLcodetocreateaWebPagethatcontainsanImageatitscentre.
Procedure:
1. Gotostart->allprogram–>accessories->notepad
2. Typethehtmlcode
3. Include<img>taginside<center>tagand set alignattributeof imgtagtomiddle
4. Gotofile->save->savethefilewithhtml extension
5. Runthe html codeusingbrowsres
<html>
<head>
<title>program05</title>
</head>
<body>
<center>
<imgsrc="C:\DocumentsandSettings\AllUsers\Documents\MyPictures\Sample
Pictures\[Link]" height="200" width="200" align="middle"/>
</center>
</body>
</html>
***************output***************
11
WEBDESIGNLAB MANUAL
6. Createawebpagewithanappropriateimagetowardsthelefthandsideofthepage, when
user clicks on the image another web page should open.
Procedure:
1. Gotostart–>allprograms->accessories->notepad
2. Include<img>taginside<a> tag
3. Savethefileas [Link]
4. Createanotherfile
5. Typethehtmlcode
6. Savethefileas [Link]
7. In <a> [Link] attribute
8. Goto file->save->savethefilewith html extension
9. Runthe html codeusingbrowsers
<html>
<head>
<title>program05</title>
</head>
<body>
<a href="[Link]">
<imgsrc="C:\DocumentsandSettings\AllUsers\Documents\MyPictures\Sample Pictures\
[Link]" align="left" width="200" height="200"/>
</a>
</body>
</html>
[Link]
<html>
<head>
<title>program06</title>
</head>
<body>HiWelcome...</body>
</html>
12
WEBDESIGNLAB MANUAL
******************output******************
7. CreatewebPagesusingAnchortagwithitsattributesforexternal
links. Procedure:
1. Gotostart->allprograms->accessories->notepad.
2. Createfilecalledas [Link]
3. [Link]<a>[Link] url of
gmail website in href attribute.
4. Savethefile.
5. [Link].
6. If weclickonthelink itshouldlinktogmailwebsite.
[Link]
<html>
<head><title>page1</title>
</head>
<body>
<p>WelcometoAITS</p>
<ahref="[Link]
</body>
</html>
****************output*******************
13
WEBDESIGNLAB MANUAL
8. Createawebpageforinternallinks;whentheuserclicksondifferentlinksontheweb page it
should go to the appropriate locations/sections in the same page.
Procedure:
1. Gotostart->allprograms->accessories->notepad.
2. Typethehtmlcode.
3. First givename for theeach section ofthepagebyusingnameattribute of the <a>tag
(i.e<aname=”home”></a>)
4. Toprovidelinkforthesectionsusehref=”#nameofsection”in<a>tag.
5. Goto file->save–>savethefilewith .htmlextension.
6. Runthe html codeusingbrowsers.
Note:Includeparagraphmeans, includesometextparagraph in <p>tag
<html>
<head><title>program8</title></head>
<body>
<aname="home"></a>
<p>includeparagraph
</p>
<h1>contents</h1>
<a href="#link1">History</a><br>
<ahref="#link2">Html version</a><br>
<a name="link1"></a>
<p>includeparagraph
</p><br>
<aname="link2"></a>
html versions
<p>includeparagraph
</p></br>
<a href="#home">home</a>
</body>
</html>
9. WriteaHTMLcodetocreateawebpagewithpinkcolorbackgroundanddisplay moving
message in red color.
Procedure:
1. Gotostart->allprograms->accessories->notepad
2. Typethehtmlcode
3. Includebgcolor=”pink”attributein thebodytag
4. Usefont tagto displaymovingtext in redcolor bysettingcolor=”red”attribute
5. Include marqueetaginsidefont tagto displaymovingtext
6. Goto file–>save->savethefilewith html extension
7. Runthe html codeusing browser
<html>
<head>
<title>program09</title>
</head>
1
<bodybgcolor="pink">
WEBDESIGNLAB MANUAL
<font color="red"><marquee direction="left">
WelcometoAITSTIRUPATI</marquee></font>
</body>
</html>
***********************output************
1
WEBDESIGNLAB MANUAL
10. Createawebpage,showinganorderedlistofallsecondsemestercourses
(Subjects) Procudure:
1. Gotostart->allprograms->accessories->notepad
2. Typethehtmlcode
3. Use<ol>-----</ol>tagto displayordered list of allsubject
4. Inside<ol>taguse<li>--</li>tagtolisteachsubject
5. Goto file–>save->savethefilewith html extension
6. Runthe html codeusingbrowser
<html>
<head>
<title>program09</title>
</head>
<body>
<ol>
<li>English</li>
<li>Maths-2</li>
<li>Digital Electronics & computer
fundamentals</li><li>BasicWebdesignlab</li>
<li>multimedialab</li>
<li>digitalelectronics</li>
</ol>
</body>
</html>
***************output****************
WEBDESIGNLAB MANUAL
11. Createawebpage,showinganunorderedlistofnamesofalltheDiplomaProgrammes
(Branches) in your institution.
Procedure:
1. Gotostart->allprograms->accessories->notepad
2. Typethehtmlcode
3. Use<ul>.........</ul>tagto displayunordered list of names ofall thebranches
4. Inside <ul>.....</ul>taguse<li>........</li>tagto listeachbranch
5. Goto file– >save–>savethe filewith html extension
6. Runthe html codeusingbrowser
<html>
<head>
<title>program11</title>
</head>
<body>
<ul>
<li>ComputerscienceandEngg</li>
<li>Electronics andcommunication</li>
<li>Civil Engg</li>
<li>Mechanical Engg</li>
</ul>
</body>
</html>
***************output********************
WEBDESIGNLAB MANUAL
12. CreateaHTMLdocumentcontaininganestedlistshowingacontentpageofany book.
Procedure:
1. Gotostart->allprograms->accessories->notepad.
2. Typethehtmlcode.
3. Include<ol>tagfornamingthe chapterof thecontentspage.
4. Withintheprevious<ol>tagincludesanother<ol>tagtomentionthedifferentsectionof the
particular chapter.
5. Use<li>tagfor addingthelistitems.
6. Goto file->save–>savethefilewith html extension.
7. Runthe html codeusingbrowsers.
<html>
<head><title>program12</title>
</head>
<body>
<oltype=1>
<li>chapter1</li>
<oltype=1>
<li>sectionone</li>
<li>sectiontwo</li>
</oltype=1>
<li>chapter2</li>
<oltype=1>
<li>sectionone</li>
<li>sectiontwo</li>
</ol>
</ol>
</body>
</html>
**************output************
13. CreatethefollowingtableinHTMLwithDummyData:
Reg. Student Date of
Year/Semester
Number Name Admission
Procedure:
1. Gotostart-allprograms- accessories-notepad
2. Typethehtmlcode
3. Use<table>...</table>tagtodraw table
4. Create3 rows in thetable byusing<tr>...</tr>tag
5. Inthefirst rowcreate table headingbyusing<th>.............</th>tag
6. In the next 2 rows addthe data byusing<th>........</th>tag
7. Goto file–>save->[Link]]
8. Runthehtmlfileusingfirefox browser
WEBDESIGNLAB MANUAL
<html>
<head>
<title>program13</title>
</head>
<body>
<tableborder= "1">
<tr>
<th>[Link]</th>
<th>studentname</th>
<th>year/semester</th>
<th>dateofadmission</th>
</tr>
<tr>
<td> 20AK1A0501</td>
<td>suma</td>
<td>2nd</td>
<td>06/06/2012 </td>
</tr>
<tr>
<td>20AK1A0502 </td>
<td> xyz</td>
<td>2nd</td>
<td>07/07/2012 </td>
</tr>
</table>
</body>
</html>
WEBDESIGNLAB MANUAL
****************output********************
WEBDESIGNLAB MANUAL
14. Createawebpagewhichdividesthepageintwoequalframesandplacetheaudio and
video clips in frame-1 and frame-2 respectively.
FRAME-1 FRAME-2
Procedure:
1. Gotostart->allprograms->accessories->notepad
2. Typethehtmlcode
3. Use<frameset>tagto dividethewebpageinto 2 equal framesbysettingcols=”*,*”attribute
4. Inthefirst frameplaceaudio clipbyusing<frame> tag
5. Inthesecondframeplacevideoclipbyusinganother<frame> tag
Note : audio & video & file should be in same folder
6. Gotofile–>save–>save the [Link]
7. Runthehtml fileusingFirefox browser
<html>
<framesetcols="*,*">
<framesrc="Horse-neighing.mp3">
<framesrc="ARRRRRHorse.mp4-2.mp4">
</frameset>
</html>
******************output*****************
WEBDESIGNLAB MANUAL
15. Createawebpagewhichshould generatefollowingoutput:
FRAME-2
FRAME-1 FRAME-3
Procedure:
1. Gotostart->allprograms->accessories->notepad
2. Typethehtmlcode
3. Use<frameset>tagto divide thewebpageinto 2 equal frames bysettingcols=”*,*”
attribute
4. In thefirst frame placevideo clip byusing<frame>tag
5 .Againdividethesecond frameinto2equalrowsusingrows=”50%,50%” in
anotherframesettag
6 Placeoneaudioandvideo clipin other2frames.
7. Gotofile–>save–>savethefilewithhtml extension
8. Runthehtml fileusingFirefoxbrowser
<html>
<framesetcols="*,*">
<framesrc="ARRRRRHorse.mp4-2.mp4"name="left">
<framesetrows="50%,50%">
<framesrc="Horse-neighing.mp3"name="topright">
<framesrc="ARRRRRHorse.mp4-2.mp4"name="topbuttom">
</frameset>
</frameset>
</html>
********************output**********************
WEBDESIGNLAB MANUAL
