Scribd
Upload
82 views

Web Technologylabda1

This document contains instructions for completing an assignment on HTML and CSS. It includes tasks to create basic webpages with text and numbers, set page titles, include meta tags to refresh and expire pages, and format text with different fonts, colors, sizes and effects. It also covers creating ordered and unordered lists, displaying images and code snippets, and other HTML formatting techniques. The assignment consists of multiple exercises to demonstrate proficiency with HTML tags and attributes.

Uploaded by

aditya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
82 views

Web Technologylabda1

This document contains instructions for completing an assignment on HTML and CSS. It includes tasks to create basic webpages with text and numbers, set page titles, include meta tags to refresh and expire pages, and format text with different fonts, colors, sizes and effects. It also covers creating ordered and unordered lists, displaying images and code snippets, and other HTML formatting techniques. The assignment consists of multiple exercises to demonstrate proficiency with HTML tags and attributes.

Uploaded by

aditya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

WEB TECHNOLOGY

LAB ASSIGNMENT 1
HTML AND
CSS
By
Aditya mandal
18BIT0012
Slot:A2
1.)
a. Create a webpage that prints your name to the screen.
SOLUTION:
<html>
<body>
<!-- print name to the screen -->
ADITYA MANDAL
</body>
</html>
b. Create a webpage that prints the numbers 1 - 10 to the screen.
<html>
<body>
<!-- print the numbers 1 to 10 to the screen -->
1 2 3 4 5 6 7 8 9 10
</body>
</html>
c. Create a webpage and set its title to "This is a webpage".
SOLUTION:
<html>
<head>
<!--set the title of the page-->
<title>This is a webpage</title>
</head>
<body>
<p class="note">
The title tag goes in the head section of an HTML document.
</p>
</body>
</html>
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.
SOLUTION:
<html>
<head>
<!--set the title of the page to the current date-->
<title>January 9th, 2009</title>
</head>
<body>
<!--print a message-->
When was this webpage created?
Check page's title for the answer.
</body>
</html>
e. Create a webpage that prints any text of your choice to the screen; do not include a
head section in the code.
<html>
<head>
<!--set the title of the page to the current date-->
<title>January 17th, 2020</title>
</head>
<body>
<!--print a message-->
When was this webpage created?
Check page's title for the answer.
</body>
</html>
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
SOLUTION:

<html>
<head>
<title>Ex if</title>
<meta http-equiv="refresh" content="5">
<meta name="expires" content="thu, 06dec 2018">
</head>
<body>
<h1>Hello</h1>
</body>
</html>
2) HTMLTEXT EXERCISES
a. Print your name in green
SOLUTION:
<html>
<body>
<font color="green">ADITYA MANDAL</font>
</body>
</html>
b. Print the numbers 1 - 10, each number being a different color.
SOLUTION:
<html>
<body>
<font color="green">1</font>
<font color="blue">2</font>
<font color="gray">3</font>
<font color="#008080">4</font>
<font color="#0008B">5</font>
<font color="brown">6</font>
<font color="#dcdcdc">7</font>
<font color="#800000">8</font>
<font color="purple">9</font>
<font color="#688e23">10</font>
</body>
</html>
c. Prints your name in a Tahoma font.
SOLUTION:
<html>
<body>
<font face="Tahoma">John</font>
</body>
</html>
d. Display a part of a word with bold underline.
SOLUTION:
<html>
<body>
<p><B><U>aditya mandal</B></U> is great</p>
</body>
</html>

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


SOLUTION:
<html>
<body>
<p>
<font face="Courier New">
HTML stands for Hyper Text Markup Language.
</font>

<font face="Times New Roman">It is the core


language of the world wide web and is used to define
the structure and layout of web documents by using
various tags and attributes.
</font>

<font face="Helvetica">
Although a fundamental language of the web, HTML is a
static language - content created with it does not change.
</font>

<font face="Georgia">
HTML is used to specify the way webpages look, not how they
function.
</font>
</p>
</body>
</html>

