CSS HTM

HTML DOCUMENT
1 To format a text or paragraph of the text with possible text formatting, namely, Heading Tags,
Alignment Tags, Formatting Tags (Bold, Italic, etc.,).
<html>
<head><title>new page</title></head>
<body bgcolor="lightblue">
<table cellpadding="10" cellspacing="10" width="100%" border="5" bgcolor="orange">
<tr>
<td><center><marquee><h1>WEL COME TO THE V<sup>th</sup> sem</h1></marquee></center> </td>
</tr>
</table>
<ul><h1>This is a Heading Tag is H1</h1>
<ul><B><h1>Alignment Tags</h1></B>
<center>center</center>
Left
<p align="right">Right</p>
<B><h1>Formating Tags</h1></B>
<ul><li><B>Bold</B>
<br />
<li><I>Italic</I>
<br />
<li><U>Underline</U>
<br />
</body>
</html>
2 To set the font style, font color and font size of a text or paragraph using STYLE attribute of HTML
tags.
<!doctype html>
<html>
<head>
<title> Web Document for Font Style, Color & Size </title>
</head>
<p> <font size=6 face="Courier New" color="red"> This is Larger Red Text of Size 6 </font>
<p> <font size=7 face="Arial Black" color="blue"> This is Blue in Lager size of & </font>
<p> <font size=10 face="Batang" color="green"> Font Style is set ot Batang and Size to 10 </font> </p>
</form>
</body>
</html>
OUTPUT:
3 To establish a link from one web page to another web page by using <A HREF> tab
<html>
<head>
<title> Using Anchor tag </title>
</head>
<body>
<h1> If you Click on the <a href="2.html"> " Assignment 1" </a> will Open </h1>
<h1> If you Click on the <a href="2a.html"> " Assignment 2" </a> will Open </h1>
</body>
</html>
OUTPUT:
4 To establish a link within the same web page. That is when we click the link it jumps to another part of
a document on the same page
<html>
<head><title>Assign4</title></head>
<tr>
<td><center><h1>Link from web Page to Same window</h1></center> </td>
</tr>
</table>
<a id="home"></a>
<ul><B><h1>PROGRAM LIST</h1></B>
<ul><li><B><a href="#assign1.html">Assignment 1</a></B>
<br />
<li><B><a href="#assign2.html">Assignment 2</a></B>
<br />
<li><B><a href="#assign3.html">Assignment 3</a></B>
<br />
<br /></li></ul>
<ul><B><h1>PROGRAM LIST</h1></B>
<ul><li><B><a id="assign1.html" >Assignment 1</a></B>
<br />
<img src="Desert.jpg" alt="top image" >
<a href="#home" style="position:absolute; bottom:; right:50%;">HOME</a>
<br />
<li><B><a id="assign2.html">Assignment 2</a></B>
<br />
<img src="Chrysanthemum.jpg" alt="top image" >
<br />
<li><B><a id="assign3.html">Assignment 3</a></B>
<br />
<img src="Hydrangeas.jpg" alt="top image" >
<br />
<br /></li></ul>
</body>
</html>
OUTPUT:
5 Which include several images using image insertion tag, and also align the inserted images as LEFT,
CENTER and RIGHT
<html>
<head>
<title>Assign5</title>
</head>
<img src="Desert.jpg" width="30%" height="20%" alt="top image" style="position:absolute; top:1%;
border-color:pink; border-style:double;">
<br/>
<img src="Chrysanthemum.jpg" width="30%" height="20%" alt="middle image" style="position:absolute;
middle:30; top:300; border-color:orange; border-style:double;">
<br/>
<img src="Hydrangeas.jpg" align="right" width="30%" height="20%" alt="bottom image"
style="position:absolute; bottom:1%; border-color:green; border-style:double; ">
</body>
</html>
6 To create two different tables by using Table tag with its all attributes, where one table contains
border and another without border
<html>
<body>
Table without Border<br> <br> <br>
<table >
<tr>
<td> Row 1, Cell 1 </td>
</tr>
<tr>
</tr>
</table>
Table With Border
<br>
<table border=3>
<tr>
<td width=50% rowspan=3> Merged Cell </td>
<td width=50%> Original Cell </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table> </body> </html>
OUTPUT:
7 To create a Table for providing information about a student marks details which contains the fields a
Name, Date_of_Birth, and Different Subject Marks. Use <CELLPADDING> and <CELLSPACING>
tags To control the white space between cell content and distance between cells of a table.
<html>
<body>
<table border="2" cellpadding=10 cellspacing=5 >
<tr>
<th colspan="2"> Student Mark Details </th>
<tr>
<tr>
<td > Name </td>
<td> <input type="text" name="name" value="Name"> </td>
</tr>
<tr>
<td > Father Name </td>
<td> <input type="text" Value="Enter Father Name" > </td>
</tr>
<tr>
<td > Date of Birth </td>
<td> <input type="text" Value="Enter Date_of_birth" > </td>
</tr>
<tr>
<td > Marks in Subject 1 </td>
<td> <input type="text" Value="enter Mark"> </td>
</tr>
<tr>
<td> <input type="text" Value="Enter Mark"> </td>
</tr>
<tr>
<td> <input type="text" Value="Enter Mark"> </td>
</tr>
<tr >
<td align="right" ><input type="Submit" value="Submit"></td><td align="left" ><input type="Reset"
value="Reset"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
8 To create a ordered lists by using different types of ordering, namely, Numbered list, letters list, Roman
numbers list, and Lowercase roman numbers list.
<html>
<h4>Numbered list</h4>
<ol>
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h4>Letter list</h4>
<ol type="A">
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h4>Lowercase Letter </h4>
<ol type="a">
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h4>Roman Numbers list</h4>
<ol type="I">
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h4>Roman Number lowercase list</h4>
<ol type="i">
<li>Apples</li>
<li>Mangoes</li>
</ol>
</body>
</html>
9 To create un-ordered list by using different types of ordering, namely, Disc bullets list, Circle bullets
list, and Square bullets list
<html>
<tr>
<td><center><h1>Assignment For UNORDERED LIST</h1></center> </td>
</tr>
</table>
<br/>
<table cellpadding="10" cellspacing="10" style="position:absolute; top:25%; left:20%;" width="10%"
border="5" bgcolor="orange">
<tr>
<td><center><h1>Assignment For UNORDERED LIST</h1></center> </td>
</tr>
</table>
<h2><b>Disc Bullets List</h4></b>
<li>Component Technology
<li>Data Warehouse
<li>Artificial Intelligience
</li>
<h2><b>Circle Bullets List</h4></b>
<ul><ul><li>Component Technology
<li>Data Warehouse
</li></ul></Ul>
<h2><b>Square Bullets List</h4></b>
<ul><ul><ul><li>Component Technology
<li>Data Warehouse
</li></ul></ul></ul>
<br/>
</body>
</html>
10 To Create both Ordered and Un-Ordered Lists by nesting the different types of Lists.
<html>
<head>
<title>Asign10</title></head>
<tr>
<td><center><h1>Assignment For Both ORDERED AND UNORDERED LIST</h1></center> </td>
</tr>
</table>
<h1><b>Ordered list</b></h1>
<ol>
<li>Microsoft Windows.</li>
<ol type="a">
<li>Windows 98</li>
<li>Windows 2000</li>
<li>Windows XP</li>
<ol type="i">
<li>Windows XP SP1</li>
</ol>
<li>Windows 7</li>
<ol type="i"><li>Windows 7 SP1</li></ol>
</ol>
<li>Linux</li>
</ol>
<h1><b>Un-Ordered list</b></h1>
<ul>
<li>Microsoft Windows.</li>
<ul type="circle">
<li>Windows 98</li>
<li>Windows 2000</li>
<li>Windows XP</li>
<ul type="square">
</ul>
<li>Windows 7</li>
<ul type="square"><li>Windows 7 SP1</li></ul>
</ul>
<li>Linux</li>
</ul>
</body>
</html>
OUTPUT:
11 To Create a Form which is used to select different kinds of user input, namely, Text Fields, Password
fields, Radio Buttons, Check boxes and Submit button elements
<html>
<head><title>sample Image</title></head>
<form name="form1" method="post">
<h2>Simple Form</h2>
Name: <input type="text" name="txt1">
<br/>
Password: <input type="password" name="pas">
<br/>
gender: <input type="radio" name="Male" value="M">Male
<input type="radio" name="Male" value="F">Female
<br/>
course: <input type="checkbox" name="bc" value="bca">BCA
<input type="checkbox" name="mc" value="mca">MCA
<br/>
<br/>
<input type="button" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
OUTPUT:
12 To Create an Admission Form of a College, this contains Students all information with predefinded
course list.
<html>
<head><title>Student Details</title></head>
<form name="form1" method="post" action="success.html">
<center><h1 color="red">STUDENT DETAILS</h1></center>
<table cellpadding="1" cellspacing="1" width="40%" align="center" border="1" color="orange" style="fontsize:25; background-image:url(desert.jpg);">
<tr>
<td>Name:</td>
<td><input type="text" name="txt1"></td>
</tr>
<tr>
<td>Father Name:</td>
<td><input type="text" name="txt2"></td>
</tr>
<tr>
<td>gender:</td>
<td><input type="radio" name="Gen" value="Male">Male
<input type="radio" name="Gen" value="Female">Female
</td>
</tr>
<tr>
<td>course:</td>
<td>
<select name="course">
<option value="select">Select any one</option>
<option value="BA">BA</option>
<option value="BSc">B.Sc.</option>
<option value="BCA">B.C.A.</option>
<option value="BCom">B.Com</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><textarea rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit">

