Sie sind auf Seite 1von 68

LAB DA – 1

NAME : ABHISHEK KUMAR

REG. No. : 18BIT0161

COURSE CODE : ITE1002

FACULTY : DIVYA UDAYAN

SLOT : L27+L28
1) Introduction to HTML
a. Create a webpage that prints your name to the screen.

CODE :
<html>
<head>
<body>
abhishek kumar
</body>
</head>
</html>

OUTPUT :

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


screen.

CODE :
<html>
<head>
<body>
1<br> 2<br> 3 <br>4 <br>5 <br>6<br> 7<br> 8<br> 9<br>10
</body>
</head>
</html>

OUTPUT :
c. Create a webpage and set its title to "This is webpage".
CODE :
<html>
<head>
<title>This is a web page</title>
<body>
</body>
</head>
</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.

CODE :
<html>
<head>
<title>01-08-19</title>
<body>
When was this webpage created?
Check page's title for the answer.
</body>
</head>
</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.

CODE :

<html>
<body>
Web technologies is an amazing career option!!!
</body>
</html>

OUTPUT :
CODE :

<html>
<head>
<meta http-equiv="refresh" content="5">
<?php header("Expires: " . gmdate('D, d M Y H:i:s \G\M\T', time() - 3600)); ?>
<body>
The page will referesh
</body>
</head>
</html>
OUTPUT :
2) HTMLTEXT EXERCISES

a. Print your name in green


CODE :
<html>
<head>
</head
<body>
<font color="green">Abhishek kumar</font>
</body>
</html>

OUTPUT :
b. Print the numbers 1 - 10, each number being a different
colour.

CODE :

<html>
<head>
</head
<body>
<font color="0000ff">0</font>
<font color="0000ff">1</font>
<font color="0000ff">2</font>
<font color="0000ff">3</font>
<font color="0000ff">4</font>
<font color="0000ff">5</font>
<font color="0000ff">6</font>
<font color="0000ff">7</font>
<font color="000f0f">8</font>
<font color="0000ff">8</font>
<font color="0000ff">9</font>
<font color="0000ff">10</font>
</body>
</html>
OUTPUT :
c. Prints your name in a Tahoma font.

CODE :
<html>
<body>
<font face="Tahoma">Abhishek kumar </font>
</body>
</html>

OUTPUT :
d. Display a part of a word with bold underline.

CODE :
<html>
<body>
N<b><u>a</b></u>me
</body>
</html>

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

CODE :
<html>
<body>
<font face="canvas">ccccccccccccccccccccccccccccccc</font><br>
<font face="italic">ccccccccccccccccccccccccccccccc</font><br>
<font face="rows">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</font><br>
<font
face="armenian">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</font>
<br>
</body>
</html>

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

CODE :
<html>
<head>
<title>Review of the book</title>
<body>
The book named <b><u>The web technologies</b></u> is written by
<b><u>Robbin</b></u> this is a <i>legitimate</i> writing written
<i>marvellously</i>.
</body>
</head>
</html>

OUTPUT :
g. Print your name to the screen with every letter being a
different heading size.

CODE :
<html>
<body>
<h1>X</h1>
<h2>Y</h2>
<h3>Z</h3>
<h3>A</h3>
<h3>B</h3>
<h3>C</h3>
</body>
</html>

OUTPUT :
h. Write a comment line on your code and make sure it is
not displayed in the page.

CODE :
<html>
<body>
<!--<code>
ccccccccccccccccccssssssss<br>
gggggggggggggggggg<br>
yyyyyyyyyyyyyy
oooooooooooooooo
</code>--i>
</body>
</html>

OUTPUT :
CODE :

<html>
<body>
a<sup>2</sup>+b<sup>2</sup>=2ab
</body>
</html>

OUTPUT :
CODE :
<html>
<body>
H<sub>2</sub>O
</body>
</html>

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

CODE :
<html>
<body>
<code>
printf(“Hello,World!”);
</code>
</body>
</html>

