Scribd
Upload
8 views

HTML-Notes 1

Uploaded by

Arun K
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

HTML-Notes 1

Uploaded by

Arun K
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML

Introduction to Web Application:

Web Application is a Software application that can be accessed through a web


browser without requiring installation.

These Applications Will Provide the Service Over the web Browser.

These Web Applications will that usually resides on the remote Server.

Any user can access it by using one of the standard web browsers such as Google
Chrome, Safari, Microsoft Edge, etc., and most of them are available free for
everyone.

Any typical web application can run or accessible on any operating system such as the
Windows, Mac, Linux as long as the browser is compatible.

Today there are 1.1billions web applications and 200million active web Application.

Simple Architecture of web Application:

1
[email protected]
History:

Sir Tim Berners-Lee created HTML in 1991, but it wasn't officially released until
1995 as HTML 2.0 .
The first version of HTML had 18 tags, and there are currently about 140 HTML tags.

 HTML 1.0: Released in 1993


 HTML 2.0: Released in 1995
 HTML 3.0: Released in 1997
 HTML 4.01: Released in 1999
 HTML 5: Released in 2014 (Current version)

Components Of Web Applications

1) Frontend
2) Backend

1) Frontend: The Frontend is the part of a web application that users see and interact
with.
The Technologies that are used in Frontend development are :

 HTML
 CSS
 JAVA SCRIPT
 Bootstrap (CSS Framework)
 React Js (Java Script Library)

Introduction To HTML:
HTML abbreviates to Hyper Text Markup Language
HTML is a markup language. It tells the web browser what content to display.

Hypertext: A hypertext refer to the link that connect the web page to one another
either with the single page or between the page.

Markup Language: It is a computer Language that consist of easy Understandable


tags, keywords which help to format the overall view of the page and the data it
contains

Why HTML
HTML is the standard language for building the web application
It describe the structure of the Web page

Requirement of Writing and running the HTML code


 Text Editor (Notepad/Sublime Text/vs code)
 Web Browser (Chrome/Firefox/Mozilla/Safari)

2
[email protected]
Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 Every instruction will pass as a Tags.

In HTML Tags are surrounded by “Angle brackets”, and the “closing” tag is prefixed
by a forward slash.
<tagname>content</tagname>

Eg:<h1>Heading 1</h1>

Note:HTML is not case sensitive


<h1>Heading 1</h1> same as <H1>Heading 1</H1>

There are two type of tags in HTML:


1. Container tag:
This tags are having both the opening and closing tags.
Eg:
<div>, <span>, <h1> to <h6>, <p>, <em>, <strong> etc

2. Non-Container tag:
These tags will have only opening tag but not the closing tags.
They are also self-closing tags.
Eg:
<br/>,<img/>,<hr/><input/> etc.

Note:
In HTML all the tags are pre-defined.
If we use our own tag then it will be displayed as a normal text.
We can nest the tags in HTML.
White space will be ignored by the browser.

Comments in HTML.
<!-- This is a Comment Whatever You write here then it will not be displayed in
browser-->

3
[email protected]
Structure of HTML Document

<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
</head>
<body>
<!--Body of the page -->
</body>
</html>

<!DOCTYPE html>: The declaration is not an HTML tag. It is an


"information" to the browser about what document type to expect.
<!DOCTYPE html> represents that the document is html 5.

<html>:<html> is a root element of html. It’s a biggest and main


element in complete html language, all the tags , elements and attributes
enclosed in it or we can say wrap in it , which is used to structure a web
page.

<head>:<head> tag contains metadata, title, page CSS etc. Data stored
in the <head> tag is not displayed to the user, it is just written for
reference purposes and as a watermark of the owner.

<body>: <body> tag is used to enclose all the data which a web page has
from texts to links. All the content that you see rendered in the browser is
contained within this element. Following tags and elements used in the
body.
These are the tags we can define
1.<h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others..

