20BIT0426 Webtech DA

HYPER TEXT MARKUP LANGUAGE
1. Introduction to HTML
a. Create a webpage that prints your name to the screen.
HTML Code :
<html>
<head> <title> My First Webpage </title> </head>
<body>
 Tharun
Kumar G.
</body>
</html>
OUTPUT :
b. Create a webpage that prints the numbers 1 - 10 to the screen.

HTML CODE:
<html>
<body>

1 2 3 4 5 6 7 8 9 10
</body>
</html>
OUTPUT :
c. Create a webpage and set its title to "This is a webpage"
HTML CODE :
<html>
<head>
<title>This is a webpage</title>
</head>
<body>
<p>
The title tag is in the head of HTML document.
</p>
</body>
</html>
OUTPUT :
d. Create a webpage that prints the message "When was this webpage created? Check
page's title for the answer." to the screen, and set the title of the page to the current
date.
HTML CODE :
<html> <head>
<title>August 12, 2021</title>
</head>
<body>
When was this webpage created? Check
page's title for the answer.
</body>
</html>
OUTPUT :
e. Create a webpage that prints any text of your choice to the screen; do not include
a head section in the code.
HTML CODE:
<html>
<body>
This is a web page whithout the head section included
</body>
</html>
OUTPUT :
f. Create a webpage which keeps track of the browsers information and do the
following
refreshes its page in 5 seconds, expires in a duration of time
HTML CODE :
<html>
<head>
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="expires" content="Wed, 05 Aug 2021, 12:39:00 GMT"/>
<title> Exercise 1f </title>
</head>
<body bgcolor="blue" text="yellow">
<h1>Refreshes page every 5 sec</h1>
<h1>Expires in a duration of time</h1>
</body>
</html>
OUTPUT :
2) HTMLTEXT EXERCISES
a. Print your name in green

Answer :
<html>
<head>
<title> Exercise 2a </title>
</head>
<body>
<p><font color= "green" face="Tahoma">Tharun Kumar G.</font><br/>
<font color= "#red">Tharun Kumar G.</font><br/>
<font color= "#00FF00">Tharun Kumar
G.<b><u>VIT</u></b></font><br/></p>
</body>
</html>
OUTPUT :
b. Print the numbers 1 - 10, each number being a differentcolor.
Answer :
c. Prints your name in a Tahoma font
Answer :
<html>
<head>
<title>Exc 2c</title>
</head>
<body>
<p><font color= "green" face="Tahoma">Tharun Kumar G.</font><br/>
</body>
</html>
OUTPUT :
d. Display a part of a word with bold underline.
Answer:
<html>
<head>
<title> Exercise 2d </title>
</head>
<body>
<p><font color= "green" face="Tahoma">Tha<b><u>run</u></b> Kumar
G.</font><br/>
</body>
</html>
OUTPUT :
d. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font
Answer :
<html>
<head>
<title> Exercise 2e </title>
</head>
<body>
<p><font face="Tahoma">Balloons are pretty and come in different
colors, different shapes, different sizes, and they can even adjust sizes as
needed.</font><font face="Calibri"><br/>But don't make them too big or they
might just pop, and then bye-bye balloon.</font><font face="Abadi"> It'll be
gone and lost for the rest of mankind.</font><font face="Arial"><br/>They
can serve a variety of purposes, from decorating to water balloon
wars.</font><font face="Consolas">You just have to use your head to think a
little bit about what to do with them.</font></p>
</body>
</html>
e. Print a paragraph that is a description of a book; include the title of the book as
well as its author. Names and titles should be underlined, adjectives should be
italicized and bolded.
Answer :
<html>
<head>
</head>
<body>
<p><
<u>The Alchemist</u> is a novel by Brazilian author <u>Paulo Coelho</u> that
was first published in 1988. Originally written in Portuguese, it became a widely
translated international bestseller.[1][2] An <b><i>allegorical</i></b> novel,
<u>The Alchemist</u> follows a young <b><i>Andalusian</i></b> shepherd in
his journey to the pyramids of Egypt, after having a <b><i>recurring</i></b>
dream of finding a treasure there.The book's main theme is about finding one's
destiny, although according to The New York Times, <u>The Alchemist</u> is
<b><i>"more self-help than literature.</i></b>"[4] The advice given Santiago that
"when you really want something to happen, <b><i>the whole universe</b></i>
will conspire so that your wish comes true" is the core of the novel's philosophy
and a motive that plays throughout it.</p>
</body>
</html>
OUTPUT :
f. Print your name to the screen with every letter being a different heading size.
Answer :
<html>
<head>
</head>
<body>
<h1>T</h1><h2>H</h2><h3>A</h3><h4>R</h4><h5>U</h5><h6>N</h6>
</body>
</html>
OUTPUT :
h. Write a comment line on your code and make sure it is not displayed in the
page
Answer :
<html>
<head>
<title> Exercise 2h </title>
</head>
<body>

<h1>T</h1><h2>H</h2><h3>A</h3><h4>R</h4><h5>U</h5><h6>N</h6>
</body>
</html>
OUTPUT :
i. Print a2+b2=2ab
Answer :
<html>
<head><title>Exc 2i</title></head>
<body>
<p><var>a</var><sup>2</sup>+<var>b</var><sup>2</sup> =
2<var>a</var><var>b</var></p>
</body>
</html>
OUTPUT :
j. Print H2O
Answer :
<html>
<head><title>Exc 2i</title></head>
<body>
<p><var>H</var><sub>2</sub><var>O</var>
</body>
</html>
OUTPUT:
k. Display a c code as it is in the page
Answer :
<html>
<head><title>Exercise 2e</title> </head>
<body>
<pre>
#include < stdio.h>
int main() { int number;
printf("Enter an integer: ");
// reads and stores input
scanf("%d", &number);
// displays output printf("You entered: %d", number);
return 0;
}</pre>
</body>
</html>
OUTPUT :
l. Set the background color of the page as yellow

Answer :
<html>
<head><title>Exercise 2l</title> </head>
<body bgcolor="yellow">
<pre>
#include < stdio.h>
return 0;
}</pre>
</body>
</html>
OUTPUT :
m. Set an image as background of the page
Answer :
<html>
<head><title>Exercise 2m</title> </head>
<body background="logo.jpg">
<pre>
#include < stdio.h>
return 0;
}</pre>
</body>
</html>
OUTPUT :
n. Set the font size as 10. Print it. Again try to decrease the font size. Check
whether the font size is reduced.
Answer :
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p><font size="10">I am Tharun Kumar</font></p>
<p><font size="5">I am Tharun Kumar</font></p>
</body>
</html>
OUTPUT :
o. Apply marquee for your name
Answer :
<!DOCTYPE html>
<html>
<head>
<title> Exercise 20 </title>
</head>
<body>
<marquee direction="right" behavior="scroll" width="600">Tharun Kumar
G.</marquee>
</body>
</html>
OUTPUT :
p. Display a paragraph contents in a single line.

