Introduction to HTML

Download PDF
To access the updated handouts, please click on the following link: https://yasirbhutta.github.io/html-css/docs/html-basics.html

Example #1: HTML Comments

    <!-- This is a comment -->
  

    <!-- The next line displays a paragraph -->
  
    <!-- 
        Multi-line comments are also possible.
        You can use this to explain code in detail or temporarily disable code.
    -->

The <meta> tag is used in HTML to provide metadata about the web page. The viewport and content attributes are commonly used for controlling the page’s layout on different devices, especially mobile devices. See For more details, see Appendix A

Example #2: Standard HTML Document Structure

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Hello world</title>
</head>

<body>
    <!-- This is a comment -->
    <p> "You only live once, 
        but if you do it right, once is enough."
        - Mae West
    </p>
</body>
</html>

Task #1: Create a Simple Webpage with Line Breaks

Objective: Learn how to use the <br> tag in HTML to create line breaks in a webpage.

Steps:

Open your text editor (like Notepad, Visual Studio Code, etc.) and create a new HTML file named index.html.

Add the basic HTML structure to your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Breaks Example</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
</body>
</html>

Inside the <body> tag, add a short paragraph about your favorite hobby. After each sentence, use the <br> tag to create a line break.

Example:
```
<p>My favorite hobby is painting.<br>
I love using watercolors.<br>
It helps me relax and express myself creatively.<br></p>
```
Save the file and open it in a web browser to see the result. You should see the sentences appear on different lines.

Task #2: Create a Webpage with Blockquotes

Objective: Learn how to use the <blockquote> tag to highlight and format quotations in HTML.

Steps:

Open your text editor (like Notepad, Visual Studio Code, etc.) and create a new HTML file named blockquote_example.html.

Add the basic HTML structure to your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockquote Example</title>
</head>
<body>
    <h1>Famous Quotes</h1>
</body>
</html>

Inside the <body> tag, add a famous quote using the <blockquote> tag. A blockquote is used to display a quote from an external source, usually with indentation or styling applied by the browser.

Example:

<h2>Albert Einstein</h2>
<blockquote>
    "Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>

<h2>Isaac Newton</h2>
<blockquote>
    "If I have seen further, it is by standing on the shoulders of giants."
</blockquote>

Optionally, you can add a <footer> tag inside the blockquote to specify the source or author of the quote:

<blockquote>
    "The only way to do great work is to love what you do."
    <footer>- Steve Jobs</footer>
</blockquote>

Save the file and open it in a web browser. You should see the quotes formatted with indentation and any additional styles applied by the browser.

Task #3: Create a Structured Webpage Using Different Heading Levels

Objective: Understand how to use different heading levels in HTML to organize content into sections and subsections.

Steps:

Open your text editor (like Notepad, Visual Studio Code, etc.) and create a new HTML file named structured_headings.html.

Add the basic HTML structure to your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Structured Webpage Example</title>
</head>
<body>
    <h1>My Personal Blog</h1>
</body>
</html>

Inside the <body> tag, create sections for different categories of content using appropriate heading tags. Each section will have a main heading, a subsection, and some content below it. Example:

<h1>My Personal Blog</h1>

<h2>Introduction</h2>
<p>Welcome to my blog! Here, I share my thoughts on various topics including technology, lifestyle, and art.</p>

<h2>Technology</h2>
<h3>Latest Gadgets</h3>
<p>Technology is evolving rapidly, and new gadgets are being released every year. In this section, I will review the latest gadgets and provide my opinion.</p>
<h4>Smartphones</h4>
<p>The new smartphones are faster and more powerful than ever before. In my latest post, I will compare the top models of the year.</p>
<h4>Laptops</h4>
<p>Laptops continue to be essential for both work and play. I will explore which laptops are the best for productivity and gaming.</p>

<h3>Tech Tutorials</h3>
<p>In this section, I provide easy-to-follow guides on various tech topics. From building a website to learning how to code, you’ll find it all here.</p>

<h2>Lifestyle</h2>
<h3>Health & Fitness</h3>
<p>Maintaining a healthy lifestyle is key. Here, I discuss exercise routines, healthy eating, and mental well-being.</p>
<h4>Yoga</h4>
<p>Yoga is great for both mental and physical health. I’ll share some basic routines you can do at home.</p>
<h4>Nutrition</h4>
<p>A balanced diet is important for overall health. I’ll provide tips on what foods to include in your daily diet.</p>

<h3>Travel</h3>
<p>Explore new places and cultures! I share travel tips, stories, and recommendations for your next adventure.</p>

<h2>Art</h2>
<h3>Painting</h3>
<p>Art has always been a passion of mine. In this section, I share my painting projects and techniques.</p>
<h4>Watercolors</h4>
<p>Watercolor painting is both challenging and rewarding. I’ll guide you through creating your own beautiful watercolor pieces.</p>
<h4>Digital Art</h4>
<p>Digital art allows for endless creativity. I explore various software tools and techniques for creating digital masterpieces.</p>

Save the file and open it in a web browser. You will see that the content is now organized with different heading levels, giving the webpage a clear structure.

Task: HTML Entities

Basic Entities

Create a new HTML file.
In the <body> section, write a sentence that includes:
- An ampersand (&)
- The less than symbol (<)
- The greater than symbol (>)
- A double quote (“)
- A single quote (‘)
Use the correct HTML entities to display these characters.
View the file in your web browser to check if the characters are displayed correctly.

Quotations and Special Symbols

Create a paragraph element (<p>).
Inside the paragraph, write a short quote.
Use the appropriate entity for the opening and closing double quotes.
Add the copyright symbol (©) at the end of the quote.
Add the Euro symbol (€) in a separate sentence.

Non-Breaking Space

Write a sentence that includes the phrase “100 meters”.
Use a non-breaking space entity ( ) between “100” and “meters”.

Degree Symbol

Write a sentence that mentions a temperature, for example, “The temperature is 25 degrees Celsius.”
Use the correct HTML entity to display the degree symbol (°).

Example (First Few Lines):

<!DOCTYPE html>
<html>
<head>
  <title>HTML Entity Practice</title>
</head>
<body>

<p>This is a sentence with an ampersand (&amp;), 
less than (&lt;), greater than (&gt;), 
double quotes (&quot;), and single quotes (&apos;).</p>

</body>
</html>

Font Styles and Sizes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Formatting Tags Example</title>
</head>
<body>

    <p>This is an <em>emphasized</em> text.</p>
    <p>This is a <strong>strong and important</strong> text.</p>
    <p>Here is a <code>code snippet</code> inside a paragraph.</p>
    <p>This is a <mark>highlighted</mark> text.</p>
    <p>This is a superscript example: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
    <p>This is a subscript example: H<sub>2</sub>O (water).</p>

</body>
</html>

Example: Images

<!DOCTYPE html>
<!–– image.html An example to illustrate an image ––>
    <html lang="en">

    <head>
        <title> Images </title>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1> Aidan's Airplanes </h1>
        <h2> The best in used airplanes </h2>
        <h3> "We've got them by the hangarful" </h3>
        <h2> Special of the month </h2>
        <!-- ******** -->
        <!-- add Image - image source (freepik) -->
        <!-- ******** -->

        <img src="flowers.jpg" width="400" height="200" alt="alternate text"/>
       
        <p>
            1960 Cessna 210 <br />
            577 hours since major engine overhaul<br />
            1022 hours since prop overhaul <br /><br />
        <img src="images/marketing-strategy-planning-strategy-concept.jpg"  alt="Picture of a Cessna 210" width="800" height="600"/>
            <br />
            Buy this fine airplane today at a remarkably low price
            <br />
            Call 999-555-1111 today!
        </p>
        <img src="https://placehold.co/600x400" alt="placeholder image" />
    </body>

    </html>

Example: Links

    <!DOCTYPE html>
<!–– link.html An example to illustrate a link ––>
    <html lang="en">

    <head>
        <title> A link </title>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1> Aidan's Airplanes </h1>
        <h2> The best in used airplanes </h2>
        <h3> "We've got them by the hangarful" </h3>
        <h2> Special of the month </h2>
        <h2><a href="link2.html#css5"> Intro. to CSS</a></h2>
        <p>
            1960 Cessna 210 <br />
            <a href="mypag1.html"> My Page 1 </a>
        </p>
        <a href="pdf/html-slides.pdf">Download - All Slides of HTML</a><br>

        <a href="https://www.urdupoint.com/names/boys-names/meem.html">
            Urdu Point
        </a>
        <br>
        <a href="https://www.urdupoint.com/names/boys-names/meem.html">
            <img src="images/com.jpg" alt="An image of a small airplane" width="800" height="600" />
        </a>
    </body>

    </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="top">Contents</h1>
    <h2>Web Basics </h2>
    <h2>Intro to Visual Studio Code </h2>
    <h2>Intro to HTML </h2>
    <h2>Intro to JavaScript </h2>

    <h2><a href="#css5"> Intro to CSS </a> </h2>

    <h1>Web Basics </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    <h1>Intro to Visual Studio Code </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    <h1>Intro to HTML </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    <h1>Intro to JavaScript </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate esse, quod deserunt voluptates, culpa dolores tenetur quam quasi molestiae illum neque quo error ratione, at fuga repudiandae. Itaque, quae dolorum.</p>
    
    <h1 id="css5">Intro to CSS <a href="#top">Top</a> </h1> 
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, dicta dolorum numquam dolore quo laborum? Nam repellat, saepe corporis dolorum facilis enim, tenetur laboriosam provident omnis fuga ex temporibus aspernatur.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora vel cumque debitis quod deleniti iste soluta dolorem similique molestiae, fugit sequi ratione! Magni odit eius maiores libero ut consequuntur facere.</p>
    
