Scribd
Upload
227 views22 pages

Write A HTML Page To Print Hello World.: Code

The document contains code for 8 HTML practical assignments: 1) Creating a basic "Hello World" page 2) Illustrating text formatting tags like headings, bold, italics etc. 3) Creating ordered, unordered and description lists 4) Aligning images left, right and center 5) Creating a table with colored cells and rowspans 6) Styling table rows with alternating colors 7) Dividing a page into frames 8) Creating a student registration form using various form elements

Uploaded by

Krunal Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
227 views22 pages

Write A HTML Page To Print Hello World.: Code

The document contains code for 8 HTML practical assignments: 1) Creating a basic "Hello World" page 2) Illustrating text formatting tags like headings, bold, italics etc. 3) Creating ordered, unordered and description lists 4) Aligning images left, right and center 5) Creating a table with colored cells and rowspans 6) Styling table rows with alternating colors 7) Dividing a page into frames 8) Creating a student registration form using various form elements

Uploaded by

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

Practical : 

1
Aim : Write a HTML page to print Hello World.

Code:
<html>
<head>
<title>Welcome</title>
</head>
<body>
Hello World
</body>
</html>
Output:
Practical : 2
Aim : Create a web page illustrating text formatting tags
available in HTML. (i.e. <h1>, <b>, <u>, <i>).

Code:
<html>
<head>
<title>Formatting tags</title>
</head>
<body>
<h1>Heading 1 Text</h1>
<h2>Heading 2 Text</h2>
<h3>Heading 3 Text</h3>
<h4>Heading 4 Text</h4>
<h5>Heading 5 Text</h5>
<h6>Heading 6 Text</h6>
<p>This is a pragraph.</p>
<b>Bold Text</b><br>
<strong>Strong Text</strong><br>
<i>Italic Text</i><br>
<em>Emphasized text</em><br>
<mark>Marked text</mark><br>
<small>Small text</small><br>
<del>Deleted text</del><br>
<ins>Inserted text</ins><br>
<sub>Subscript text</sub><br>
<sup>Superscript text</sup><br>
<u>Underlined Text</u><br>

</body>
</html>
Output:
Practical : 3
Aim : Create a web page to illustrate three types of lists in
HTML.

Code:
<html>
<head>
<title>Type Of Lists</title>
</head>
<body>
<h1>Ordered List</h1>
<ol type="1">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ol type="I">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ol type="i">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ol type="A">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ol type="a">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h1>Unordered List</h1>
<ul style="list-style-type:disc">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<ul style="list-style-type:circle">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<ul style="list-style-type:square;">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<ul style="list-style-type:none">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<h1>Description List</h1>
<dl>
<dt>First Item</dt>
<dd>Defination of First Item.</dd>
<dt>Second Item</dt>
<dd>Defination of Second Item.</dd>
<dt>Third Item</dt>
<dd>Defination of Third Item.</dd>
</dl>
</html>
Output:

Practical : 4
Aim : Create a HTML page which displays 3 images at
LEFT, RIGHT and CENTER respectively.

Code:
<html>
<head>
<title>Image Align Attribute</title>
</head>
<body>
<img align="left" src="C:\Users\Believe\Pictures\left.png"
width="200px" height="200px">
<img align="right" src="C:\Users\Believe\Pictures\right.png"
width="200px" height="200px">
<h1 align="center"><img
src="C:\Users\Believe\Pictures\center.png" width="200px"
height="200px"></h1>
</html>

