1
INDEX
S.No. Topic
1. Creation of Static web pages using HTML
1.1. Basic tags of HTML
1.2. Formatting tags
1.3. Character Entities
1.4. Different types of Lists
1.5. Hypertext Links
1.6. Frames 1.6.1 dividing frames with links
1.7. Tables
1.8. Forms
1.9. Cascading Style sheets
1.10. CSS in hyper Links
1.11. CSS using selectors
1.Creation of Static web pages using HTML
1.1 Basic Tags of HTML
<html>
<head><title>Basic Tags</title></head>
<body bgcolor="chartreuse"><font color="red" size="9">
<h1>"My first web page"</h1>
<h2>Basic tags are demonstrated in this page</h2>
<h3><font size="5">Basic tags are headings,paragraphs</font></h3>
<h4><font size="5">break,horizontal rules</font></h4>
<h5><font size="5">Let us start!</font></h5>
<h6><font size="5">Demonstration</font></h6>
</font>
<font color="purple" size="7">
<hr color="blue"/>
<p align="center">Hello!This is first para</p>
<hr color="blue"/>
<p align="center">This is second para
<br/>
second line
</p>
<hr color="blue"/>
</font>
</body>
</html>
Output:-
2
1.2 Formatting Tags
<html>
<head><title>Formatting tags</title></head>
<body bgcolor="yellow"><font color="purple" size="9">
<p align="center"><b>This is bold text</b></p>
<p align="center"><i>This text is in italic font</i></p>
<p align="center"><u>This is underlined text</u></p>
<p align="center"><em>This text is emphasized</em></p>
<p align="center"><big>This text is big</big></p>
<p align="center"><small>This text is small</small></p>
<p align="center">This is <sub>subscript</sub> and This is
<sup>superscript</sup></p>
<hr color="red"/>
<h1 align="center">"PREFORMATTED TEXT"</h1>
<p align="left">This is<sub>subscript</sub></p>
<p align="center"><pre><font color="purple" size="9">This
is</font></pre><sup>superscript</sup></p>
</font>
</body>
</html>
Output:-
3
1.3 Character Entities
<html>
<head><title>Character Entities</title></head>
<body bgcolor="orange">
<h1 align="center"><font color="purple"><u>CHARACTER
ENTITIES</u></font></h1>
<p><h3>The special characters which can not be rendered by the
browser.These special characters are called entities.An entity in a document is
replaced by its associated character by the browser.</h3></p>
<table border="1" color="orange" align="center">
<th><font color="green" size="5">Meaning</font></th><th><font
color="green" size="5">Entity</font></th><th><font color="green"
size="5">Character</font></th>
<tr><td>nonblank space</td>
<td>& nbsp</td>
<td> </td></tr>
<tr><td>less than</td>
<td>& lt</td>
<td><</td></tr>
<tr><td>greater than</td>
<td>& gt</td>
<td>></td></tr>
<tr><td>ampersand</td>
<td>& amp</td>
<td>&</td></tr>
<tr><td>double quote</td>
<td>& quot</td>
<td>"</td></tr>
4
<tr><td>single quote</td>
<td>& apos</td>
<td>&apos</td></tr>
<tr><td>one half</td>
<td>& frac12</td>
<td>½</td></tr>
<tr><td>copyright</td>
<td>& copy</td>
<td>©</td></tr>
<tr><td>registered</td>
<td>& reg</td>
<td>®</td></tr>
</table>
<p><h3>Note:There should be no space between & and keyword(nbsp,copy,reg
etc.,) in the entity.</h3></p>
</body>
</html>
Output:-
1.4 Lists
<html>
<head><title>lists</title></head>
<body bgcolor="skyblue">
<h1 align="center"><font color="red"><u>LISTS</u></font></h1>
<p><h3>The primary supported list types are those with which most people are
already familiar:unordered lists such as grocery lists and ordered lists such as
the assembly instructions for a new bicycle.Definition lists can also be
defined.</h3></p>
<h2><font color="red">Unordered Lists</font></h2>
5
<p><h3><font color="purple">Common languages used to write web
documents are:</font></h3></p>
<ul>
<li>HTML</li>
<li>XHTML</li>
<li>XML</li>
</ul>
<h2><font color="red">Ordered Lists</font></h2>
<p><h3><font color="purple">Sequence of tags to be followed in writing a
web document:</font></h3></p>
<ol type=I>
<li>Include <html></html></li>
<li>Next tag is <head></head> with title tag inside it.</li>
<li>Then comes <body></body> tag in which entire content of the
document is specified.</li>
</ol>
<h2><font color="red">Definition Lists</font></h2>
<dl>
<dt>B.E.</dt>
<dd>Civil</dd>
<dd>CSE</dd>
<dd>ECE</dd>
<dd>EEE</dd>
<dd>Mech</dd>
<dd>IPE</dd>
<dt>B.Tech</dt>
<dd>Chemical</dd>
<dd>Bio-Tech</dd>
</body>
</html>
Output:-
6
1.5 Hypertext Links
<html>
<head><title>Hypertext links</title></head>
<body bgcolor="pink">
<h1 align="center"><font color="green"><u>HYPERTEXT
LINKS</u></font></h1>
<p><h3><font color="red">A link that points to a different document specifies
the address of that document.Such an address might be a filename,a directory
path and a filename or a complete URL.</font></h3></p>
<p><h2><font color="green">Mail Service Providers</font></h2></p>
<a href="www.yahoomail.com"><img src="C:\NAVIN\WPS -
8100\yahoo_logo.jpg" width="50" height="50"/>Yahoo</a>
<br/>
<a href="www.gmail.com"><img src="C:\NAVIN\WPS - 8100\gmail-logo.jpg"
width="50" height="50"/>Gmail</a>
<br/>
<a href="www.rediffmail.com"><img src="C:\NAVIN\WPS -
8100\rediffmail_logo.gif" width="50" height="50"/>Rediff Mail</a>
<br/>
<a href="www.rocketmail.com"><img src="C:\NAWPS - 8100\rocketmail-
logo.gif" width="50" height="50"/>Rocket Mail</a>
<p><h2><font color="green">Educational Websites</font></h2></p>
<a href="www.cbit.ac.in"> <img src="C:\NAV\WPS - 8100\n2.jpg"
width="300" height="300"/>CBIT website</a>
<p><h2><font color="green">HTML Pages</font></h2></p>
<a href="basictags.html">Basic Tags</a>
<br/>
<a href="characterentities.html">Character Entities</a>
<br/>
7
<a href="formattingtags.html">Formatting Tags</a>
<br/>
<a href="lists.html">Lists</a>
</body>
</html>
Output:-
1.6 Frames
<html>
<head><title>Frames</title></head>
<frameset rows="70%,30%">
<frame src="hypertextlinks.html"/>
<frameset cols="50%,50%">
<frame src="forms.html"/>
<frame src="characterentities.html"/>
</frameset>
</frameset>
</html>
8
Output:-
1.6.1 Creating hyperlink and display in other frame in the same window
Home.html
<html>
<head>
<frameset cols="50%,*">
<frame name="left" src="links.html">
<frame name="right" src="display.html">
</frameset>
</head>
</html>
Output:-
9
Links.html
<a href="cse.html" target="right">cse</a>
<a href="it.html" target="right">IT</a>
<a href="cme.html" target="right">cme</a>
Output:-
Display.html
<body bgcolor=pink>
10
Cse.html
Cme.html
11
It.html
1.7 Tables
<html>
<head><title>Tables</title></head>
<body bgcolor="olive">
<h1 align="center"><font color="blue"><u>TABLES</u></font></h1>
<p><h3>Tables are common fixtures in printed documents,books,and of course
web documents.Tables provide a highly readable way of presenting many kinds
of information.</h3></p>
<table border="1"><caption><font color="cyan" size="5">Fruit Juice
Drinks</font></caption>
<tr>
<th></th>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
12
<br/>
<table border="1"><caption><font color="cyan" size="5">Fruit Juice Drinks
and Meals</font></caption>
<tr>
<td rowspan="2"></td>
<th colspan="3">Fruit Juice Drinks</th>
</tr>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
<br/><br/>
<table border="5" cellspacing="10" cellpadding="30">
<tr>
<td>small spacing,</td>
<td>large padding</td>
</tr>
</table>
<br/><br/>
<table border="5" cellspacing="30" cellpadding="10">
<tr>
<td>large spacing,</td>
<td>small padding</td>
</tr>
</table>
</body>
</html>
13
Output:-
1.8 Forms
<html>
<head><title>Forms</title></head>
<body bgcolor="salmon">
<h1 align="center"><font color="purple"><u>STUDENT REGISTRATION
FORM</u></font></h1>
<form action="www.osmania.ac.in" method="get">
<label><font size="4"><b>Name</b></font></label>
<input type="text" name="Name" size="25" value="FirstName"/>
<input type="text" name="Name" size="25" value="LastName"/>
<br/><br/>
<label><font size="4"><b>Password</b></font></label>
<input type="password" name="Password" size="25" value="Password"/>
<br/><br/>
<label><font size="4"><b>Gender</b></font></label>
<input type="radio" name="r1" value="Male"/>Male
<input type="radio" name="r2" value="Female"/>Female
<br/><br/>
<label><font size="4"><b>Course</b></font></label>
<input type="checkbox" name="c1" value="BE"/>BE
<input type="checkbox" name="c2" value="BTech"/>BTECH
<br/><br/>
<label><font size="4"><b>Branch</b></font></label>
14
<select>
<option selected="selected">Select One</option>
<option>Civil</option>
<option>CSE</option>
<option>ECE</option>
<option>EEE</option>
<option>Mech</option>
<option>IPE</option>
<option>Chemical</option>
<option>Bio-Tech</option>
</select>
<br/><br/>
<label><font size="4"><b>Roll No.</b></font></label>
<input type="text" name="Name" size="25" value="Roll No"/>
<br/><br/>
<input type="submit"/>
<input type="reset"/>
</form>
</html>
Output:-
15
1.9 Cascading Style Sheets
<html>
<head><b>Cascading Style Sheets<b></head>
<body style="background-color:#FFCCCC"><p>There are 3 ways of
inserting a style sheet</p>
<p><a href="es.html">External Style Sheets<a/>
<br/><a href="is.html">Internal Style Sheets<a/>
<br/><a href="in.html">Inline Styles<a/>
<p/>
<body/>
<html/>
Output:-
16
i) External Style Sheets
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex.css" />
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>this is an example to include External Style Sheets</p>
</body>
</html>
Output:-
17
ii) Internal Style Sheets
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body style="background-color:#FFCCCC">
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
</body>
</html>
Output:-
18
iii) Inline Style Sheets
<html>
<head >This is a heading
</head>
<body style="background-color:#FFCCCC">
<p style="color:red;margin-center:20px">This is a paragraph.</p>
<p style="color:blue;margin-left:20px">This is a another paragraph.</p>
</body>
</html>
Output:-
19
1.10 CSS in Hyperlinks(<a>)
<html>
<head><title>sample</title>
<style type="text/css">
a:link{color:green}
a:visited{ color:red}
a:hover{ color:blue;text-decoration:none}
a:active{ color:yellow}
</style>
</head>
<body>
<a href="abc.html" target="new" >hyperlink</a>
</body></html>
Output:-
20
1.11 idselector.html
<html>
<head>
<style type="text/css">
#demo {color:red;} <!--id based selector-->
.name1 {color:blue;} <!--class based selector-->
p ,h3{color:green;} <!--grouping based selector-->
</style>
</head>
<body style="background-color:#FFCCCC">
<h1 id="demo" >All header 1 elements will be red</h1>
<h2 class="name1">All header 2 elements will be blue</h2>
<h3>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
<p>All text in paragraphs will be green.</p>
</body>
</html>
Output:-
