HTML Basics Practicals

Index
HTML basics exercises
 Create a webpage that prints your name to the screen.
 Create a webpage that prints the numbers 1 - 10 to the screen.
 Create a webpage and set its title to "This is a webpage".
HTML text exercises
 Print your name in green.
 Print the numbers 1 - 10, each number being a different color.
 Prints your name in a Tahoma font.
 Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.
 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.
 Print your name to the screen with every letter being a different heading size.
HTML text formatting exercises
 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. (Example: 10 2 = 100)
 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 <h1> level heading.
 Print two paragraphs that are both indented using the command.
 Print two lists with any information you want. One list should be an ordered list, the other list should
be an unordered list.
 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.
 Print some deleted and inserted text of your choosing.
 Print a definition list with 5 items.

 Print two addresses in the same format used on the front of envelopes (senders address in top left
corner, receivers address in the center).
 Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the
data that the abbreviations and acronyms represent.
HTML link exercises
 Create some links to various search engines (google, yahoo, altavista, lycos, etc).
 Create links to five different pages on five different websites that should all open in a new window.
HTML image exercises
 Display five different images. Skip two lines between each image. Each image should have a title.
 Display an image that has a border of size 2, a width of 200, and a height of 200.
 Display an image that when clicked will link to a search engine of your choice (should be opened in
a new window).
 Display an image that when clicked will link to itself and will display the image in the browser by
itself.
HTML basics exercises
 Create a webpage that prints your name to the screen. [See solution]
<html>
<body>

John
</body>
</html>
 Create a webpage that prints the numbers 1 - 10 to the screen. [See solution]
<html>
<body>

1 2 3 4 5 6 7 8 9 10
</body>
</html>
 Create a webpage and set its title to "This is a webpage". [See solution]
<html>
<head>

<title>This is a webpage</title>
</head>
<body>

The title tag goes in the head section of an HTML document.

</body>
</html>
HTML text exercises
 Print your name in green. [See solution]
<html>
<body>
John
</body>
</html>
 Print the numbers 1 - 10, each number being a different color. [See solution
<html>
<body>
1
2
3
4
5
6
7
8
9
10
</body>
</html>
 Prints your name in a Tahoma font. [See solution]
<html>
<body>
John
</body>
</html>
 Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. [See solution]
<html>
<body>


HTML stands for Hyper Text Markup Language.

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.


Although a fundamental language of the web, HTML is a
static language - content created with it does not change.


HTML is used to specify the way webpages look, not how they
function.


</body>
</html>
 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.[See solution]
<html>
<body>

One particular book which is recommended reading is The Street Lawyer by John
Grisham. This book is about a lawyer who begins re-evaluating his priorities in life when a bad
incident occurs within his law firm. Consequently, he becomes acquainted with the inner city streets, and
realizes the harsh existence of the homeless, and vows to give them a chance in the courts. The Street
Lawyer is a great
book. It is well written and interesting. Other books by John

Grisham include The Firm, The Pelican Brief, and The Client.

</body>
</html>
 Print your name to the screen with every letter being a different heading size.[See solution]
<html>
<body>
<h4>J</h4>
<h3>o</h3>
<h2>h</h2>
<h1>n</h1>
</body>
</html>
HTML text formatting exercises
 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. (Example: 10 2 = 100) [See solution]
<html> 
<body> 62 = 36
12 = 1 
 72 = 49
22 = 4 
 82 = 64
32 = 9 
 92 = 81
42 = 16 
 102 = 100
52 = 25 
112 = 121 
 172 = 289
122 = 144 
 182 = 324
132 = 169 
 192 = 361
142 = 196 
 202 = 400
152 = 225 </body>
 </html>
162 = 256
 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 <h1> level heading.[See solution]
<html> 
<body> Wendy9
<h1>Unalphabetized list</h1> 
Jane4
Bill3 
 Andy1
Roger5 
 Anna2
Sandra6 <h1>Alphabetized list</h1>
 Andy
Stacy7 
 Anna
William10 
 Bill
Thomas8 
Jane Thomas
 
Roger Wendy
 
Sandra William
 </body>
Stacy </html>
 
 Print two paragraphs that are both indented using the command.[See solution]
<html> 
<body>
Comput programs are designed and implemented.
er programming is defined as telling a computer 
what to 
do through a special set of instructions which are While
then computer programming can be a great tool used
interpreted by the computer to perform some to achieve
task(s). These many things, there are a few misconceptions
instructions can be specified in one or more when it comes to
programming the subject, a few misconceptions that should be
languages including (but not limited to) Java, cleared up.
PHP, C, and One misconception about computer programming
C++. A computer goes through a series of steps is that you would
whose purpose need to have some kind of special software to
is to achieve something - a series of steps that write programs -
are this is hardly the case.
instructed to it in great detail by computer 
programs. </body>
Essentialy, computer programming is the process </html>
by which these
 Print two lists with any information you want. One list should be an ordered list, the other list
should be an unordered list. [See solution]
<html> </ol>
<body> Web languages
Hardware devices <ul type="square">
<ol type="I"> <li>HTML</li>
<li>CD-ROM drive</li> <li>Javascript</li>
<li>DVD drive</li> <li>PHP</li>
<li>Hard disk</li> <li>Java</li>
<li>Modem</li> </ul>
</body> </html>
 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. [See solution]
<html>
<body>
<h1>Cookie</h1>
<hr width="100%" />
 A delicious confection that is quite popular when it comes to sweets. Cookies come in various varieties
including chocolate chip, raisin, and macademia nut. A very different type of cookie is a small text file stored
on a user's computer by a web server.

</body>
</html>
 Print some deleted and inserted text of your choosing. [See solution]
<html>
<body>
HTML stands for
<del>Hyper Translation Markup Language</del>
<ins>Hyper Text Markup Language</ins>.
</body>
</html>
 Print a definition list with 5 items. [See solution]
<html> <dt>Technology</dt>
<body> <dd>The development of tools which serve as
<dl> a means to
<dt>HTML</dt> certain objectives</dd>
<dd>A markup language</dd> <dt>Megabyte</dt>
<dt>Pen</dt> <dd>A unit of data consisting of 1024
<dd>A writing tool</dd> kilobytes</dd>
<dt>Lettuce</dt> </dl>
<dd>A vegetable</dd> </body>

</html>
 Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the
data that the abbreviations and acronyms represent. [See solution]
<html> 
<body> <acronym title="International Standards
<abbr title="Abstract">Abstr.</abbr> Organization">
 ISO
<abbr title="Biochemistry">Biochem.</abbr> </acronym>
 
<abbr title="Example">Ex.</abbr> <acronym title="Hyper Text Markup
 Language">HTML</acronym>
<abbr title="Literature">Lit.</abbr> 
 <acronym title="Beginners All Purpose
<abbr title="Mathematics">Math.</abbr> Symbolic Instruction Code">BASIC
 </acronym>

<acronym title="World Wide Web Move your mouse over an abbreviation or
Consortium">W3C</acronym> acronym to get more data.
 
<acronym title="Institute of Electrical </body>
and Electronic Engineers">IEEE</acronym> </html>

HTML link exercises
 Create some links to various search engines (google, yahoo, altavista, lycos, etc).
<html>
<body> </a>
<a href="http://www.google.com"> 
Search the web with Google! <a href="http://www.altavista.com">
</a> Search the web with Altavista!
 </a>
<a href="http://www.yahoo.com"> 
Search the web with Yahoo! <a href="http://www.lycos.com">
</a> Search the web with Lycos!
 </a>
<a href="http://www.bing.com"> </body>
Search the web with Bing! </html>
Create links to five different pages on five different websites that should all open in a new window.
<html> </a>
<head> 
<title>Links to various pages</title> <a href="http://www.hostforweb.com"

target="_blank">
</head>
HostForWeb Web Hosting
<body>
</a>
<a
href="http://www.landofcode.com/about.php" 
target="_blank"> <a href="http://www.gmx.com"

target="_blank">
Landofcode.com about page
GMX email <a
href="http://www.math.com/homeworkhelp/Al
</a> gebra.html"
 target="_blank">
<a href="http://www.weather.com" Learn about algebra
target="_blank">
</a>
Find out local weather
</body>
</a>
</html>
 
HTML image exercises
 Display five different images. Skip two lines between each image. Each image should have a title.
<html> <img src="/images/swan.jpg" alt="Swan"
<head> title="Swan" />
<title>Five images</title> 
</head> <img src="/images/tree.jpg" alt="Tree"
<body> title="Tree" />
<img src="/images/apple.jpg" alt="Apple" 
title="Apple" /> <img src="/images/waterfall.jpg" src="Waterfall"
 title="Waterfall" />
<img src="/images/sky.jpg" alt="Sky" </body>
title="Sky" /> </html>
 
Display an image that has a border of size 2, a width of 200, and a height of 200.
<html>
<body>
<img src="/images/tree.jpg" width="200" height="200" alt="Tree" border="2" />
</body>
</html>
Display an image that when clicked will link to a search engine of your choice (should be opened in a new window).
<html>
<body>
<a href="http://www.yahoo.com" target="_blank">
<img src="/images/swan.jpg" alt="Swan" />
</a>
</body>

Click on the image to be taken to the Yahoo search engine.

</html>
Display an image that when clicked will link to itself and will display the image in the browser by itself.
<html>
<body>
<a href="http://www.yahoo.com" target="_blank">
<img src="/images/swan.jpg" alt="Swan" />
</a>
</body>

Click on the image to be taken to the Yahoo search engine.

</html>
<html> <img src ="1.jpg" width="10%"
height="25%"align="right" >
<head>
<h1 style="color:red">Saleem Ahmed</h1>
<title> Resume </title>
 House #5, XYZ Area Karachi 
</head>
 Contact#123456789
<body bgcolor="yellow">
<h3 > Introduction </h3>
 I am an experienced web designer with an However, skills can be given in numbered - list
excellent track record. I have worked with as well.
famous organization in the last 8 years. You can

check my work ...
<a href="www.aku.edu">Click here to check <ol type="a">

...</a> <li>Teamwork </li>
 <li>Time Management </li>
<h3> Self motivation </li>
color:green">Career Objectives </h3>
<li>Leadership </li>
 I want to learn latest of web
designing and interested to join well <li>Presure handling </li>
reputed software house where I can learn and
</ol>
also apply my skills and experience to
<strike>achieve</strike> meet the 
<strike>goal</strike>aim and
objectives of the organization. <h2 align=left> interesting fact about
me</h2>
<h3> I was a shy student and a bit slow learner
color:green">Skills</h3> but once a i would learn something that I would
remember for a long time. I liked a computer
Below my skills are given in yellow colored
science as a subject and i was weak in math so
bullets
that I am not still sure that whether
 (a+b)2 H2O
<ul type="square"> <h3> 

Academic Details</h3>
<li>Teamwork </li>
<table border="1" bgcolor="yellow"
<li>Time Management </li> cellspacing="0">
<li>Self motivation </li> <tr>
<li>Leadership </li> <th>Degree Title</th>
<li>Presure handling </li> <th>Institute</th>
</ul> <th>Percentage</th>
 <th>Year</th>
</tr> <tr>
<tr> <td align=center>FA</td>
<td align=center>Masters</td> <td align=center>JKL College</td>
<td <td align=center>82%</td>

align=center><center>XYZUniversity</td>
<td align=center>2008</td>
<td align=center>80%</td>
</tr>
<tr>
</tr>
<td align=center>Matriculation</td>
<tr>
<td align=center>MNO</td>
<td align=center>Bachelors</td>
<td align=center>ABC University</td>
</tr>

</tr>

HTML Basics Practicals

Uploaded by

HTML Basics Practicals

Uploaded by

Index

HTML basics exercises

 Create a webpage that prints your name to the screen.

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

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

HTML text exercises

 Print your name in green.

 Print the numbers 1 - 10, each number being a different color.

 Prints your name in a Tahoma font.

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

HTML text formatting exercises

alphabetized list. Both lists should have an <h1> level heading.

line print a paragraph relating to the text in the heading.

 Print some deleted and inserted text of your choosing.

 Print a definition list with 5 items.

corner, receivers address in the center).

data that the abbreviations and acronyms represent.

HTML link exercises

HTML image exercises

The title tag goes in the head section of an HTML document.

<font color="red ">7</font>

 Prints your name in a Tahoma font. [See solution]

<font face="Courier New">

HTML stands for Hyper Text Markup Language.

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

Although a fundamental language of the web, HTML is a

static language - content created with it does not change.

book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by <u>John

<html> <br />

1<sup>2</sup> = 1 <br />

<br /> 7<sup>2</sup> = 49

2<sup>2</sup> = 4 <br />

<br /> 8<sup>2</sup> = 64

3<sup>2</sup> = 9 <br />

<br /> 9<sup>2</sup> = 81

4<sup>2</sup> = 16 <br />

<br /> 10<sup>2</sup> = 100

5<sup>2</sup> = 25 <br />

11<sup>2</sup> = 121 <br />

<br /> 17<sup>2</sup> = 289

12<sup>2</sup> = 144 <br />

<br /> 18<sup>2</sup> = 324

13<sup>2</sup> = 169 <br />

<br /> 19<sup>2</sup> = 361

14<sup>2</sup> = 196 <br />

<br /> 20<sup>2</sup> = 400

15<sup>2</sup> = 225 </body>

<br /> </html>

<html> <br />

<h1>Unalphabetized list</h1> <br />

Bill<sub>3</sub> <br />

<br /> Andy<sub>1</sub>

Roger<sub>5</sub> <br />

<br /> Anna<sub>2</sub>

Sandra<sub>6</sub> <h1>Alphabetized list</h1>

<br /> Andy

Stacy<sub>7</sub> <br />

<br /> Anna

William<sub>10</sub> <br />

<br /> Bill

Thomas<sub>8</sub> <br />

<br /> <br />

<br /> <br />

<br /> </body>

er programming is defined as telling a computer </p>

do through a special set of instructions which are &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;While

then computer programming can be a great tool used

interpreted by the computer to perform some to achieve

task(s). These many things, there are a few misconceptions

instructions can be specified in one or more when it comes to

do through a special set of instructions which are While