HTML Complete Notes

HTML Introduction

HTML First Program:

Hello World!, create a file named index.html and write -

    <html>Hello World!</html>

HTML Basic Layout:

    <html>
    <head>
      <title> Page Title </title>
    </head>
    <body>
      <h1> Heading </h1>
      <p> Paragraph </p>
    </body>
    </html>

HTML Versions:

Parts of HTML:

Tags - Content....

Attributes - <tag attribute="key: value;"> or <tag attribute="value;">

Elements - <tag attribute="key: value;"> Content.... </tag> or Tag + Attribute

Best Editor for HTML:

VS Code
Sublime Text 3
Web Storm IDE
Notepad++

HTML Basics

Document Type Declaration:

<!DOCTYPE html> - Defines HTML 5 version

HTML tag:

<html> - html starts here </html> - html ends here

Head tag:

Contains meta data <head> - head starts here </head> - head ends here

Title tag:

<title> Site Title </title>

Body tag:

Contains Body content <body> - body starts here </body> - body ends here

Headings:

<h1>....</h1> <h2>....</h2> <h3>....</h3> <h4>....</h4> <h5>....</h5> <h6>....</h6>

Paragraph:

<p>....</p>

Link:

<a href="url">....</a>

Line Break:

<br />

Horizontal line:

<hr />

View HTML Source Code:

Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Comments:

    <!-- comment -->

Shortcut - CTRL + /

Blocks Elements:

<h1>----<h6> <p> <div> <hr> <header> <nav> <main> <footer> <section> <article> <ul> <ol> <li> <dl> <dt> <dd> <table> <form>

Inline Elements:

<a> <span> <img> <br> <button> <input> <select> <b> <i> <q> <sub> <sup> <textarea>

HTML Formatting

Physical Tags:

These tags directly impact the visual appearance of the text, altering font styles, sizes, and other visual properties.

<b> - bold

<i> - italic

Logical Tags:

These tags denote the logical or semantic value of the text. They convey meaning without directly affecting the visual appearance.

<strong> - strong

<em> - emphasize

Formatting Tags:

<sub> <sup> <mark> <del> <ins>

Quotation tags:

<q> <blockquote> <cite> <abbr title=""> <address> <bdo dir="ltr"> <bdo dir="rtl">

HTML Table

HTML tables allow web developers to arrange data into rows and columns.

Tags:

<table> - table tag

<tr> - table row tag

<th> - table header tag

<td> - table data tag

Basic Layout:

    <table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
      </tr>
      <tr>
        <td>Arvind</td>
        <td>11223344</td>
        <td>a123@mail.com</td>
      </tr>
      <tr>
        <td>Bhanu</td>
        <td>123123</td>
        <td>b111@mail.com</td>
      </tr>
      <tr>
        <td>Chandan</td>
        <td>12344321</td>
        <td>c121@mail.com</td>
      </tr>
    </table>

Simple Table:

Name	Phone	Email
Arvind	11223344	a123@mail.com
Bhanu	123123	b111@mail.com
Chandan	12344321	c121@mail.com

Rowspan and Colspan:

Rowspan:

<td rowspan="2">....</td>

Colspan:

<td colspan="3">....</td>

HTML List

Tags:

<ul> - Unordered List

<ol> - Ordered List

<li> - List Item

<dl> - Description List

<dt> - Description Title

<dd> - Description Data

Unordered List:

Apple
Banana
Mango
Orange
Grapes

Ordered List:

Lion
Tiger
Leopard
Wolf
Fox
Elephant
Rhino
Bear

Description List:

Noun -

Noun is the name of a person, place or things. e.g. Ram, Book, Kanpur etc.

Pronoun -

The word which used in place of noun is called Pronoun. e.g. He, She, It etc.

Nested List:

Bus
Car
- Sedan
- SUV
  - Off-roader
  - Crossover
- Hatchback
- MUV
Bike
Scooter

HTML Form

Tags:

<form> <label> <input> <select> <option> <textarea>