f. 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.
<html>
<body>
<p>
One particular book which is recommended reading is <u>The ALCHEMIST</u> by
<u>PAULO COELHO</u>. This book is about a priest who begins reseaching his
priorities in life when a bad incident occurs in his life. Consequently, he becomes
acquainted with the inner mind, and realizes the harsh existence of the homeless, and
vows to improve. <u>The ALCHEMIST</u> is a <b><i>great</i></b>
book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by
<u>PAULO COELHO</u> include <u>THE BEAUTY</u>, <u>The AMEROCAN
REVOLT</U>, and <u>The Client</u>.
</p>
</body>
</html>
g. Print your name to the screen with every letter being a different heading size.
<html>
<body>
<h4>J</h4>
<h3>A</h3>
<h2>C</h2>
<h1>K</h1>
</body>
</html
h. Write a comment line on your code and make sure it is not displayed in the page
<html>
<body>
<!—THIS IS A COMMENT LINE-->
</body>
</html>

i. Print a 2+b2=2ab
SOLUTION:
<html>
<head>
<title>Equation</title>
</head>
<body>
<p align="center" ><font face="tahoma"
size="30px">a<sup>2</sup>+b<sup>2</sup>=2ab</font></p>
</body>
</html>

j. Print H2O
SOLUTION:
<html>
<head>
<title>Equation</title>
</head>
<body>
<p align="center" ><font face="tahoma" size="30px">H<sub>2</sub>O</font></p>
</body>
</html>
k. Display a c code as it is in the page
SOLUTION:
<html>
<head>
<title>backgroung yellow</title>
</head>
<body background="image.png">
<h1>C code</h1>
<p><font face="times new roman"> #include (stdio.h><br>
int main()<br>
{<br>
int first, second, add, subtract, multiply;<br>
float divide;<br>
printf("Enter two integers\n");<br>
scanf("%d%d", &first, &second);<br>
add = first + second;<br>
subtract = first - second;<br>
multiply = first * second;<br>
divide = first / (float)second;<br>
printf("Sum = %d\n", add);<br>
printf("Difference = %d\n", subtract);<br>
printf("Multiplication = %d\n", multiply);<br>
printf("Division = %.2f\n", divide);<br>
return 0;<br>
}<br>
</font></p>
</body>
</html>

l. Set the background color of the page as yellow


SOLUTION:

<html>
<head>
<title>C code</title>
</head>
<body bgcolor="yellow">
<h1>C code</h1>
<p><font face="times new roman"> #include (stdio.h><br>
int main()<br>
{<br>
int first, second, add, subtract, multiply;<br>
float divide;<br>
printf("Enter two integers\n");<br>
scanf("%d%d", &first, &second);<br>
add = first + second;<br>
subtract = first - second;<br>
multiply = first * second;<br>
divide = first / (float)second;<br>
printf("Sum = %d\n", add);<br>
printf("Difference = %d\n", subtract);<br>
printf("Multiplication = %d\n", multiply);<br>
printf("Division = %.2f\n", divide);<br>
return 0;<br>
}<br>
</font></p>
</body>
</html>

m. Set an image as background of the page


SOLUTION:

<html>
<head>
<title>This Is a Webpage</title>
</head>
<body background="image.png">
<H1>Welcome to HTML</H1>
</body>
</html>

n. Set the font size as 10. Print it. Again try to decrease the font size. Check whether the
font size is reduced.
SOLUTION:

o. Apply marquee for your name


SOLUTION:

<html>
<head>
<title>Marquee</title>
</head>
<body background="image.png">
<h1><marquee>ABHIJEET GIRI</marquee></h1>
</body>
</html>
p. Display a paragraph contents in a single line.
SOLUTION:

<html>
<head>
<title>Paragraph</title>
</head>
<body background="image.png">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.
</body>
</html>

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.
SOLUTION:

<html>
<head>
<title>Paragraph</title>
</head>
<body background="image.png">
<h1>Powers</h1>
<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>
7<sup>2 </sup>= 49<br>
8<sup>2 </sup>= 64<br>
9<sup>2 </sup>= 81<br>
10<sup>2 </sup>= 100<br>
11<sup>2 </sup>= 121<br>
12<sup>2 </sup>= 144<br>
13<sup>2 </sup>= 169<br>
14<sup>2 </sup>= 196<br>
15<sup>2 </sup>= 225<br>
16<sup>2 </sup>= 256<br>
17<sup>2 </sup>= 289<br>
18<sup>2 </sup>= 324<br>
19<sup>2 </sup>= 361<br>
20<sup>2 </sup>= 400<br>
</p>
</body>
</html>

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.
SOLUTION:

<html>
<head>
<title>Paragraph</title>
</head>
<body background="image.png">
<h1>ramesh<sub>1</sub><br>
raju<sub>2</sub><br>
Rishab<sub>7</sub><br>
Rupin<sub>9</sub><br>
Brian<sub>4</sub><br>
Rohan<sub>8</sub><br>
Sohan<sub>10</sub><br>
Paul<sub>6</sub><br>
Nitish<sub>5</sub><br>
Avinay<sub>3</sub><br>
</h1>
<h1>Ordered Way<br>
<ol>
<li>Ajay<sub>1</sub></li><br>
<li>Anuj<sub>2</sub></li><br>
<li>Avinay<sub>3</sub></li><br>
<li>Brian<sub>4</sub></li><br>
<li>Nitish<sub>5</sub></li><br>
<li>Paul<sub>6</sub></li><br>
<li>Rakesh<sub>7</sub></li><br>
<li>Rohan<sub>8</sub></li><br>
<li>Rupankar<sub>9</sub></li><br>
<li>Sohan<sub>10</sub></li><br>
</ol>
</h1>
</body>
</html>

c. Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list
SOLUTION:

<html>
<head>
<title>Paragraph</title>
</head>
<body background="image.png">
<h1><u>Unordered List</u>
<ol>
<li>CSS</li>
<li>AJAX</li>
</ol>
</h1>
<h1><u>Ordered Way</u><br>
<ul type="square">
<li>PHP</li>
<li>SQL</li>
</ol>
</h1>
</body>
</html>

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


SOLUTION:

<html>
<head>
<title>Paragraph</title>
</head>
<body background="image.png">
<h1><u>Unordered List</u>
<ol type="i" start="7">
<li>CSS</li>
<li>AJAX</li>
<li>PHP</li>
<li>SQL</li>
</ol>
</h1>
</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.
SOLUTION:

<html>
<head>
<title>Popcorn</title>
</head>
<body background="image.png">
<h1 align="center">MALLS</h1>
<hr width="100%">
<p>Popcorn (popped corn, popcorns or pop-corn) is a variety of corn kernel
which expands and puffs up when heated; the same names are also used to refer
to the foodstuff produced by the expansion.

A popcorn kernel's strong hull contains the seed's hard, starchy shell endosperm
with 14–20% moisture, which turns to steam as the kernel is heated. Pressure
from the steam continues to build until the hull ruptures, allowing the kernel to
forcefully expand from 20 to 50 times its original size and, finally, cool.[1]

Some strains of corn (taxonomized as Zea mays) are cultivated specifically as


popping corns. The Zea mays variety everta, a special kind of flint corn, is the
most common of these.

The six major types of corn are dent corn, flint corn, pod corn, popcorn, flour
corn, and sweet corn.[2]
</p>
</body>
</html>

f. Print a definition list with 5 items


SOLUTION:

<html>
<head>
<title>Definition</title>
</head>
<body background="image.png">
<h1 align="center">Definition</h1>
<dl>
<dt>black chai</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dt>PHp</dt>
<dd>Its a scripting language</dd>
<dt>C++</dt>
<dd>Programming Language</dd>
<dt>JAVA</dt>
<dd>Programming language</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)
SOLUTION:

<html>
<head>
<title>Envelope Format</title>
</head>
<body background="image.png">
<dl>
<dd>Vellore Institute Of Technology<br>
Vellore,<br>
Tamil nadu-632014</dd>
</dl>
<p align="center">Prafulla Sarkar Street,<br> Bowbazar, Kolkata, West Bengal
700072</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
SOLUTION:

<html>
<head>
<title>Abb & acr</title>
</head>
<body background="image.png">
<h1 align="center"><u>Abbreviation and Acronym</u></h1>
<dl>
<dt>R.S.V.P.</dt>
<dd>"Répondez s'il vous plaît", a French phrase that translates toa "please
respond" or
literally "respond, if you please". It is used on invitation cards. When you
receive an RSVP
you must reply to the invitation saying whether you accept or decline the
invitation.</dd>
<dt>ESL / EFL</dt>
<dd>Both of these abbreviations have the same meaning and are very common
to see for
learners of English.
ESL means English as a second language. - It is mostly used in American
English.
EFL means English as a foreign language. - It is mostly used in British English.
Neither of them needs use a full-stop in between the letters -it is EFL, not
E.F.L</dd>
<dt>P.M. / A.M.</dt>
<dd>Both of these are used when telling the time:
P.M. - Also written as p.m. and pm, it stands for "post meridiem" (Latin for
"after noon"
in the 12-hour clock).
A.M. - Also written as a.m. and am, it stands for "ante meridiem" ("before
noon").</dd>
<dt>AD / BC</dt>
<dd>BC (or B.C) stands for "before Christ".
AD (or A.D) stands for "Anno Domini" (Latin for "In the year of Our
Lord").</dd>
<dt>ASAP</dt>
<dd>ASAP (or A.S.A.P.) stands for "as soon as possible". We you use this
abbreviation
when we want someone to do something quickly: "Send me the report
ASAP."</dd>
<dt>DIY</dt>
<dd>DIY (or D.I.Y) stands for "do it yourself". The term used by various
communities
that focus on people (called 'do-it-yourselfers' or 'DIYers') creating or repairing
things for
themselves without the help of paid professionals.</dd>
<dt>B.Y.O.B.</dt>
<dd>B.Y.O.B. or (BYOB) often seen on invites to parties. It stands for "bring
your own
bottle / booze"; you are invited to a party, but you should bring your own
drinks.</dd>
<dt>ETA</dt>
<dd>ETA (not E.T.A) stands for "estimated time of arrival". It is the time when
a form
of transport (like a train or plane) is expected to arrive in a place. The opposite
is ETD
("estimated time of departure").</dd>
<dt>P.S.</dt>
<dd>P.S (or PS) stand for "post script" and is used at the end of written letters
to add
extra information.</dd>
<dt>I.e. / E.g.</dt>
<dd>These two abbreviations are easily confused and both used when
writing:<br>
I.e. (or i.e. / I.E.) stands for "id est" (Latin for "That is (to say)" or "in other
words").
E.g. (or e.g. / E.G.) stands for "exempli gratia" (Latin for "for example").</dd>
</dl>
</body>
</html>

4) HTML IMAGE EXERCISES


a. Display five different images. Skip two lines between each image. Each image should
have a title.
SOLUTION:

<html>
<head>
<title>image</title>
</head>
<body>
<img src="1366x768 GAMING desktop PC and Mac wallpaper.jpg"
alt="image1"
title="image1" width="400px"><br><br>
<img src="anthem-1366x768-2019-games-4k-14632.jpg" alt="image2"
title="image2" width="400px"><br><br>
<img src="battlefield-v-1366x768-gamescom-2018-4k-16236.jpg"
alt="iamge3"
title="image3" width="400px"><br><br>
<img src="battlefield-v-1366x768-hd-16153.jpg" alt="image4" title="image4"
width="400px"><br><br>
<img src="GaminGeneration Assassins creed 1366x768 HD Wallpapers.jpg"
alt="image5" title="image5" width="400px">
</body>
</html>

b. Display an image that has a border ofsize 2, a width of 200, and a height of 200.
SOLUTION:

<html>
<head>
<title>image</title>
</head>
<body>
<img src="1366x768 GAMING desktop PC and Mac wallpaper.jpg"
alt="image1"
border="2" title="image1" width="200px" height="200px"><br><br>
</body>

c. Display the image towards the right corner of the web page
SOLUTION:

<html>
<head>
<title>image</title>
</head>
<body>
<img src="1366x768 GAMING desktop PC and Mac wallpaper.jpg"
alt="image1"
border="2" align="right" title="image1" width="200px"
height="200px"><br><br>
</body>
</html>

5) HTML TABLES

Solution:

<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2" align="center">
<tr>
<th colspan="4">Purchased Equipments (June,2006)</th>
</tr>
<tr>
<th rowspan="2">Item Num#</th>
<th rowspan="2">Item Picture</th>
<th>Item Description</th>
<th>Price</th>
</tr>
<tr>
<td>Shipping Handling,Installation,etc </td>
<td>Expense</td>
</tr>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2"><img src="pc.png" height="70px"
width="70px"></td>
<td>IBM Clone Computer</td>
<td>$400.00</td>
</tr>
<tr>
<td>Shipping handling,Installation,etc</td>
<td>$20.00</td>
</tr>
<tr>
<td rowspan="2">2.</td>
<td rowspan="2"><img src="reg.jpg" height="70px"
width="70px"></td>
<td>1GB RAM Module for Computer</td>
<td>$50.00</td>
</tr>
<tr>
<td>Shipping handling,Installation,etc</td>
<td>$14.00</td>
</tr>
<tr>
<th colspan="4">Purchased Equipments(June,2006)</th>
</tr>
</table>
</body>
</html>
6) HTML Forms Design the following Form

Solution:

<html>
<head>
<title>Form</title>
<style type="text/css">
form{
border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<form method="POST" action="abc.php">
<table border="0" align="center">
<td bgcolor="#707070" colspan="2"><h1 align="right">The World of
Fruit</h1></td>
<tr></tr>
<td colspan="2"><p align="right"> Fruit Survey</p></td>
<tr></tr>
<td><p align="right">Name</p> &nbsp
<td><input type="text" value="name" label="Enter your name"><br><br><td>
</td><tr></tr>
<td><p align="right">Address</p> &nbsp
<td><input type="text" value="enter your address"><br><br></td>
<tr></tr>
<tr>
<td><p align="right">Email</p>&nbsp
<td><input type="email" value="enter your email">
<br></td></td></tr>
<tr></tr>
<tr><td>How many pieces of fruit do you eat per day?
<td><input type="radio" value="0" name="first">0<br>
<br>
<input type="radio" value="1" name="first">1<br>
<br>
<input type="radio" value="2" name="first">2<br>
<br>
<input type="radio" name="first" value="more">more than 2<br>
<br></td></td></tr>
<tr><td><p align="right">My favourite fruit</p>
<td><select multiple="yes" size="3">
<option>apple</option>
<option>plum</option>
<option>Mango</option>
<option>Pomegranate</option>
</select><td><br>
<br></td></tr>
<tr><td>Would you like a Brochure?
<td><input type="checkbox" name="bro"></td>
<br></tr></td>
<tr></tr>
<td align="center"><input type="submit" name="submit"
value="submit"></td>
</form>
</table>
</body>
7) HTML Frames. Design the following using frames.

Solution:

<html>
<head>
<title>Frame</title>
</head>
<frameset rows="25%,75%">
<frame src="frame.htm">
<frameset cols="25%,75%">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
</frameset>
</html>
Frame.htm
<html>
<head>
<title>Frame</title>
<style type="text/css">
body{
background-image: url("help.jpg");
background-repeat: repeat;
background-size: 35px;
}
</style>
</head>
<body>
<h1 align="center"><font face="ariel" color="red" size="80px">AMAZON
BOOK
WORLD</h1>
</body>
</html>
Frame1.htm
<html>
<head>
<title>Frame</title>
<style type="text/css">
body{
background-image: url("pic1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<ul><font color="red" size="6">
<li>USER LOGIN</li>
<li>USER profile</li>
<li>BOOKS CATALOG</li>
<li>SHOPPING CART</li>
<li>ORDER CONFORMATION</li>
<li>PAYMENT</li></font>
</ul>
</body>
</html>
Frame2.htm
<html>
<head>
<title>Table</title>
</head>
<body bgcolor="#80ffff">
<h1 align="center"><font color="violet">USER'S PROFILE</font></h1>
<table border="2" bgcolor="#e4e4e7" align="center">
<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/1,Patel Road,Hyd</td>
<td>Driver</td>
</tr>
<tr>
<td>3</td>
<td>Pavani.V</td>
<td>27th July 1983</td>
<td>H.No:12/25,Ameerpet,Hyd</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>4</td>
<td>Seshu. D.</td>
<td>07th 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>29th May 1982</td>
<td>H.No 22/12/11,Bala Nagar,Hyd</td>
<td>professor</td>
</tr>
</table>
<p align="center"><font color="#800080"><a
href=""><u><b>Home</u></b></a></font></p>
</body>
</html>
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 tags with inline style
sheet.

Solution:

<html>
<head>
<title>
working with css
</title>
<LINK rel="stylesheet" type="text/css" href="external.css"/>
<style type="text/css">
body{
background-image:url(cs1.png);background-repeat:norepeat;
background-position:10px 10px,10px,160px;
background-size:auto;
background-color:gray;
}
div{
border-width:2;border-style:solid;border-color:white;
margin-left:14%;
margin-right:14%;
width:50%;
height:29%;
background-color:white;
}
p{
font-size:30px;
padding-left:5%;
}
</style>
</head>
<body>
<div>
<p>
<h2 align="left"> Hello World! </h2>
This example contains some advance css methods you may
have not
learned yet. But we will explain this methods in a later chapter
in the
tutorials.
</p>
</div>
<p style="border-width:3;border-style: dotted;border-color:
black;margin-left:14%;width:45%;height:4%;font-
size:20px;">This
is some text in paragraph</p>
</body>
</html>
h2
{
color:black;
font-size:60px;
}
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.

Solution:
<body>
<div id="all">
<h1>WALL-E</h1>
<p>
Walt Disney Studios Motion Pictures
| Release date: Jun 27, 2008
</p>
<div id="menu">
<p>Summary</p>
<p>Critic Reviews</p>
<p>User Reviews</p>
<p>Details and Credits</p>
<p>Trailers and Videos</p>
</div>
<div id="pic">
<img src="walle.jpg" alt="walle" />
</div>
<div id="rating">94</div>
<div id="score">
<h2>Metascore</h2>
<p>
Universal acclaim <br />
based on 39 Critics
</p>
<ul>
<li>
Starring: Ben Burtt, Elissa
Knight, Jeff Garlin
</li>
<li>
Summary: After hundreds of
lonely years of doing what he
was built for, Wall-E
discovers a new purpose in
life when he meets a sleek
search robot named EVE. [Walt
Disney Pictures]
</li>
</ul>
</div>
</div>
</body>
10) Design the following web page using HTML5 and CSS:

Solution:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" />

<title>Zozor - Travel diaries</title>

</head>

<body>
<div id="main_wrapper">

<header>

<div id="main_title">

<img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />

<h1>Zozor</h1>

<h2>Travel diariese</h2>

</div>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Resume</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<div id="banner_image">

<div id="banner_description">

Reflections on my holiday in the United States...

<a href="#" class="red_button">See article <img src="images/small_arrow.png" alt=""


/></a>

</div>

</div>

<section>

<article>

<h1><img src="images/pin.png" alt="Travel category" class="ico_categorie" />I'm a great


traveller</h1>

<p>Lorem ipsum dolor sit amet...</p>

<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>


<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>

</article>

<aside>

<h1>About the author</h1>

<img src="images/arrow.png.png" alt="" id="arrow" />

<p id="zozor_picture"><img src="images/images/zozor.png" alt="Zozor Picture" /></p>

<p>Let me introduce myself: My name's Zozor. I was born on 23 November 2005.</p>

<p>A bit meager, is it not? This is why I've now decided to write my biography to let my
readers know who I really am.</p>

<p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png"


alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png"
alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>

</aside>

</section>

<footer>

<div id="tweet">

<h1>My last tweet</h1>

<p>Hee-haw!</p>

<p>12/05 23:12</p>

</div>

<div id="my_pictures">

<h1>My pictures</h1>

<p><img src="images/pic1.jpg" alt="Picture" /><img src="images/pic2.jpg" alt="Picture"


/><img src="images/pic3.jpg" alt="Picture" /><img src="images/pic4.jpg" alt="Picture" /></p>

</div>

<div id="my_friends">

<h1>My friends</h1>

<ul>

<li><a href="#">Pupi the rabbit</a></li>

<li><a href="#">Mr Baobab</a></li>

<li><a href="#">Kaiwaii</a></li>
<li><a href="#">Perceval.eu</a></li>

</ul>

<ul>

<li><a href="#">Ji</a></li>

<li><a href="#">Super cucumber</a></li>

<li><a href="#">Prince</a></li>

<li><a href="#">Mr Fan</a></li>

</ul>

</div>

</footer>

</div>

</body>

</html>

You might also like