HTML Home

by
Home
Next

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It uses tags to define the structure and content of a webpage, such as headings, paragraphs, links, images, and multimedia. It works in conjunction with CSS (Cascading Style Sheets) and JavaScript to design and add functionality to websites

Why Learn HTML?

  • Foundation of the Web: Every website relies on HTML for structure.
  • Beginner-Friendly: Easy to learn and understand for beginners.
  • Career Opportunities: Essential for web developers, designers, and digital marketers.
  • Build Your Own Website: Helps you create and customize web pages.

HTML Basics

HTML consists of elements, each defined by tags enclosed in angle brackets (< >). A tag usually comes in pairs: an opening tag and a closing tag. For example:

<p>This is a paragraph.</p>

Here, <p> is the opening tag and </p> is the closing tag.

HTML Document Structure

An HTML document has a standard structure that must be followed. This structure includes the following key elements:

Example of a Basic HTML Page:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML page.</p>
  </body>
</html>

Explanation:

  1. <!DOCTYPE html>: Declares the document as HTML5.
  2. <html>: The root element that wraps all content.
  3. <head>: Contains meta-information about the document, such as the title and links to stylesheets.
  4. <title>: Specifies the title of the webpage displayed in the browser tab.
  5. <body>: Contains all visible content on the page, such as headings, paragraphs and images.

Key HTML Elements

1. Headings

Headings define the titles or subtitles on a webpage. They range from <h1> (largest) to <h6> (smallest).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

2. Paragraphs

Use <p> to define paragraphs.

<p>This is a paragraph in HTML.</p>

3. Links

Links are created using the <a> tag.

<a href="https://www.example.com">Visit Example</a>

4. Images

Add images with the <img> tag.

<img src="image.jpg" alt="Description of the image">

5. Lists

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

HTML Attributes

Attributes provide additional information about HTML elements. They are written inside the opening tag and follow a key-value format.

Example:

<a href="https://www.example.com" target="_blank">Open Example in a New Tab</a>

Common Attributes:

  • href: Specifies the URL for a link.
  • src: Defines the source of an image or media file.
  • alt: Provides alternative text for an image.
  • title: Adds a tooltip when you hover over an element.

Writing Your First HTML Page

Steps:

Open a text editor (e.g., Notepad, VS Code).

Write the following code:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first HTML page.</p>
</body>
</html>

Save the file with a .html extension (e.g., index.html).

Open the file in a browser to view your webpage.

Home
Next

Leave a Comment