Answer :
<html>
<head>
</head>
<body>
<p><font size="1">Inhabited since the Palaeolithic era, France was settled
by Celtic tribes known as Gauls during the Iron Age. Rome annexed the area in 51
BC, leading to a distinct Gallo-Roman culture that laid the foundation of the
French language. The Germanic Franks arrived in 476 and formed the Kingdom of
Francia, which became the heartland of the Carolingian Empire.</p>
</body>
</html>
OUTPUT :
3) HTML TEXT FORMATTING, LISTS EXERCISES
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.
Answer :
<!doctype html>
<html>
<head>
</head>
<body>
<p>1<sup>2</sup>=1</p>
<p>2<sup>2</sup>=4</p>
<p>3<sup>2</sup>=9</p>
<p>4<sup>2</sup>=16</p>
<p>5<sup>2</sup>=25</p>
<p>6<sup>2</sup>=36</p>
<p>7<sup>2</sup>=49</p>
<p>8<sup>2</sup>=64</p>
<p>9<sup>2</sup>=81</p>
<p>10<sup>2</sup>=100</p>
<p>11<sup>2</sup>=121</p>
<p>12<sup>2</sup>=144</p>
<p>13<sup>2</sup>=169</p>
<p>14<sup>2</sup>=196</p>
<p>15<sup>2</sup>=225</p>
<p>16<sup>2</sup>=256</p>
<p>17<sup>2</sup>=289</p>
<p>18<sup>2</sup>=324</p>
<p>19<sup>2</sup>=361</p>
<p>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
onwhere 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 <h1> level heading.
c. Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list
Answer :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Ordered list</h2>
<ol type="1">
<li>apple</li>
<li>orange</li>
<li>melon</li>
<li>grape</li>
<li>banana</li>
<li>fig</li>
<h2>Unordered list</h2>
<ul type="1">
<li>apple</li>
<li>orange</li>
<li>melon</li>
<li>grape</li>
<li>banana</li>
<li>fig</li>
</body>
</html>
OUTPUT:
d. Print a list which starts with 7 with the type i
Answer:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Ordered list</h2>
<ol type="i" start="7">
<li>apple</li>
<li>orange</li>
<li>melon</li>
<li>grape</li>
<li>banana</li>
<li>fig</li>
</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.
Answer :
<!doctype html>
<html>
<head>
</head>
<body>
<h1 align="center">Flynn Effect</h1>
<hr width="100%">
<p><font size="4">
Since the intelligence test was invented more than 100 years ago, our IQ
scores have been steadily increasing. Even the average person today would have been
considered a genius compared to someone born in 1919 or 1019 – a phenomenon known
as the Flynn effect.
There are many explanatory theories that support the Flynn effect. A strong
believe is that the average increase in IQ must be due to the multiple environmental
factors rather than a genetic shift. The ideal comparison is our change in height. We are
11cms taller today than in the 19th century and this is due to the overall health change
rather than a change in our genes. Indeed, some of the same factors may underlie both
shifts. Improved medicine, reducing the prevalence of childhood infections, and more
nutritious diets, should have helped our bodies to grow taller and our brains to grow
smarter, for instance.
</font></p>
</body>
</html>
OUTPUT:
f. Print a definition list with 5 items
Answer :
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Definition list</h1>
<dl>
<dt>Web page</dt>
<dd>It is a document commonly written in HTML that is viewed in a
browser</dd>
<dt>Server</dt>
<dd>It is a software or hardware device that accepts and responds to
requests made over a network</dd>
<dt>Domain</dt>
<dd>Domain is defines as the location of the website</dd>
<dt>Browser</dt>
<dd>It is a software program to present and explore content on the World
Wide Web</dd>
<dt>Social Network</dt>
<dd>Social network is a website that brings people together to talk, share
ideas and interests, or make new friends</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
Answer :
<!doctype html>
<html>
<head>
</head>
<body>
<address>
<p>
Sender:<br>
Mr.Messi,<br>
Goat street,<br>
Barcelona-643487<br>
</p>
</address>
` <address>
<p align="center">
Receiver:<br>
Mr.Ronaldo,<br>
Penalty street,<br>
Madrid-687534<br>
</p>
</address>
</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
Answer :
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Abbreviation</h1>
<abbr title="Cascading Style Sheets">CSS</abbr><br><br><br>
<abbr title="Vellore Institute of Technology">VIT</abbr><br><br><br>
<abbr title="Master of Business Administration">MBA</abbr><br><br><br>
<abbr title="Leg Before Wicket">LBW</abbr><br><br><br>
<abbr title="World Health Organization">WHO</abbr><br><br><br>
<abbr title="Lose of Payment">LOP</abbr><br><br><br>
<abbr title="Business Process Outsourcing">BPO</abbr><br><br><br>
<abbr title="Strength Weakness Opportunity
Threat">SWOT</abbr><br><br><br>
<abbr title="National Aeronautics and Space
Administration">NASA</abbr><br><br><br>
<abbr title="Joint Entrance Examination">JEE</abbr><br><br><br>
</body>
</html>
OUTPUT:
4) HTML IMAGE EXERCISES
a. Display five different images. Skip two lines between each image. Each image should
have a title.
Answer:
<!doctype html>
<html>
<head>
</head>
<body>
<h2>Laptop</h2><br>
<img src="1.jpeg" alt="Laptop" width="80px"
height="80px"><br><br><br>
<h2>Smartphone</h2><br>
<img src="2.jpeg" alt="Smartphone" width="80px"
<h2>Microchip</h2><br>
<img src="3.jpeg"alt="Microchip" width="80px"
<h2>IOT</h2><br>
<img src="4.jpeg" alt="IOT" width="80px" height="80px"><br><br><br>
<h2>Artificial Intelligence</h2><br>
<img src="5.jpeg" alt="Artificial Intelligence" width="80px"
</body>
</html>
OUTPUT:
b. Display an image that has a border of size 2, a width of 200, and a height of 200.
Answer:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Laptop</h1>
<img src="1.jpeg" alt="Laptop" width="200px" height="200px"
border="2px"><br><br><br>
</body>
</html>
OUTPUT:
c. Display the image towards the right corner of thewebpage
Answer:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Laptop</h1>
<img src="1.jpeg" alt="Laptop" width="200px" height="200px"
border="2px" align="right"><br><br><br>
</body>
</html>
OUTPUT:
5) HTML TABLES
Answer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exc 5</title>
<style media="screen"> th,td{border: 0.15rem; border-style: inset;}</style>
</head>
<body style="background-color: #f4f4f4;">
<table cellspacing="15" cellpadding="15" border="8">
<thead>
<tr>
<th colspan="4" align="center">Purchased
Equipments(June.2006)</th>
</tr>
<tr>
<th rowspan="2" align="center">Item Num#</th>
<th rowspan="2" align="center">Item Picture</th>
<th align="center">Item Description</th>
<th align="center">Price</th>
</tr>
<tr>
<th align="center">Shipping Handling, Installation,etc</th>
<th align="center">Expense</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2"><img src="IBM.jpg" alt="IBM Comp" width="100"
height="50"></td>
<td>IBM Clone Computer</td>
<td>$ 400.00</td>
<tr>
<td>Shipping Handling, Installation, etc.</td>
<td>$ 20.00</td>
</tr>
<tr>
<td rowspan="2">2.</td>
<td rowspan="2"><img src="RAM.jpg" alt="1GB RAM Module" width="100"
height="50"></td>
<td>1GB RAM Module for Computer</td>
<td>$ 50.00</td>
<tr>
<td>Shipping Handling, Installation, etc.</td>
<td>$ 14.00</td>
</tr>
<tr>
<th colspan="4" align="centre">Purchased Equipments (June, 2006)</th>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
6. HTML Forms
Design the following Form
Answer :
<!DOCTYPE html> <html lang="en" dir="ltr">
<head> <meta charset="utf-8">
<title>Exc 6</title> <style media="screen">
.title {
text-align: right;
}
form { border: 2; border-style: solid;
}
></style> </head>
<body>
<form style="margin: 4rem 36rem">
<table>
<thead>
<tr>
<th colspan="2" style="background-color: grey"> <h4 style="text-align:right; margin-
right:1rem"> The World of Fruit </h4>
</th></tr>
<tr>
<th colspan="2"> <h4 style="text-align: right; margin-right:2rem"> Fruit Survey </h4>
</th></tr>
</thead><tbody>
<tr> <td class="title"><label for="name">Name </label></td>
<td><input type="text" id="name" required></input></td></tr>
<tr></tr>
<tr>
<td class="title"><label for="address">Address </label></td> <td><input
type="text" id="address"></input></td></tr>
<tr></tr>
<tr>
<td class="title"> <label for="email">Email </label></td>
<td><input type="email" id="email"></input></td></tr>
<tr></tr>
<tr>
<td class="title"> <label for="gago">How many pieces of fruit did you eat
today</label></td> <td><input type="radio" id="number" name="number" value="0"
checked>0</input><br>
<input type="radio" name="one" value="1">1</input><br>
<input type="radio" name="two" value="2">2</input><br>
<input type="radio" name="three" value="mt2">More than 2</input></td>
</tr>
<tr></tr>
<tr>
<td class="title"><label for="Fav-fruit">My favorite fruit</label></td>
<td> <select>
<option value="banana">Apple</option>
<option value="apple">Banana</option>
<option value="mango">Plum</option> <option
value="watermelon">Pomegranate</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<tr></tr>
</tr>
<tr> <td class="title">
<label for="brochure">would you like a brochure?</label> </td>
<td>
<input type="checkbox" name="brochure">
</td></tr>
<tr></tr>
<tr>
<td></td> <td> <input type="submit" value="submit"></input> </td></tr>
</tbody>
</table>
</form>
</body>
</html>
OUTPUT:
7) HTML Frames.
Design the following using frames
Answer:
Top Frame:
<html>
<head>
<title>TOP FRAME</title>
</head>
<body topmargin="40px" style="background-size:500px 500px"
background="https://media.istockphoto.com/photos/question-mark-background-picture-
id1150102773">
<p style="color:AF0000;font-size:50px" align="center"><b>AMAZON BOOK
WORLD</b></p>
</body>
</html>
Left Frame:
<html>
<head>
<title>leftframe</title>
</head>
<body style="background-size:1920px 1080px"
background="https://th.bing.com/th/id/OIP.TtkHrravuw40yhPxS-
92cwHaEo?pid=ImgDet&rs=1">
<ul style="color: blue;">
<li style="font-size:30px"><a style="color:red" href="frameslogin.html"
target="right" ><b>USER LOGIN</b></a></li>
<li style="font-size:30px"><a style="color:red" href="rightframe.html"
target="right"><b>USER profile</b></a></li>
<li style="font-size:30px"><a style="color:red" href="" target="right"
><b>BOOKS CATALOG</b></a></li>
<li style="font-size:30px"><a style="color:red" href=""
target="right"><b>SHOPPING CART</b></a></li>
<li style="font-size:30px"><a style="color:red" href="" target="right"
><b>ORDER CONFORMATION</b></a></li>
<li style="font-size:30px"><a style="color:red" href=""
target="right"><b>PAYMENT</b></a></li>
</ul>
</body>
</html>
Right Frame:
<html>
<head>
<h1 align="center" style="color:rgb(159, 43, 226)">USER'S PROFILE</h1>
<hr width=100%></hr>
</head>
<body bgcolor="#87CEEB">
<table align="center" border="4" style="border-color:white" bgcolor="#939799"
cellpadding="10">
<tr>
<th>S.no</th>
<th>User name</th>
<th>DOB</th>
<th>Address</th>
<th>Occupation</th>
</tr>
<tr>
<td>1</td>
<td>Ramu P</td>
<td>12th Jan 1980</td>
<td>H No.22/12/1,M G Road Vij</td>
<td>Engineer</td>
</tr>
<tr>
<td>2</td>
<td>Mohan R</td>
<td>23rd May 1982</td>
<td>H.No 22/12/11,patel Road,Hyd</td>
<td>Driver</td>
</tr>
<tr>
<td>3</td>
<td>Pavani R</td>
<td>H.No 12/25,Ameerpet,Hyd</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>4</td>
<td>Seshu D</td>
<td>07 March 1984</td>
<td>H.No 1/99, S R Nagar,Hyd</td>
<td>DBA</td>
</tr>
<tr>
<td>5</td>
<td>Surendra</td>
<td>H No 22/12/11,Bala Nagar,Hyd</td>
<td>Professor</td>
</tr>
</table>
</body>
<footer>
<p align="center" style="font-size:30px"><a href=""
target="right"><b>Home</b></a></p>
</footer>
</html>
Login Page:
<html>
<head>
<title>
login page
</title>
</head>
<body topmargin="40px" style="background-size:cover;background-repeat: no-
repeat;"background="https://media.istockphoto.com/photos/small-paper-shopping-bags-
with-shopping-cart-on-blue-background-picture-id1073123850">
<h1 align="center">LOGIN</h1>
<table bgcolor="#F4C2C2" border="2" rules=NONE frame=box cellpadding="20"
align="center">
<tr>
<th style="font-size:20px">USERNAME<sup>*</sup></th>
<td><input type="text" size="20"></td>
</tr>
<tr>
<th style="font-size:20px">PASSWORD<sup>*</sup></th>
<td><input type="text" size="20"></td>
</tr>
<tr>
<th colspan="2" align="center"><input style="font-size:20px;background-
color: aqua;" type="submit" value="Submit"></th>
</tr>
<tr>
<th>Don't have a account? <a href="" target="right">Register here</a></th>
</tr>
</table>
</body>
</html>
OUTPUT:
8) Create an external style sheet named as “external.css” and provide some styles for h2,
p and body tags. Create an html file named as “welcome.html” and link the external style
sheet. Include internal style sheet for body tags. Include a <p> tags with inline style sheet
Answer:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"
href="ex8.css"/>
<style type="text/css"> body{background-color:grey; } </style> </head>

<body>
<img src="tree.jpg" width="200" height="200" align="left"/>
<div style="background-color: white;">
<h2 style="text-align: left;">Hello World!</h2>
<p style="color:black;text-align: left;">This example contains some advanced CSS

methods you may not have learned yet. But, we will explain these methods in a later
chapter in the tutorial.</p>
</div>
<p style="color:black; border-width:5px; border-style: dotted solid
dashed solid; border-color: black;margin-left:340px; text-align:center;">This is some text

in a paragraph.</p>
</body>
</html>
CSS code:
body{
text-align:right; color: black;
background-color:#73cba3;
{}
h2{
color:black;
text-align:left;
padding-left:5px;
P
{
color: #556677;
text-align:justify;
padding-left:10px;
margin-left:30px;
}
div{
background-color: white;
}
OUTPUT:
9) Write the CSS code necessary to recreate the following appearance on-screen, exactly
as shown.
• The menu items (Summary to Trailers and Videos) are white text on a black
background. There is 20px space between the words and the right and left sides of their
black boxes. There is 3px of blank space to the right of each.
• The score information should be 50% wide.
• The movie rating has a green background and white text. The number is in 30pt font.
There is 20px space between the number and the edges of the green background.
There is 5px blank space around the green background.• The background color of the
page is gray but the background color of the area containing everything is white. The
white area is 80% wide and centered. There is 20px of space between the edge of the
white background and everything inside it.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Exercise 9</title>
</head>
<body bgcolor="grey" style="margin-left:60px">
<table bgcolor="white" border=2px>
<tr>
<td>
<h1>WALL-E</h1>
<h4>Walt Disney Studios Motion Pictures | Release date: Jun
27,2008</h4>
<div class="box">Summary<i style="color: yellow; font-size:

10px" class="fas fa-book-reader"></i></i></div>
<div class="box">Critic Reviews</div>
<div class="box">User Reviews</div>
<div class="box">Details and Credits</div>
<div class="box">Trailers and Videos</div><br>
<hr>
<img src="wall.jpg" width="140px" height="300px">
<div class="box1" style="font-family:Arial, Helvetica, sans-
serif"><hr><hr>94</div>
<h2>Metascore</h2>
<br>
<hr class="large">
<h3>Universal acclaim<br>based on 39 Critics</h3>
<ul>
<li><h3>
Starring: Ben Burtt, Elissa Knight, Jeff Garlin
</h3></li>
<li><h3>
Summary: After hundreds of lonely years of doing
what he<br>was built for, Wall E discovers a new
purpose in life when<br>he meets a sleek search robot
named EVE. [Walt Disney<br>Pictures]
</h3></li>
</ul>
</td>
</tr>
</table>
</body>
<style>
img
{
float: left;
}
.box
{
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
width: 150px;
text-align: center;
float: left;
font-size: 16px;
left: 50%;
margin-right: 3px;
}
.box1
{
background-color: green;
color: white;
width: 120px;
height: 200px;
font-size: 30pt;
text-align:center;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
h1
{
text-align: center;
font-weight: bold;
}
h2
{
float:left;
}
h3
{
font-weight: 100;
}
h4
{
font-weight: 300;
font-size: 15pt;
}
hr
{
margin-top: 15px;
border: 0;
}
hr.large
{
margin-top:140px;
border: 0;
}
ul
{
float: left;
margin-left: 120px;
margin-top: 0px;
}
ul li
{
margin: -15px;
margin-top: 0px;
}
</style>
</html>
OUTPUT:
10. Write the HTML and CSS box model to recreate the following appearance. No
manual line breaks have been inserted
Answer:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="E:\FALL SEM 21-22\Web Tech\LAB
ASSIGNMENT\ex10_css.css">
<title>Broadband price table</title>
</head>
<body>
<div class ="container">
<img src="C:\Users\Welcome\Downloads\donald-giannatti-4TpL_oVkUcQ-
unsplash.jpg" alt="antenna">
<h1>BROAD BAND PRICE TABLE</h1>
<div class="boxes">
<div class="standard">
<table>
<tr><th id="head1">Standard</th></tr>
<tr>
<td><ul>
<li><img style="height: 20px ; width: 20px;"
src="C:\Users\Welcome\Downloads\down-arrow.png">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspUnlimited Download</li>
src="C:\Users\Welcome\Downloads\calendar.png">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp20GB Storage</li>
src="C:\Users\Welcome\Downloads\dashboard.png">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspUnlimited Speed</li>
src="C:\Users\Welcome\Downloads\database.png">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp30 Domains</li>
</ul></td>
</tr>
<tr><td id="aaa" style="padding: 10px 20px 30px 20px; margin:
0px;"><button id="button1" type="button">
GET STARTED</button></td></tr>
</table>
</div>
<div class="enhanced">
<table>
<tr><th id="head2">Enhanced</th></tr>
<tr>
<td><ul>
</ul></td>
</tr>
<tr><td id="bbb" style="padding: 10px 20px 30px 20px;
margin: 0px;"><button id="button2" type="button">
</table>
</div>
<div class="unlimited">
<table>
<tr><th id="head3">Unlimited</th></tr>
<tr>
<td><ul>
</ul></td>
</tr>
<tr><td id="ccc" style="padding: 10px 20px 30px 20px; margin:
0px;"><button id="button3" type="button" >
</table>
</div>
</div>
<p class="copyright">&#169 2018 Broad Band Price Table . All rights reserved
| Design by <span style="color: green;"> W3layouts.
</span></p>
</div>
</body>
</html>
CSS CODE
*
{
margin: 0px;
padding: 0px;
}
img
{
width: 100%;
max-height: 100%;
position: absolute;
}
.standard, .unlimited, .enhanced
{
position: relative;
float: left;
padding: 5px;
width: 31.33%;
}
h1
{
text-align: center;
color: white;
position: relative;
padding: 70px 70px 50px;
font-family: "Arial";
}
table
{
border: 1px solid #81929c;
border-collapse: collapse;
width: 100%;
}
ul
{
width: 100%;
list-style: none;
padding: 30px 20px;
}
#head1, #button1
{
margin: 0px;
background-color: #f85a3f;
}
#head2, #button2
{
margin: 0px;
background-color: #c93186;
}
#head3, #button3
{
margin: 0px;
background-color: #30c29d;
}
tr
{
width: 100%;
}
button
{
width: 100%;
border: none;
font-size: 15px;
color: white;
font-weight: bold;
padding: 15px 10px 15px 10px;
}
#aaa, #bbb, #ccc

{
width: 100%;
}
.boxes
{
padding: 10px 140px;
}
li
{
width: 100%;
padding: 10px 40px;
position: relative;
color: #f6fcf8;
}
.copyright
{
position: relative;
clear: left;
color: white;
}
#head1, #head2, #head3
{
color: white;
padding: 30px 10px;
font-size: 25px;
font-weight: lighter;
}
OUTPUT:

20BIT0426 Webtech DA

Uploaded by

Copyright:

Available Formats

20BIT0426 Webtech DA

Uploaded by

Document Information

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

20BIT0426 Webtech DA

Uploaded by

Copyright:

Available Formats

HYPER TEXT MARKUP LANGUAGE

b. Create a webpage that prints the numbers 1 - 10 to the screen.

c. Create a webpage and set its title to "This is a webpage"

a. Print your name in green

d. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font

k. Display a c code as it is in the page

l. Set the background color of the page as yellow

o. Apply marquee for your name

p. Display a paragraph contents in a single line.

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

f. Print a definition list with 5 items

<style type="text/css"> body{background-color:grey; } </style> </head>

<img src="tree.jpg" width="200" height="200" align="left"/>

<div style="background-color: white;">

<h2 style="text-align: left;">Hello World!</h2>

<p style="color:black;text-align: left;">This example contains some advanced CSS

<p style="color:black; border-width:5px; border-style: dotted solid

dashed solid; border-color: black;margin-left:340px; text-align:center;">This is some text

text-align:right; color: black;

<div class="box">Summary<i style="color: yellow; font-size:

#aaa, #bbb, #ccc

You might also like