Cycle Sheet 1 PDF

CYCLE SHEET 1
NAME:K.V.KARTHIK
REG NO:16MIS0327
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>
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;}
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>
OUTPUT:
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>
</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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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>
OUTPUT:
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;font-
size:2em;
top:0px;text-transform:uppercase;}
nav{position:fixed;top:100px;left:0px;width:25%;height:100%;background-
color:yellow;}
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;
</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;border-
radius: 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>
OUTPUT:
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>
Output:
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>
Output:
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; }
Output:
******THE END******

Cycle Sheet 1 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cycle Sheet 1 PDF

Transféré par

Droits d'auteur :

Formats disponibles

CYCLE SHEET 1

3. Program to illustrate Nested ordered list and Definition lists

4. Design the following page using table tags.

Vous aimerez peut-être aussi