HTML Image Formatting

1.
HTML TEXT FORMATTING EXERCISE:

A .Print the squares of the numbers 1 - 20. Each number should be on a separate line,
next to it the number 2 superscripted, an equal sign and the result
CODE:
<html><head><title>print square number</title>
<style>
body{background-color:FFEFD5;} h1{color:red;}
</style></head>
<body>
<h1 align="center">Print the square number</h1> <hr color="orange"/>
<p>1<sup>2</sup>=1<br/> 2<sup>2</sup>=4<br/> 3<sup>2</sup>=9<br/>
4<sup>2</sup>=16<br/> 5<sup>2</sup>=25<br/> 6<sup>2</sup>=36<br/>
19<sup>2</sup>=361<br/> 20<sup>2</sup>=400</p></body></html> OUTPUT:
b. Prints 10 names with a line break between each name. The list should be
alphabetized, and to do this place a subscripted number next to each name based on
where it will go in the alphabetized list. (Example: Alan1). Print first, the
unalphabetized list with a subscript number next to each name, then the
alphabetized list. Both lists should have an level heading
CODE:
<html><head><title>print names</title>
<style>
body{background-color:FFEFD5;} h1,h2{color:brown;}
</style></head>
<body>
<h1 align="center">Un Alphabetized list</h1> <hr color="orange">
<p>krishna<sub>3</sub><br/> ganesh<sub>5</sub><br/> karthik<sub>4</sub><br/>
venkatesh<sub>9</sub><br/> bhagyalakshmi<sub>15</sub><br/>
saroja<sub>22</sub><br/> ganapathy<sub>1</sub><br/> lakshmi<sub>32</sub><br/>
varsha<sub>12</sub><br/> hari<sub>7</sub><br/></p> <h1 align="center">Alphabetized
list</h1> <hr color="navy blue">
<p>krishna<br/>ganesh<br/>karthik<br/>venkatesh<br/>bhagya lakshmi<br/>
saroja<br/>ganapathy<br/>varsha<br/>lakshmi<br/></p></body></html>
OUTPUT:
c. Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list
CODE:
<html><head><title>Lists</title>
<style> h1,h2{color:red;}
body{background-color:FFEFD5;} ol,ul{color:blue;}
</style></head>
<body>
<h1 align="center">Ordered list</h1><hr>
<p><b>Fruits</b>
<ol>
<li>Apple</li> <li>Grapes</li> <li>Banana</li> <li>Jackfruit</li> <li>Cranberries</li>
</ol></p>
<h1 align="center">Unordered list</h1><hr>
<p><b>Vegetables</b>
<ul>
<li>Spinach</li> <li>Beans</li> <li>Ladys finger</li> <li>Cabbage</li> <li>potato</li>
</ul></p></body></html> OUTPUT:
d. Print a list which starts with 7 with the type i

CODE:
<html><head><title>Lists</title>
<style>
body{background-color:pink;}
</style></head>
<body>
<h1 align="center" style="color:red">Lists</h1> <hr color="navy blue">
<ol type="i" start="7">
<li>Spinach</li> <li>Beans</li> <li>Ladys finger</li> <li>Cabbage</li> <li>potato</li>
<li>Apple</li> <li>Grapes</li> <li>Banana</li> <li>Jackfruit</li> <li>Cranberries</li>
</ol> </p></body> </html>
e. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below
the horizontal line print a paragraph relating to the text in the heading.
CODE:
<html> <head> <title>paragraph</title>
<style>
body{background-color:FFEFD5;}
</style></head>
<body>
<h1 style="color:brown">Introduction to JAVA</h1> <hr width="100%" color="red">
<p> Java is a platform-independent programming language used to create secure and
robust application that may run on a single computer or may be distributed among servers
and clients over a network. Java features such as platform-independency and portability
ensure that while developing Java EE enterprise applications, you do not face the problems
related to hardware , network , and the operating system. Java was started as a project called
"Oak" by James Gosling in June 1991. Gosling's goals were to implement a virtual machine
and a language that had a familiar C like notation but with greater uniformity and simplicity
than C/C++. The First publication of Java 1.0 was released by Sun Microsystems in 1995. It
made the promise of "Write Once, Run Anywhere", with free runtimes on popular
platforms.</p>
<p> In 2006-2007 Sun released java as open source and and plateform independent
software. Over time new enhanced versions of Java have been released. The current version
of Java is Java 1.7 which is also known as Java 7. The Java virtual machine (JVM) is a
software implementation of a computer that executes programs like a real machine. The Java
virtual machine is written specifically for a specific operating system, e.g. for Linux a special
implementation is required as well as for Windows. Java programs are compiled by the Java
compiler into bytecode. The Java virtual machine interprets this bytecode and executes the
Java program. The Java runtime environment (JRE) consists of the JVM and the Java class
libraries and contains the necessary functionality to start Java programs. The JDK contains in
addition the development tools necessary to create Java programs. The JDK consists
therefore of a Java compiler, the Java virtual machine, and the Java class libraries. </p> <p>
The characteristics and features of java are as follows.
<b>1) Simple</b> Java is a simple language because of its various features, Java Doesn?t
Support Pointers , Operator Overloading etc. It doesn?t require unreferenced object because
java support automatic garbage collection. Java provides bug free system due to the strong
memory management.
<b>2) Object-Oriented</b> Object-Oriented Programming Language (OOPs) is the
methodology which provide software development and maintenance by using object state,
behavior , and properties. Object Oriented Programming Language must have the following
characteristics.</p>
<p> 1)Encapsulation 2)Polymorphism 3)Inheritance 4)Abstraction
As the languages like Objective C, C++ fulfills the above four characteristics yet they are not
fully object oriented languages because they are structured as well as object oriented
languages. In java everything is an Object. Java can be easily extended since it is based on
the Object model</p> </html>
f. Print a definition list with 5 items

