1.
Design a page having suitable background colour and text colour with title “My First Web Page”
using all the attributes of the Font tag.
Procedure:
1. Go to start ->all program – >accessories-> notepad.
2. Type the html code.
3. Include title ”my first web page” in title tag.
4. Set the background for the webpage by using bgcolor attributes of the body tag.
5. Use font tag to display text.
6. Go to file->save->save the file with html extension.
7. Run the html code using browser.
Codings
<html >
<head>
<title>My first web page</title>
</head>
<body bgcolor="green">
<font size="16" color="white" face="Arial"> Welcome to my First Webpage.</font>
</body>
</html>
2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and [Register
Number, Class] aligned in proper order using alignment attributes of Paragraph tag.
Procedure:
1. Go to start ->all program – >accessories-> notepad
2. Type the html code
3. Align [name,age]to center by using align =”left ” of <p> tag
4. Align [register,number,class] to right using align=”right” of <p> tag
5. Go to file-> save->save the file with html extension
6. Run the html code using browser
Coding
<html>
<head>
<title>program 02</title>
</head>
<body>
<p align="center">
Name: AITS<br>
Age: 16
</p>
<p align="right">
Address: Aghraharam post TIRUPATI<br> Phone:
123535615
</p>
<p align="left">
Reg No:
20AK1A0501<br>
Class:2nd Sem C’s
</p>
</body>
</html>
3. Write HTML code to design a page containing some text in a paragraph by giving
suitable heading style.
Procedure:
1. Go to start ->all program –> accessories-> notepad
2. Type the html code
3. Use<h1> to<h6>tag to display heading
4. Use <p> tag for the paragraph
5. Go to file- >save->save the file with html extension
6. Run the html code html using browser
Coding
<html>
<head>
<title>program 03</title>
</head>
<body>
<center>
<h1>Basic Web design Lab</h1>
</center>
<h2 align="left"> Definition </h2>
<h3 align="left">Website</h3>
<p>
A set of inter connected web pages usually including a home page and many other
web pages
</p>
</body>
</html>
4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags.
viz : log b m p= p logb m
Procedure:
1. Go to start ->all program – >accessories-> notepad
2. Type the html code
3. Include <b>,<u>,<sup>,<sub>,tags
4. Go to file->save-> save the file with html extension
5. Run the html code using browsers
<html>
<head>
<title>program 04</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>
5. Write HTML code to create a Web Page that contains an Image at its centre.
Procedure:
1. Go to start ->all program – >accessories-> notepad
2. Type the html code
3. Include <img> tag inside <center> tag and set align attribute of img tag to middle
4. Go to file->save->save the file with html extension
5. Run the html code using browsres
<html>
<head>
<title>program 05</title>
</head>
<body>
<center>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" height="200" width="200" align="middle"/>
</center>
</body>
</html>
6. Create a web page with an appropriate image towards the left hand side of the page, when user
clicks on the image another web page should open.
Procedure:
1. Go to start –>all programs-> accessories->notepad
2. Include<img> tag inside<a> tag
3. Save the file as p1.html
4. Create another file
5. Type the html code
6. Save the file as p2.html
7. In <a> tag assign p2.html to href attribute
8. Go to file-> save->save the file with html extension
9. Run the html code using browsers
Coding
<html>
<head>
<title>program 05</title>
</head>
<body>
<a href="p2.html">
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" align="left" width="200" height="200"/>
</a>
</body>
</html>
P2.html
<html>
<head>
<title>program 06</title>
</head>
<body> Hi Welcome... </body>
</html>
7. Create web Pages using Anchor tag with its attributes for external links.
Procedure:
1. Go to start->all programs->accessories->notepad.
2. Create file called as p1.html
3. To provide external link between p1.html and gmail website use <a> in p1.html and
mention
url of gmail website in href attribute.
4. Save the file.
5. Run the p1.html file using browsers.
6. If we click on the link it should link to gmail website.
P1.html
<html>
<head><title>page 1</title>
</head>
<body>
<p>Welcome to AITS</p>
<a href="http://www.gmail.com">click here to link gmail website</a>
</body>
</html>
8. Write a HTML code to create a web page with pink color background and display
moving message in red color.
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Include bgcolor=”pink” attribute in the body tag
4. Use font tag to display moving text in red color by setting color=”red” attribute
5. Include marquee tag inside font tag to display moving text
6. Go to file –>save->save the file with html extension
7. Run the html code using browser
Coding
<html>
<head>
<title>program 09</title>
</head>
<body bgcolor="pink">
<font color="red"><marquee direction="left">
Welcome to AITS TIRUPATI</marquee></font>
</body>
</html>
10. Create a web page, showing an ordered list of all second semester courses
(Subjects)
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use <ol> ---- </ol> tag to display ordered list of all subject
4. Inside <ol>tag use <li> -- </li> tag to list each subject
5. Go to file –>save->save the file with html extension
6. Run the html code using browser
<html>
<head>
<title>program 09</title>
</head>
<body>
<ol>
<li>English </li>
<li>Maths-2</li>
<li>Digital Electronics & computer
fundamentals</li> <li>Basic Web design lab</li>
<li>multimedia lab</li>
<li>digital electronics</li>
</ol>
</body>
</html>
11. Create a web page, showing an unordered list of names of all the Diploma Programmes
(Branches) in your institution.
Procedure:
1. Go to start- >all programs- >accessories->notepad
2. Type the html code
3.Use <ul>....... </ul> tag to display unordered list of names of all the branches
4.Inside <ul>.....</ul> tag use <li> ....</li> tag to list each branch
5.Go to file – >save –> save the file with html extension
6.Run the html code using browser
Coding
<html>
<head>
<title>program 11</title>
</head>
<body>
<ul>
<li> Computer science and Engg </li>
<li> Electronics and communication </li>
<li> Civil Engg </li>
<li> Mechanical Engg</li>
</ul>
</body>
</html>
12. Create a HTML document containing a nested list showing a content page of any
book.
Procedure:
1. Go to start->all programs->accessories->notepad.
2. Type the html code.
3. Include <ol>tag for naming the chapter of the contents page.
4. Within the previous <ol>tag includes another <ol> tag to mention the different
section of
the particular chapter.
5. Use <li> tag for adding the list items.
6. Go to file->save–>save the file with html extension.
7. Run the html code using browsers.
<html>
<head><title>program 12</title>
</head>
<body>
<ol type=1>
<li>chapter 1</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol type=1>
<li>chapter 2</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol>
</ol>
</body>
</html>
13. Create the following table in HTML with Dummy Data:
Procedure:
1. Go to start- all programs- accessories-notepad
2. Type the html code
3. Use<table>...</table> tag to draw table
4. Create 3 rows in the table by using <tr>...</tr> tag
5. In the first row create table heading by using <th>.......</th>tag
6. In the next 2 rows add the data by using <th>. ...</th>tag
7. Go to file –>save->save the with.html extension]
8. Run the html file using firefox browser
<html>
<head>
<title>program 13</title>
</head>
<body>
<table border= "1">
<tr>
<th> reg.number</th>
<th> student name</th>
<th> year/semester </th>
<th>date of admission</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>
16. Create a web page using Embedded CSS and
multimedia
Procedure:
1. Go to start- >all programs-> accessories->notepad
2. Type the html code
3. Use<style> tag for css to apply styles for body, h1, p tags
4. Include audio file by using <audio> tag
7. Go to file –>save –>save the file with html extension
8 .Run the html file using firefox browser
<html>
<body>
<style>
body {
background-color:blue;
}
h1 {
color:orange;
text-align:center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
<h1>My First CSS Example</h1>
<p>This is a audio.</p>
<audio controls>
<source src="Horse-neighing.mp3">
</audio>
</body>
</html>
17. Use tables to provide layout to your HTML page describing your college infrastructure.
Procedure:
1.Go to start- >all programs-> accessories->notepad
2.Type the html code
3.Use<table> tag to make table
4.Use<tr> tag to make table row
5.Use<td> tag for inserting table data
6. Use bgcolor to heading tag to make background color to pink and Use colspan = "2" to
make merge of 2 columns.
7. Valign=”top” to make table row data in the top
8.Go to file –>save –>save the file with html extension
9.Run the html file using Firefox browser or Chrome
Program:
<html>
<head>
<title>LAKSHMI BANGARU ARTS AND SCIENCE COLLEGE</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "pink">
<center><h1>LBASC </center></h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "linen" width = "50">
<b>DEPARTMENTS</b><br><br>
1.COMPUTER SCIENCE <br>
2.COMMERCE<br>
3.COMPUTER APPLICATION<br>
4.BIO CHEMISTRY <br>
5.MICRO-BIOLOGY<br>
</td>
<td bgcolor = "lightblue" width = "100" height = "200">
LABS AND CLASSROOMS
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Department of CS
</center>
</td>
</tr>
</table>
</body>
</html>
18. Use forms,tables to provide layout to your HTML page describing your basic information.
Procedure:
1.Go to start- >all programs-> accessories->notepad
2.Type the html code
3.Use<form>,<table> tag to make table
4.Use<tr> tag to make table row
5.Use<td> tag for inserting table data
6. Go to file –>save –>save the file with html extension
7. Run the html file using Firefox browser or Chrome
<form>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">Email</label>
</td>
<td>
<input type="text" id="uemail" name="usermail">
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
</td>
</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
<input type="text" value="India" name="country" disabled>
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female</label>
<label>
<input value="m" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Chennai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>