</body>
</html>

content generated using https://www.lipsum.com/

Task: Create a Blog Post with Styled Text

Create a new HTML file and name it blog_post.html.
Inside the blog_post.html file, do the following:
- Create the basic HTML structure (<!DOCTYPE html>, <html>, <head>, and <body>).
- Add a title to the webpage in the <head> section.
- Inside the <body>, add the following elements:
  - A main heading (<h1>) with the title of your blog post.
  - A subheading (<h2>) for the post subtitle.
  - Add a paragraph (<p>) with a brief introduction to your blog post.
  - Add another paragraph that describes a topic, and use:
    - <strong> to highlight important text.
    - <em> to emphasize some text.
    - <mark> to highlight text that is important.
  - Add a blockquote (<blockquote>) to include a quote.
  - Add a list (<ul> or <ol>) of key points related to your blog topic.
  - Add a link (<a>) to a related website.

Example structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Blog Post</title>
</head>
<body>
    <h1>My First Blog Post</h1>
    <h2>Exploring HTML Text Elements</h2>
    <p>Welcome to my blog post! In this post, I'll be discussing various HTML text elements and how to style them.</p>
    <p><strong>HTML</strong> is the foundation of web pages, and knowing how to format text is essential for building content-rich pages.</p>
    <p>Here are some ways to style text in HTML:</p>
    <ul>
        <li>Use <em>emphasis</em> for words you want to stress.</li>
        <li>Highlight <mark>important points</mark> with <mark>mark</mark>.</li>
        <li><strong>Strong</strong> is used for key terms.</li>
    </ul>
    <blockquote>
        "The best way to predict the future is to create it." – Abraham Lincoln
    </blockquote>
    <p>For more on HTML, visit <a href="https://www.w3schools.com/html/">W3Schools</a>.</p>
</body>
</html>

Task #2: Create a Personal Webpage

Create a new HTML file and name it index.html.
Inside the index.html file, do the following:
- Create the basic structure of an HTML document with <!DOCTYPE html>, <html>, <head>, and <body>.
- Add a title to the webpage in the <head> section.
- In the <body>, create a heading (<h1>) with your name.
- Add a short paragraph (<p>) about yourself.
- Insert an image of yourself (or anything you’d like) using the <img> tag.
- Add a link (<a>) to your favorite website (e.g., Google, Wikipedia).
- Create a simple list (<ul> or <ol>) of your favorite hobbies or things you like.

Example structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Webpage</title>
</head>
<body>
    <h1>John Doe</h1>
    <p>Hello! My name is John, and I love learning about web development.</p>
    <img src="path_to_image.jpg" alt="A picture of me">
    <h2>My Hobbies:</h2>
    <ul>
        <li>Coding</li>
        <li>Reading books</li>
        <li>Traveling</li>
    </ul>
    <p>Check out my favorite website: <a href="https://www.example.com">Click here</a></p>
</body>
</html>

Key Terms

True/False (Mark T for True and F for False)

Answer Key (True/False):

Multiple Choice (Select the best answer)

Which HTML element contains metadata like the page title and links to stylesheets?
- A) <body>
- B) <head>
- C) <title>
- D) <meta>

Answer: B) <head>

2. What is the purpose of the `<title>` element in an HTML document?

a) Displays a heading on the webpage
b) Defines the title shown on the browser tab
c) Adds a tooltip to elements
d) Creates a paragraph

Answer: b) Defines the title shown on the browser tab

3. Which element is used to structure the main visible content of a webpage?

a) <head>
b) <body>
c) <title>
d) <meta>

Answer: b) <body>

4. What is the correct way to define a paragraph in HTML?

a) <para>
b) <p>
c) <paragraph>
d) <pg>

Answer: b) <p>

5. Which heading element is the largest by default?

a) <h6>
b) <h3>
c) <h1>
d) <h5>

Answer: c) <h1>

6. What is the purpose of the `<br>` tag in HTML?

a) Creates a horizontal line
b) Breaks text into a new paragraph
c) Creates a line break
d) Bolds text