CODE:
<html> <head> <title>Definition list</title>
<style>
body{background-color:FFE4E1;}
</style></head>
<body>
<h1 align="center" style="color:green">Definition list</h1>
<dl>
<dt><b>HTML</b></dt>
<dd>HTML stands for Hyper Text Markup Language</dd>
<dd>HTML describes the structure of Web pages using markup</dd>
<dt><b>CSS</b></dt>
<dd> CSS stands for Cascading Style sheet.</dd>
<dd>CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.</dd>
<dt><b>JS</b></dt>
<dd>JS stands for Java Script. </dd>
<dd>JavaScript is the programming language of HTML and the Web.</dd>
</dl> </body> </html>
g. Print two addresses in the same format used on the front of envelopes (senders
address in top left corner, receivers address in the center)
CODE:
<html> <head> <title>adddress</title>
<style>
body{background-color:FFF8DC;}
</style> </head>
<body>
<p>From:<br> Karthik,<br> Vit mens hostel,<br> Vellore Institute Of Technology.<br>
Vellore. </p>
<p align="center"> To:<br>
         Venkatesh,<br>
            &nbs
p;           17/291,Ra
mesh apt,<br>
            &nbs
p;Achari street,<br>
            &nbs
p;            &n
bsp;     Andhra Pradesh-524001.<br>
</p> </body> </html>
h. Print ten acronyms and abbreviations of your choosing, each separated by two lines.
Specify the data that the abbreviations and acronyms represent
CODE:
<html><head>
<title>Abbrevation and Acronym</title>
<style>
</style></head>
<body> <h1 align="center" style="color:brown">Acronmys</h1>
<acronmy title="Light Amplification by the Stimulated Emission of
Radation">LASER</acronomy><br><br> <acronmy title="Radio detecting and
ranging">RADAR</acronomy><br><br> <acronmy title="The North Atlantic Treaty
Organization">NATO</acronomy><br><br> <acronmy title="The United Nations
International Childrens Emergency Fund">UNICEF</acronomy><br><br> <acronmy
title="Self-contained underwater breathing apparatus">SCUBA</acronomy><br><br>
<acronmy title="White anglo saxon protestant">WASP</acronomy><br><br>
<acronmy title="Junior Reserve Officer Training Corps">JROTC</acronomy><br><br>
<acronmy title="Special Weapons And Tactics">SWAT</acronomy><br><br>
<acronmy title="Federal Bureau of Investigation">FBI</acronomy><br><br>
<acronmy title="Occupational Safety and Health
Administration">OSHA</acronomy><br><br>
<hr color="red"> <h1 align="center" style="color:pink">Abbreviations</h1>
<abbr title="Association of American Railroads">AAR</abbr><br><br> <abbr title="All
India Radio">AIR</abbr><br><br> <abbr title=" Board of Cricket Control in
India">BCCI</abbr><br><br> <abbr title="Broad Gauge">BG</abbr><br><br> <abbr
title="Central Bureau of Investigation">CBI</abbr><br><br> <abbr title=" Central Board of
Secondary Education">CBSE</abbr><br><br> <abbr title="American Association of Blood
Banks">AABB</abbr><br><br> <abbr title="Advanced Care Paramedic
">ACP</abbr><br><br> <abbr title="American Cancer Society">ACS</abbr><br><br>
<abbr title="Indian Air Force">IAF</abbr><br><br></body></html>
2. HTML IMAGE EXERCISES

a. Display five different images. Skip two lines between each image. Each image should
have a title.
CODE:
<html> <head> <title>2a</title> </head>
<body>
<table border="0" align="center">
<tr> <td> <h1 align="center">A</h1><img src="australia - windows 7
(3).jpg"width="200"height="200"></td>
<td><h1 align="center">B</h1><img src="assorted
(54).jpg"width="200"height="200"></td>
</tr> <tr>
<td><h1 align="center">C</h1><img src="assorted.jpg"width="200"height="200"></td>
<td><h1 align="center">D</h1><img src="avatar (3).jpg"width="200"height="200"></td>
</tr> <tr>
<td colspan="1"><h1 align="center">E</h1><img
src="awd.jpg"width="200"height="200"></td> </tr>
</table> </body> </html>
b. Display an image that has a border of size 2, a width of 200, and a height of 200.
CODE:
<html><head><title>image</title><style> body{background-color:pink;}</style></head>
<body><img src="Mount Rushmore Being Carved(1932).jpg" border="1" size="2"
width="200px" height="200px" ></html>
c. Display the image towards the right corner of the webpage

CODE:
<html><head>
<title>picture</title> </head> <body> <p align="right">
<img src="australia - windows 7 (3).jpg" border="3" width="200" height="200"> </p>
<img src="australia - windows 7 (3).jpg" border="3" width="200" height="200"> </body>
</html>
3. Program to illustrate Nested ordered list and Definition lists
CODE:
<html><head><title>3</title>
<style>
</style> </head>
<body>
<h1 align="center" style="color:brown">Program to illustrate Nested and Definition List
Tags</h1> <hr color="red"> An ordered nested List:
<ol type=1> <li>Coffee</li> <li>Tea</li> <ol type=a> <li>Black tea</li> <li>Green
tea</li><ol type=i> <li>China</li> <li>Africa</li> </ol> </ol> <li>Milk</li> </ol>
A Definition List:<dl>
<dt>Bangalore</dt> <dd>-Captial city of karnataka</dd> <dt>mumbai</dt> <dd>-Captial
city of maharashtra</dd> </d1> </body></html>
4. Design the following page using table tags.

