Learn Python, Microsoft 365 and Google Workspace
<!-- 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
<!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>
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.
<!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>
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.
<!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>
<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>
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.
<!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>
Basic Entities
<body> section, write a sentence that includes:
Quotations and Special Symbols
<p>).Non-Breaking Space
) between “100” and “meters”.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 (&),
less than (<), greater than (>),
double quotes ("), and single quotes (').</p>
</body>
</html>
<!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>
<!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>
<!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
blog_post.html.blog_post.html file, do the following:
<!DOCTYPE html>, <html>, <head>, and <body>).<head> section.<body>, add the following elements:
<h1>) with the title of your blog post.<h2>) for the post subtitle.<p>) with a brief introduction to your blog post.<strong> to highlight important text.<em> to emphasize some text.<mark> to highlight text that is important.<blockquote>) to include a quote.<ul> or <ol>) of key points related to your blog topic.<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>
index.html.index.html file, do the following:
<!DOCTYPE html>, <html>, <head>, and <body>.<head> section.<body>, create a heading (<h1>) with your name.<p>) about yourself.<img> tag.<a>) to your favorite website (e.g., Google, Wikipedia).<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>
<ol>)An Ordered List is used when the order of the items matters. It is displayed with numbers or other sequence indicators (e.g., Roman numerals, letters).
<ol>
<li>Wake up</li>
<li>Brush your teeth</li>
<li>Eat breakfast</li>
</ol>
You can change the numbering style using the type attribute.
<ol type="A"> <!-- Uppercase Letters -->
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ol>
type="1" → Default (1, 2, 3, …)type="A" → Uppercase letters (A, B, C, …)type="a" → Lowercase letters (a, b, c, …)type="I" → Uppercase Roman numerals (I, II, III, …)type="i" → Lowercase Roman numerals (i, ii, iii, …)<ul>)An Unordered List is used when the order of the items does not matter. It is displayed with bullet points.
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
You can change the bullet style using the type attribute.
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
type="disc" → Default (●)type="square" → Square bullets (■)type="circle" → Hollow circle (○)<dl>)A Definition List is used for defining terms with their descriptions.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - used for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for styling web pages.</dd>
</dl>
HTML
HyperText Markup Language - used for creating web pages.
CSS
Cascading Style Sheets - used for styling web pages.
<dl> → Definition List container<dt> → Term (word or phrase)<dd> → Description (explanation of the term)| List Type | Purpose | Example |
|—————|———|———|
| Ordered List (<ol>) | Sequence matters | Steps to follow in a recipe |
| Unordered List (<ul>) | Order doesn’t matter | Grocery shopping list |
| Definition List (<dl>) | Provides definitions | Glossary of terms |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Read more: https://html.com/lists/ -->
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
<ol reversed>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ol>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<p>A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of
additional details</p>
<ol start="3">
<li>Step 3</li>
<li>Step 4</li>
</ol>
<p>Notice that we used the <code>start</code> attribute on the <code>ol</code> tag to restart the numbering at "3"
following the break in the list above. We'll use the same technique to properly number Step 5 below.</p>
<ol start="5">
<li>Step 5</li>
</ol>
</body>
</html>
1, A, a, I, i).start and reversed attributes.type="disc", type="square", and type="circle".An HTML table is used to display data in rows and columns. It is created using the <table> tag, and each row is defined using the <tr> (table row) tag. Inside rows, data is placed within <td> (table data) tags, and headings are defined with <th> (table header) tags.
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Row 1, Data 1</td>
<td>Row 1, Data 2</td>
<td>Row 1, Data 3</td>
</tr>
<tr>
<td>Row 2, Data 1</td>
<td>Row 2, Data 2</td>
<td>Row 2, Data 3</td>
</tr>
</table>
<table> → Defines the table.<tr> → Represents a row in the table.<th> → Creates a header cell (bold text by default).<td> → Creates a regular data cell.<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Marks Table</title>
</head>
<body>
<h2>Student Marks</h2>
<table border="1">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Hamza</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Muhammmad</td>
<td>Science</td>
<td>90</td>
</tr>
<tr>
<td>Ali</td>
<td>English</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Product Name, Price, and Quantity.<th>).Name, Age, City.border="1" attribute to make the table visible with borders.Student NameMathScienceEnglishTotal Markscolspan and rowspan in an HTML Tablecolspan (Merging Columns)The colspan attribute is used to merge multiple columns into one.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colspan Example</title>
</head>
<body>
<h2>Colspan Example</h2>
<table border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Emma</td>
<td>14</td>
<td>B</td>
</tr>
</table>
</body>
</html>
colspan:colspan="3".rowspan (Merging Rows)The rowspan attribute is used to merge multiple rows into one.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rowspan Example</title>
</head>
<body>
<h2>Rowspan Example</h2>
<table border="1">
<tr>
<th>Name</th>
<th rowspan="2">Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>Emma</td>
<td>Science</td>
<td>90</td>
</tr>
</table>
</body>
</html>
rowspan:rowspan="2".colspan and rowspancolspan when you want a single cell to stretch across multiple columns.rowspan when you want a single cell to stretch across multiple rows.colspan to merge multiple columns into one.rowspan to merge multiple rows into one.| Day | Start | End | Subject | |———–|——–|——–|———–| | Monday | 9:00 AM | 10:00 AM | Math | | | 10:00 AM | 11:00 AM | Science | | Tuesday | 9:00 AM | 10:00 AM | English (Merged for 2 Rows) | | | 10:00 AM | 11:00 AM | | | Break Time (Spanning all columns) | | Wednesday | 9:00 AM | 10:00 AM | History |
colspan and rowspan Usage:rowspan:
rowspan="2").rowspan="2") since it takes up two time slots.colspan:
colspan="2" for the time slot (Start & End).colspan="4".border="1" attribute adds a border to the table for better visibility.<th>) for column titles.<td>) with student names, subjects, and marks.Answer Key (True/False):
Which HTML element contains metadata like the page title and links to stylesheets?
<body><head><title><meta>Answer: B) <head>
<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
a) <head>
b) <body>
c) <title>
d) <meta>
Answer: b) <body>
a) <para>
b) <p>
c) <paragraph>
d) <pg>
Answer: b) <p>
a) <h6>
b) <h3>
c) <h1>
d) <h5>
Answer: c) <h1>
<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
a) <hr>
b) <br>
c) <line>
d) <hl>
Answer: a) <hr>
<img> tag to specify the image file?a) alt
b) src
c) href
d) title
Answer: b) src
<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
<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
a) <q>
b) <blockquote>
c) <cite>
d) <quote>
Answer: b) <blockquote>
<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
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
a) <h1>
b) <p>
c) <em>
d) <blockquote>
Answer: c) <em>
Here are more multiple-choice questions (MCQs) on HTML elements:
a) <span>
b) <strong>
c) <div>
d) <em>
Answer: c) <div>
a) <b>
b) <strong>
c) <i>
d) <u>
Answer: b) <strong>
<img> tag require to display an image?a) href
b) alt
c) src
d) title
Answer: c) src
<p> tag in HTML is used for?a) Adding paragraphs
b) Creating tables
c) Displaying images
d) Creating lists
Answer: a) Adding paragraphs
<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
<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
a) <p>
b) <pre>
c) <blockquote>
d) <code>
Answer: b) <pre>
a) <div>
b) <span>
c) <section>
d) <article>
Answer: b) <span>
a) <q>
b) <blockquote>
c) <quote>
d) <cite>
Answer: b) <blockquote>
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
a) <p>
b) <div>
c) <br>
d) <span>
Answer: c) <br>
<p> tag?a) Inline
b) Inline-block
c) Block
d) Flex
Answer: c) Block
a) <div>
b) <span>
c) <p>
d) <br>
Answer: a) <div>
<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
a) // This is a comment
b) /* This is a comment */
c) <!-- This is a comment -->
d) <comment>This is a comment</comment>
Answer: c) <!-- This is a comment -->
<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
a) <cite>
b) <blockquote>
c) <q>
d) <cite>
Answer: a) <cite>
a) <div>
b) <section>
c) <article>
d) <header>
Answer: c) <article>
Watch this video for the answer:
Answer key (Mutiple Choice):
Answer Key (Fill in the Blanks):
Beginner: Basic concepts and syntax. Intermediate: More complex problems involving data structures and algorithms. Advanced: Challenging problems that require in-depth understanding and optimization.
Answers to Review Questions:
[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.
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.
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: