Lecture 2:Introduction to Hyper Text Markup Language(HTML)

HTML stands for HyperText Markup Language. It is the standard language used to create and structure the content of a webpage.

HyperText: This refers to the ability to create links that connect web pages to one another, making the web a connected "web" of information.

Markup Language: This means you use "tags" to surround your content, giving that content meaning and structure. You are "marking up" a plain text document.

HTML Basics

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on web pages.

Html Boiler Plate code and Elaborate it

Every HTML document starts with a boilerplate code. This ensures the browser understands it is an HTML5 document and provides a proper structure for the page.

1. Basic Boilerplate

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Output:

Hello, World!

This is my first web page.

2. Explanation of Boilerplate Parts

<!doctype html> → Declares that the page is written in HTML5.
<html lang="en"> → Root element of the page; lang="en" sets the language to English.
<head> → Contains metadata (info about the page, not shown directly).

<meta charset="utf-8"> → Ensures text is encoded properly (supports all characters).
<title> → Sets the title shown on the browser tab.

<body> → Contains the visible content (headings, paragraphs, images, links, etc.).

3. Expanded Boilerplate (with more tags)

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>

  <main>
    <p>This is the main content area.</p>
  </main>

  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

Output:

Welcome to My Website

This is the main content area.

Key Notes

Always start with <!doctype html> for HTML5.
<meta name="viewport"> makes the website mobile-friendly.
The <head> is for metadata, styles, and scripts.
The <body> holds the actual visible content.

Boiler Plate Code in Vs code:

HTMl Basic Tags are:

1.Heading Tag

Headings are defined with the <h1> to <h6> tags.

Example:
heading photo

2.Paragraph Tag

Paragraphs are defined with the <p> tag.

This is a paragraph of text displayed using the paragraph tag.

Example:

Anchor Tag (<a>) - Creating Links

The <a> tag (anchor tag) is used to create hyperlinks in HTML. Links allow users to navigate between pages, jump to sections, or connect to external resources.

1. Basic Syntax

<a href="https://www.google.com">Visit Google</a>

2. Open in a New Tab (target)

<a href="https://www.google.com" target="_blank">Visit Google in new tab</a>

3. Add a Tooltip (title)

<a href="https://www.google.com" title="Go to Google">Google with tooltip</a>

4. Linking to Another Page of the Same Website

<a href="about.html">About Us</a>

5. Linking to a Section on the Same Page

<a href="#contact">Go to Contact Section</a>


<!-- Later in the page -->
<h2 id="contact">Contact Us</h2>

6. Email Link

<a href="mailto:info@example.com">Send Email</a>

7. Telephone Link

<a href="tel:+1234567890">Call Us</a>

8. Download Link

<a href="notes.pdf" download>Download Notes</a>

Note

Use meaningful link text (e.g., “Visit Contact Page” instead of “Click here”).
External links often use target="_blank".
Always provide a title when useful for accessibility.

Example : Visit Google

Image Element (<img>)

The <img> tag is used to display images in an HTML document. It is an empty tag (no closing tag).

1. Basic Example

<img src="https://via.placeholder.com/150" alt="Example Image">

Example of Image Element:

2. Adding Width and Height

<img src="https://via.placeholder.com/300" alt="Resized Image" width="200" height="100">

3. Using Title (Tooltip)

title → provides extra information that shows up as a tooltip when the user hovers over the element.

<img src="https://via.placeholder.com/150" alt="Image with tooltip" title="This is a tooltip">

Example:

4. Relative Path (Image in Same Folder)

<img src="myphoto.jpg" alt="My Photo">

5. Linking an Image

<a href="https://www.example.com">
<img src="https://via.placeholder.com/150" alt="Clickable Image">
</a>

Example:

6. Best Practices

Always use the alt attribute for accessibility and SEO.
Use proper image sizes to reduce loading time.
Prefer modern formats like .webp for optimization.