Answer: c) Creates a line break

7. Which tag is used to create a horizontal line in HTML?

a) <hr>
b) <br>
c) <line>
d) <hl>

Answer: a) <hr>

8. Which attribute is required in the `<img>` tag to specify the image file?

a) alt
b) src
c) href
d) title

Answer: b) src

9. What is the purpose of the `<em>` tag?

a) Makes text bold
b) Makes text italicized for emphasis
c) Creates a new paragraph
d) Underlines text

Answer: b) Makes text italicized for emphasis

11. What is the purpose of the `<code>` tag?

a) Displays a preformatted block of code
b) Highlights text in yellow
c) Creates a clickable button
d) Creates a hyperlink

Answer: a) Displays a preformatted block of code

12. Which tag is used to display a blockquote in HTML?

a) <q>
b) <blockquote>
c) <cite>
d) <quote>

Answer: b) <blockquote>

13. The `<pre>` tag is used to…

a) Add metadata to the HTML document
b) Preserve whitespace and formatting in text
c) Highlight text
d) Create a paragraph

Answer: b) Preserve whitespace and formatting in text

14. What is the main difference between inline and block elements?

a) Inline elements take up full width, block elements do not
b) Block elements always have a border
c) Inline elements do not start on a new line, block elements do
d) There is no difference

Answer: c) Inline elements do not start on a new line, block elements do

15. Which of the following is an example of an inline element?

a) <h1>
b) <p>
c) <em>
d) <blockquote>

Answer: c) <em>

Here are more multiple-choice questions (MCQs) on HTML elements:

16. Which of the following is a block-level element?

a) <span>
b) <strong>
c) <div>
d) <em>

Answer: c) <div>

17. What is the correct HTML tag for emphasizing text with strong importance?

a) <b>
b) <strong>
c) <i>
d) <u>

Answer: b) <strong>

18. What does the `<img>` tag require to display an image?

a) href
b) alt
c) src
d) title

Answer: c) src

19. The `<p>` tag in HTML is used for?

a) Adding paragraphs
b) Creating tables
c) Displaying images
d) Creating lists

Answer: a) Adding paragraphs

21. What happens when you use the `<br>` tag?

a) Adds a horizontal line
b) Adds a page break
c) Inserts a line break
d) Bolds text

Answer: c) Inserts a line break

22. What is the difference between `<b>` and `<strong>` tags?

a) <b> is obsolete, <strong> is not
b) <strong> indicates importance, <b> only makes text bold
c) <b> is used for larger text, <strong> is for emphasis
d) There is no difference

Answer: b) <strong> indicates importance, <b> only makes text bold

23. Which element is used to display preformatted text with spaces and line breaks preserved?

a) <p>
b) <pre>
c) <blockquote>
d) <code>

Answer: b) <pre>

24. Which of the following tags is used for inline styling and content grouping?

a) <div>
b) <span>
c) <section>
d) <article>

Answer: b) <span>

25. Which tag is used to create a long quotation in HTML?

a) <q>
b) <blockquote>
c) <quote>
d) <cite>

Answer: b) <blockquote>

28. What is the purpose of the `alt` attribute in the `<img>` tag?

a) Adds a caption to the image
b) Provides alternative text for accessibility
c) Changes the image size
d) Links the image to another page

Answer: b) Provides alternative text for accessibility

29. Which of the following is an example of a self-closing (void) element in HTML?

a) <p>
b) <div>
c) <br>
d) <span>

Answer: c) <br>

30. What is the default display property of the `<p>` tag?

a) Inline
b) Inline-block
c) Block
d) Flex

Answer: c) Block

31. Which tag is used to group elements into a logical section in HTML?

a) <div>
b) <span>
c) <p>
d) <br>

Answer: a) <div>

32. What does the `<em>` tag do to the enclosed text?

a) Makes it bold
b) Italicizes it for emphasis
c) Underlines it
d) Highlights it

Answer: b) Italicizes it for emphasis

33. What is the correct way to display a comment in HTML?

a) // This is a comment
b) /* This is a comment */
c) 
d) <comment>This is a comment</comment>

Answer: c) 

35. What happens if an image file specified in the `<img>` tag’s `src` attribute is missing?

a) The browser shows an error message
b) The image is replaced with a broken image icon
c) The page does not load
d) Nothing happens

Answer: b) The image is replaced with a broken image icon

38. Which tag is used to display a citation in HTML?

a) <cite>
b) <blockquote>
c) <q>
d) <cite>

Answer: a) <cite>

34. Which tag is used to define a section of content that is self-contained?

a) <div>
b) <section>
c) <article>
d) <header>

Answer: c) <article>

Watch this video for the answer:

Answer key (Mutiple Choice):

Fill in the Blanks

Answer Key (Fill in the Blanks):

Exercises

Skill Level Categories Define clear categories based on skill levels, such as:

Beginner: Basic concepts and syntax. Intermediate: More complex problems involving data structures and algorithms. Advanced: Challenging problems that require in-depth understanding and optimization.

Review Questions

Answers to Review Questions:

References and Bibliography

[1] MDN Web Docs, “HTML: HyperText Markup Language,” MDN Web Docs, Dec. 10, 2018. https://developer.mozilla.org/en-US/docs/Web/HTML [2] “HTML elements reference,” MDN Web Docs, Jun. 06, 2019. https://developer.mozilla.org/en-US/docs/Web/HTML/Element ‌ ‌

For more details, see Appendix A.

Appendices

Appendix A: Meta Tags for Responsive Design

Here’s an example of how to use the viewport meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport Meta Tag Example</title>
</head>
<body>

    <h1>Responsive Web Page</h1>
    <p>This page will adapt to different screen sizes.</p>

</body>
</html>

Breakdown of the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

name="viewport": Specifies that this meta tag is for controlling the viewport settings.
content="width=device-width, initial-scale=1.0":
- width=device-width: The width of the viewport will match the width of the device’s screen.
- initial-scale=1.0: This sets the initial zoom level when the page is first loaded. 1.0 means no zoom.

Why it’s important:

It helps ensure your page is responsive, meaning it will adjust to different screen sizes, such as on desktops, tablets, and smartphones.
Without this tag, mobile devices might display the page zoomed out or not properly scaled, making the content hard to read.

Introduction to HTML

Example #1: HTML Comments

Example #2: Standard HTML Document Structure

Task #1: Create a Simple Webpage with Line Breaks

Task #2: Create a Webpage with Blockquotes

Task #3: Create a Structured Webpage Using Different Heading Levels

Task: HTML Entities

Font Styles and Sizes

Example: Images

Example: Links

Task #2: Create a Personal Webpage

Key Terms

True/False (Mark T for True and F for False)

Multiple Choice (Select the best answer)

2. What is the purpose of the <title> element in an HTML document?

3. Which element is used to structure the main visible content of a webpage?

4. What is the correct way to define a paragraph in HTML?

5. Which heading element is the largest by default?

6. What is the purpose of the <br> tag in HTML?

7. Which tag is used to create a horizontal line in HTML?

8. Which attribute is required in the <img> tag to specify the image file?

9. What is the purpose of the <em> tag?

11. What is the purpose of the <code> tag?

12. Which tag is used to display a blockquote in HTML?

13. The <pre> tag is used to…

14. What is the main difference between inline and block elements?

15. Which of the following is an example of an inline element?

16. Which of the following is a block-level element?

17. What is the correct HTML tag for emphasizing text with strong importance?

18. What does the <img> tag require to display an image?

19. The <p> tag in HTML is used for?

21. What happens when you use the <br> tag?

22. What is the difference between <b> and <strong> tags?

23. Which element is used to display preformatted text with spaces and line breaks preserved?

24. Which of the following tags is used for inline styling and content grouping?

25. Which tag is used to create a long quotation in HTML?

28. What is the purpose of the alt attribute in the <img> tag?

29. Which of the following is an example of a self-closing (void) element in HTML?

30. What is the default display property of the <p> tag?

31. Which tag is used to group elements into a logical section in HTML?

32. What does the <em> tag do to the enclosed text?

33. What is the correct way to display a comment in HTML?

35. What happens if an image file specified in the <img> tag’s src attribute is missing?

38. Which tag is used to display a citation in HTML?

34. Which tag is used to define a section of content that is self-contained?

Fill in the Blanks

Exercises

Review Questions

References and Bibliography

Appendices

Appendix A: Meta Tags for Responsive Design

2. What is the purpose of the `<title>` element in an HTML document?

6. What is the purpose of the `<br>` tag in HTML?

8. Which attribute is required in the `<img>` tag to specify the image file?

9. What is the purpose of the `<em>` tag?

11. What is the purpose of the `<code>` tag?

13. The `<pre>` tag is used to…

18. What does the `<img>` tag require to display an image?

19. The `<p>` tag in HTML is used for?

21. What happens when you use the `<br>` tag?

22. What is the difference between `<b>` and `<strong>` tags?

28. What is the purpose of the `alt` attribute in the `<img>` tag?

30. What is the default display property of the `<p>` tag?

32. What does the `<em>` tag do to the enclosed text?

35. What happens if an image file specified in the `<img>` tag’s `src` attribute is missing?