» HTML Documentation With Only HTML For Beginners«

HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web pages. HTML describes the structure of a Web page. The elements tell the browser how to display the content.

HTML Editors

To create beautiful webpages you need to use a code editor. For example: Notepad, which is simple text editor easily available on your pc and is a good way to learn HTML. But I recommend using VS Code editor. It is free, built on open source and runs everywhere. Below are the steps to download and make folders in vs code:

VS Code editor link «

Installation Process and the use of vs code on windows → CLICK ME

HTML boilerplate

<!DOCTYPE html>:- A doctype tells the browser what version of HTML the page is written in.

<html lang>:- The html tag is the top level element of the HTML file. You will nest the head and body tags inside of it. We will learn about tags in another section.The lang attribute inside the opening html tag sets the language for the page.

<head>:- The head tags contain information that is processed by machines. Inside the head tags, you will nest metadata which is data that describes the document to the machine. For beginners you dont have to worry much about these tags inside the head tag.

<title>:- The title tag is the title for the web page. This text is shown in the browser's tab.

<body>:- The body tag is the container for you to finally write your code for your

HTML tags and Elements

HTML is defined by a starting <tag>, some content in the middle and end with a closing <tag>.

HTML elements can be nested. This means elements can contain other elements. For example:-

HTML tags are not case sensitive. You can write the tags both in uppercase and in lowercase. But better to use lowercase (it's W3C recommended).

HTML Attributes

HTML attributes provides some additional information about the element. All the elements can have attributes.

Attributes are always declared in the starting tag. Attributes are written in [name = "value"] pair.

The href Attribute:- href attribute is used in anchor tag which we will discuss later in another section. The href attribute specifies the URL of the page the link goes to:

The src Attribute:- src attribute is used with img tag. The src attribute specifies the path to the image to be displayed. There are two ways to specify the URL in the src attribute:-

Absolute URL:-Links to an external image that is hosted on another website.

Relative URL:-Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page.

The width and height Attributes:-The img tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

The alt Attribute:-The alt attribute in the img tag specifies an alternate text for an image, if the image for some reason cannot be displayed due to slow internet connection, or an error in src file etc.

HTML Headings

HTML headings are the titles or the subtitles you want to display on your webpage. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading and <h6> defines the least important heading. These tags are also different from each other by sizes.

OUTPUT:-

HTML Paragraphs

A paragraph is a block of text. It always starts on a new line.

HTML Horizontal Rules

<hr> tag defines a break in an html page, mostly displayed by a horizontal rule.

OUTPUT:-

HTML Line Breaks

The HTML <br> element defines a line break. If you want a new line withouhout starting a new paragraph then use <br> tag.

HTML Text Formatting

Formatting elements were designed to display special types of texts. There are many tags you can use to format your text:-

OUTPUT:-

HTML Comments

HTML comments are used in HTMl docs for many reasons. It is used to place notifications and reminders in your code. Comments can be used to hide content, while debugging html, because you can commnet out HTML lines of code, one at a time, to search for the errors. Comments are not displayed in the browser.

HTML Links

Links are found in every web pages. You can click on a link and jump to another document.

HTML Links - Hyperlinks:- HTML links are Hyperlinks. HTML <a> tag defines a hyperlink.

The most important attribute of <a> element is href attribute, which holds the link's description (The URL address).

Links - The target Attribute:- By default, the linked page will be displayed in the current browser window. To change this type, you must specify another attribute for the link.
The target attribute specifies where to open the linked document.
There are many values in the target attribute but at a time we can only use only one value:

<_self> :- This is the default value. The linked document will open in the same window. It is not necessary to mention the target in the link when it is a _self.

<_blank> :- Opens the document in a new window or a tab.

<_parent> :- Opens the document in the parent frame.

<_top> :- Opens the document in the full body of the window.

HTML Links - Image as a Link:- To use an image as a link, just put the <img> tag inside the <a> tag:

Link to an Email Address:- Use mailto: inside the href attribute to create a link that opens the user's email (to let them send a new email):

HTML Images

The <img> tag is used to embed an image in a web page.
The <img> tag has attributes:-

src - Specifies the path to the image.

alt - Specifies an alternate text for the image.

HTML Favicon

A favicon is a small image displayed to the left side, next to the title in the browser tab.
To add favicon to your Webpage, best to create a folder in the root directory and name the folder as 'images' and save your favicon image in this folder.
Next, add a link element to your 'index.html', after the title element:-

OUTPUT:-

HTML Tables

HTML tables allow us to arrange data into rows and columns.
There are several table tags which are used to make a table.

<table>:- Defines a table.

<th>:- Defines a header cell in a table.

<tr>:- Defines a row in a table. tr stands for Table Row.

<td>:- Defines a cell in a table. td stands for Table Data.

<caption>:- Defines a table caption.

<colgroup>:- Specifies a group of one or more columns in a table for formatting.

<col>:- Specifies column properties for each column within a colgroup element.

<thead>:- Group the header content in the table.

<tbody>:- Groups the body content in a table.

<tfoot>:- Groups the footer content in a table.

Example of some UDEMY Courses and their price in a tabular form:-

OUTPUT:-

COURSE	PRICE	Instructors
The Web Developer Bootcamp 2022	₹389	Colt Steele
100 Days of Code: The Complete Python Pro Bootcamp for 2022	₹389	Dr. Angela Yu
The Complete Web Developer in 2022: Zero to Mastery	₹389	Andrei Neagoie
Modern JavaScript From The Beginning	₹389	Brad Traversy

HTML Entities

Entities are used in place of reserved characters in HTML.
Some of the characters are reserved in HTML. Suppose you want to use (<) or (>) signs in your code, the browser might mix them with tags.
There are two ways to write character entities:-
(&entity_name; OR &#entity_number;)

Link for some useful HTML Character Entities:-

HTML ENTITY CODE

HTML Lists

Lists allow us to group a set of related items in lists.

Lists of HTML list tags:-

<ul>:- Defines an unordered list.

<ol>:- Defines an ordered list.

<li>:- Defines a list item.

<dl>:- Defines a description list.

<dt>:- Defines the term in a description list.

<dd>:- describes the term in a description list.

Unordered HTML List:- An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (⚫) by default:

OUTPUT:-

Ordered HTML List:- An ordered list starts with <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default.
This marked pattern can be changed with the type attribute.

Different types of ordered lists are:

Ordered list and the use of type attribute in HTML:

» » IMPORTANT NOTE:- <ul> tag and <ol> tag must only directly contain <li> tag, <script> tag or template elements

⚫ For <dl>, <dt>, <dd> tag click this link ---> CLICK HERE

HTML Block and Inline Elements

Every HTML element has a default display value. There are two display values:- block & inline.

Block-level Elements:- A block-level element always starts on a new line. It always takes up the full width available from left to right.
Here are the block-level elements in HTML:-

inline Elements:- An inline element does not start on a new line. It always takes up as much width as necessary.
Here are the inline elements in HTML:-

The div Element:- The div element is used as a container for other html elements such as - <img>, <p>, <h1> etc. <div> is a block level element.

The span Element:- The <span> element is an inline container used to mark up an important part of a text, or a part of a document.

Most used Block and Inline element example with output:-

HTML Semantic Elements

Sementic element simply means an element with some meaning. Suppose, we use div container to store elements every time but at some point of time it will become meaningless. Instead we can use some meaningful elements so that the elements clearly shows its meaning to both browser and the developer.

Semantic Elements in HTML:- In HTML there are some sementic elements that can be used to define certain parts of a web page. They are:-

<article>:- Defines independent, self-contained content.

<aside>:- Defines content aside from the page content

<details>:- Defines additional details that the user can view or hide

<figure>:- Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figcaption>:- Defines a caption for a figure element.

<footer>:- Defines a footer for a document or section

<header>:- Specifies a header for a document or section

<main>:- Specifies the main content of a document

<mark>:- Defines marked/highlighted text

<nav>:- Defines the navigation links

<section>:- Defines a section in a document

<summary>:- Defines a visible heading for a details element

<time>:- Defines a date/time

→ NOTE:- For Detailed Explanation On Sementic HTML refer to this link:- SEMANTIC HTML

<HTML Forms>

HTML <form> element represents a document section containing some interactive controls for submitting informations. The form collects user input and sends to the server for processing.
Form is a container that contains input elements such as checkbox,radio button, number, submit button, text, email etc.

Syntax of HTML Form:-

Types of HTML form elements are:-

<label> :- It defines label or the name for the form element.

<input> :- It is used to get input data from the form. This data can be of various types such as text, password, email, etc by changing the types.

<button> :- It is a clickable button to control other elements or to execute a functionality.

<select> :- It is used to create a drop-down list.

<textarea> :- It is used to get long text content such as a message.

<fieldset> :- It is used to draw a box around other form elements and group the related data.

<legend> :- It defines caption for fieldset elements.

<option> :- It is used to define options in a drop-down list.

These are the most important ones we will be studying in this section.

The <label> Element :- The element defines a label or name for the form element. The <label> element helps the user who have difficulty clicking on the small regions such as (checkbox or radio buttons) - because when the user clicks the text within the label element, it toggles the radio button or the checkbox.

[IMPORTANT]:- The for attribute of the <label> should be equal to the id attribute of the <input> element to bind them together.

The <input> Element :- This is the most used form element. This element can be displayed in several ways, depending on the type attribute.

<select> :- This element defines a drop-down list.

<option> :- This element defines an option that can be selected. The first item in the drop down list is selected by default. To define a pre-selected option, add the selected attribute to the option.

<button> :- Submit button is used to submit the details of the form.

<textarea> :- It is used to add comments or write some reviews. It contains unlimited number of characters. The size of the text area is given by the <rows> and <cols> attribites.

The <fieldset> and <legend> Elements :- The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

Radio Button in HTML Form :- We use the <input> tag to create radio buttons.
[NOTE] :- Radio button must share the same name to be treated as a group.
Here in radio button, the value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on 'submit' to identify which radio button that was selected.

Checkbox in an HTML Form :- We use the <input> tag to create checkbox. It is a square box to tick to activate this. It used to choose more options at a time.

HTML <input type="range"> :- This defines a control for entering a number. This is something like a slider control. The default range is 0 To 100. However, you can set restrictions on what numbers are accepted with the attributes below.

max - specifies the maximum value allowed

min - specifies the minimum value allowed

step - specifies the legal number intervals

value - Specifies the default value

Example of a FORM :-

OUTPUT:-

FORM Validation In HTML

Form validation is a process where the form checks if the information provided by the user is correct or not. If the given information is incorrect the form will alert the user that they messed up and need to fix something to proceed, if not then the form will be validated and the user will be able to continue with their form registration process.

Basics of form validation:-
The first thing that is important to know for form validation is the required attribute.
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form.
[NOTE]:- The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

OUTPUT:-

To know more about HTML prefer these links :-
1. W3Schools - CLICK HERE 2. MDN Web Docs - CLICLK HERE

HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web pages. HTML describes the structure of a Web page. The elements tell the browser how to display the content.

HTML Editors

HTML boilerplate

HTML tags and Elements

HTML Attributes

HTML Headings

HTML headings are the titles or the subtitles you want to display on your webpage. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading and <h6> defines the least important heading. These tags are also different from each other by sizes.

OUTPUT:-

HTML Paragraphs

A paragraph is a block of text. It always starts on a new line.

HTML Horizontal Rules

<hr> tag defines a break in an html page, mostly displayed by a horizontal rule.

OUTPUT:-

HTML Line Breaks

The HTML <br> element defines a line break. If you want a new line withouhout starting a new paragraph then use <br> tag.

HTML Text Formatting

Formatting elements were designed to display special types of texts. There are many tags you can use to format your text:-

OUTPUT:-

HTML Comments

HTML Links

HTML Images

The <img> tag is used to embed an image in a web page. The <img> tag has attributes:- src - Specifies the path to the image. alt - Specifies an alternate text for the image.

HTML Favicon

OUTPUT:-

HTML Tables

OUTPUT:-

HTML Entities

HTML Lists

OUTPUT:-

» » IMPORTANT NOTE:- <ul> tag and <ol> tag must only directly contain <li> tag, <script> tag or template elements

⚫ For <dl>, <dt>, <dd> tag click this link ---> CLICK HERE

HTML Block and Inline Elements

Most used Block and Inline element example with output:-

HTML Semantic Elements

→ NOTE:- For Detailed Explanation On Sementic HTML refer to this link:- SEMANTIC HTML

<HTML Forms>

Syntax of HTML Form:-

These are the most important ones we will be studying in this section.

Example of a FORM :-

OUTPUT:-

FORM Validation In HTML

OUTPUT:-

To know more about HTML prefer these links :- 1. W3Schools - CLICK HERE 2. MDN Web Docs - CLICLK HERE

The <img> tag is used to embed an image in a web page.
The <img> tag has attributes:-

src - Specifies the path to the image.

alt - Specifies an alternate text for the image.

To know more about HTML prefer these links :-
1. W3Schools - CLICK HERE 2. MDN Web Docs - CLICLK HERE