HTML Tutorial


Module 1: Introduction to HTML

1.1 : What is HTML?

  • HTML stands for HyperText Markup Language.

  • It is the standard language used to create web pages and web applications.

  • HTML structures the content using tags (elements), such as <h1>, <p>, <img>, etc.

  • It tells the browser how to display text, images, links, and other content.

Example:

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

1.2 : History and Versions of HTML

  • Developed by Tim Berners-Lee in 1991.

  • Evolved from HTML 1.0 to HTML5.

  • HTML5 is the latest version, supporting audio, video, canvas, and semantic elements.

HTML Versions:

  • HTML 1.0 – Basic structure

  • HTML 4.01 – More features (1999)

  • XHTML – Stricter rules

  • HTML5 – Rich media and better structure (2014+)


1.3 : HTML vs. Other Web Technologies

Technology Purpose
HTML             Structure/content of page
CSS             Styling/appearance
JavaScript             Behavior/interactivity


HTML is the skeleton, CSS is the skin, and JavaScript is the muscle of web pages.


1.4 : Setting Up Your Environment

To start writing HTML, you need:

  • A text editor (e.g., VS Code, Sublime Text, Notepad++)

  • A web browser (e.g., Chrome, Firefox)

Steps:

  1. Open VS Code.

  2. Create a new file: index.html

  3. Write basic HTML code.

  4. Open the file in your browser to see the output.


1.5 : Your First HTML Page

Here’s what a basic HTML page looks like:

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

Explanation:

  • <!DOCTYPE html> – Declares the HTML5 document type.

  • <html> – Root element.

  • <head> – Metadata (title, links, etc.).

  • <title> – Title shown in the browser tab.

  • <body> – Content displayed on the page.



Module 2: HTML Basics

2.1 Headings and Paragraphs

Headings:

        HTML provides 6 heading tags: <h1> to <h6>.
    <h1> is the most important (largest), <h6> is the least (smallest).

Example:

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


Paragraphs:

        Use <p> to define a paragraph.

Example:

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

2.2 Line Breaks and Horizontal Lines

Line Break:

        Use <br> to break a line without starting a new paragraph.

Example:

        <p>This is line one.<br>This is line two.</p>


Horizontal Line:

            Use <hr> to add a thematic break (horizontal line).

Example:

       <p>Section above<hr>Section below</p>


2.3 Text Formatting Tags

  • <b> – Bold

  • <i> – Italic

  • <u> – Underline

  • <strong> – Important (bold)

  • <em> – Emphasized (italic)

  • <mark> – Highlighted text

  • <small> – Smaller text

  • <del> – Deleted text

  • <ins> – Inserted text

Example:

<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u></p>
<p><mark>Highlighted</mark> and <del>Deleted</del></p>


2.4 Lists

Ordered List (numbered):

    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>

Unordered List (bullets):

    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>

Description List:

    <dl>
      <dt>HTML</dt>
      <dd>Standard markup language for creating web pages.</dd>
      <dt>CSS</dt>
      <dd>Styles the content of the web page.</dd>
    </dl>


2.5 Links and Anchors

Creating a hyperlink:

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

  • href: URL of the link

  • target="_blank": Opens link in a new tab


Internal Page Links:

<a href="#section2">Go to Section 2</a>

<h2 id="section2">This is Section 2</h2>


2.6 Images in HTML

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

  • src: Image URL or file path

  • alt: Alternative text for accessibility

  • width/height: Optional sizingAssignment for Practice



Assignment for Practice

Task:

Create a simple "About Me" HTML page using everything you've learned in this module.

✅ Requirements:

  1. Use at least 3 different headings (<h1>, <h2>, <h3>)

  2. Write 2-3 paragraphs about yourself.

  3. Use text formatting: bold, italic, underline, etc.

  4. Add an ordered list of your skills.

  5. Add an unordered list of your hobbies.

  6. Insert a horizontal line and a line break.

  7. Add a link to your favorite website (open in new tab).

  8. Display your profile picture using the <img> tag.

📁 File Name: about-me.html

Comments

Post a Comment

Popular posts from this blog

Java Script - Table of Content

 Table of Content 1. Introduction to JavaScript What is JavaScript? Evolution of JavaScript How JavaScript Works in Browsers Setting Up the Environment: Choosing a Code Editor (VS Code, Sublime, etc.) Running JavaScript in the Browser Console Setting Up Live Servers 2. JavaScript Fundamentals 2.1 Variables and Data Types Declaring Variables (var, let, const) Primitive Data Types (String, Number, Boolean, Null, Undefined, Symbol, BigInt) Type Conversion and Coercion 2.2 Operators Arithmetic Operators Logical and Comparison Operators Assignment Operators Conditional (Ternary) Operator 2.3 Control Flow Conditional Statements (if, else if, else, switch) Loops (for, while, do-while) Break and Continue 2.4 Functions Function Declaration and Invocation Parameters and Arguments Function Expressions and Arrow Functions Default Parameters 3. Working with the DOM 3.1 DOM Basics What is the DOM? Selecting Elements ( getElementById , querySelector , etc.) Modifyin...
Read more

Constraints in MySQL

Constraints in MySQL are rules enforced on data in a database to ensure its accuracy, integrity, and consistency. They are applied at the table column or table level to restrict the type of data that can be stored. Constraints help prevent invalid data entry and maintain relational database integrity. Types of Constraints in MySQL 1. NOT NULL Constraint Ensures that a column cannot have a NULL value. Used to ensure that important fields always contain data. Syntax: CREATE TABLE students ( id INT NOT NULL, name VARCHAR(50) NOT NULL ); Example: If you try to insert a record with a NULL value in the name column, it will result in an error: INSERT INTO students (id, name) VALUES (1, NULL); -- This will throw an error 2. UNIQUE Constraint Ensures that all the values in a column are distinct (no duplicates allowed). Multiple UNIQUE constraints can be applied to a table. Syntax: CREATE TABLE employees ( emp_id INT UNIQUE, email VARCHAR(100) UNIQUE ); E...
Read more