h) Different Logical Style (<b>, <u>, <sub>, <sup>, etc)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Moving Text -->
<marquee>Basic HTML Tags</marquee>
<!-- Different Heading Tags -->
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>
<!-- Paragraph -->
<p>This is a paragraph of text that gives more information about the content on this web page.</p>
<!-- Horizontal Line -->
<hr>
<!-- Line Break -->
<p>This is the first line.<br>This is the second line, which appears after a line break.</p>
<!-- Block Quote -->
<blockquote>
"This is a blockquote. It is used to quote text from another source or to highlight an important section of text."
</blockquote>
<!-- Preformatted Text -->
<pre>
This is a preformatted text block.
Line 1
Line 2
Line 3
</pre>
<!-- Different Logical Styles -->
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <mark>marked</mark> text.</p>
</body>
</html>
Output:
Explanation of the HTML Program for "Myfirstwebpage.html":
This HTML program creates a basic webpage with the title
"My First Web Page." Below is a detailed explanation of each part of
the code:
1. Document Structure
- <!DOCTYPE html>: This declares the document type and
version, which is HTML5 in this case.
- <html lang="en">: The opening
`<html>` tag indicates the beginning of the HTML document. The
`lang="en"` attribute specifies that the language of the document is
English.
2. Head Section
- <head>: This section contains metadata and links
relevant to the document but not directly visible on the page.
- <meta charset="UTF-8">: This sets the
character encoding to UTF-8, which supports all characters and symbols.
- <meta name="viewport"
content="width=device-width, initial-scale=1.0">: This makes the
webpage responsive, adjusting its layout according to the device's screen size.
- <title>My First Web Page</title>: This sets
the title of the webpage, which appears on the browser tab.
3. Body Section
- <body>: This section contains all the content that
will be visible on the webpage.
a) Moving Text
- `<marquee>Basic HTML Tags</marquee>`: This tag
creates a scrolling or moving text effect on the page. The text "Basic
HTML Tags" will move across the screen.
b) Headings (h1 to h6)
- `<h1>` to `<h6>`: These tags create headings
of different sizes. `<h1>` is the largest, and `<h6>` is the
smallest. They are used to structure content hierarchically.
c) Paragraph
- <p>This is a paragraph of text...</p>: The
`<p>` tag is used to define a paragraph. It groups related text content
together.
d) Horizontal Line
- <hr>: This tag inserts a horizontal line, which is
often used to separate content visually.
e) Line Break
- <br>: The `<br>` tag creates a line break,
moving the content following it to the next line without creating a new
paragraph.
f) Block Quote
- <blockquote>...</blockquote>: This tag is used
for quoting text from another source. It typically indents the text to
distinguish it from the main content.
g) Preformatted Text
-<pre>...</pre>: The `<pre>` tag preserves
the formatting of the text within it, including spaces and line breaks,
displaying it in a monospaced font.
h) Logical Styles
- Various tags such as `<b>`, `<i>`,
`<u>`, `<sub>`, `<sup>`, `<em>`, `<strong>`,
`<del>`, `<ins>`, and `<mark>` apply different logical styles
to text:
- `<b>`: Makes
the text bold.
- `<i>`:
Italicizes the text.
- `<u>`:
Underlines the text.
- `<sub>`:
Creates subscript text.
- `<sup>`:
Creates superscript text.
- `<em>`:
Emphasizes the text, usually italicized.
- `<strong>`:
Strongly emphasizes the text, usually bold.
- `<del>`:
Shows text that has been deleted (strikethrough).
- `<ins>`:
Shows text that has been inserted (underlined).
- `<mark>`:
Highlights the text with a background color.
Viva-voce Questions:
1. What is the purpose of the `<!DOCTYPE html>`
declaration?
2. Why do we include the `<meta
charset="UTF-8">` tag in the HTML document?
3. What is the role of the `<title>` tag in an HTML
document?
4. How do the `<h1>` to `<h6>` tags differ in
terms of functionality?
5. What does the `<p>` tag represent in HTML, and why
is it important?
6. How does the `<marquee>` tag function, and is it
still commonly used in modern web development?
7. What is the purpose of the `<hr>` tag in an HTML
page?
8. When would you use the `<br>` tag, and how is it
different from the `<p>` tag?
9. What does the `<blockquote>` tag do, and when
should it be used?
10. Explain the function of the `<pre>` tag in HTML.
How does it affect the display of content?
11. What is the difference between the `<b>` and
`<strong>` tags?
12. How do the `<i>` and `<em>` tags differ in
terms of meaning and usage?
13. What is the significance of using the `<sub>` and
`<sup>` tags in HTML?
14. Can you explain the purpose of the `<u>` tag and
how it affects text formatting?
15. What does the `<del>` tag represent, and how is it
typically used in web content?
16. When would you use the `<ins>` tag in an HTML
document?
17. What is the purpose of the `<mark>` tag, and how
does it visually affect the text?
18. How can you apply a specific color to the border of an
image in HTML/CSS?
19. What is the function of the `alt` attribute in an image
tag, and why is it important for accessibility?
20. What is the significance of separating content into
blocks, like headings, paragraphs, and block quotes, in terms of SEO(Search
Engine Optimization) and accessibility?
-: END :-
Comments
Post a Comment