EXERCISE 1

1. Introduction to HTML

• Topics: Basic structure of an HTML document, doctype, tags, elements, and attributes.
• Exercise:

1. Create a simple webpage with a heading, paragraph.

2. Headings and Paragraphs

• Topics: Heading tags (<h1> to <h6>), paragraphs (<p>), line breaks (<br>).
• Exercise:

Create a webpage with a title and multiple paragraphs formatted using headings.

Create:

3. Text Formatting

• Topics: Bold (<b>), italic (<i>), underline (<u>), superscript (<sup>), subscript (<sub>).
• Exercise:

1. Format a block of text using different formatting tags (bold, italic, underline).
2. Write a sentence that includes both bold and italic text using the <b> and <i> tags.

Example: This is bold and italic text.

3. Underline the word "important" in the following sentence using the <u> tag:

This is an important message.

 4. In the equation "H₂O," use the appropriate HTML tag to correctly format the subscript
"2."
5. Write the following mathematical expression using superscript and subscript tags:

"X squared (X²) plus Y sub 1 (Y₁)"

6. Combine bold, italic, and underline tags to format the following sentence:

"This is a very important note."

4. Lists

• Topics: Ordered lists (<ol>), unordered lists (<ul>), list items (<li>), and nested lists.
• Exercise:

1. Create an ordered and unordered list of your favorite hobbies.Create a numeric , alphabate .

2.Create an ordered list (<ol>) with three items: "Apples," "Bananas," and "Cherries."

3. Convert the following list of items into an unordered list (<ul>):

• Dog
• Cat
• Rabbit

4. Write an ordered list (<ol>) of three items where each item contains a sub-item as an
unordered list (<ul>):

Example: "Countries" with sub-items for cities in each country.

5. Nest the following lists inside each other to create a multi-level list:

• Main item: "Fruits"

o Sub-item: "Citrus"
o Sub-item: "Berries"
▪ Sub-item: "Strawberries"
▪ Sub-item: "Blueberries"

6. Modify the following unordered list to create a nested ordered list within it:

<ul>
<li>Continents</li>
<li>Countries</li>
</ul>

7.Add an ordered list of countries inside the "Countries" list item.

8. Create a list with the following structure using both ordered and unordered lists:

• Main item: "Programming Languages"

o Ordered sublist: "Languages starting with P"
1. Python
2. PHP
o Unordered sublist: "Languages starting with J"
▪ Java
▪ JavaScript

9.Create:

5. Links (Anchor Tags)

• Topics: Links (<a>), absolute vs relative links, opening links in new tabs.
• Exercise:

1.Create a webpage with several links, including internal and external links.
 2.Write an HTML link (<a>) that takes the user to https://www.example.com. Use
"Click Here" as the link text.

3.What is the difference between an absolute link and a relative link? Provide an
example of each.

4.Create a link (<a>) that points to a file called about.html located in the same folder as
your current HTML file. Use "About Us" as the link text.

5.Modify the following link so that it opens in a new tab:

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

6.Create a link that points to an image file named image.jpg in a folder called images.
The link text should be "View Image."

7.What attribute would you use to open a link in a new browser window or tab? Write
an example link to open https://www.google.com in a new tab.

6. Images

• Topics: Adding images (<img>), image attributes (src, alt, width, height).

Attribute Description

src
Specifies the path to the image.

alt Provides alternate text for the image, useful for informing users
about the image and displaying in case of network issues.

Allows importing images from third-party sites with cross-origin

crossorigin
access for use with canvas.

height
Specifies the height of the image.

width
Specifies the width of the image.

ismap
Specifies an image as a server-side image map.

Specifies whether a browser should defer loading of images until

loading
certain conditions are met or load an image immediately.

longdesc Specifies a URL to a detailed description of an image.

 Attribute Description

Specifies which referrer information to use when fetching an image

referrerpolicy
(e.g., no-referrer, no-referrer-when-downgrade, origin).

Size Specifies image sizes for different page layouts.

srcset Specifies a list of image files to use in different situations.

usemap
Specifies an image as a client-side image map.

• Exercise:

1.Create a photo gallery using images with alt text and dimensions.

2.Write an HTML image tag (<img>) to display an image called photo.jpg that is
located in the same directory as your HTML file.

3.Add an alt attribute to the following image tag to describe the image as "A beautiful
sunset":

<img src="sunset.jpg">

4. Display an image called logo.png with a width of 200 pixels and a height of 100 pixels.

5. Correct the following image tag by adding the missing src attribute and use alt="Sample
image":

<img width="300" height="200">

6.Create an image tag that displays mountain.jpg, but if the image fails to load, the text
"Mountain landscape" should be shown in its place.

7. Modify the following image tag to make the image responsive by only setting the width to
100% (and removing the height):

<img src="banner.jpg" width="800" height="300">

Submission Instructions:

1. Each assignment should be done , and take their screenshots.

2. When complete exercise done all then take screenshot make a pdf and add which you
done exercise.