OUTPUT :
l. Set the background color of the page as yellow

CODE :
<html>
<body bgcolor="yellow">
</body>
</html>

OUTPUT :
m. Set an image as background of the page

CODE :
<html>
<body background="tiger.jpg">
</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.

CODE :
<html>
<body>
<font size=10 >hi<font> <br>
<big>hi</big>
</body>
</html>

OUTPUT :
o. Apply marquee for your name

CODE :
<html>
<body>
<marquee direction='down'>Abhishek kumar</marquee>
</body>
</html>

OUTPUT :
p. Display a paragraph contents in a single line.

CODE :
<html>
<head>
<title></title>
</head>
<body>
<p>
this is a simple paragraph that is meant to be nice and easy to type which is why
there will be mommas no periods or any capital letters so i guess this means that
it cannot really be considered a paragraph but just a series of run on sentences
this should help you get faster at typing as im trying not to use too many
difficult words in it although i think that i might start making it hard by
including some more difficult letters I'm typing pretty quickly so forgive me for
any mistakes i think that i will not just tell you a story about the time i went to
the zoo and found a monkey and a fox playing together they
</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.

CODE :
<html>
<body>
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
</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>
<body>
<h1>Unalphabetized list</h1>

Bill<sub>3</sub>
<br />
Roger<sub>5</sub>
<br />
Sandra<sub>6</sub>
<br />
Stacy<sub>7</sub>
<br />
William<sub>10</sub>
<br />
Thomas<sub>8</sub>
<br />
Wendy<sub>9</sub>
<br />
Jane<sub>4</sub>
<br />
Andy<sub>1</sub>
<br />
Anna<sub>2</sub>

<h1>Alphabetized list</h1>

Andy
<br />
Annamon
<br />
gill
<br />
man
<br />
rohan
<br />
Sandy
<br />
lucy
<br />
billy
<br />
Wendy
<br />
William
</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>
<body>
<b>Hardware devices</b>

<ol type="I">
<li>CD-ROM drive</li>
<li>DVD drive</li>
<li>Hard disk</li>
<li>Modem</li>
</ol>

<b>Web languages</b>

<ul type="square">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
</ul>
</body>
</html>
OUTPUT :
d. Print a list which starts with 7 with the type i.

CODE :
<html>
<body>
<b> IT subjects </b>
<ol type=”I” start=7>
<li> data structure and algorithm</li>
<li> web technology</li>
<li> data management</li>
<li> computer architecture and organisation</li>
<li> physics</li>
<li>chemistry</li>
<li>calculus for egineers</li>
</ol>
</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>
<body>
<h1>Pizza</h1>
<hr width="100%" />
<p>Pizza, dish of Italian origin consisting of a flattened disk of bread
dough topped with some combination of olive oil,oregano, tomato, olives,
mozzarella or other cheese, and many other ingredients, baked quickly
usually, in a commercial setting, using a wood-fired oven heated to a
very high temperature and served hot.</p>
</body>
</html>

OUTPUT :
f. Print a definition list with 5 items
CODE :
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
<dt>Pen</dt>
<dd>A writing tool</dd>
<dt>Lettuce</dt>
<dd>A vegetable</dd>
<dt>Technology</dt>
<dd>The development of tools which serve as a means to certain
objectives</dd>
<dt>Megabyte</dt>
<dd>A unit of data consisting of 1024 kilobytes</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>
<body>
<address>
Govind<br />
Q - block<br />
VIT UNIVERSITY<br/>
Vellore<br/>
</address>

<br /><br />

<center>
<address>
Manish<br />
Maaruthi nagar<br />
Attapur<br/>
Hyderabad<br/>
</address>
</center>
</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>

<body>

<abbr title="Abstract">Abstr.</abbr>

<br /><br />

<abbr title="Biochemistry">Biochem.</abbr>

<br /><br />

<abbr title="Example">Ex.</abbr>

<br /><br />

<abbr title="Literature">Lit.</abbr>

<br /><br />

<abbr title="Mathematics">Math.</abbr>

<br /><br />

<acronym title="World Wide Web Consortium">W3C</acronym>

<br /><br />

<acronym title="Institute of Electrical

and Electronic Engineers">IEEE</acronym>

<br /><br />

<acronym title="International Standards Organization">

ISO

</acronym>

<br /><br />

<acronym title="Hyper Text Markup Language">HTML</acronym>

<br /><br />

<acronym title="Beginners All Purpose


Symbolic Instruction Code">BASIC

</acronym>

<p>

Move your mouse over an abbreviation or acronym to get more data.

</p>

</body>

</html>

OUTPUT :
4) HTML IMAGE EXERCISES
a. Display five different images. Skip two lines between
each image. Each image should have a title.
CODE :
<html>
<head>
<img src="tiger.jpg" alt="1st image" width=40 height=45><br><br>
<img src=" tiger.jpg " alt="2st image" width=40 height=45><br><br>
<img src=" tiger.jpg " alt="3st image" width=40 height=45><br><br>
<img src=" tiger.jpg " alt="4st image" width=40 height=45><br><br>
<img src=" tiger.jpg " alt="5st image" width=40 height=45><br><br>
</head>
</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>
<img src="tiger.jpg " alt="1st image" border=2 width=200 height=200>
</html>

OUTPUT :
c. Display the image towards the right corner of the
webpage
CODE :

<html>
<head>
<img src="tiger.jpg " align="right">
</html>

OUTPUT :
5) HTML TABLES

CODE :
<html>
<body>
<table border=1 align="center">
<tr>
<th colspan="4">Purchased Equipments(June,2006)</th>
</tr>
<tr>
<td rowspan="2">Item Name#</td>
<td rowspan="2">Item Picture</td>
<td>Item Description</td>
<td>Price</td>
</tr>
<tr>
<td>Shipping Handiling, Installation, etc</td>
<td>Expensive</td>
</tr>

<tr>
<td rowspan="2">1</td>
<td rowspan="2"><img src="download.jfif" alt="Computer"></td>
<td>IBM Clone Computer</td>
<td>$400,00</td>
</tr>

<tr>
<td>Shipping Handiling, Installation, etc</td>
<td>$2000</td>
</tr>

<tr>
<td rowspan="2">2</td>
<td rowspan="2"><img src="download (1).jfif" alt="Microprocessor"></td>
<td>1GB RAM Module for Computer</td>
<td>$5000</td>
</tr>

<tr>
<td>Shipping Handiling, Installation, etc</td>
<td>$1400</td>
</tr>
<tr>
<th colspan="4">Purchased Equipments(June,2006)</th>
</tr>

</table>
</body>
</html>
OUTPUT :
6) HTML Forms

CODE :
<!DOCTYPE html>
<html>
<head>
<title>The World of Fruit</title>
</head>
<body>
<form>
<table class="fixed"bgcolor=#d9d9d9>
<tr bgcolor=#808080>
<td colspan="2" align="right">
The World of Fruit
</td>
</tr>
<tr>
<td></td>
<td align="right">Fruit Survey</td>
</tr>
<tr>
<td align="right">Name</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Email</td>
<td><input type="Email"></td>
</tr>
<tr>
<td width="180px" align="right">How many pieces of fruit so yoy eat per
day?</td>
<td><input type="radio" name="fpd" value="0">0</input><br>
<input type="radio" name="fpd" value="1">1</input><br>
<input type="radio" name="fpd" value="2">2</input><br>
<input type="radio" name="fpd" value="More than 2">More than
2</input>
</td>
</tr>
<tr>
<td align="right">My favorite fruit</td>
<td><select size="4">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Plum">Plum</option>
<option value="Pomegranate">Pomegranate</option>
<option value="Grape">Grape</option>
<option value="Pineapple">Pineapple</option>
<option value="Orange">Orange</option>
</select></td>
</tr>
<tr>
<td align="right">Would you like a brochure?</td>
<td><input type="checkbox" name="onlyone"></td><br>
<tr>
<td></td>
<td ><input type="submit" name="submit" value="submit"></td>
</tr>
</tr>
</table>
</form>
</body>
</html>