Form Example:

  <form action="" method="">
    <label for="fullName">Full Name:</label>
    <input type="text" name="fullName" id="" />
    <br />
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" />
    <br />
    <label for="Phone">Phone:</label>
    <input type="tel" name="phone" id="" />
    <br />
    <label for="message">Message:</label>
    <textarea name="message" id=""></textarea>
    <br />
    <input type="submit" value="Submit">
  </form>

Input Types:

  <label for="">Button</label>
  <input type="button" name="" value="Button" id="" />
  <br />
  <label for="">Checkbox</label>
  <input type="checkbox" name="" value="Check" id="" />
  <br>
  <label for="">Color</label>
  <input type="color" name="" id="" />
  <br>
  <label for="">Date</label>
  <input type="date" name="" id="" />
  <br>
  <label for="">Date Time</label>
  <input type="datetime" name="" id="" />
  <br>
  <label for="">Date Time Local</label>
  <input type="datetime-local" name="" id="" />
  <br>
  <label for="">Email</label>
  <input type="email" name="" id="" />
  <br>
  <label for="">File</label>
  <input type="file" name="" id="" />
  <br>
  <label for="">Image</label>
  <input type="image" name="" id="" />
  <br>
  <label for="">Month</label>
  <input type="month" name="" id="" />
  <br>
  <label for="">Number</label>
  <input type="number" name="" id="" />
  <br>
  <label for="">Password</label>
  <input type="password" name="" id="" />
  <br>
  <label for="">Radio</label>
  <input type="radio" name="" id="" />
  <br>
  <label for="">Range</label>
  <input type="range" name="" id="" />
  <br>
  <label for="">Reset</label>
  <input type="reset" name="" id="" />
  <br>
  <label for="">Search</label>
  <input type="search" name="" id="" />
  <br>
  <label for="">Submit</label>
  <input type="submit" name="" id="" />
  <br>
  <label for="">Tel</label>
  <input type="tel" name="" id="" />
  <br>
  <label for="">Text</label>
  <input type="text" name="" id="" />
  <br>
  <label for="">Time</label>
  <input type="time" name="" id="" />
  <br>
  <label for="">URL</label>
  <input type="url" name="" id="" />
  <br>
  <label for="">Week</label>
  <input type="week" name="" id="" />

HTML Media

Image:

Syntax - <img src="" alt="" />

Audio:

Syntax - <audio src="" controls></audio>

Video:

Syntax - <video src="" controls></video>

More Attributes for audio & video:

autoplay

automatically play the media.

muted

automatically mute the media.

loop

play the media in the loop.

Object:

Syntax - <object data=""></object>

Embed:

Syntax - <embed src="" />

Iframe:

Syntax - <iframe src=""></iframe>

Download Link:

Syntax - <a href="" download></a>

HTML IDs and Classes

HTML Style

HTML Script

HTML Advance

Meta Tags Email Link Image map Picture Element iFrame

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
CDNs and sources.txt		CDNs and sources.txt
Example.htm		Example.htm
Example.pdf		Example.pdf
README.md		README.md
index.html		index.html

vatsalsaxena22/HTML

Folders and files

Latest commit

History

Repository files navigation

HTML Complete Notes

HTML Introduction

HTML First Program:

HTML Basic Layout:

HTML Versions:

Parts of HTML:

Best Editor for HTML:

HTML Basics

Document Type Declaration:

HTML tag:

Head tag:

Title tag:

Body tag:

Headings:

Paragraph:

Link:

Line Break:

Horizontal line:

View HTML Source Code:

View HTML Source Code:

Inspect an HTML Element:

Comments:

Blocks Elements:

Inline Elements:

HTML Formatting

Physical Tags:

Logical Tags:

Formatting Tags:

Quotation tags:

HTML Table

Tags:

Basic Layout:

Simple Table:

Rowspan and Colspan:

Rowspan:

Colspan:

HTML List

Tags:

Unordered List:

Ordered List:

Description List:

Nested List:

HTML Form

Tags:

Form Example:

Input Types:

HTML Media

Image:

Audio:

Video:

More Attributes for audio & video:

Object:

Embed:

Iframe:

Download Link:

HTML IDs and Classes

HTML Style

HTML Script

HTML Advance

HTML Grapics

HTML APIs

HTML Full Stack

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages