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>
<!-- print name to the screen -->
John
</body>
</html>
Create a webpage that prints the numbers 1 - 10 to the screen. [See solution]
<html>
<body>
<!-- print the numbers 1 to 10 to the screen -->
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>
<!--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>
HTML text exercises
Print your name in green. [See solution]
<html>
<body>
<font color="green">John</font>
</body>
</html>
Print the numbers 1 - 10, each number being a different color. [See solution
<html>
<body>
<font color="green">1</font>
<font color="blue">2</font>
<font color="gray">3</font>
<font color="yellow">4</font>
<font color="pink">5</font>
<font color="brown">6</font>
<font color="red ">7</font>
<font color="violet">8</font>
<font color="purple">9</font>
<font color="indigo">10</font>
</body>
</html>
Prints your name in a Tahoma font. [See solution]
<html>
<body>
<font face="Tahoma">John</font>
</body>
</html>
Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. [See 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>
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>
<p>
One particular book which is recommended reading is <u>The Street Lawyer</u> by <u>John
Grisham</u>. 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. <u>The Street
Lawyer</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>John
Grisham</u> include <u>The Firm</u>, <u>The Pelican Brief</u>, and <u>The Client</u>.
</p>
</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> <br />
<body> 6<sup>2</sup> = 36
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>
16<sup>2</sup> = 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> <br />
<body> Wendy<sub>9</sub>
<h1>Unalphabetized list</h1> <br />
Jane<sub>4</sub>
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 />
Jane Thomas
<br /> <br />
Roger Wendy
<br /> <br />
Sandra William
<br /> </body>
Stacy </html>
<br />
Print two paragraphs that are both indented using the command.[See solution]
<html> <p>
<body>
Comput programs are designed and implemented.
er programming is defined as telling a computer </p>
what to <p>
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 </p>
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> <b>Web languages</b>
<b>Hardware devices</b> <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%" />
<p> 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.
</p>
</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> <br /><br />
<body> <acronym title="International Standards
<abbr title="Abstract">Abstr.</abbr> Organization">
<br /><br /> ISO
<abbr title="Biochemistry">Biochem.</abbr> </acronym>
<br /><br /> <br /><br />
<abbr title="Example">Ex.</abbr> <acronym title="Hyper Text Markup
<br /><br /> Language">HTML</acronym>
<abbr title="Literature">Lit.</abbr> <br /><br />
<br /><br /> <acronym title="Beginners All Purpose
<abbr title="Mathematics">Math.</abbr> Symbolic Instruction Code">BASIC
<br /><br /> </acronym>
<p>
<acronym title="World Wide Web Move your mouse over an abbreviation or
Consortium">W3C</acronym> acronym to get more data.
<br /><br /> </p>
<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"> <br /><br />
Search the web with Google! <a href="http://www.altavista.com">
</a> Search the web with Altavista!
<br /><br /> </a>
<a href="http://www.yahoo.com"> <br /><br />
Search the web with Yahoo! <a href="http://www.lycos.com">
</a> Search the web with Lycos!
<br /><br /> </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> <br /><br />
<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" <br /><br />
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"
<br /><br /> target="_blank">
<a href="http://www.weather.com" Learn about algebra
target="_blank">
</a>
Find out local weather
</body>
</a>
</html>
<br /><br />
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> <br /><br />
</head> <img src="/images/tree.jpg" alt="Tree"
<body> title="Tree" />
<img src="/images/apple.jpg" alt="Apple" <br /><br />
title="Apple" /> <img src="/images/waterfall.jpg" src="Waterfall"
<br /><br /> title="Waterfall" />
<img src="/images/sky.jpg" alt="Sky" </body>
title="Sky" /> </html>
<br /><br />
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>
<p>
Click on the image to be taken to the Yahoo search engine.
</p>
</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>
<p>
Click on the image to be taken to the Yahoo search engine.
</p>
</html>
<html> <img src ="1.jpg" width="10%"
height="25%"align="right" >
<head>
<h1 style="color:red">Saleem Ahmed</h1>
<title> Resume </title>
<p> House #5, XYZ Area Karachi </p>
</head>
<p> Contact#123456789</p>
<body bgcolor="yellow">
<h3 > <mark style="background-
color:green">Introduction </h3>
<p> 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
<font color= blue>
check my work ...
<a href="www.aku.edu">Click here to check <ol type="a">
...</a> <li>Teamwork </li>
</p> <li>Time Management </li>
<h3> <mark style="background- <li>Self motivation </li>
color:green">Career Objectives </mark></h3>
<li>Leadership </li>
<p> I want to learn latest of <b> web
designing</b> 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> <u>meet</u> the </font>
<strike>goal</strike><u>aim</u> and<u>
objectives</u> of the organization. <h2 align=left> <mark style="background-
color:green">interesting fact about
me</mark></h2>
<h3> <mark style="background- <p> I was a shy student and a bit slow learner
color:green">Skills</mark></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
<font color = red> (a+b)<sup>2</sup> H<sub>2</sub>O
<ul type="square"> <h3> <mark style="background-color:green">
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>
</font> <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>
<td align=center>2014</td>
<tr>
</tr>
<td align=center>Matriculation</td>
<tr>
<td align=center>MNO</td>
<td align=center>Bachelors</td>
<td align=center>83%</td>
<td align=center>ABC University</td>
<td align=center>2006</td>
<td align=center>85%</td>
</tr>
<td align=center>2012</td>
</p>
</tr>
