🌐 Introduction to HTML:- Step into web development by discovering the basic tags, elements, and page structure of HTML.

📌 What is HTML?

HTML stands for Hyper Text Markup Language
It is the standard markup language for creating web pages
Describes the structure of a Web page
Consists of a series of elements
Elements tell the browser how to display content
Labels pieces of content like headings, paragraphs, links, etc.

🧾 A Simple HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

  </body>
</html>

📘 Example Explained:

<!DOCTYPE html> – defines this document as HTML5
<html> – the root of an HTML page
<head> – meta information about the document
<title> – shown in the browser tab
<body> – visible content goes here
<h1> – a large heading
<p> – a paragraph of text

🧩 What is an HTML Element?

An HTML element is defined by a start tag, content, and an end tag:

<tagname>Content goes here...</tagname>

Example:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Note: Some HTML elements (like <br>) are empty and do not have end tags.

🌍 Web Browsers

Browsers (Chrome, Edge, Firefox, Safari) read HTML documents and render them visually. Tags are not shown — only the structured content.

📐 HTML Page Structure

<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

🛠️ HTML Editors

Web pages can be created with professional editors, but we recommend using a simple editor like Notepad (Windows) or TextEdit (Mac) for learning purposes.

📥 Step 1: Open Notepad (Windows)

Windows 8+: Press Start → Type Notepad
Windows 7 or earlier: Start → Programs → Accessories → Notepad

📄 The <!DOCTYPE> Declaration

The <!DOCTYPE> tells the browser what version of HTML to use. It should appear only once, at the top of the file.

<!DOCTYPE html>

🔠 HTML Headings

HTML headings range from <h1> (most important) to <h6> (least important).

<!DOCTYPE html>
<html>
<body>

  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>

</body>
</html>

📝 HTML Paragraphs & Text Formatting

📄 HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

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

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

🖍️ HTML Text Formatting

HTML provides elements to format text with special meaning:

🔤 Formatting Elements

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - ~~Deleted text~~
<ins> - Inserted text
<sub> - H₂O
<sup> - X²

🧪 Formatting Examples

    <b>This text is bold</b>

    <strong>This text is important!</strong>

    <i>This text is italic</i>

    <em>This text is emphasized</em>

    <small>This is smaller text.</small>

    <p>Do not forget to buy <mark>milk</mark> today.</p>

    <p>My favorite color is <del>blue</del> red.</p>

    <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

    <p>This is <sub>subscripted</sub> text.</p>

    <p>This is <sup>superscripted</sup> text.</p>

🖼️ HTML Images

Use the <img> tag to embed images. It includes required attributes:

src – Specifies image path
alt – Provides alternate text for the image

📌 Example

    <img src="img_chania.jpg" alt="Flowers in Chania">
  

📐 Image Size (Inline CSS)

    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
  

🔧 Image Size (Attributes)

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
  

🔗 HTML Anchor

The HTML <a> (anchor) tag defines a hyperlink that links one page to another, file, location, or any URL. The href attribute is the most important part, as it points to the destination page or address.

🔸 `href` Attribute Syntax

<a href = "..........."> Link Text </a>

Example:

<a href="second.html">Click for Second Page</a>

📋 HTML Lists

HTML lists present information in a structured format. There are 3 types:

Ordered List - <ol>
Unordered List - <ul>
Description List - <dl>

1️⃣ Ordered List

<ol> displays items in a numbered format. Types include: numbers, letters, and Roman numerals.

Example:


      <ol>

        <li>HTML</li>

        <li>Java</li>

        <li>JavaScript</li>

        <li>SQL</li>

      </ol>

Start attribute example:

<ol type="A" start="5"> → Starts with E

Reversed attribute:

<ol reversed> → Descending order (4, 3, 2, 1)

🔘 Unordered List

<ul> displays items with bullets. Bullet styles include:

disc - default
circle
square
none

Example:


      <ul>

        <li>HTML</li>

        <li>Java</li>

        <li>JavaScript</li>

        <li>SQL</li>

      </ul>

📖 Description List