OUTPUT :
7) HTML Frames.

CODE :
Main.html
<!DOCTYPE HTML public "-//w3c//DTD HTML 4.01 frameset //
EN""http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Amazon</title>
</head>
<frameset rows="20%,*">
<frameset cols="*">
<frame marginheight=5% noresize scrolling=yes src="sub1.html">
</frameset>
<frameset cols="35%,*">
<frame noresize src="sub3.html">
<frame noresize scrolling=yes src="sub2.html">
</frameset>
</frameset>
</html>

sub1.html:-
<html>
<body align="center" background="Capture.png" height="10px" text="red">
<br>
<h1><big><big><b>AMAZON BOOK WORLD</b></big></big></h1>
</body>
</html>

sub2.html:-
<html>
<body align="center" bgcolor=#ADD8E6>
<font face="times new roman" size="30" color="purple"><small>USER'S
PROFILE</small></font><br><br><br>
<table class="fixed" bgcolor="silver" align="center" border="3"
cellpadding="10">
<tr>
<td align="center"><b>S.no</b></td>
<td align="center"><b>User name</b></td>
<td align="center"><b>DOB</b></td>
<td align="center"><b>Address</b></td>
<td align="center"><b>Occupation</b></td>
</tr>
<tr>
<td>1</td>
<td>Ramu P</td>
<td><pre>12th Jan
1980</pre></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><pre>23rd May
1982</pre></td>
<td>H No:22/12/11, Patel Road,Hyd</td>
<td>Driver</td>
</tr>
<tr>
<td>3</td>
<td>Pavari.V</td>
<td><pre>27th July
1983</pre></td>
<td>H No:Ameerpet,hyd</td>
<td><pre>Software
Engineer</pre></td>
</tr>
<tr>
<td>4</td>
<td>Seshu.D</td>
<td><pre>07th March
1984</pre></td>
<td>H No:1/99,S R Nagar,Hyd</td>
<td>DBA</td>
</tr>
<tr>
<td>5</td>
<td>Surendra</td>
<td><pre>29rd May
1982</pre></td>
<td>H No:22/12/11,bala Nagar,Hyd</td>
<td>Professor</td>
</tr>
</table><br><br>
<a href ="www.amazon.com"><b><big><big><font
color="purple">Home</font></big></big></b></a>
</body>
</html>

sub3.html:-
<html>
<body bgcolor="black">
<ul style="list-style-type:circle ; color:red">
<li><a href="www.instagram.com" alink="yellow" vlink="white">USER
LOGIN</a><br><br><br></li>
<li><a href="www.google.com" link="red" >USER profile</a><br><br><br></li>
<li><a href="www.google.com" link="red" >BOOKS
CATALOG</a><br><br><br></li>
<li><a href="www.google.com" link="red" >SHOPPING
CART</a><br><br><br></li>
<li><a href="www.google.com" link="red" >ORDER
CONFORMATION</a><br><br><br></li>
<li><a href="www.google.com" link="red" >PAYMENT</a><br><br><br></li>
</ul>
</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.

CODE :
<html>
<head>
<title></title>
<style>
body{
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:cover;
height:100%;
}
#para1{
width: 700px;
padding: 10px;
border: 0;
margin-top: 10;
margin-left:600;
margin-right:10;
background-color:silver;
}
</style>
</head>
<body>
<p id="para1">
<b><big><big><big><big><big><big>Hello
World!</big></big></big></big></big></big></b><br>
<big><big><big><big>This example contains some advanced CSS you may
have not learned yet.But we will explain these methods in a later chapter in the
tutorial
</big></big></big></big>
</p>
<p style="width: 700px;
padding: 10px;
border:5px;
border-top-style:dotted;
border-bottom-style:dashed;
margin-top: 10;
margin-left:600;
margin-right:10;
border-left-style:solid;
border-right-style:solid;">
<big><big><big><big>This is some text in
paragraph</big></big></big></big>
</p>
</body>
</html>
OUTPUT :
9) Write the CSS code necessary to recreate the following
appearance on-screen, exactly as shown.

CODE :
<html>
<head>
<title></title>
<style type="text/css">
h1{text-align:center;}
#mbox{
width:1500px;
height:5px;}
#box1{
background-color:black;
color:white;
width:150px;
padding:3px;
margin:3px;
float:left;}
#box2{
background-color:green;
color:white;
width:50px;
height:70px;
padding:30px;
float:left;
margin-top:20px;
margin-left:30px;}
#box3{
background-image:url("dif.jpg");
background-repeat:no-repeat;
background-size:cover;
color:white;
width:80px;
height:300px;
padding:30px;
float:left;}
#box4{
width:800px;
height:300px;
padding:30px;
margin-left:100px;
float:left;}
</style>
</head>
<body>
<br>
<h1><b><big>WALL-E</big></b></h1>
<br>
<p><big>Walt Disney Studios Motion Pictures|Release date:
Jun27,2008</big></p>
<br>
<div id="mbox">

<div id="box1">
<big>Summary</big>
</div>
<div id="box1">
<big>Critic Reviews</big>
</div>
<div id="box1">
<big>User Reviews</big>
</div>
<div id="box1">
<big>Details and Credits</big>
</div>
<div id="box1">
<big>Trailers and videos</big>
</div>
</div>
<br>
<br>
<div id="mbox">
<div id="box3">
</div>
<div id="box2">
<big><big><big><big><big><big><big>94</big></big></big></big></big></
big></big>
</div>
</div>
<br>
<b><big><big><big><big>Metascore</big></big></big></big></b>
<br>
<br>
<br>
<big><big>Universal acclaim</big></big>
<br>
<big><big>based on 39 Critics</big></big>
<br>
<br>
<div id="box4">
<ul style="list-style-type:disc;">
<li><big><big>Staring:Ben Burtt,Elissa Knight,Jeff Garlin</big></big></li>
<li><big><big>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]</big></big></li>
</ul>
</div>
</body>
</html>