CODE:
<html><head><title>Designing a page</title></head> <body> <table border="2">
<tr> <th colspan=2>Fresh Fruits</th> </tr> <tr><td rowspan=2>It has long known that a
diet<br> that includes at least a few servings<br> of fresh fruits every day will help<br> keep
you healthy,fit and trim.</td> <td rowspan=2><img src="karthik.jpeg"> </td> </tr>
</table> <br> <br> <br> <table border="2"> <tr bgcolor="yellow"> <th>Indicator channel
<br>3rd and <br>2nd bit</th> <th>Channel 1 1<sup>st</sup>bit</th><th>Channel 2
0<sup>th</sup>bit</th> </tr> <tr> </tr> <tr bgcolor="pink"> <td>00</td><td>No hidden
data</td><td>No hidden data</td> </tr> <tr bgcolor="green"> <td>01</td><td>No hidden
data</td><td>Embed single bit</td> </tr> <tr bgcolor="orange"> <td>10</td><td>Enbed
single bit</td><td>No hidden data</td> </tr> <tr>
bgcolor="navyblue"><td>11</td><td>Embed single bit</td><td>Embed single bit</td>
</tr> </table></body></html>
5. Develop static pages (using Only HTML) of an online Book store. The pages should
resemble: www.amazon.com. The website should consist of the following pages.
Home page Registration and user Login User Profile Page Books catalog
Shopping Cart Payment By credit card Order Conformation
Write an html program to generate a webpage that can give the overall information
about that website.
CODE:
Karthik.html
<!DOCTYPE html>
<html><head><title>website</title>
<style>
#p1{top:300px;left:50%;bottom:50%;font-style:italic;font-size:2em;}
nav li{list-style:none;} nav li a{style:none;}
header{height:100px;position:fixed;width:100%;background-
color:blue;left:0px;fontsize:2em;
top:0px;text-transform:uppercase;}
nav{position:fixed;top:100px;left:0px;width:25%;height:100%;backgroundcolor:yello
w;}
article{position:fixed;top:25%;left:25%;font-size:2em;height:100%;width:100%;
background-color:pink;font-color:pink;top:100px;}
</style>
</header><body><header align=center>amazon book world</header>
<nav>
<ol> <li><a href="userlogin.html">USER LOGIN</a></li><br>
<li><a href="userprofile.html" target="article">USER PROFILE</a></li><br>
<li><a href="bookscatalogue.html">BOOKS CATALOGU</a></li><br>
<li><a href="shopingcart.html">SHOPPING CART</a></li><br>
<li><a href="orderconformation.html">ORDER CONFORMATION</a></li><br>
<li><a href="payment.html">PAYMENT</a></li> </ol> </nav>
<article><center><p id="p1">welcome<br><br>2<br><br>AmAzon</p></center></article>
</body></html>
Bookscatalogue.html
<html> <head><title>5(g)</title>
<h1 align="center"><u>LITERARY AND STORY BOOKS CATALOG</u></h1> </head>
<body>
<a href="payment1.html"><img src="1.jpg"/></a>&emsp;&emsp;
<a href="payment1.html"><img src="39.jpg"/></a>&emsp;&emsp; <a
href="payment2.html"><img src="40.jpg"/></a>&emsp;&emsp;
</body> </html>
Orderconformation.html
<HTML> <head> <title>5(j)</title> </head><h1 ALIGN="CENTER"><U>SHOPPING
CART</U></H1>
<body bgcolor="aqua">
<H2 ALIGN="CENTER"><U>YOUR SHOPPING CART DETAILS</U></H2>
<form method="get">
<table cellpadding="5" border="1" CELLSPACING="0" align="center">
<tr> <TH>S.NO</TH><th>BOOK ID</TH> <TH>BOOK NAME</TH>
<TH>ORDERED DATE</TH><TH>BOOK ORDER</TH></TR>
<TR><TH>1.</TH> <TD>BOOK001</TD>
<TD>PRIDE AND PREJUSTICE</TD> <TD>12/03/2017</TD>
<TD>DELIVERED</TD></TR> <TR><TH>2.</TH> <TD>BOOK032</TD>
<TD>GULLIVER'S TRAVELLS</TD> <TD>18/05/2017</TD>
<TD><INPUT TYPE="SUBMIT" VALUE="BUY NOW"> <BR/><INPUT
TYPE="SUBMIT" VALUE="DELETE"></TD></TR><TR>
<TH>3.</TH> <TD>BOOK031</TD>
<TD>CHILDREN STORIES</TD> <TD>02/06/2017</TD>
<TD>DELIVERED</TD></TR>
<TR><TH>4.</TH> <TD>BOOK043</TD> <TD>TIME TO LEAD</TD>
<TD>02/06/2017</TD> <TD><INPUT TYPE="SUBMIT" VALUE="BUY NOW">
<BR/><INPUT TYPE="SUBMIT" VALUE="DELETE"></TD></TR>
<TR><TH>5.</TH> <TD>BOOK045</TD>
<TD>BASIC JAVA</TD> <TD>02/06/2017</TD> <TD><INPUT TYPE="SUBMIT"
VALUE="BUY NOW"> <BR/><INPUT TYPE="SUBMIT"
VALUE="DELETE"></TD></TR>
</table><BR/>
<table align="center"><TR><TH><A HREF="5.html" target="_top">CONTINUE TO
SHOPPING</A></TR></TH>
</table></body></html>
Payment.html
<HTML> </head><h1 ALIGN="CENTER"><U>PAYMENT</U></H1>
<body bgcolor="aqua"> <FORM METHOD="GET">
<h2 ALIGN="CENTER"><U>SELECT THE PAYMENT TYPE</U></H2>
<H3>FOR CREDIT OR DEBIT TRANSACTION</H3>
&emsp;&emsp;&emsp;<A HREF="5(l).html"><INPUT TYPE="RADIO"></a>CREDIT
CARD
&emsp;<A href="5(m).html"><INPUT TYPE="RADIO"></a>DEBIT CARD<BR/>
<H3>IF TRANSACTION BY NET BANKING</H3>
&emsp;&emsp;&emsp;<A HREF="5(n).html"><INPUT TYPE="RADIO"></a>NET
BANKING <h3>IF CASH ON DELIVERY</h3>
&emsp;&emsp;&emsp;<A href="5(o).html"><INPUT TYPE="RADIO"></a>CASH ON
DELIVERY
</body> </html>
Payment1.html
<html> <head><title>5(h)</title> </head>
<body bgcolor="skyblue"><br/><br/><br/><br/><br/><p align="center">BOOK
PRICE=Rs.400<br/><br/> To add to cart<br/><br/> <a href="userlogin.html">Click
here</a></p></body></html>
Payment2.html
<html><head><title>5(h)</title></head>
<body bgcolor="skyblue"><br/><br/><br/><br/><br/><p align="center">BOOK
PRICE=Rs.600<br/><br/>To add to cart<br/><br/><a href="userlogin.html">Click
here</a></p></body></html>
Registration.html
<!DOCTYPE html>
<html> <head> <style>
input[type=text], select, textarea{width: 100%;padding: 12px;border: 1px solid
#ccc;border-radius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom:
16px;resize: vertical;}
input[type=password]{width: 100%;padding: 12px;border: 1px solid
#ccc;borderradius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom:
16px;resize: vertical;} input[type=submit] {background-color:green;color:
white;padding: 12px 20px;border:
none;border-radius: 4px; cursor: pointer;} input[type=reset]{background-
color:green;color: white;padding: 12px 20px;border: none;border-radius:
4px;cursor: pointer;} input[type=reset]:hover {background-color: #45a049;}
input[type=submit]:hover {background-color: #45a049;}
.container {border-radius: 5px;background-color: #f2f2f2;padding: 20px;}
</style> </head>
<body bgcolor="lightblue">
<h1 align="center">*---*---REGISTRATION---*---*</h1> <hr color="orange">
<div class="container"> <form>
NAME:<input type="text"><br>
GENDER:<input type="radio" name="gender" value="MALE">MALE
<input type="radio" name="gender" value="FEMALE">FEMALE<br><br>
OCCUPATION:<select name:"dropdown">
<option value:"student" selected>STUDENT</option> <option
value:"teacher">TEACHER</option> <option value:"others">OTHERS</option>
</select><br>
PHONE:<input type="text"><br>
E-MAIL ID:<input type="text"><br>
HOBBIES:<input type="checkbox"id="hobbies" value="Browsing"/>
<input type="checkbox"id="hobbies" value="Reading Books"/>
<input type="checkbox"id="hobbies" value="Driving"/>
<input type="checkbox"id="hobbies" value="Gardening"/><br/><br>
USER ID:<input type="text"><br>
PASSWORD:<input type="password"><br>
RETYPE PASSWORD:<input type="password"><br>
<a href="userlogin.html">BACK</a> <input type="submit" value="SUBMIT"/>
<input type="reset" value="RESET"/> </form></div></body></html>
Shoppingcart.html
<html><head><title>5(i)</title></head>
<body bgcolor="aqua"> <h2 align="center"><u>make sure you have made the payment if
not proceed to payment</u></h2> <h2 align="center"><u>order conformation</u></h2>
<form method="get"> <table cellpadding="5" border="1" cellspacing="0" align="center">
<tr> <th>s.no</th><th>book id</th><th>book name</th><th>ordered date</th>
<th>conformation status</th></tr><tr><th>1.</th> <td>book001</td><td>pride and
prejustice</td><td>12/03/2017</td>
<td>conformed</td></tr><tr><th>2.</th><td>book032</td><td>gulliver's travells</td>
<td>18/05/2017</td><td>conformation pendind</td></tr><tr><th>3.</th>
<td>book031</td><td>children
stories</td><td>02/06/2017</td><td>conformed</td></tr></table><br/>
<table align="center"><tr><th><a href="payment.html" target="_top">proceed to
payment</a></tr></th></table> </body></html>
Userlogin.html
<html> <body bgcolor="lightblue"> <center> <font color="purple">
<h1>USER LOGIN FORM</h1></font><u>
<p>ALREADY U HAVE AN ID "LOGIN" OTHERWISE
"REGISTER"</p><br/><br/></u>
<form>
USER ID: <input type="text" value="ENTER ID"/><br/><br/><br/>
PASSWORD: <input type="password"><br/><br/> <a href="5.html">HOME</a>
<input type="submit" value="click"/> <a href="registration.html">REGISTER</a>
</form></center></body></html>
Userprofile.html
<!DOCTYPE html> <html> <head> <style> table
{border-collapse: collapse;width: 100%;} th, td
{text-align: left;padding: 8px;} tr:nth-
child(even){background-color: #f2f2f2} th
{background-color:blue;color: white;}
</style></head><body><h1 align="center">User Profile</h2>
<table>
<tr><th>S.no</th><th>Username</th><th>D.O.B</th><th>Address</th><th>Occupation</t
h></tr> <tr><td>1</td><td>Ramu.P</td> <td>12<sup>th</sup> Jan
1980</td><td>H.No:22/12/1/M.G.Road</td> <td>Engineer</td></tr>
<tr><td>2</td><td>Mohan.R</td><td>23<sup>rd</sup>May
1982</td><td>H.No:22/12/1/M.G.Road</td><td>Driver</td></tr>
<tr><td>2</td><td>Pavani.V</td><td>27<sup>th</sup>July
1983</td><td>H.No:22/12/1/M.G.Road</td><td>Software Engineer</td></tr>
<tr><td>2</td><td>Sheshu/D</td><td>07<sup>th</sup>March
1984</td><td>H.No:12/1/M.G.Road</td><td>DBA</td></tr>
<tr><td>2</td><td>Surendar.R</td><td>29<sup>th</sup>May
1982</td><td>H.No:22/12/11,BalaM.GRoad</td><td>Professor</td></tr>
</table> <center><b> <a href="5.html">Home</a> </body></html>
Netbanking.html
<HTML><HEAD> <H1 ALIGN="CENTER"><U>NET BANKING</U></H1></head>
<body bgcolor="#1E90FF"><form method="get">
<TABLE BORDER="0" CELLPADDING="5" ALIGN="CENTER"><TR><TH>
SELECT BANK:</TH><TH><SELECT>
<OPTION>SELECT</OPTION> <OPTION>STATE BANK OF INDIA</OPTION>
<OPTION>INDIAN BANK</OPTION> <OPTION>INDIAN OVERSEAS
BANK</OPTION> <OPTION>HDFC</OPTION> <OPTION>CITY UNION
BANK</OPTION></SELECT></TH></TR> <TR><TH>USER NAME:</TH>
<TH><INPUT TYPE="TEXT" MAXLENGTH="25" SIZE="25"></th></tr>
<TR><TH>PASSWORD:</TH> <TH><INPUT TYPE="PASSWORD"
MAXLENGTH="25" SIZE="25"></th></tr><BR/>
<BR/><TR><TH></TH><TH><A HREF=" ">PROCEED TO SEND
OTP</TH></TR><BR/> <TR><TH>ENTER OTP:</TH>
<TH><INPUT TYPE="NUMBER" MAXLENGTH="3" SIZE="3"></TH></TR>
<BR/></BR/><TR><TH></TH><TH><input type="button" value="Process"
TARGET="RIGHT_COL"></TH></TR></TABLE>
<a href="5.html"><p align="center">HOME</p></a> </BODY></HTML>
Delivery.html
<html><head></head>
<body bgcolor="#1E90FF"><br/><br/><br/><br/>
<h1 align="center"> CASH ON DELIVERY PROCEESED</H1>
<A HREF="5.html"><p align="center">HOME</p></a></body> </html>
5p.HTML
<html> <head> <h1 align="center">PAYMENT PROCEESED</h1> </head></html>
6. Design a Math Quiz Page using HTML and CSS.

CODE:
<!DOCTYPE html> <html> <head>
<title>Maths Quiz</title> <style> #p1{background-color:white;}
body{background-color:sandybrown;} th{color:#3951da;} li{color:#000000;}
td{color:#b90202;} <!..a{color:#000000;}..>
</style> </head> <body>
<form name="form5" action="url" method="get"> <table align="center" border="0"
cellpadding="5" bgcolor="lightsalmon" width=50%">
<tr> <th><h2><u>MATHS QUIZ</u></h2></th> </tr>
<tr> <th><u>Instructions</u></th> </tr>
<tr> <td class="intro">
<ul> <li>Please read all the instructions carefully before entering the Quiz.</li>
<li>The Quiz is for <b>half and hour(30 min)</b> only.</li>
<li>"Calculaters Digital watches and other Electronic gadgets" are not
allowed.</li> <li>Pen and Paper is allowed to do some roughf work.</li>
<li>There is a possibility to change answers.</li>
<li>The Answers for the questions are the bottom of the web page.</li>
<li>The questions are of <b>multiple choice</b> only.</li>
<li>Links for answers are at each question.</li>
<li>There are of Total 10 Questions.</li>
<li>"<i>A minimum of <b>6 Questions</b> must be answer to <b>Pass</b> the
exam.</i>"</li>
<li>After answering each questions press "SUBMIT" button</li>
</ul></td></tr> <tr><a name="qs1"></a>
<td><u>Question-1:</u><br/><br/>106 x 106 - 94 x 94=? <br/>
A.<input type="radio" name="choice" value="5A">2004<br/>
B.<input type="radio" name="choice" value="5B">2400<br/>
C.<input type="radio" name="choice" value="5C">1904<br/>
D.<input type="radio" name="choice" value="5D">1906<br/><br/>
<a href="#ans5">Click here to view answer</a><br/><br/>
</td></tr> <tr>
<td id="p1" align="center"> <input type="button" value="Submit"><br/>
</td> <tr><a name="qs2"></a>
<td><u>Question-2:</u><br/><br/>
Which of the following numbers gives 240 when added to its own square?<br/>
</td></tr> <tr>
<td id="p1" align="center">
<input type="button" value="Submit"><br/> </td>
<tr><a name="qs3"></a> <td><u>Question-3:</u><br/><br/>
What is 1004 divided by 2 ?<br/>
</td> </tr> <tr><td id="p1" align="center"> <input type="button" value="Submit"><br/>
</td> <tr>
<a name="qs4"></a> <td><u>Question-4:</u><br/><br/>
A clock strikes once at 1 O'clock,twice at 2 O'clock,thrice at 3 O'clock and so on.<br/>
How many times will it strike in 24 hours?<br/>
</td></tr> <tr>
<input type="button" value="Submit"><br/>
<td>Question-5:<br/><br/>
The average of first 50 natural numbers is.......<br/>
A.<input type="radio" name="choice" value="1A">25.30<br/>
B.<input type="radio" name="choice" value="1B">25.5<br/>
C.<input type="radio" name="choice" value="1C">25.00<br/>
D.<input type="radio" name="choice" value="1D">12.25<br/><br/>
</tr> <tr><td id="p1" align="center">
<input type="button" value="Submit"><br/> </td><tr><a name="qs6"></a> <td>Question-
6:<br/><br/>The number of 3-digit number divisible by 6 is.......<br/>
</td> </tr> <tr>
<input type="button" value="Submit"><br/> </td> <tr>
<a name="qs7"></a> <td>Question-7:<br/><br/>
Evaluatation of 8<sup>3</sup> x 8<sup>2</sup> x 8<sup>-5</sup> is......<br/>
D.<input type="radio" name="choice" value="7D">None of the above<br/><br/>
</td> </tr>
<tr><td id="p1" align="center">
</td> <tr>
<a name="qs8"></a> <td>Question-8:<br/><br/>
The simplest form of 1.5:2.5 is.....<br/>
A.<input type="radio" name="choice" value="8A">6:10<br/>
B.<input type="radio" name="choice" value="8B">15:25<br/>
C.<input type="radio" name="choice" value="8C">0.75:1.25<br/>
D.<input type="radio" name="choice" value="8D">3:5<br/><br/>
</td></tr> <tr>
What is three fifth of 100 ?<br/>
<a href="#ans9">Click here to view answer</a><br/>
</td></tr> <tr>
</td> <tr>
<a name="qs10"></a>
What is 7% equal to ?<br/>
A.<input type="radio" name="choice" value="10A">0.007<br/>
B.<input type="radio" name="choice" value="10B">0.07<br/>
C.<input type="radio" name="choice" value="10C">0.7<br/>
<a href="#ans10">Click here to view answer</a><br/> </td> </tr> <tr>
<input type="button" value="Submit"><br/> </td> </tr></table>
<table align="center" border="0" cellpadding="5" bgcolor="#abebc6" width=50%"> <tr>
<th>Answers</th> </tr> <tr><td><a name="ans1">1:B.25.5</a><br/>
<a href="#qs2">Move to 2nd question</a></td> </tr> <tr>
<td><a name="bottom2">2:C.150</a><br/> <a href="#qs3">Move to 3rd question</a></td>
</tr> <tr><td><a name="ans3">3:B.502</a><br/> <a href="#qs4">Move to 4th
question</a></td></tr> <tr><td><a name="ans4">4:C.156</a><br/>
<a href="#qs5">Move to 5th question</a></td></tr> <tr><td><a
name="ans5">5:B.2400</a><br/> <a href="#qs6">Move to 6th question</a></td></tr>
<tr><td><a name="ans6">6:A.15</a><br/> <a href="#qs7">Move to 7th
question</a></td></tr> <tr><td><a name="ans7">7:A.1</a><br/>
<a href="#qs8">Move to 8th question</a></td></tr>
<tr> <td><a name="ans8">8:D.3:5</a><br/>
<a href="#qs9">Move to 9th question</a></td></tr> <tr><td><a
name="ans9">9:D.60</a><br/>
<a href="#qs10">Move to 10th question</a></td></tr>
<tr><td><a name="ans10">10:B.0.07</a><br/>
</td></tr></form></table></body></html>
7. The town of Chesapeake Haven, Maryland, is home to a local landmark restaurant,

the Berger Street Grille. The restaurant offers casual dining in a spacious waterfront
setting and serves several hundred diners on any given evening. Although the
restaurant is famous for its grilled meat dishes, its location near the Chesapeake River
and the Atlantic Ocean makes the restaurant a favorite for seafood lovers as well.
BenO’Brien, the owner of the restaurant, has asked for your assistance in creating a
Web
page for the Berger Street Grille.
Code:
<!DOCTYPE html>
<head><title>Berger Street Grille</title>
<style> body{
margin-left:10em;
margin-right:10em;
}
body{background-color:black;} h1{color:yellow;}
h3{color:yellow;text-transform:capitalize;} p{color:white;font-
size:1.2em;} li{color:white;font-size:1.2em;}
</style>
</head><body>
<center><img src="berger.jpg" width="40%"/><br/>
<p>Our's are the best Thrillen for Grillin</p></center>
<table align="center" border="0" cellpadding="1" width="70%">
<tr><td><h1>Welcome to the Berger Street Grille</h1></td></tr>
<tr><td><h3>Our chops are the most popular pops</h3></td></tr>
<tr>
<td><p>The Berger Street Grille is your one stop for the best grilled meat, fish, chicken, and
vegetables in town.
We have been at the same location for more than 50 years, so we know our customers and
we know they want a great meal with great value served in a clean, comfortable, friendly
dining environment.
Our customers come here to eat and to enjoy themselves while they do so.
You won't find fancy tablecloths and flatware here at Berger Street.
What you will find is the best food for miles around.
Once you've been here, you'll be back week after week.
We don't take reservations, so we encourage you to arrive early on Friday and Saturday
nights when it can get more than a little crowded here.
If it's a busy night, we won't treat you like a herd of cattle; we'll treat you with courtesy and
respect.
We value your business at all times.
Spend some time in our game room or come into our snack lounge and chomp down on
some of the finest appetizers you'll ever taste.</p>
</td></tr>
<tr><td><h3>Here's the dish with the tasty fish</h3></td></tr>
<tr>
<td><p>Yes, most of our diners come here to sample the finest steaks in town, but if it's fish
you wish, then you've also come to the right place.
We've got fresh lobster and other succulent shellfish treasures.
Whether its clams, scallops, crab, or lobster, we've got the freshest shellfish this side of the
Atlantic.
Our fish menu items are delivered daily, so there is no question about the freshness and
quality of our seafood items.
Don't forget, we serve up some of the best grilled tuna and grilled salmon in the region.
Try some of these tempting favorites:</p>
<ul type="square">
<li>Maryland lobster – great any time of the year.
We also have lobster scampi, and we have the most delicious lobster bisque served year
'round.
Try our twin lobster for yourself or for two</li>
<li>Long Island clams – served as a bisque or on the half shell</li>
<li>Fillet of Sole – order either baked or fried</li>
<li>Atlantic Red Snapper – in season</li>
<li>Shrimp mania – a pound of shrimp served the way you want it</li>
</ul></td></tr>
<tr><td><h3>The salad bar is not far</h3></td></tr>
<tr>
<td><p>If you like to spend your time behind bars – salad bars, that is – we've got the finest
collection of locally grown vegetables in Maryland. We even have our own farm behind the
restaurant where we grow many of the vegetables we serve in our salads. Couple our fresh
produce with our own special house dressings and you've got a salad that's a meal in its own
right. Try our toasted bread croutons along with your salad. Our croutons are crisp, yet
slightly soft, and they've got just the right hint of onion and garlic to please any palette. If
you'd like some grilled vegetables along with your salad, we have grilled corn, eggplant, and
peppers. The salad can be a meal in itself, but if you'd like to pair it up with biscuits,
croissants, breadsticks, and one of our famous soup de jour offerings, you know you won't be
disappointed. We're open every night. We serve dinner starting at 4 p.m.</p> </td></tr>
<tr> <td><center><h3>The berger street grills restaurant 210 ocean way.<br/>
Chesapeake Haven,Maryland 20223 401 555-4788</h3></center></td></tr>
<tr> <td> <center><h3>Please call head for guest seating or special
accommodation</center></h3></td> </tr>
</table> </body></html>
8)Write the HTML code to create a personal web site with the frame-based navigation
structure. The web site must contain a frameset with a header, navigation bar, and at
least three different pages.
Code: one.html
<!DOCTYPE html><html><head>
<title>My First Website</title><meta name="author" content="Dinesh kumar.R" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body><div id="page"><div id="logo">
<h1><a href="/" id="logoLink">Bubba's world</a></h1></div>
<div id="nav">
<ul><li><a href="#/home.html">Home</a></li>
<li><a href="photogallery.html">Photo gallery</a></li>
<li><a href="contact.html">Contact</a></li></ul> </div>
<div id="content"><h2>Home</h2><p>
Hi! My name is Budda and I live in <font size="6em"><u><b><font
color="red">Red</font><font color="blue">neck</font><font
color="green">vile</font><b></u></font></p>
<h1>Redneckville</h1> <p> I am very proud to be a resident of
<u>Redneckville.</u><br><br> It is the best place to live if you are a redneck and you are
dentally challenged<br><br>(that is, your teeth are really bad like mine).<br><br>Here's
what I like about the place:
<ul type="square"> <li>It's in the middle of nowhere</li>
<li>You don't have to brush your <font size="4em"
color="yellow"><b>TEETH</b></font></li> <li>You can always marry a close
relative.</li></ul>
</p></div><div id="footer">
<p>Webpage made by <a href="/" target="_blank">[DINESH KUMAR.R]</a></p>
</div></div></body></html>
Photogallery.html
<html><head><title>photogallery</title></head>
<body bgcolor="aqua">
<h1 align="center">Photo gallery</h1>
<hr color="red">
<img src="E:\FireShot\redneck1.jpg"width="200" height="200"/></a>&emsp;&emsp;
<a href="payment1.html"><img src="E:\FireShot\redneck2.jpg"width="200"
height="200"/></a>&emsp;&emsp;
<img src="E:\FireShot\redneck3.jpg"width="200" height="200"/></a>&emsp;&emsp;
</body></html>
Contact.html
<html><head><title>contact</title></head>
<body><h1 align="center"> Contact </h1><hr color="pink"><font color="darkpink">
<h3>Find Me Elsewhere</h3><div><ul>
<li><a href="http://facebook.com" target="_blank">Facebook</a></li>
<li><a href="http://twitter.com" target="_blank">Twitter</a></li>
<li><a href="http://linkedin.com" target="_blank">LinkedIn</a></li>
<li><a href="http://tumblr.com" target="_blank">Tumblr</a></li>
<li><a href="http://pinterest.com" target="_blank">Pinterest </a></li></ul>
</font></div></body></html>
Style.css p{ line-height: 1em;
}
h1, h2, h3, h4{color: orange;font-weight: normal;line-height: 1.1em;margin: 0 0 .5em 0;}
h1{ font-size: 1.7em; } h2{ font-size: 1.5em; }
a{color: black;text-decoration: none;} a:hover,a:active{
text-decoration: underline; } body{font-family: arial;
font-size: 80%; line-height: 1.2em; width: 100%;
margin: 0; background: #eee;}
#page{ margin: 20px; }
#logo{width: 35%;margin-top: 5px;font-family: georgia;display: inline-block;}
#nav{width: 60%;display: inline-block;text-align: right;float: right;}
#nav ul{}
#nav ul li{display: inline-block;height: 62px;}
#nav ul li a{padding: 20px;background: orange;color: white;}
#nav ul li a:hover{background-color: #ffb424;box-shadow: 0px 1px 1px #666;}
#nav ul li a:active{ background-color: #ff8f00; }
#content{margin: 30px 0;background: white;padding: 20px;clear: both;}
#footer{border-bottom: 1px #ccc solid;margin-bottom: 10px;}
#footer p{text-align: right;text-transform: uppercase;font-size: 80%;color: grey;}
#content,ul li a{ box-shadow: 0px 1px 1px #999; }
Common Challenging Cycle Sheet for M.Tech (Integrated S.E)

Web Technologies -B.Tech (ITE1002),
Internet And Web Programming (ITA6003),
Web Technologies (SWE1008)
HTML, CSS and JavaScript:
1. 1. Pick 5 corporations and hunt down their current stock prices. i) Place
them in a neatly arranged table with their name, symbol, last price, 52wk
high, 52wk low and PE ratio. ii) The end result should look like the
following. Notice that the first column is aligned left and the rest are
centered. iii) Now alter the last table using shaded rows and no border.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="3">
<tr>
<th colspan="6">My tech stock picks</th>
</tr>
<tr>
<th align="left" cellspacing="30">NAME</th>
<th align="Center">SYMBOL</th>
<th align="Center">CURRENT</th>
<th align="Center">52WK HI</th>
<th align="Center">52WK LO</th>
<th align="Center">P/E RATIO</th>
</tr>
<tr>
<td>Microsoft</td>
<td>MFST</td>
<td>86-3/8</td>
<td>119-15/16</td>
<td>75-1/2</td>
<td>56.09</td>
</tr>
<tr>
<td>Cisco Systems</td>
<td>CSCO</td>
<td>72-1/8</td>
<td>82</td>
<td>24-13/16</td>
<td>400.69</td>
</tr>
<tr>
<td>American Online</td>
<td>AOL</td>
<td>63</td>
<td>95-13/16</td>
<td>38-15/32</td>
<td>350.00</td>
</tr>
<tr>
<td>Qwest Communications</td>
<td>Q</td>
<td>44-7/16</td>
<td>66</td>
<td>25-3/4</td>
<td>74.06</td>
</tr>
<tr>
<td>DELL Computers</td>
<td>DELL</td>
<td>53-59/64</td>
<td>59-11/16</td>
<td>31-3/8</td>
<td>86.97</td>
</tr>
</table>
</body>
</html>
2. Create a web page containing three divisions. i) The first division displays
a digital clock on the rightmost end. ii) The width of the first division is
100%.The second division and third division lay side by side. iii) The second
division has an image slider and third division has a color picker and two list
box having font-family and size and a button. When a button is clicked
the background color, font and font size should change for a whole page. Use
JavaScript to implement the above
<html>
<head>
<title>Title</title>
<script>
function displaytime() {
x=getHour();
y=getMin();
z=getSec();
document.getElementById("id1").value=x+" H";
document.getElementById("id2").value=y+" M";
document.getElementById("id3").value=z+" S";
setTimeout(displaytime,1000);
}
function getHour() {
var obj=new Date();
h=obj.getHours();
return h;
}
function getMin() {
var obj=new Date();
h=obj.getMinutes();
return h;
}
function getSec() {
var obj=new Date();
h=obj.getSeconds();
return h;
}
var slideIndex=0;
imageSlider();
function imageSlider() {
var i;
var slide=document.getElementsByClassName("fade");
for(i=0;i<slide.length;i++)
{
slide[i].style.display="none";
}
slideIndex++;
if(slideIndex>slide.length)
{
slideIndex=1;
}
slide[slideIndex-1].style.display = "block";
setTimeout(imageSlider, 2000);
}
function colorChange() {
var x=document.getElementById("mySelect").value;
document.getElementById("color").style.backgroundColor = x;
var y=document.getElementById("myfont").value;
document.getElementById("color").style.fontFamily=y;
var z=document.getElementById("mySize").value;
document.getElementById("color").style.fontSize=z;
}
</script>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.fade {display:none;
border: 5px solid black;
height: 360px;
width: 610px;
}
.image {
max-width: 1000px;
position: absolute;
top: 208px;
background-image: url("full.jpg");
padding: 20px;
height: 400px;
width: 650px;
}
#digitalclock
{
background-color: rgba(0,0,0,0.5);
float: right;
position: absolute;
top:70px;
left: 1000px;
padding: 10px;
border-radius: 10px;
}
#digital{
background-image: url(vit.jpg);
background-size: contain;
position: relative;
width: 100%;
padding: 100px;
}
#digitalclock input[type=text]{
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
color: crimson;
background-color: rgba(224, 210, 222, 1);
font-style: italic;
font-size: larger;
-webkit-filter:;
}
#color
{
position: absolute;
top: 208px;
left: 658px;
height: 400px;
width: 700px;
padding: 100px;
}
#new{
position: fixed;
background-color: #bbbbbb;
top: 450px;
left: 850px;
}
#newtext{
background-color: darkviolet;
}
</style>
</head>
<body onload=imageSlider();displaytime();>
<div id="digital">
<div id="digitalclock">
<input id="id1"type="text"><input id="id2" type="text"><input id="id3"
type="text">
</div>
</div>
<div class="image" >
<div class="fade">
<img name="" src="full.jpg" style="height: 350px;
width: 600px;">
</div>
<div class="fade">
<img name="imgm" src="half.jpg" style="height: 350px;
width: 600px;">
</div>
<div class="fade">
<img name="imgm" src="uni.jpg" style="height: 350px;
width: 600px;">
</div>
</div>
<div id="color" style="background-color: darkorange; ">
<div id="newtext">
<p style="border: 3px solid black;" id="text">
VIT University has bagged the top slot in the number of research publications in
2016. After surpassing the Indian Institutes of Technology earlier, the university,
in the last year, overtook the Indian Institute of Science (IISc), Bengaluru, with a
total of 2,598 research publications. The IISC had published 2,563 research
papers.
</p>
</div>
<form>
<div id="new">
Select Color:
<select id="mySelect">
<option value="red" >Red</option>
<option value="blue" >Blue</option>
<option value="green" >Green</option>
<option value="black">Black</option>
<option value="pink">Pink</option>
</select>
<br>
Select Font:
<select id="myfont">
<option value="Arial" style="font-family: Arial">Arial</option>
<option value="'Baskerville Old Face'" style="font-family: 'Baskerville Old
Face'">Baskerville Old Face</option>
<option value="'Berlin Sans FB Demi'" style="font-family: 'Berlin Sans FB
Demi'">Berlin Sans FB Demi</option>
<option value="Century" style="font-family: Century">Century</option>
<option value="'Javanese Text'" style="font-family: 'Javanese Text'">Javanese
Text</option>
</select>
<br>
Size:
<select id="mySize">
<option value="large" >Large</option>
<option value="larger" >Larger</option>
<option value="medium" >Medium</option>
<option value="small">Small</option>
<option value="smaller">Smaller</option>
</select>
<br>
<input type="button" value="click" name="click" onclick="colorChange()">
</div>
</form>
</div>
</body>
</html>
3. . Design the following HTML form using HTML and javascript
i) Utilize CSS shorthand background properties to provide a color and
image. ii) Utilize field set tags. iii) Check no fields are null.
<!DOCTYPE html> <html><head> <title></title></head> <body> <form>
<table border="2"> <tr><th colspan="2">Pizza Shop 2.0</th></tr> <tr>
<td>Name</td><td><input type="text" name="name"></input></td></tr> <tr>
<td>Pizza Topping</td><td><input type="radio" name="topping"
value="supreme">Supreme</input></br> <input type="radio" name="topping"
value="vegetarian">Vegetarian</input></br> <input type="radio"
name="topping" value="hawaiian">Hawaiian</input></td></tr>
<tr> <td>Pizza Sauce</td> <td><select name="sauce"> <option
value="tomato">Tomato</option> <option
value="barbeque">Barbeque</option> <option
value="mayonnaise">Mayonnaise</option> <option value="secret">Secret
Sauce</option> </select></td></tr> <tr> <td>Optional Extras</td><td><input
type="checkbox" name="extra_cheese" value="1">Extra Cheese</input> <input
type="checkbox" name="gluten_free" value="1">Gluten Free
Base</input></td> </tr> <tr> <td>Delivery Instructions</td><td><textarea
name="delivery" cols="50" rows="4" required></textarea></td>
<tr><th><input type="submit" value="Send my Order"></th></tr> </table>
</form> </body> </html>
4.Design a student registration form which takes student name, register

number, DOB, program, email id, temporary address, permanent address,
phone number.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Register Form</title>
</head>
<body>
<form>
<table>
<tr><td><h1 align="left"><b>Student registration form</b><h1></td></tr>
<tr>
<td>Name :</td>
<td><input type="text"required/></td>
</tr>
<tr>
<td>Register number :</td>
<td><input type="text"></td>
</tr>
<tr>
<td>DOB:</td>
<td>
<input type="date" name="DOB">
</td>
</tr>
<tr>
<td>Program:</td>
<td><select name="Program">
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
<option value="B.tech">B.tech</option>
<option value="M.tech">M.tech</option>
</select></td>
</tr>
<td>Temporary address</td><td><textarea name="temporary address"
cols="50" rows="4"></textarea></td>
<tr>
<td>Permanent address</td><td><textarea name="Permanent address"
cols="50" rows="4"></textarea></td><tr>
<tr>
<td>Email :</td>
<td><input type="email"required/></td>
</tr>
<tr>
<td>Phone no :</td>
<td>
<select>
<option>91</option>
<option>044</option>
</select>
<input type="phone">
</td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
****THE END******

HTML Image Formatting

Uploaded by

Document Information

Original Title

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

HTML Image Formatting

Uploaded by

Copyright:

Available Formats

1.

HTML TEXT FORMATTING EXERCISE:

d. Print a list which starts with 7 with the type i

f. Print a definition list with 5 items

2. HTML IMAGE EXERCISES

c. Display the image towards the right corner of the webpage

4. Design the following page using table tags.

6. Design a Math Quiz Page using HTML and CSS.

7. The town of Chesapeake Haven, Maryland, is home to a local landmark restaurant,

Common Challenging Cycle Sheet for M.Tech (Integrated S.E)

4.Design a student registration form which takes student name, register

You might also like