<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
13 To Create a FORM as shown in the below figure.

<html>
<head><title>Ordering Bed</title></head>
<form name="form1" method="post">
<h1><b>Ordering your new bed</b></h1>
Name:
<input type="text" name="txt1">
Address:
<input type="text" name="txt1" size="40"><br>
<br/>
City:
<input type="text" name="txt1">
State:
<input type="text" name="txt1" size="10">
Zipcode:
<input type="text" name="txt1" size="10">
Customer Code:
<input type="text" name="txt1" size="10"><br>
<br/>
<b>Type of wood:</b>
<select name="wood">
<option value="maplewood">Maplewood</option>
<option value="wood">wood</option>
</select>
<b>size:</b>
<input type="radio" name="sz" value="king">King
<input type="radio" name="sz" value="queen">Queen
<input type="radio" name="sz" value="twin">Twin
<input type="radio" name="sz" value="single">Single<br>
<br/>
<b>Extras:</b>
<input type="checkbox" name="extr" value="Footboard">Footboard
<input type="checkbox" name="extr" value="Drawers">Drawers (for underneath)
<input type="checkbox" name="extr" value="Casters">Casters
<input type="checkbox" name="extr" value="Squeak proofing">Squeak proofing
<br>
<br/>
<hr size="3" />

Please share any suggestions or comments with us:
<br/>
<textarea rows="5" cols="100" >Comments?</textarea>
<br/>
<hr size="5"/>
<input type="submit" value="Order Bed">
<input type="reset" value="Start Over">
</form>
</body>
</html>
OUTPUT:
14 To Create a FRAME based web page which contains two frames (column wise), where the first frame
is of 30% of the main size and second frame if of 70% of the main size. Use the Frameset tag and its
attribute to develop this webpage.
<html>
<frameset cols="30%,70%">
<frame src="14.html">
</frameset>
</html>
OUTPUT:
15 To Create a Frame based web page which conatain four frames(2 Columns, 2 Rows ) where the first
frame is of 30% of the main size and second frame is of 70% of the main size. Use the FRAMESET tag
and its attributes to develop this webpage
<html>
<head>
<title> Frame Based web Page </title>
</head>
<frameset cols="30%, 70%">
<frame src="red.html">
<frameset rows="40%,60%">
<frame src="gray.html">
<frame src="green.html">
</frameset>
</html>
OUTPUT:
16 To create a Report Web Page, which contain <ADDRESS> TAG, <BLOCKQUOTE> tag for heading
definition, and <MARK> tag to define highlighted text
<!DOCTYPE html>
<html>
<body>
<address>
To, Marketing Manager.<br>
Wipro Pvt Ltd<br>
Bangalore<br>
Whitefield 564, <br>
Karnataka, India
</address>
<h2> <p>India <mark>tablet computer sales</mark> to double in<mark> 2013: Report</mark> today.</p>
</h2>
<blockquote ">
Sales of tablet computers in India are expected to at least double this year to 6 million, the market's third year of
growth, as new devices attract business users and low costs draw consumers, research firm CyberMedia
forecast.
</blockquote>
</body>
</html>
OUTPUT:
17 To Create a Report Web Page, which contains abbreviations and acronym tags (when the mouse
cursor moves over an acronym like WHO is shows an alternate text like WORLD HEALTH
ORGANIZATION)
<html>
<body>
<abbr title="World Wide Web">WWW</abbr>
<br>
<acronym title="World Health Organization">WHO</acronym>
</body>
</html>
OUTPUT
18 To Create a web page which contain a MARQUEE with different behavior, namely, Slide, Scroll Leftto-Right, alternate and Scrolling upwards.
<html>
<body>
<marquee behavior="slide" bgcolor="skyblue">
This is slide marquee</marquee>
<marquee behavior="alternate" bgcolor="gray">
This is alternate marquee</marquee>
<marquee behavior="scroll" bgcolor="red" direction="left">
This is left marquee</marquee>
<marquee behavior="scroll" bgcolor="blue" direction="right">
This is right marquee</marquee>
<marquee behavior="scroll" bgcolor="purple" direction="up">
This is upwards marquee</marquee>
</body>
</html>
19 To create a web page, which contains an Image based MARQUEE, where the inserted image Is sliding
from left to right.
<html>
<marquee scrollamount="10" id="marq1" direction="left">
<img src="Desert.jpg" width="50%">
</marquee>
</body>
</html>
OUTPUT:
20 To create a web page which contains two different MARQUEEs with STAR and STOP control buttons
form each marquee to control.
<html>
<body>
<marquee behaviour = "scroll" direction="right" scrollamount="20"
id="marquee1">
<p> Marquee 1 </p>
</marquee>
<marquee behaviour="scroll" direction="right" scrollamount="20"
id="marquee2">
<p> Marquee 2 </p>
</marquee>
<input type="button" value="Stop Marquee 1" onclick="document.getElementById('marquee1').stop();">
<input type="button" value="start Marquee 1"
onclick="document.getElementById('marquee1').start();">
<br>
<input type="button" value="Stop Marquee 2" onclick="document.getElementById('marquee2').stop();">
<input type="button" value="Start Marquee 2" onclick="document.getElementById('marquee2').start();">
</body>
</html>
OUTPUT:
CASCADING STYLE SHEET (CSS) BASED HTML DOCUMENTS:

21. To Perform or set the background color of a web page as coded #b0c4de
<html>
<head><title>Assign21</title>
</head>
<body style="background-color:#b0c4de;">
<p>Background color</p>
</body>
</html>
OUTPUT:
22. To perform or set the different background color for Heading Section. (Use different Heading Tag)
<html>
</head>
<body>
<h1 style="background-color:green;">Heading 1 </h1>
<h2 style="background-color:blue;">Heading 2 </h2>
<h3 style="background-color:red;">Heading 3 </h3>
<h4 style="background-color:violet;">Heading 4 </h4>
<p style="background-color:skyblue;">Paragraph </p>
</body>
</html>
23 To Perform or set the background color of a webpage.

<html>
<style type="text/css">
body{
background-color:violet;}
</style>
</head>
<body>
<h1><b>THE BACKGROUND COLOR IS <U>VIOLET</U></B></H1>
</body>
</html>
OUTPUT:
24 To perform or set the image as background of a webpage.

<html>
body{
background-image:url(Desert.jpg);
}
</style>
</head>
<body>
<h1><b><center>Background Image</center></b></h1>
</body></html>
OUTPUT:
25 To set different colors for different HTML elements, namely, Heading H1, H2, H3, Paragraph and
address. Use Proper color in CSS Style Sheets.
<html>
</head>
<body>
<h1 style="background-color:green;">Heading 1 </h1>
<h2 style="background-color:blue;">Heading 2 </h2>
<h3 style="background-color:red;">Heading 3 </h3>
<p style="background-color:skyblue;">Paragraph </p>
<address style="background-color:yellow;">Address: 92/C MIG khb colony </address>
</body>
</html>
OUTPUT:
26 To decorate the text within webpage using the CSS attributes Over line, Line-through and Underline.
<html>
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
</style>
</head>
<body>
<h1>paragraph</h1>
<h2>paragraph</h2>
<h3>paragraph</h3>
</body>
</html>
OUTPUT:
27 To Change different colors for hyperlinks, when user clicks on any Visited and Unvisited Links.
<html>
<head>
<title>Assign27</title>
a:visited{behavior:none; color:blue;}
a:hover{text-decoration: blink; font-size:25; color:violet;}
</style>
</head>
<body>
<a href="assign27.html">linker</a>
</body>
</html>
OUTPUT:
28 To Create a table with specified height and width, along with table border color.
<html>
table
{
height:50%;
width:40%;
font-size:25;
border-color:grey;
}
</style>
</head>
<body>
<table border="5">
<tr>
<td align="center">css table</td></tr>
</table>
</body>
</html>
OUTPUT:
29 To generate a list, which contain different types of bullets and numbering, namely, circle, disc, square,
decimal, decimal-leading-zero, lower alpha type, upper alpha type, lower and upper roman type.
<html>
.cir{list-style-type: circle; }
.dis{list-style-type: disc; }
.sqr{list-style-type: square; }
.dec{list-style-type: decimal; }
.declz{list-style-type: decimal-leading-zero; }
.lap{list-style-type: lower-alpha; }
.uap{list-style-type: upper-alpha; }
.lrm{list-style-type: lower-roman; }
.urm{list-style-type: upper-roman; }
</style>
</head>
<body>
<ul class="cir">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="dis">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="sqr">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="dec">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ol class="declz">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ol>
<ul class="lap">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="uap">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="lrm">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
<ul class="urm">
<li>windows xp</li>
<li>windows 7</li>
<li>windows 8</li>
</ul>
</body>
</html>
OUTPUT:
30 To generate a green color dotted thick outline on any text or paragraph

<html>
p{border:10; border-style:dotted; border-color:green; }
</style>
</head>
<body>
<p>This is a css based HTML document with dotted thick outlin border</p>
</body>
</html>
OUTPUT:
31 Which contains two images in transparent mode, when the mouse cursor moves.
<html>
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover
{
opacity:1.0;
}
</style>
</head>
<body>
<img src="Chrysanthemum.jpg" width="30%" height="30%"style="position:absolute; top:5%; left:1%;" >
<img src="Hydrangeas.jpg" width="30%" height="30%" style="position:absolute; top:5%; right:39%;">
</body>
</html>
OUTPUT:
32 To Create a transparent box with text on a background image

<html>
div.background
{
width:500px;
height:250px;
background:url("Lighthouse.jpg") repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
}
</style>
</head>
<div class="background">
<div class="transbox">
<p> this is text in transparent box with bacdground image</p>
</div>
</div>
</body>
</html>
OUTPUT:

CSS HTM

Uploaded by

Document Information

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

CSS HTM

Uploaded by

Copyright:

Available Formats

HTML DOCUMENT

13 To Create a FORM as shown in the below figure.

<hr size="3" />

CASCADING STYLE SHEET (CSS) BASED HTML DOCUMENTS:

23 To Perform or set the background color of a webpage.

24 To perform or set the image as background of a webpage.

30 To generate a green color dotted thick outline on any text or paragraph

32 To Create a transparent box with text on a background image

You might also like