4
[email protected]
Heading Tag: HTML support 6 level of heading with the <h1> to <h6>
tags.
It is a container tag.
h1 is the highest level of heading and h6 is the lowest level of heading.

Eg:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Output:

Heading 1
Heading 2
Heading 3

Heading 4
Heading 5

Heading 6

HTML Paragraph:

The HTML <p> </p> tag used to define the paragraph in the document.
It is a container tag.

<p>Pentagon Space</p>
<p>Vijayanagara,Bagalore</p>

Output:
Pentagon Space

Vijayanagara,Bagalore

HTML Formatting Tags:

5
[email protected]
These tags are designed to display special types of text:
Here are some of formatting tags
 <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> - Subscript text
 <sup> - Superscript text

<b>: This tag is used to define the boldness to the text without providing
any extra importance to text.
This tag is a container tag.
Eg:

<p><b>Pentagon Space</b></p>
Output:

Pentagon Space

<strong>: This tag is used to define the boldness to the text and providing
extra importance to text.
This is a container tag.

Eg:<p><strong>Pentagon Space</strong></p>
Output:
Pentagon Space

<i>:
The HTML <i> tag defines the text in italic form
Eg:
<p><i>Pentagon Space</i></p>
Output:

Pentagon Space

<em>:
The HTML <em> tag defines emphasized text.
Eg:
<p><em>Pentagon Space</em></p>
6
[email protected]
Output:
Pentagon Space

<mark>:
The <mark> tag defines text that should be marked or highlighted
Eg:
<p>The text is <mark>marked</mark></p>
Output:
The text is marked

<small>:
The <small> tag defines smaller text.
Eg:
<p> this text is <small>small text</small></p>
Output:
this text is small text

<del>:
The <del> tag defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text.
Eg:
<p>this text is <del>deleted</del></p>
Output:
this text is deleted.

<ins>:
The <ins> tag defines a text that has been inserted into a document.
Eg:
<p>the text is <ins>inserted</ins>! </p>
Output:
the text is inserted!

<sub>:
The <sub> tag defines subscript text.
Eg:
<p>H<sub>2</sub>o</p>
Output:
H2o

<sup>:
The <sup> tag defines superscript text.
Eg:
<p>n<sup>2</sup></p>
7
[email protected]
Output:
n2
HTML Elements:

An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content...</tagname>
Eg:
<h1>My First Heading</h1>
<p>My first paragraph. </p>

HTML Attributes:

HTML attributes provide additional information about HTML elements.

 Elements can have attributes.


 Attributes provide additional information about elements.
 Attributes are always specified in the start tag.
 Attributes usually come in name/value pairs.
 If using multiple attributes separate, then with the white space in
between.
<tagname Attribute name="value"> content </tagname>
Image tag:
The <img> tag is used to embed an image in an HTML page.
For <img> tag there is a mandatory attributes src.
- Specifies the path to the image
Eg:
<img src="img.jpg">

Alt: Specifies an alternate text for the image, if the image cannot be
displayed in the browser then text inside the alt will be displayed.

<img src="img.jpg" alt="some image">

To Specify height and width to the image we can use height and Width
attribute.

<img src="img.jpg" alt="some image" width="200" height="300">

Note: Image tag is non-container tag.

Anchor tag:
8
[email protected]
The <a> tag defines a hyperlink, which is used to link from one page to
another.
The mandatory attribute for the <a> tag is href.

This is used to describe the link to the destination page.


Eg:
<a href="https://pentagonspace.in " >Click here</a>

By default, the link will open in the same tab.


To open the link in new tab we need to use attribute target.
The value supported is _blank.
target="_blank"

Eg:
<a href="https://pentagonspace.in “target="_blank" >Click here</a>
Note: anchor tag is a container tag.

HTML List:
HTML lists are collection of related items which can be used to display
information semantically.

Eg:
 Andhra Pradesh.
 Karnataka.
 Kerala.
 Tamil Nadu.
 Telangana.
Or
1. Andhra Pradesh.
2. Karnataka.
3. Kerala.
4. Tamil Nadu.
5. Telangana.

In HTML we have 3 type of lists.


1. Unordered List.
2. Ordered List.
3. Description List.

Unordered List:
9
[email protected]
In Unordered List the list items will be marked with bullets.
<ul> </ul> tag is used to represent the Unordered List.
<li> </li> tag is used to represent the individual list items.

Eg:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ul>

Output:
 Coffee.
 Tea.
 Milk.

By Default, the list items will be displayed with the bullets.


To change the markers, we need to use the attribute type

Values for the attribute are:

 Disc: it is the default value, list items will be marked with bullets.
 Circle: list items will be marked with the circle.
 Square: list items will be marked with Square.
 None: list item will not be marked.
Eg 1: type="disc"
<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ul>

Output:
 Coffee.
 Tea.
 Milk.

Eg 2: type="circle"
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ul>
1
[email protected]
Output:
◦ Tea.
◦ Coffee.
◦ Milk.

Eg 3: type="square"
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ul>

Output:
 Tea.
 Coffee.
 Milk.

Eg 4: type="none"
<ul type="none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ul>

Output:
Tea.
Coffee.
Milk.

Ordered List:

In Ordered List the list items will be marked with Numbers.


<ol> </ol> tag is used to represent the Ordered List.
<li> </li> tag is used to represent the individual list items.

Eg:
<ol>
<li>Coffee</li>
<li>Tea</li>
1
[email protected]
<li>Milk </li>
</ol>

Output:
1. Coffee.
2. Tea.
3. Milk.

By default, the list items will be marked with Numbers


To change the markers, we need to use the attribute type.
In Ordered list the Value supported are

 type="1": List item will be marked with Numbers this is the default
value.
 type="A”: List item will be marked with Uppercase letters.
 type="a”: List item will be marked with lowercase letters.
 type="I”: List item will be marked with Uppercase Roman Numbers.
 type="i”: List item will be marked with lowercase Roman Numbers.

Eg: type="1"
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ol>
Output:
1. Coffee
2. Tea
3. Milk

Eg: type="A"
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ol>
Output:
A. Coffee
B. Tea
C. Milk
1
[email protected]
Eg: type="a"
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ol>
Output:
a. Coffee
b. Tea
c. Milk

Eg: type="I"
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ol>
Output:
I. Coffee
II. Tea
III. Milk

Eg: type="i"
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk </li>
</ol>
Output:
i. Coffee
ii. Tea
iii. Milk

Description List:
It is also known as definition lists, here list contain a list of terms and
descriptions for each term.
The <dl> </dl> tag defines a description list.
The <dt> </dt>tag defines a terms or names in a description list.
The <dd> </dd> tag is used to describe a terms or names in a description
list.

1
[email protected]
Eg:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Output:

Coffee
black hot drink
Milk
white cold drink

HTML Table:
HTML table is a tabular arrangement of data in rows and columns.
These table consist of cells inside the rows and columns.
 <table></table> tag is used to create the table in html.
 <tr></tr> tag is used to create the row inside the table.
 <td></td> tag is used to add the data inside each row.
 <th></th> tag is used to add the heading inside any row in table.

Eg:

<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Raj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Pavan</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>Suhas</td>
<td>23</td>
</tr>
</table>
1
[email protected]
Output:

Id Name Age
1 Raj 20
2 Pavan 22
3 Suhas 23
By default, the table in HTML will not have the border.
To add the border, we need to use the Attribute called Border and specify the value in
numbers which represent the thickness if the border.

Eg:
<table border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Raj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Pavan</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>Suhas</td>
<td>23</td>
</tr>
</table>

Output:
Id Name Age
1 Raj 20
2 Pavan 22
3 Suhas 23

To add the caption to the Table we can use <caption></caption> tag.

<table border="1">
<caption>Student Details</caption>
<tr>
1
[email protected]
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Raj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Pavan</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>Suhas</td>
<td>23</td>
</tr>
</table>

Output:
Student Details
Id Name Age
1 Raj 20
2 Pavan 22
3 Suhas 23

colspan:
It is an attribute which is used to merge two or more columns to a single column.
The value for this attribute is the number of columns to merge.

Eg:
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Suhas</td>
<td>S J</td>
<td>22</td>
</tr>
<tr>
<td>Pavan</td>
1
[email protected]
<td>S </td>
<td>23</td>
</tr>
</table>

Output:

rowspan:
It is an attribute which is used to merge two or more rows to a single row.
The value for this attribute is the number of rows to merge.

Eg:
<table border="1">
<tr>
<th>Name</th>
<td>Suhas SJ</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>9988552233</td>
</tr>
<tr>
<td>7744558899</td>
</tr>
</table>

Output:
Name Suhas SJ
9988552233
Phone
7744558899

Element is the combination of starting tag, ending tag along with the content inside
the tags.

<tagname>Some Content inside it</tagname>

Eg:
<p>This is a paragraph</p>

<h1>This is a heading</h1>

<a href="www.google.com">Google</a>

There are two types of html elements in HTML:


1
[email protected]
1) Inline Element
2) Block Level Element

1) Inline Element: This element does not start with the new line and they occupy as
much space required for the element.
Eg:
<img>, <a>, <b>, <strong>, <em><span>etc…

2) Block Level Elements:


These type of elements always start with the new line and they occupy complete
width.
Eg:
<p>, <h1>-<h6>, <ul>, <ol>, <li>, <marquee> etc…

HTML forms:
In HTML form is used to collect user input.

Input of email and password for login form.


Input of email name phone number passwords from the user for registration.

Form tag is used to create a basic form in html


<form> </form> it is a container tag.

<input> a non-container tag is used to add the inputs in the form.

We can display the input in many ways using the type attribute.

1
[email protected]
1) type="text":

It is used to take a text as the input for the form.

Eg:
<form>
Enter the name:<input type="text">
</form>

Output:

Enter the name:

In the text area you can add the desired text.

2) type="password":

It is used to define the password as the input.

Eg:
<form>
Enter the password:<input type="password">
</form>

Output:
Enter the password:

3) type="email":
It is used to take the email as the input.

Eg:
<form>
Enter the email:<input type="email">
</form>

Output: Enter the email:

4) type="Number":
It is used to take the number as the input.

Eg:
<form>
Enter the phone:<input type="Number">
</form>

Output:
Enter the phone:

1
[email protected]
5) type="submit":
It is used to define a button for submitting the form data to the form header.

The form header is the typically the server page where the data will be processed.
Action attribute:
Used in the form tag where it will specify the form-header.
Value attribute:
If we want to explicitly add the data to the input submit use the value attribute.

Eg:

<form action="login">
Enter the name:<input type="text"><br>
Enter the email:<input type="email"><br>
Enter the phone:<input type="number"><br>
<input type="submit" value="submit">
</form>

Enter the name:


Enter the email:
Enter the phone:

Submit

6) type="reset":
It is used to define the reset button which will reset all the values that are enter in the
form.

<form>
<input type="reset" value="reset">
Enter the name:<input type="text"><br>
Enter the email:<input type="email"><br>
Enter the phone:<input type="number"><br>
</form>

Output:
Enter the name:
Enter the email:
Enter the phone:
reset

7) type="radio":
It is used to define a radio button.
Radio button let the user to select only one option from the given options.

Eg:
<form>
2
[email protected]
<input type="radio" name="favlang">HTML<br>
<input type="radio" name="favlang">CSS<br>
<input type="radio” name="favlang">JS<br>
<input type="submit" value="submit">
</form>

