Vous êtes sur la page 1sur 18

PREENTRY

ASSIGNMENTS
integrated Talent
development program
for Outstanding Performance
Module 01

LAB Exercise 02

Version - 1.0
Baseline Date - July 7, 2010

HTML
LAB EXERCISES
EXERCISE 1.
Create a webpage that prints your name to the screen.
<html>
<body>
<!-- print name to the screen -->
John
</body>
</html>
RESULT
John
EXERCISE 2.
Create a webpage and set its title to "This is a webpage".
html>
<head>
<!--set the title of the page-->
<title>This is a webpage</title>
</head>
2

<body>
<p class="note">
The title tag goes in the head section of an HTML document.
</p>
</body>
</html>
RESULT
The title tag goes in the head section of an HTML document.
EXERCISE 3.
Print the numbers 1 - 10, each number being a different color.
<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>
3

<font color="purple">9</font>
<font color="#688e23">10</font>
</body>
</html>
RESULT
1 2 3 4 5 6 7 8 9 10

EXERCISE 4.
Print a paragraph with 4 - 5 sentences. Each sentence should be a
different font.
<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>
RESULT
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.
EXERCISE 5.
Print your name to the screen with every letter being a different heading
size

<html>
<body>
<h4>J</h4>
<h3>o</h3>
<h2>h</h2>
<h1>n</h1>
</body>
</html>
RESULT
J
o
h
n
EXERCISE 6.
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.

<html>
6

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

Anna<sub>2</sub>
<h1>Alphabetized list</h1>
Andy
<br />
Anna
<br />
Bill
<br />
Jane
<br />
Roger
<br />
Sandra
<br />
Stacy
<br />
Thomas
<br />
Wendy
<br />
8

William
</body>
</html>
RESULT
Unalphabetized list
Bill3
Roger5
Sandra6
Stacy7
William10
Thomas8
Wendy9
Jane4
Andy1
Anna2
Alphabetized list
Andy
Anna
Bill
Jane
Roger
Sandra
Stacy
Thomas
Wendy
William
EXERCISE 7.
Print two paragraphs that are both indented using the &nbsp; command
9

<html>
<body>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Computer programming is defined
as telling a computer what to do through a special set of instructions which
are then interpreted by the computer to perform some task(s). These
instructions can be specified in one or more programming languages
including (but not limited to) Java, PHP, C, and C++. A computer goes through
a series of steps whose purpose is to achieve something - a series of steps that
are instructed to it in great detail by computer programs. Essentialy,
computer programming is the process by which these programs are designed
and implemented.
</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;While computer programming can
be a great tool used to achieve many things, there are a few misconceptions
when it comes to the subject, a few misconceptions that should be cleared up.
One misconception about computer programming is that you would need to
have some kind of special software to write programs - this is hardly the case.
</p>
</body>
</html>
RESULT
Computer programming is defined as telling a computer what to do through a
special set of instructions which are then interpreted by the computer to
perform some task(s). These instructions can be specified in one or more
10

programming languages including (but not limited to) Java, PHP, C, and C++. A
computer goes through a series of steps whose purpose is to achieve
something - a series of steps that are instructed to it in great detail by
computer programs. Essentialy, computer programming is the process by
which these programs are designed and implemented.
While computer programming can be a great tool used to achieve many
things, there are a few misconceptions when it comes to the subject, a few
misconceptions that should be cleared up. One misconception about computer
programming is that you would need to have some kind of special software to
write programs - this is hardly the case.
EXERCISE 8.
Print two lists with any information you want. One list should be an
ordered list, the other list should be an unordered list.

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

<b>Web languages</b>

<ul type="square">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
</ul>
</body>
</html>

RESULT
Hardware devices
I.
II.
III.
IV.

CD-ROM drive
DVD drive
Hard disk
Modem

Web languages





HTML
Javascript
PHP
Java
12

EXERCISE 9.
Create some links to various search engines (Google, yahoo, AltaVista,
Lycos, etc).
<html>
<body>
<a href="http://www.google.com">
Search the web with Google!
</a>

<br /><br />

<a href="http://www.yahoo.com">
Search the web with Yahoo!
</a>

<br /><br />

<a href="http://www.bing.com">
Search the web with Bing!
</a>

13

<br /><br />

<a href="http://www.altavista.com">
Search the web with AltaVista!
</a>

<br /><br />

<a href="http://www.lycos.com">
Search the web with Lycos!
</a>
</body>
</html>
EXERCISE 10.
Create a page with a link at the top of it that when clicked will jump all
the way to the bottom of the page.

<html>
<body>

14

<a href="#bottom">Click here to jump to the bottom of the page</a>


<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<a name="bottom">The bottom of the page</a>
</body>
</html>
RESULT
Click here to see the bottom of the page
15

Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
The bottom of the page
EXERCISE 11.
Display an image that when clicked will link to a search engine of your
choice (should be opened in a new window).

<html>
<body>

16

<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>
RESULT
(some image)
Click on the image to be taken to the Yahoo search engine.
PRACTISE EXERCISE
1. Create a webpage that prints any text of your choice to the screen, do
not include a head section in the code.
2. Prints your name in a Tahoma font.
3. 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
4. Print a definition list with 5 items.

17

5. Print two addresses in the same format used on the envelopes (senders
address at top left corner, receivers address at the center).
6. Create links to five different pages on five different websites that should
all open in a new window
7. Create a page with a link at the bottom of it that when clicked will jump
all the way to the top of the page
8. Display five different images. Skip two lines between each image. Each
image should have a title

18

Vous aimerez peut-être aussi