Chapter - 1 ⇒ Basic

Terminologies Related to Web

Technology

Web : →
The World Wide Web (WWW) is often called as the Web.
The web is a system of interconnected webpages and information
that can be accessed using the internet.
2. WWW (World Wide Web) : →
WWW stands for World Wide Web and is commonly known as the
Web.
The world wide web is another way to describe the internet, which is
a network of computers are connected
3. Web Browser : →
Browser is an application used to communicate with websites.
Only browsers can understand web languages.

4. URL : →
A URL stands for ‘Uniform Resource Locator’.
A URL is a type of uniform resource identifier and is an address of
resource on the world wide web and the protocol used to access it.

5. Webpage : →
A web page is a single hypertext document available on World Wide
Web (WWW).
A webpage may contain text, links for other pages, graphics, videos,
etc.

6. Website : →
It is a collection of multiple webpages is called as website.
Website contains more than one web page.
7. Web Application : →
Web application is the collection of multiple web pages as well as
the user
interact with that web pages.
. History of HTML
Tim Berners Lee is known as the father of HTML.
The first available description of HTML was a document called as
“HTML
Tags” proposed by Tim late 1991.
The latest version of HTML is HTML5.
Versions of HTML
1. HTML 1.0 ⇒ (1993)
The first version of HTML was 1.0 which was barebones version of
HTML language and it was released in 1993.
2. HTML 2.0 ⇒ (1995)
This was the first next version which was released in 1995.
HTML 2.0 was able to to support extra features such as
form-based simple text boxes and buttons.
3. HTML 3.2 ⇒
(1997)
HTML 3.2 version was published in early 1997.
This version was capable of creating tables and upgraded form
elements like more interactive & dynamic for user.
4. HTML 4.01 ⇒ (1999)
HTML 4.01 version was released in 1999.
In this version they provide the CSS file linking
with the help of <link> tag.
They introduced some new tags like <fieldset> , <header> , <footer> ,
<legend> , etc

5. HTML 5 ⇒ (2013)
HTML 5 is the newest version of Hyper Text Markup Language.
The first draft of this version was announced in January 2013.
They introduced multimedia tags like <audio> , <video> tags.

Chapter - 3 ⇒ HTML 5 Basics

1. Introduction about HTML
HTML stands for Hyper Text Markup Language.
HTML is used for developing structure of webpage.
HTML file has extension
.html / .htm
HTML files can be created by using simple text editors.
2. Structure of HTML
An HTML document is mainly divided into two parts:
head : This contains the information about the HTML document
including
the title of the page, meta data, etc.
body : This contains everything you want to display on the web
page.

3. Meta Tags
Meta Data : The data about the data is called as Meta Data.
Meta tags defined the metadata about the HTML document.
Metadata is used by the browsers for how to display the content or
reload
the page.
4. HTML Tags
In HTML elements are represented by using tags.
The predefined keywords are surrounded by
‘< >’
is known as Tag.
Tags are used to define different types of elements.
5. Types of Tags
There are two types of tags:
1. Paired Tags / Container Tags
2. Unpaired Tags / Non-container Tags / Self-closing Tags
1. Paired Tags / Container Tags ⇒
HTML tags which contains opening tags along with its closing tags
are known as paired tags.
It is also called as container tags because it capable to contain the
other HTML elements inside it
Example ⇒
<h1>………</h1> , <div>………</div> , etc.
2. Unpaired Tags / Non-container Tags ⇒
HTML tags which does not need closing tag is known as Unpaired
tags.
It is also called as Non-container tags because they are not capable
to contain any element inside it.
Example ⇒ <br> , <hr> , <img> , etc.
. Heading Tags, Paragraph Tags
Heading Tags ⇒
HTML heading tags are used to provide to use headings to webpage.
Heading tags are
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> .
Heading tags are paired type of tags.
<h1> tag displays heading in bigger font-size whereas
<h6> in lower font size.
Paragraph Tags ⇒
To provide paragraphs in web page we have to use paragraph tag.
Example ⇒ <p> This is a paragraph </p>
We can use multiple paragraph tags to provide paragraphs in web
page.
Paragraph tag is a paired tag.
. HTML Elements
A tag which has opening and its closing tag along with content is
completely known as HTML element.
We can provide elements inside another element.
Example ⇒ <h1> My Webpage </h1>
Elements which does not have content are known as
empty elementsor void elements .
Example ⇒ <br>, <hr>, etc.
Types of Elements
There are 2 types of elements in HTML:
1. Block Level Element
2. Inline Level Element
1. Block Level Element ⇒
An element which can acquire, entire width of its parent container
along with we can modify its height and width are known as block
level elements.
Block level always start with new line and takes the full width of
parent container.
Height and width can be changed for block level elements.
Example ⇒ <div>, <h1>…..<h6>, <p>, <table>, <tfoot>,
<header>,
<footer>, <section>, <ol>, <ul>, <dd>, <dl>, <dt>, etc.
2. Inline Level Element ⇒
Inline elements are those elements which takes exact width of
content itself.
These elements does not start with new line and takes width as per
requirement.
Example ⇒ <a>, <span>, <img>, <small>, <strong>, <sub>,
<sup>,
<b> , <textarea>, <input>, <label>, <button>, etc.
Attributes
The additional information about the tag is called as Attributes.
We can change properties of tag like color, background-color, size
vice versa.
Attributes must be provided into opening tag.
Some common attributes are as ⇒ name, id, class, style
This attributes are called as fundamental attributes.
Following are the 4 core attributes ⇒
1. id
2. class
3. style
4. title

Formatting Tags
The formatting tags are used to format the text for better look and
feel.
Following are the list of Formatting Tags
1. <b> ⇒ To bold the text we have to use <b>……</b>
tag. This is a physical tag.
2. <strong> ⇒ To provide the importance to the text we have to use
<strong>………</strong>tag. This is a logical tag.
3. <i> ⇒ To make text in italic style we have to use
<i>……</i> tag. This is a physical tag.

4. <em> ⇒ It is used to emphasize the text.

5. <mark> ⇒ It is used to highlight the text.
6. <u>⇒ To make text underline we have to use
<u>……</u> tag.
7. <ins> ⇒ If we have to insert the text in existing document we have
to use <ins>…</ins>tag.
8. <strike> ⇒ It is used to define strikethrough text.
9. <del> ⇒ It is used to define deleted text.
10. <sub>⇒ It defines the subscript tag. Subscript text appears half of
character below the normal line and in smaller font.
11. <sup> ⇒ It defines the superscript tag. Superscript text appears
half of character above the normal line and in smaller font.

Semantic Tags
Semantic tags adds meaning to our HTML.
They tell both the browser and the developer what kind of content is
being
presented.
Here are the some of the key semantic tags you must know:
1. <article>
2. <aside>
3. <datalist>
4. <figcaption>
5. <figure>
6. <header>
7. <footer>
8. <main>
9. <mark>
10. <section>

HTML List
. HTML List
HTML lists are used to specify list of information or items
. Types of List
There are 3 different types of HTML lists:
1. Ordered List (ol)
2. Unordered List (ul)
3. Descriptive List (dl)

. Ordered List (ol)

The list which can follow the order is known as ordered list.
In ordered list, all the list items are marked with numbers by default.
So, it is also known as “ Numbered List ”.
We can change the order with the help of
Type attribute
Syntax ⇒
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Tailwind CSS</li>
<li>React JS</li>
</ol>
Ordered List can be (1, A, a, I, i)
If we want to reverse the order, for that we have to use
reversed
attribute.
Example ⇒
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Tailwind CSS</li>
<li>React JS</li>
</ol>
. Unordered List (ul)
A list which cannot follow any order is called as Unordered List.
Default type for unordered list is disc.
So, we can also called as “
Bulleted List
” for unordered list.
And we can change the type by using type attribute.
(square, circle, disc, none)
Unordered list provided by using <ul> tag.
To provide list items we have to use <li> tag.
Syntax ⇒
<ul>
<li>Burger</li>
<li>Fries</li>
<li>Coke</li>
</ul>
Description List (dl)
There is rarely used list which is descriptive list.
It is used to list out items with description.
To provide descriptive list we have to use <dl> tag.
Syntax ⇒
<dl>
<dt>Java</dt>
<dd>Java is a high level programming language</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>
Here,
<dl>
stands for descriptive list.
<dt>
stands for description term or title.
<dd>
stands for description data
⇒ Anchor Tag and Hyperlinks
1. HTML Anchor Tag
The HTML anchor tag defines a hyperlink that links one page to
another page.
Hyperlinks are used to join multiple webpages.
To provide hyperlinks in webpage we have to use
<a>……</a>
in HTML.
Anchor tag is a paired tag in HTML.
Syntax ⇒
<a href="">........</a>
. Anchor tag related attributes
Anchor tag consist of 2 attributes.
1.
href
attribute ⇒
It is used to provide link of webpage which you want to join or
redirect.
2. target attribute ⇒
It is used to provide behaviour for opening of link.
Like we have to open the link in same tab or another tab.
There are 4 values for target attribute:
1.
target = _self (default)
2.
target = _blank
3.
target = _top
4.
target = _parent

Appearance of HTML Anchor Tag

1. Unvisited Link ⇒ Displayed underlined and blue.
2. Visited Link ⇒ Displayed underlined and purple.
3. Active Link ⇒ Underlined and red color.
Link to same website (Default)
If we want to redirect same or current page then we can pass the
value # inside the hrefattribute.
And by default the value for target attribute is
_self .
Example ⇒
<a href="#">Same Page</a>

. Link to other website

If we want to redirect to another page then we have to pass the
reference of that page or source to the hrefattribute.
And if you want to open that source in another tab then we have
must pass the value as _blank for target attribute.
Because by default it target is _self and it will open in current page or
tab.
Example ⇒
<a href="[Link] target="_blank">Google
Ho
me</a>

⇒ HTML Table
1. HTML Table
HTML tables represent data in the form of tables.
Table is the combination rows and columns.
And table consist of row and columns.
To provide table in webpage we have to use
<table>tag.
Each row of table is represented by using <tr> tag.
Each column is represented by using <td> tag.
Table contains heading which can be represented by using
<th> tag.
Table title can be provided by using <caption> tag.
. Structure of Table - rows , columns
The smallest unit of a table is called as “cell”.
OR The intersection of row and column is called as Cell

3. Table Contents ⇒ thead, tbody, tfoot,

caption, tr, td, th, etc.
<thead>
⇒ It is used to provide table heading.
<tbody>
⇒ It is used to define blocks for table body.
<tfoot>
⇒ It is used to define block for footer for table.
<caption>
⇒ It is used to provide the caption or title or description for the
table.
<tr>
⇒ With the help <tr> we can provide the row to the table.
<td>
⇒ It is used to provide the column or cell to the table.
<th>
⇒ With the help of <th>, we can provide heading for the table data
and
by default heading will be in bold and align as center to cell.
<table border="1">
<caption>Student Data</caption>
<thead>
<tr>
<th>[Link].</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ramesh</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>Ganesh</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Total Students = 3</th>
</tr>
</tfoot>
</table>
Cellspacing, Cellpadding
With the help of cellpadding and cellspacing we can provide padding
inside
the cells and also space between the cells.
1. cellpadding⇒
This attribute is used to increase the surrounding area of a content
which is present inside the cell.
Example ⇒
[Link]
⇒
This attribute which is used to increase the space between two cells.
Example ⇒

Space between cell wall and content is cell padding.

Space between two cells is cell space

. Rowspan, Colspan
1. colspan⇒
This is an attribute which is used to merge two or more than two
columns is called as colspan.
Example:

2. rowspan⇒
This is an attribute which is used to merge two or more than two
rows is called as rowspan.
Example ⇒