<dl> is used for name-value pairs like glossaries or dictionaries. It uses:

<dt> - term (name)
<dd> - description (definition)

Example:


      <dl>

        <dt>Aries</dt>

        <dd>- One of the 12 horoscope signs</dd>

        <dt>Bingo</dt>

        <dd>- One of my evening snacks</dd>

        <dt>Oracle</dt>

        <dd>- A multinational tech company</dd>

      </dl>

📊 HTML Tables

HTML tables are used to display data in tabular format (rows × columns). The <table> tag is used to create a table. Inside a table:

<tr> defines a row
<th> defines a header cell
<td> defines a data cell

Note: Though tables were previously used for layout design, it is now recommended to use <div> for page layouts and use tables only for tabular data.

🔸 Basic Table Example


      <table>

        <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

        <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

        <tr><td>James</td><td>William</td><td>80</td></tr>

        <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

        <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

      </table>

🧱 Adding Borders to Table

1️⃣ Using the HTML `border` Attribute (Not Recommended)


      <table border="1">

        ...

      </table>

2️⃣ Using CSS `border` Property (Recommended)


      <style>

        table, th, td {

          border: 1px solid black;

        }

      </style>

To collapse borders into a single line:


      <style>

        table, th, td {

          border: 2px solid black;

          border-collapse: collapse;

        }

      </style>

➕ Using `colspan`

Use: To make a cell span across multiple columns.


      <th colspan="2">Mobile No.</th>

➕ Using `rowspan`

Use: To make a cell span across multiple rows.


      <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

🏷️ Table Caption

<caption> is placed just after the <table> tag to define the title of the table.


      <table>

        <caption>Student Records</caption>

        ...

      </table>

🌐 HTML Forms & Form Elements

HTML forms are essential for collecting user input. Whether it’s signing up, logging in, uploading files, or selecting options—forms make it interactive.

📝 1. <form> Element

<form action="submit.php" method="post">
   <!-- Form elements go here -->
</form>

✅ Attributes of <form>:

Attribute	Description
action	URL where form data is sent for processing.
method	HTTP method: `GET` (visible) or `POST` (hidden).
target	Where to display the response.
enctype	Encoding type (e.g., file upload).
autocomplete	Enables or disables autofill.
novalidate	Disables built-in form validation.

✏️ 2. <input> Element

A versatile tag for textboxes, buttons, checkboxes, etc.

<input type="text" name="username" placeholder="Enter Username">

🔧 Common Input Types

Type	Purpose	Example
text	Single-line text	<input type="text">
password	Hidden password field	<input type="password">
email	Email input with validation	<input type="email">
file	File upload	<input type="file">
radio	Single-choice selection	<input type="radio">
checkbox	Multi-choice selection	<input type="checkbox">

🧷 3. <label> Tag

<label for="email">Email:</label>
<input type="email" id="email" name="email">

✅ Best Practice: Always link <label> with form elements via for and id.

🔘 4. Radio Buttons

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

☑️ 5. Checkboxes

<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>

⬇️ 6. Dropdown Menu

<label for="country">Choose Country:</label>
<select id="country" name="country">
  <option value="IN">India</option>
  <option value="US">USA</option>
</select>

📂 7. File Upload

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile">
  <input type="submit">
</form>

🧪 8. Hidden Field

<input type="hidden" name="user_id" value="345">

🔄 9. Submit & Reset Buttons

<input type="submit" value="Submit">
<input type="reset" value="Clear Form">

⚙️ 10. Form Validation Attributes

Attribute	Use
required	Field must be filled
min, max	Range limits
pattern	Regex for format validation
maxlength	Limit input length

<input type="text" name="zip" pattern="[0-9]{5}" required>

🛠️ Example: Full HTML Form

<form action="register.php" method="post">
  <label for="uname">Username:</label>
  <input type="text" id="uname" name="uname" required><br><br>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"><br><br>

  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br><br>

  <label>Hobbies:</label>
  <input type="checkbox" name="hobby" value="music"> Music
  <input type="checkbox" name="hobby" value="sports"> Sports<br><br>

  <label>Country:</label>
  <select name="country">
    <option value="in">India</option>
    <option value="us">USA</option>
  </select><br><br>

  <label>Profile Picture:</label>
  <input type="file" name="pic"><br><br>

  <input type="submit" value="Register">