Output:
Practical : 5
Aim : Write HTML Code for following Table.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style type="text/css">
table,tr,td,th {border: 1px solid black;text-align: center;}
td.blue {background: #00fff2;}
td.yellow {background: #ffc814;}
</style>
</head>
<body>
<table>
<tr style="font-weight: bold;">
<td colspan="4">Work Contact Points</td>
</tr>

<tr style="font-weight: bold;">


<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Floor/BLock</td>
</tr>

<tr>
<td class="yellow">Fred</td>
<td class="blue">[email protected]</td>
<td class="yellow">123456</td>
<td rowspan="2" style="background: #07bbed;">1/A</td>
</tr>

<tr>
<td class="blue">Jon</td>
<td class="yellow">[email protected]</td>
<td class="blue">234567</td>
</tr>

<tr>
<td class="yellow">Bill</td>
<td class="blue">[email protected]</td>
<td class="yellow">345678</td>
<td rowspan="3" style="background: #562ab7;">3/C</td>
</tr>

<tr>
<td class="blue">Jane</td>
<td class="yellow">[email protected]</td>
<td class="blue">777444</td>
</tr>

<tr>
<td class="yellow">Alison</td>
<td class="blue">[email protected]</td>
<td class="yellow">888652</td>
</tr>
</table>
</body>
</html>
Output:
Practical : 6
Aim : Write HTML/CSS code to create table with 5 rows
and 3 columns. Even no. of rows display in green color
and odd no. of rows display in blue color.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style type="text/css">
table,tr,td,th {border: 1px solid black;text-align: center;}
tr.blue {background: blue;}
tr.green {background: green;}
</style>
</head>
<body>
<table>

<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
</tr>

<tr class="blue">
<td>Fred</td>
<td>[email protected]</td>
<td>123456</td>
</tr>
<tr class="green">
<td>Jon</td>
<td>[email protected]</td>
<td>234567</td>
</tr>

<tr class="blue">
<td>Bill</td>
<td>[email protected]</td>
<td>345678</td>
</tr>

<tr class="green">
<td>Jane</td>
<td>[email protected]</td>
<td>777444</td>
</tr>

<tr class="blue">
<td>Alison</td>
<td>[email protected]</td>
<td>888652</td>
</tr>
</table>
</body>
</html>

Output:
Practical : 7
Aim : Using frame Divide the web page as following.

Code:

Frames.html

<!DOCTYPE html>
<html>
<head>
            <title>Frames</title>
</head>
<frameset rows="25%,50%,25%" >
                        <frame src="header.html"></frame>
                        <frameset cols="40%,*">
                        <frame src="frame1.html"></frame>
                        <frame src="frame2.html"></frame>
                        </frameset>
                        <frame src="footer.html"></frame>
            </frameset>
<body>
</body>
</html>
header.html

<!DOCTYPE html>
<html>
<head>
            <title>Header</title>
</head>
<body>
<h1>This is a header.</h1>
</body>
</html>

footer.html

<!DOCTYPE html>
<html>
<head>
            <title>Footer</title>
</head>
<body>
<h1>This is a footer.</h1>
</body>
</html>

frame1.html

<!DOCTYPE html>
<html>
<head>
            <title>frame 1</title>
</head>
<body>
<h4>Look in the box at<br>the right for
some<br>information.</h4>
</body>
</html>

frame2.html

<!DOCTYPE html>
<html>
<head>
            <title>frame 2</title>
</head>
<body>
<h4>Here is some information.</h4>
</body>
</html>

Output:

Practical : 8
Aim : Create a student registration form using <form>
tag. The registration form must consist of following
information :
First Name, Middle Name, Last Name, Gender, Address,
Phone No., email id, Hobbies, City, State, Country,
College Name.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<style type="text/css">
table,td {border: 0px solid black; border-collapse:
collapse;padding: 5px;}
td {padding: 5px;}
input.in,textarea,select
{
padding: 5px; 
border-width: 2px; 
border-color: #00ccff;
border-radius: 2px; 
border-style: solid;
}
</style>
</head>
<body>
<h1 align="center">Student Form</h1>
<form>
<table align="center">
<tr>
<td>Name:</td>
<td><input name="fname" class="in" type="text" size="10"
placeholder="First Name" pattern="[a-zA-Z]+"
required></input class="in">
<input name="mname" class="in" type="text" size="10"
placeholder="Middle Name" pattern="[a-zA-Z]+"
required></input class="in">
<input name="lname" class="in" type="text" size="10"
placeholder="Last Name" pattern="[a-zA-Z]+"
required></input class="in">
</td>
</tr>

<tr>
<td>Email:</td>
<td><input name="email" class="in" type="text"
placeholder="[email protected]"size="43" pattern="[a-z0-
9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></input
class="in"></td>
</tr>

<tr>
<td>Password:</td>
<td><input class="in" name="pwd" type="password"
placeholder="password"size="43" pattern="(?=.*\d)(?=.*[a-
z])(?=.*[A-Z]).{8,}" required></input class="in"><br><font
color="red">(length:8-20 | must contain a upper case,lower
case,<br>number,special symbol,number)</font></td>
</tr>

<tr>
<td>Confirm Password:</td>
<td><input name="cpwd" class="in" type="password"
placeholder="password"size="43" pattern="(?=.*\d)(?=.*[a-
z])(?=.*[A-Z]).{8,}" required></input class="in"></td>
</tr>

<tr>
<td>Address:</td>
<td><textarea name="addr" rows="5" cols="45"
required></textarea></td>
</tr>

<tr>
<td>College Name:</td>
<td><input name="cname" class="in" type="text" size="43"
placeholder="College Name" required></input
class="in"></td>
</tr>

<tr>
<td>Mobile No.:</td>
<td>+<input class="in" name="ccode" type="text" size="1"
minlength="2" maxlength="3" value="91" pattern="[0-9]+"
required></input class="in">
<input name="Mob" class="in" type="text" size="34 "
maxlength="10" placeholder="10 digit Number" pattern="[0|
1|2|3|4|5|6|7|8|9]{10}"></input class="in">
</td>
</tr>

<tr>
<td>Gender:</td>
<td>
<select name="dropdown" >
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>

<tr>
<td>City:</td>
<td><input name="city" class="in" type="text" size="43"
placeholder="City" pattern="[a-zA-Z]+" required></input
class="in"></td>
</tr>

<tr>
<td>State:</td>
<td><input name="state" class="in" type="text" size="43"
placeholder="State" pattern="[a-zA-Z]+" required></input
class="in"></td>
</tr>

<tr>
<td>Country:</td>
<td><input name="country" class="in" type="text"
size="43" placeholder="Country"  pattern="[a-zA-Z]+"
required></input class="in"></td>
</tr>

<tr>
<td>Hobbies:</td>
<td>
<input name="music" class="in" type="checkbox"
name="music" checked>Music</input class="in">
<input name="sports" class="in" type="checkbox"
name="Sports">Sports</input class="in">
<input name="games" class="in" type="checkbox"
name="Games">Games</input class="in">
<input name="others" class="in" type="checkbox"
name="other">other</input class="in">
</td>
</tr>

<tr>
<td colspan="2" align="center"><input type="image"
src="button.png" height="50px"
width="120px"></button></td>
</tr>
</table>
</form>

</body>
</html>
Output:

You might also like