HTML Complete Notes By Vatsal Saxena

HTML stands for Hyper Text Markup Language.

HTML extention - .html / .htm

Standard Naming Convention - index.html

Source code

1. HTML Introduction

HTML First Program:

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

        <html>Hello World!</html>

HTML Basic layout:

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

HTML Versions:

HTML Versions

Parts of HTML:

Tags - <tag> Content.... </tag>

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

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

Best Editors for HTML:

  1. VS Code
  2. Sublime 3
  3. Web Storm IDE
  4. Notepad++

2. 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>

Heading 1

<h2>....</h2>

Heading 2

<h3>....</h3>

Heading 3

<h4>....</h4>

Heading 4

<h5>....</h5>

Heading 5

<h6>....</h6>

Heading 6

Paragraph:

<p>....</p>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, nisi?

Link:

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

This is a link

Line Break:

<br />

Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Amet, fugit.

Horizontal line:

<hr />

View HTML Source Code:

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>

3. 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> - Abcd Subscript

<sup> - Abcd Superscript

<mark> - marked

<del> - deleted

<ins> - inserted

Quotation tags:

<q> - Abcd Quotes

<blockquote> - Abcd

Blockquotes

<cite> - Abcd Cite

<abbr title=""> - Abcd Abbreviation

<address> - Abcd

Address

<bdo dir="ltr"> - Abcd Address

<bdo dir="rtl"> - Abcd Address

4. 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>

Example:

Name Jill
Phone 555-1234
555-8745
Colspan:
<td colspan="3">....</td>

Example:

Name Age
Jill Smith 43
Eve Jackson 57

5. HTML List

Tags:

<ul> - Unordered List

<ol> - Ordered List

<li> - List Item

<dl> - Description List

<dt> - Description Title

<dd> - Description Data

Unordered List:

Ordered List:

  1. Lion
  2. Tiger
  3. Leopard
  4. Wolf
  5. Fox
  6. Elephant
  7. Rhino
  8. 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:

6. HTML Form

Tags:

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

Form Example:





Input Types:






















7. HTML Media

Images:

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

Example - Image Example

Audio:

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

Example -

Video:

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

Example -

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>

Example - .pdf file

Embed:

Syntax - <embed src="" />

Example - .txt file

Iframe:

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

Example - for web page

Download Link:

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

Example - Download

8. HTML Classes & IDs

Classes:

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.

Syntax - <p class=""></p>

CSS 
        .className{
          // CSS
        }
JavaScript 
        document.getElementsByClassName("className")
        // js

IDs:

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

Syntax - <p id=""></p>

CSS 
        #IDName{
          // css
        }
JavaScript 
        document.getElementById("IDName")
        // js

9. HTML with CSS

How to link CSS with HTML?

There are three ways to link css to a html file -

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS:

            <h1 style="color: red; background-color: blue;"> Heading </h1>

Internal CSS:

        <!DOCTYPE html>
        <html>
          <head>
            <title> Page Title </title>
            <style>
              h1{
                color: red;
                background-color: blue;
              }
            </style>
          </head>
          
          <body>
            <h1> Heading </h1>
          </body>
        </html>

External CSS:

        <!DOCTYPE html>
        <html>
          <head>
            <title> Page Title </title>
            <link rel="stylesheet" href="style.css" />
          </head>
          
          <body>
            <h1> Heading </h1>
          </body>
        </html>
style.css 
        h1{
          color: red;
          background-color: blue;
        }