</form>

🎠 HTML <marquee> Tag

The <marquee> tag is a container element in HTML used to create scrolling text or images within a web page—moving from left to right, right to left, top to bottom, or vice versa.

⚠️ Note: This tag has been deprecated in HTML5 and should be avoided in modern web development.

🛠️ Common Attributes of <marquee>

Attribute	Description
width	Sets marquee width (e.g., `width="200"`)
height	Sets marquee height
direction	Scroll direction: `left`, `right`, `up`, `down`
scrolldelay	Delay between scrolls (in ms)
scrollamount	Speed of scrolling
behavior	Scroll type: `scroll`, `slide`, `alternate`
loop	Number of times to loop
bgcolor	Background color
vspace	Vertical space around marquee
hspace	Horizontal space around marquee

🎬 HTML <video> Tag

The <video> tag allows you to embed video files into your web page. This is a modern and recommended method for playing multimedia content.

📁 Supported Formats

MP4 – Most widely supported format
Ogg
WebM

✅ Tip: Use MP4 for best cross-browser compatibility.

🛠️ Attributes of <video>

Attribute	Description
src	Path to the video file
autoplay	Automatically plays when page loads
controls	Displays play/pause and volume controls
width & height	Specifies the size of the video player
muted	Starts video with no sound

📌 Example of HTML <video> Tag

<video width="320" height="240" controls autoplay muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Introduction to HTML: The Foundation of Every Website

🌐 Introduction to HTML:- Step into web development by discovering the basic tags, elements, and page structure of HTML.

📌 What is HTML?

🧾 A Simple HTML Document

📘 Example Explained:

🧩 What is an HTML Element?

🌍 Web Browsers

📐 HTML Page Structure

🛠️ HTML Editors

📥 Step 1: Open Notepad (Windows)

📄 The <!DOCTYPE> Declaration

🔠 HTML Headings

📝 HTML Paragraphs & Text Formatting

📄 HTML Paragraphs

🖍️ HTML Text Formatting

🔤 Formatting Elements

🧪 Formatting Examples

🖼️ HTML Images

📌 Example

📐 Image Size (Inline CSS)

🔧 Image Size (Attributes)

🔗 HTML Anchor

🔸 href Attribute Syntax

📋 HTML Lists

1️⃣ Ordered List

🔘 Unordered List

📖 Description List

📊 HTML Tables

🔸 Basic Table Example

🧱 Adding Borders to Table

1️⃣ Using the HTML border Attribute (Not Recommended)

2️⃣ Using CSS border Property (Recommended)

➕ Using colspan

➕ Using rowspan

🏷️ Table Caption

🌐 HTML Forms & Form Elements

📝 1. <form> Element

✅ Attributes of <form>:

✏️ 2. <input> Element

🔧 Common Input Types

🧷 3. <label> Tag

🔘 4. Radio Buttons

☑️ 5. Checkboxes

⬇️ 6. Dropdown Menu

📂 7. File Upload

🧪 8. Hidden Field

🔄 9. Submit & Reset Buttons

⚙️ 10. Form Validation Attributes

🛠️ Example: Full HTML Form

🎠 HTML <marquee> Tag

🛠️ Common Attributes of <marquee>

🎬 HTML <video> Tag

📁 Supported Formats

🛠️ Attributes of <video>

📌 Example of HTML <video> Tag

Posted by Ishika

You may like these posts

Post a Comment

0 Comments

Social Plugin

Instagram

Most Popular

Popular Post

Popular Posts

Footer Menu Widget

Contact form

🔸 `href` Attribute Syntax

1️⃣ Using the HTML `border` Attribute (Not Recommended)

2️⃣ Using CSS `border` Property (Recommended)

➕ Using `colspan`

➕ Using `rowspan`