OUTPUT :
10) Design the following web page using HTML5 and
CSS:
CODE :
<html>
<head>
<style>
body{background-color:#ffe6cc;}
#sbox{
width: 100px;
height:100px;
margin:10px;
}
#rcorners1 {
border-radius: 25px;
border: 2px solid red;
padding: 20px;
width: 1300px;
height: 75px;
}
#rcorners2 {
background-image:url("bridge.jpg");
background-size:cover;
background-repeat:no-repeat;
border-radius: 25px;
border: 2px solid yellow;
padding: 20px;
width: 1300px;
height: 90px;
}
#rcorners3 {
border-radius: 25px;
border: 2px solid green;
padding: 20px;
width: 1300px;
height: 350px;
}
#rcorners4 {
border-radius: 25px;
border: 2px solid purple;
padding: 20px;
width: 1000px;
height: 310px;
float:left;
}
#rcorners5 {
background-color:black;
opacity:0.8;
border-radius: 25px;
border: 2px solid pink;
color:white;
padding: 20px;
width: 200px;
height: 325px;
float:right
}
#rcorners6 {
border-radius: 25px;
border: 2px solid blue;
padding: 20px;
width: 1300px;
height: 150px;
}
#rcorners7 {
border-radius: 25px;
border: 2px solid black;
padding: 20px;
width: 350px;
height: 120px;
float:left;
margin-right:35px;
}
#p2 {background-color:black;opacity:0.6;}
</style>
<title></title>
<body>
<div id="rcorners1">
<header>
<img src="skin.jpg">
<br>
<p><font size="4">Travel diaries
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;</font>
<a href="www.google.com" style="text-decoration:none;"><font size="5"
color="black">HOME &nbsp;</font></a>
<a href="www.gmail.com" style="text-decoration:none;"><font size="5"
color="black">BLOG</font>&nbsp;</a>
<a href="www.youtube.com" style="text-decoration:none;"><font size="5"
color="black">RESUME</font>&nbsp;</a>
<a href="www.amazon.com"style="text-decoration:none;"><font size="5"
color="black">CONTACT</font></a>
</p>
</header>
</div>
<div id="rcorners2">
<br><br><br><br>
<div id="p2">
<font color="white" size="4">Reflections on my holiday in the United
States...</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;&emsp;&em
sp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ems
p;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp
;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button
type="button" style="background-color:red;color:white;border-
radius:25px">See article ></input>
</div>
</div>
<div id="rcorners3">
<div id="rcorners4">
<img src="log.jpg">
<font size="5"><b>I'M A GREAT TRAVELLER</b></font>
<p><font size="2">Lorem ipsum dolor sit amet. consectetur adipiscing Sit.
Abquam nec sagittis massa. dignissim id aliquam est aliquam. Maecenas non
odio I Ipsum. a elementum nisi. mauris non erat eu erat placerat convallis.
mauris In pretlum urna. Gras taoreet motestfe odfo. consequat consequat velit
commodo eu. integer vitae lectus ac nunc posuere petLentesque 1non at eros.
Suspendisse non tectus Lorem.<p> vivamus sed tlbero nec mauris putvInar
tuft's's ut non sem. Quisque moUls uttamcorper Warn vet faucibus. Vestibutum
soUicltudin facilisls feuglat. NuLta euismod sodates hendrerit. Donec quis orci
arcu. vivamus fermentum magna a erat uttamcoper dignissim pretium nunc
aliquam. aenean pulvinar condtmentum ; enim a dignissim. vivamus sit amet
tectus at ante adipiscing adipiscing eget vitae fells. In at (ringilla ;est. Cras id
vetit ut magna rutrum commodo. Etiam ut sceterisque purus. Duis risus alit.
venenatis vet i rutrum In, Imperdiet In quam. Sed vestibutum, Ober° ut
bibendum consectetur, otos Ipsum ultrIces nisi, In rutrum diam augue non tor
tor. Fusco, nec massa et risus dapibus aliquam vitae nec darm.</p><p>
Phasellus tiguta massa. tongue ac vulputate non. dignissim at augue. Sed auctor
fringitta quam quis porttitor. Praesent vitae dignissim magna. Pettentesque quis
sem purus. vet elementum mi. Pettentesque : habitant morbi tristique senectus et
netus et matesuada fames ac turpis egestas. maecenas consectetur : euismod
urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibutum.
Ut iacutis. Lams 'rat motestie lacinia. ipsum mi adipiscing tiguta. vet motIis sem
risus eu tectus. Nunc etit quam. rutrum ut dignissim sit amet. egestas at sem.
</font>
</p>
</div>
<div id="rcorners5">
<h3>ABOUT THE AUTHOR</h3>
<br>
&emsp;&emsp;<img src="cow.jpg">
<br>
<font size="2">
<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></font>
<img src="contact.jpg">
</div>
</div>
<footer>
<div id="rcorners6">
<div id="rcorners7">
<font size="5">MY LAST TWEET</font><br><br>
Hee-Haw!<br><br>
12/05 23:12
</div>
<div id="rcorners7">
<font size="5">MY PICTURES</font><br><br>
<img src="picture.jpg" width="300px">
</div>
<div id="rcorners7">
<font size="5">MY FRIENDS</font>
<div id="sbox">
<pre>
<font color="red" size="4">
->Pupi the rabbit ->Ji
->Me baobab ->Super cucumber
->kaiwaii ->Prince
->perceval.eu ->Mr Fan
</font>
</pre>
</div>
</div>
</footer>
</body>
</head>
</html>

OUTPUT :

Das könnte Ihnen auch gefallen