Scribd
Upload
29 views

Introduction To HTML

Uploaded by

ICT World
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views

Introduction To HTML

Uploaded by

ICT World
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Introduction to HTML

HTML (HyperText Markup Language) is the basic building block for creating
websites. It defines the structure of a webpage using elements known as "tags."
These tags tell the browser how to display content like text, images, and links.
Learning HTML is essential for anyone who wants to create web pages, and it's easy
to start with simple tools like Notepad or TextEdit.

Basic Structure of an HTML Document


Every HTML document has a basic structure:
 <!DOCTYPE html>: Declares that the document follows HTML5 standards.
 <html>: The root element that contains the entire web page.
 <head>: Contains information about the page, such as its title and metadata.
 <body>: Holds the content visible to the user, like text, images, and links.

Common HTML Elements


 Headings: Use <h1> to <h6> for titles, where <h1> is the largest and most
important, and <h6> is the smallest.
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
 Paragraphs: Represented by the <p> tag.
<p>This is a paragraph of text.</p>
 Links: Created using the <a> tag with the href attribute.
<a href="https://www.example.com">Click here</a>
 Images: Use the <img> tag with attributes like src (source) and alt
(alternative text).
<img src="image.jpg" alt="Description of image">

Attributes in HTML
HTML elements can have attributes that provide additional information. For
example:
 href: Specifies the URL for a link.
 src: Provides the file path for an image.
 alt: Describes the content of an image for accessibility.

Creating a Simple HTML Page


1. Open a text editor (like Notepad or TextEdit).
2. Write some HTML code. For example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph!</p>
</body>
</html>
3. Save the file as index.html.
4. Open the file in a web browser to see the result.

HTML is Not Case Sensitive


HTML tags can be written in both uppercase and lowercase. However, it is common
practice to use lowercase for better readability.

Key Takeaways
 HTML is used to structure web pages.
 Tags and attributes are the core components.
 You can view and edit HTML using simple tools, and changes are visible in any
web browser.
Activity 1: Short Answer Questions (5 Questions)
1. What does HTML stand for?
2. What is the purpose of the <head> section in an HTML document?
3. Name two common HTML elements used to structure text.
4. What is the difference between <h1> and <h6> tags?
5. How do you create a hyperlink in HTML?

Activity 2: Detailed Questions (10 Questions)


1. Describe the basic structure of an HTML document.
2. What is the purpose of the <!DOCTYPE html> declaration?
3. Explain how to add an image to an HTML page. Include the required
attributes.
4. What is the role of the alt attribute in the <img> tag?
5. What is an empty HTML element? Provide an example.
6. How do you specify the title of a webpage that appears in the browser's title
bar or tab?
7. Define an HTML attribute and explain its purpose with an example.
8. How can you add a line break in HTML without creating a new paragraph?
9. What is the importance of the <a> tag in HTML? How is it used?
10.Explain how HTML headings are structured and why they are important.

Activity 3: Multiple Choice Questions (10 MCQs)


1. What is the correct way to start an HTML document?
o a) <html>

o b) <!DOCTYPE html>

o c) <head>

o d) <body>

2. Which tag is used to create a paragraph in HTML?


o a) <p>

o b) <h1>
o c) <br>

o d) <div>

3. What does the src attribute in the <img> tag define?


o a) Image size

o b) Image source file

o c) Image alternative text

o d) Image format

4. How do you create a hyperlink?


o a) <link>

o b) <a href="URL">

o c) <img src="URL">

o d) <url>

5. Which of the following is not a heading tag in HTML?


o a) <h1>

o b) <h4>

o c) <h7>

o d) <h6>

6. Which tag is used for the largest heading?


o a) <h1>

o b) <h3>

o c) <h6>

o d) <p>

7. What does the alt attribute in the <img> tag do?


o a) Adds a title

o b) Describes the image

o c) Changes image size

o d) Sets the image format

8. What is the purpose of the <title> element?


o a) Defines the page title shown in the browser tab
o b) Defines the main heading of the page

o c) Adds metadata to the document

o d) Adds text to the body

9. Which element is used for hyperlinks in HTML?


o a) <a>

o b) <link>

o c) <url>

o d) <href>

10.What does the <br> tag do?


 a) Adds a break in the page
 b) Inserts a line break
 c) Ends a paragraph
 d) Adds a block of content

Activity 4: Simple Practical Exercises (3 Exercises)


1. Create an HTML page with the following:
o A heading that says "Welcome to My Website"

o A paragraph with some text about your favorite hobby.

2. Add an image to the webpage using the <img> tag. Make sure to include the
alt attribute describing the image.
3. Create a link to your favorite website (e.g., YouTube) using the <a> tag.

Activity 5: Hard Practical Exercises (4 Exercises)


1. Create a webpage that contains:
o A heading <h1>, a subheading <h2>, and a paragraph <p>.

o Three images, each with different sizes and alternative text.

o Hyperlinks to three different websites.

2. Develop an HTML document that displays the following:


o An ordered list (<ol>) with five list items, and an unordered list (<ul>)
with three list items.
o Use different heading tags from <h1> to <h4> for different sections.

3. Create a webpage with multiple paragraphs, and add a line break between
each one using the <br> tag. Ensure there is also a link that takes the user to
a different section of the same webpage.
4. Write an HTML page that uses an <iframe> to embed a YouTube video, and
also contains a table with two columns and three rows, where you describe
different web browsers and their key features.
 (Detailed Question)
Explain the difference between an ordered list (<ol>) and an unordered list (<ul>)
in HTML. Provide an example of each.
 (Practical)
Create a webpage with:
 A heading that says "My Favorite Foods"
 An unordered list (<ul>) containing at least 3 items (foods).
 A paragraph below the list explaining why you like those foods.
 (Simple Question)
What does the alt attribute in the <img> tag do?
 (Detailed Question)
How would you structure an HTML page that includes metadata, a heading, and a
paragraph? Write out the necessary code.
 (Practical)
Create a simple webpage with:
 A title "My Portfolio"
 A heading that says "About Me"
 A paragraph describing yourself.
 (Simple Question)
What is the purpose of the <title> element in an HTML document?
 (Detailed Question)
Describe how you would create a link in HTML that opens in a new browser tab.
Include an example code.
 (Simple Question)
Which tag is used to define a line break in HTML?
 (Practical)
Design an HTML page with:
 A heading that says "My Favorite Websites"
 Three links to websites you visit regularly (use the <a> tag).
 (Simple Question)
What is the correct syntax for adding an image to a webpage using the <img> tag?

1. Explain the difference between an ordered list (<ol>) and an


unordered list (<ul>) in HTML. Provide an example of each.
2. Create a webpage with:
• A heading that says "My Favorite Foods“
• An unordered list (<ul>) containing at least 3 items (foods).
• A paragraph below the list explaining why you like those foods.
3. What does the alt attribute in the <img> tag do?
4. How would you structure an HTML page that includes metadata, a
heading, and a paragraph? Write out the necessary code.
5. Create a simple webpage with:
• A title "My Portfolio“
• A heading that says "About Me“
• A paragraph describing yourself.
6. What is the purpose of the <title> element in an HTML document?
7. Describe how you would create a link in HTML that opens in a new
browser tab. Include an example code.
8. Which tag is used to define a line break in HTML?
9. Design an HTML page with:
• A heading that says "My Favorite Websites“
• Three links to websites you visit regularly (use the <a> tag).
10.What is the correct syntax for adding an image to a webpage using
the <img> tag?

You might also like