Experiment No: 1
Date of Performance:
Date of Submission:
Aim:
HTML: Elements, Attributes, Head, Body, Hyperlink, Formatting, Images, Tables, List, Frames,
Forms, Multimedia
Theory:
HTML is the standard markup language for creating Web pages.
● HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc. The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.
● The <p> element defines a paragraph
HTML Attributes
● All HTML elements can have attributes
● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
<frameset>:
∙ The <frameset> tag defines a frameset.
∙ The <frameset> element holds one or more <frame> elements.
∙ Each <frame> element can hold a separate document.
∙ The <frameset> element specifies HOW MANY columns or rows there will be in the frameset,
and HOW MUCH percentage/pixels of space will occupy each of them.
<frame>:
∙ The <frame> tag defines one particular window (frame) within a <frameset>.
∙ Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability
to resize, etc.
Problem Definition:
Design the following static web pages required for an online book store web site.
1) Home Page
2) Login Page
3) Catalogue Page
4) Registration Page
1. Home page: - the static home page must contains three pages
2. Top frame: - logo and college name and links to homepage, login page, registration page and
catalogue page
3. Left frame: - at least four links for navigation which will display the catalogue of Respective
links
4. Right frame: - the pages to links in the left frame must be loaded here initially it Contains the
description of the website.
DESCRIPTION: In this program the entire web paged are created by using basic HTML tags.
Home page is divided into 3 frames by using <frameset> and <frame> tags. A frame is used to
display a web page within a web page.
PROGRAM:
home.html:
<frameset rows="40%,*">
<frame src="top.html" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>
top.html:
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="YellowGreen ">
<img src="images/logo1.png" width="125" height="115" align="left">
<img src="images/cse.png" width="125" height="115" align="right">
<center> <marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book Store</i></b>
</font> </marquee> <br>
<font face="Brush Script" size="6" color="white">
<b>Created & Maintained By DMCE</b>
</font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center"> <td> <a href="Home.html" target="_parent">
<font face="Brush Script" size="6" color="navy">HOME </a> </td>
<td> <a href="login.html" target="rightframe">
<font face="Brush Script" size="6" color="navy">LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe">
<font face="Brush Script" size="6" color="navy">REGISTER </a> </td>
<td> <a href="catalogue.html" target="rightframe">
<font face="Brush Script" size="6" color="navy">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>
left.html:
<html>
<body align="center" bgcolor="bisque"> <br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">MECH</font></a><br>
</body>
</html>
right.html:
<html>
<body bgcolor="orange">
<center>
<img src="images/Books.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>
cse.html:
<html>
<head>
<title>CSE</title>
</head>
<body bgcolor="cyan"> <center><font color="blue">
<h1>Computer Science and Engineering</h1></font></center> <br>
<table align="center"> <tr> <td>Text Books</td> <td>
<select >
<option value="select the book" selected>Select the book
<option value="C&Ds">C&Ds <option value="Ads">Ads
<option value="Java">Java <option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td> <form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>
ece.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li>
<li>Signals and Systems</li>
<li>Digital Communication</li>
</ul>
</h2>
</body>
</html>
eee.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
catalogue.html:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td> <img src="images/wt.jpg" width=100 height=100/> </td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication:Oxford University
Press</td>
<td>531 </td>
<td> <input type="submit" value="Add to cart"/></td>
</tr>
<tr>
<td> <img src="images/php.jpg" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura Thompson
<br> Publication:PEARSON</td>
<td> 898 </td>
<td> <input type="submit" value="Add to cart"/></td>
</tr>
</table>
</form>
</body>
</html>
login.html:
<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center> <img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr>
<td><b>Login ID:</b></td>
<td><input type="text" name="t1">
</td>
</tr>
<tr>
<td><b>Password:</b></td> <td><input type="password" name="t2">
</td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table>
</form>
</basefont>
</body>
</html>
registration.html:
<html>
<head><title>Registration Form</title>
</head>
<body bgcolor="#E4F0F8">
<center>
<font color="blue" size="6" face="arial">Registration Form</font>
</center><br />
<form action="right.html"> First Name(Minimum 6 characters)
<font color="red">*
</font> <input type='text' id='firstname' /><br /><br /> Last Name
<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br /> EmailAddress
<font color="red">* </font>
<input type='text' id='email' /><br /> <font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. [email protected]</font><br /><br/> Password(minimum 6
characters)
<font color="red">* </font>
<input type='password' id='pass'><br /><br/> Address
<font color="red">* </font> <textarea rows="2" cols="20" id='addr' />
</textarea> <br /> <br/> Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br /> Gender:
<input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form>
</body>
</html>
order.html:
<html>
<head>
<title>order conformation</title>
</head>
<body bgcolor="cyan">
<center> <pre><strong> <b>Your order Is Conformed </strong></pre>
<h2><b>THANK YOU...Visit Again</h2>
</center>
</body>
</html>
Output:
Conclusion:
Frames in HTML have long been a crucial component in the world of web development. It
provides a valuable means of arranging and presenting content. It is important to recognize that
frames do have their limitations and factors to take into account. It is essential to carefully
balance the advantages and disadvantages they offer. Hyperlinks are one of the most exciting
innovations the Web has to offer. They've been a feature of the Web since the beginning, and are
what makes the Web a web. Hyperlinks allow us to link documents to other documents or
resources, link to specific parts of documents, or make apps available at a web address. Almost
any web content can be converted to a link so that when clicked or otherwise activated the web
browser goes to another web address
MARKS & SIGNATURE:
R1 R2 R3 R4 Total Signature
(3 Marks) (5 Marks) (4 Marks) (3 Marks) (15 Marks)
