HTML EXERCISES

Exercise 1:- BASICS

1. Create simple HTML file with name “[Link]” in which used following tags. a. HTML b) HEAD
c) TITLE d)BODY Write a paragraph in body.

2. Add following tags in above “[Link]” file and format the paragraph by using these tags. a. Use
different comments b. <u>-underline c. <i>-italic text d. <b>-bold text e. <strike>-Strikethrough f.
<section> g. <sup>-superscript h. <sub>-subscript i. <Center>-center tag. j. <br>-break the line k. <article>
l. <address>

3. Create simple HTML file with name “[Link]” in which use all heading tags. a. Write sentence
as “Welcome at Shree Genius IT Hub.”

4. Give background color “sky blue” for whole body of the above file “[Link]” text and use
“align” attributes (left, right, center) for body text.

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

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

7. Print two paragraphs that are both indented using the &nbsp command .

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

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

10. Print some preformatted text of your choosing.

11. Print a long quote and a short quote. Cite the author of each quote.

12. Print some deleted and inserted text of your choosing.

13. Print a definition list with 5 items.

14. Print two addresses in the same format used on the front of envelopes (senders address in top left corner,
receivers address in the center

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

16. Create some links to various search engines (google, yahoo, altavista, lycos, etc).

17. Create links to five different pages on five different websites that should all open in a new window.
18. 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.

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

20. 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. At the bottom of the page there should be a link to jump back to the top of the page.

Exercise 2:- LIST

1. Create the following List.
1. Animal
 Domestic
i. Dog
ii. Cat
iii. Cow
 Wild
A. Tiger
B. Lion
2. Birds
 Parrot
 Crow
 Sparrow

2. Create the following List.

5. Color
d. Red
e. Blue
f. Green
6. Shape
iii. Rectangle
iv. Circle
v. Rectangle

Exercise 3:- Image

1. Create webpage “[Link]” in which create following logos

Use font face, size that you want.

2. Create a folder Image in working folder and add 4 images in that folder. Now create one file name as
[Link] in working folder and display all four images in that html file.

3. Create a folder Image in working folder and add 4 images in that [Link] create another folder
named as Html in working folder. Now create one file name as [Link] in Html folder and
display all four images in that html file.
 4. Use following Scenario and implement it.
Working Folder

>Image Folder
Cricket Image folder
Two cricket images
Football Image folder
Two Football images
>Info Folder
CricketInfo Folder
[Link] file
Show images in Cricket Image folder in html file.
Footballnfo Folder
[Link] file
Show images in Football Image folder in html file.
5. Display five different images. Skip two lines between each image. Each image should have a title.
6. Display an image that has a border of size 2, a width of 200, and a height of 200.
7. Display an image that when clicked will link to a search engine of your choice (should be opened in
a new window). [See solution]
8. Display an image that when clicked will link to itself and will display the image in the browser by
itself.

Exercise 4 :- Linking
1. Create webpage “[Link]”in which create two links namely
a. Click to open [Link]
b. Click to open [Link]

2. Create webpage “[Link]”in which attach file “[Link]” to a text “Click to

view Basic tags Demo in HTML” and insert one image and create hyperlink for that image,
attach file to image as “[Link]”.

3. Create webpages [Link], [Link], [Link] in working folder. Create one folder
Back Image in working folder and take any four images in it. Create another folder Image in
working folder and create [Link] file in it which shows images present in Back Image
folder. Create the following links in [Link] page.
a. Home -> Click to open [Link]
b. About -> Click to open [Link]
c. Contact -> Click to open [Link]
d. Image -> Click to open [Link]

4. Create a web page as follows which has two links.

 Chocolate
 Cake
After Clicking on chocolate it will redirect to respective html page with its recipe.
If I click on cake it will show me webpage like follows:-

After Clicking on cake it will redirect to respective html page with its recipe.
If I click on cake it will show me webpage like follows:-
Exercise 5 :- Table

1. Create the table as follows.

Name of
Module:
Student:
Name of Assignment
Partner: No:
Date of
Status:
Evaluation:
Remark:
Name of
Signature:
evaluator:

2. Create a table as follows.

Name Address Contact No. Email

 3. Create the table as follows.

4. Create the table as follows.

5. Create the table as follows.

6. Create the table as follows.

Exercise 6:- Marquee

1. Apply all attributes of marquee tag to the text “Shree Genius IT Hub”.
2. Rotate the text Welcome 3 times from right to left.
 3. Rotate text welcome from left to right and behavior is scroll.

Exercise 7:- Frame

1. Create Frame as follows.

2. Create Frame as follows.

3. Create Frame as follows.

Description:- When click on link in frame 2 appropriate html files should be displayed in frame 3.

Frame1

Frame 3
Frame2

Exercise 8:- Forms

1. Create form ” Shopping Address” form & add in Browser of shopping webpage.
 Apply required field validation

2. Create form ” Employee Details” and Apply required field validation

3. Create a form and apply the following validations.

a. All fields are required.
b. Password has minimum 6 and maximum 10 characters.
c. User Id has only alphabets.
4. Create form as follows