HTML
CSS
JS

8) type="checkbox":
It is used to define a checkbox
Checkbox let the user to select more than one value from the given values.

<form>
<input type="checkbox">HTML<br>
<input type="checkbox">CSS<br>
<input type="checkbox">JS<br>
<input type="submit" value="submit">
</form>

Output:

HTML
CSS
JS

9) type="button":
It is used to define the button.

Eg:<form>
<input type="button" value="click here">
</form>

Output:
Click here

10) type="date":
It is used to get the calendar in the form.

Eg:
<form>
<input type="date">
</form>

2
[email protected]
min and max attribute is used to add the restriction to the date with the minimum and
maximum values.
<form>
<input type="date” min="2000-01-02" max="2024-12-31">
</form>

The format for min and max is in YYYY-MM-DD

11) type="file":
It is used to add the file in the form.
Eg:
<form>
Select a file:<input type="file">
</form>

Output:
Select a file: Choose file

12) type="hidden":
It is used to define the hidden input field which is not visible to the user.
<form>
<input type="hidden" value="1">
</form>

13) type="range":
It is used to define a slider control
Default range will be from 0 to 100

min and max attribute is used to add the restriction to the range values with the
minimum and maximum values.

<form>
<input type="range" min="0" max="50">
</form>

Fieldset:
It is used to add the border around the form.
<fieldset></fieldset>
This tag is to be added after the form tag before first input tag.

<form>
<fieldset>
enter email<input type="email"><br>
enter password <input type="password"><br>
<input type="submit" value="login">
</fieldset>
</form>

Output:

2
[email protected]
Legend tag:
This tag is used to add the caption for the fieldset.

<form>
<fieldset>
<legend>Login</legend>
<input type="email" placeholder="enter email"><br>
<input type="password" placeholder="enter password"><br>
<input type="submit" value="login">
</fieldset>
</form>

HTML Dropdown List:


The <select</select> tag is used to create a dropdown list in html.
To define the options in the dropdown list we have to use the <option></option> tag.

Eg:
<select>
<option>Bangalore</option>
<option>Chennai</option>
<option>Kolkata</option>
<option>Pune</option>
<option>Ahmadabad</option>
</select>

2
[email protected]
<optgroup></optgroup> used to group the related options as a group.

<select>
<optgroup label="South">
<option>Bangalore</option>
<option>Chennai</option>
</optgroup>
<optgroup label="North">
<option>Kolkata</option>
<option>Ahmadabad</option>
</optgroup>
</select>

HTML Button tag:


This tag is used to create a button.
<button>Sign-up</button>

Sign-up

HTML audio tag:


This tag is used to add the audio file to the html document.

The audio tag should be used with <source> tag and the mandatory attribute is the src

Controls attribute is used to get the controls for the audio.

<audio controls>
<source src="audio.mp3">
</audio>

2
[email protected]
HTML video tag:

This tag is used to add the video file to the html document.

The video tag should be used with <source> tag and the mandatory attribute is the src

Controls attribute is used to get the controls for the video.

<video controls>
<source src="video.mp4">
</video>

We can specify the height and width attribute to change the height and width of the
video.

2
[email protected]
HTML Semantic Elements:
A semantic element clearly describes its meaning to both the browser and the
developer.

In HTML there are some semantic elements that can be used to define different parts
of a web page.

Bellow are some of important semantic elements in html

<header>
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<main>
<nav>
<section>

2
[email protected]
Advantages of semantic tags:
 Provide clear and meaningful structure to web content.
 Search Engine Optimization (SEO) use semantic HTML to better understand the
content and context of a webpage.
 Semantic HTML makes code more readable and understandable for developers.
 Semantic tags provide a standardized way to structure content, making it easier to
apply consistent styling across different sections of a webpage.
 A well-structured document using semantic tags can enhance the overall user
experience.

2
[email protected]

You might also like