Why to study Web Technology ?

Learning Web Technology is crucial for engineering students because it equips them with essential skills to design and develop modern, user-friendly web applications. Understanding web technologies enables them to create interactive and responsive interfaces, integrate with back-end systems, and solve real-world problems. It also opens up diverse career opportunities in a rapidly growing industry, fostering innovation and adaptability in the ever-evolving digital landscape.

Laboratory Experiment - 1

1. Develop the HTML page named as “Myfirstwebpage.html”. Add the following tags with relevant content.
        1. Set the title of the page as “My First Web Page”
        2. Within the body use the following tags:
                a) Moving text = “Basic HTML Tags”
                b) Different heading tags (h1 to h6)
                c) Paragraph
                d) Horizontal line
                e) Line Break
                f) Block Quote
                g) Pre tag 
                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

Popular posts from this blog

Why to study Web Technology ?