UNIT-1.

INTERNET FUNDAMENTAL AND HTML

 Basic concept of Internet

o What is the Internet?

 The Internet is a global network of billions of computers and other

electronic devices. With the Internet, it's possible to access almost any
information, communicate with anyone else in the world, and do much
more.

 You can do all of this by connecting a computer to the Internet, which

is also called going online. When someone says a computer is online,
it's just another way of saying it's connected to the Internet.

o What is the Web?

 The World Wide Web—usually called the Web for short—is a

collection of different websites you can access through the Internet.
A website is made up of related text, images, and other resources.
Websites can resemble other forms of media—like newspaper articles
or television programs—or they can be interactive in a way that's
unique to computers.

 The purpose of a website can be almost anything: a news platform, an

advertisement, an online library, a forum for sharing images, or an
educational site like us!

 Once you are connected to the Internet, you can access and view
websites using a type of application called a web browser. Just keep in
mind that the web browser itself is not the Internet; it only displays
websites that are stored on the Internet.

o How does the Internet work?

 Internet is a global network of physical cables, which can include

copper telephone wires, TV cables, and fiber optic cables. Even
wireless connections like Wi-Fi and 3G/4G rely on these physical
cables to access the Internet.
  When you visit a website, your computer sends a request over these
wires to a server. A server is where websites are stored, and it works a
lot like your computer's hard drive. Once the request arrives, the server
retrieves the website and sends the correct data back to your computer.
What's amazing is that this all happens in just a few seconds!

 Intranet
Intranet is owned by a single organization and is a tool for sharing information
throughout the organization.It is the type of Internet that is used privately. Since,
intranet is a private network so no one can use the intranet whose have not valid
username and password. In intranet, there are a limited number of connected devices
as compared to internet. Intranet is highly secure and has a small number of visitors.
It is used in order to get employee information, telephone directory etc.

 Extranet
Extranet is owned by either a single or a many organization. It is managed on a
contractual basis between organizations and is a tool for sharing information
between the internal members and external members. Like intranet, it is also a
private network so only those who have a valid username and password can use the
extranet. Extranet is used to check status, access data, send mail, place order etc.

S.NO Intranet Extranet

Intranet is a tool for sharing Whereas Extranet is a tool for sharing

1. information throughout the information between the internal members and
organization. external members.

Intranet is owned by a single While Extranet is owned by either a single or a

2.
organization. many organization.

In intranet, security is Whereas in this, security is implemented

3. implemented through a through a firewall in order to separate the
firewall. extranet and the internet.

4. Intranet is managed by an Whereas Extranet is managed by many

S.NO Intranet Extranet

organization. organizations.

Intranet has a limited number Whereas in the extranet, connected devices are
5.
of connected devices. comparable with the intranet.

While it is also a private network in which

Intranet is a private network
6. public network is used in order to share the
type for an organization.
information to the suppliers and customers.

Intranet is used in order to get

While It is used to check status, access data,
7. employee information,
send mail, place order etc.
telephone directory etc.

Intranet is the limited and

While Extranet is the limited and compromised
8. compromised version of
version of Internet.
Extranet.

A particular organization is the

9. regulating authority for While it is regulated by multiple organizations.
intranet.

It is accessible to only the It is accessible to members of organization as

10.
members of organization. well as external members with logins.

It’s restricted area is upto an It’s restricted area is upto an organization and
11.
organization. some of its stakeholders.

12. It is derived from Internet. It is derived from Intranet.

Example: WIPRO using

Example: DELL and Intel using network for
13. internal network for its
business related operations.
business operations.

 Internet Applications
There are different applications of internet are...
1.Communication 5. Social Media
2. Web Browsing 6. Job Search
3. Online Shopping 7. Education
4. Real-Time Update 8. Travel
9. Stock Market Update 10. Video Conferencing

1) WWW :-

World Wide Web, which is also known as a Web, is a collection of websites or

web pages stored in web servers and connected to local computers through the
internet. These websites contain text pages, digital images, audios, videos, etc.
Users can access the content of these sites from any part of the world over the
internet using their devices such as computers, laptops, cell phones, etc. The
WWW, along with internet, enables the retrieval and display of text and media to
your device.

o Features of WWW:
 HyperText Information System
 Cross-Platform
 Distributed
 Open Standards and Open Source
 Uses Web Browsers to provide a single interface for many services
 Dynamic, Interactive and Evolving.
 “Web 2.0”

o Components of the Web: There are 3 components of the web:

1. Uniform Resource Locator (URL): serves as a system for resources on the

web.
2. HyperText Transfer Protocol (HTTP): specifies communication of browser
and server.
3. Hyper Text Markup Language (HTML): defines the structure, organisation
and content of a webpage.

2) E-mail :-
Electronic mail, commonly known as email, is a method of exchanging
messages over the internet. Here are the basics of email:

1. An email address: This is a unique identifier for each user, typically in the
format of [email protected].
2. An email client: This is a software program used to send, receive and
manage emails, such as Gmail, Outlook, or Apple Mail.
3. An email server: This is a computer system responsible for storing and
forwarding emails to their intended recipients.

To send an email:
1. Compose a new message in your email client.
2. Enter the recipient’s email address in the “To” field.
3. Add a subject line to summarize the content of the message.
4. Write the body of the message.
5. Attach any relevant files if needed.
6. Click “Send” to deliver the message to the recipient’s email server.
7. Emails can also include features such as cc (carbon copy) and bcc (blind
carbon copy) to send copies of the message to multiple recipients, and reply,
reply all, and forward options to manage the conversation.

The basic components of an email system are : User Agent (UA), Message
Transfer Agent (MTA), Mail Box, and Spool file. These are explained as
following below.
1. User Agent (UA) : The UA is normally a program which is used to send and
receive mail. Sometimes, it is called as mail reader. It accepts variety of
commands for composing, receiving and replying to messages as well as for
manipulation of the mailboxes.
2. Message Transfer Agent (MTA) : MTA is actually responsible for transfer
of mail from one system to another. To send a mail, a system must have
client MTA and system MTA. It transfer mail to mailboxes of recipients if
they are connected in the same machine. It delivers mail to peer MTA if
destination mailbox is in another machine. The delivery from one MTA to
another MTA is done by Simple Mail Transfer Protocol.

3. Mailbox : It is a file on local hard drive to collect mails. Delivered mails are
present in this file. The user can read it delete it according to his/her
 requirement. To use e-mail system each user must have a mailbox . Access
to mailbox is only to owner of mailbox.

4. Spool file : This file contains mails that are to be sent. User agent appends
outgoing mails in this file using SMTP. MTA extracts pending mail from
spool file for their delivery. E-mail allows one name, an alias, to represent
several different e-mail addresses. It is known as mailing list, Whenever
user have to sent a message, system checks recipient’s name against alias
database. If mailing list is present for defined alias, separate messages, one
for each entry in the list, must be prepared and handed to MTA. If for
defined alias, there is no such mailing list is present, name itself becomes
naming address and a single message is delivered to mail transfer entity.

3) FTP:-

o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting
the files from one host to another.
o It is mainly used for transferring the web page files from their creator to the
computer that acts as a server for other computers on the internet.
o It is also used for downloading the files to computer from other servers.

 Objectives of FTP
o It provides the sharing of files.
o It is used to encourage the use of remote computers.
o It transfers the data more reliably and efficiently.

Why FTP?

Although transferring files from one system to another is very simple and
straightforward, but sometimes it can cause problems. For example, two systems
may have different file conventions. Two systems may have different ways to
represent text and data. Two systems may have different directory structures. FTP
protocol overcomes these problems by establishing two connections between
hosts. One connection is used for data transfer, and another connection is used for
the control connection.
 Mechanism of FTP

The above figure shows the basic model of the FTP. The FTP client has three
components: the user interface, control process, and data transfer process. The
server has two components: the server control process and the server data transfer
process.

FTP Clients
o FTP client is a program that implements a file transfer protocol which allows
you to transfer files between two hosts on the internet.
o It allows a user to connect to a remote host and upload or download the files.
o It has a set of commands that we can use to connect to a host, transfer the files
between you and your host and close the connection.
o The FTP program is also available as a built-in component in a Web browser.
This GUI based FTP client makes the file transfer very easy and also does not
require to remember the FTP commands.

 Email Protocols

Email protocols are a collection of protocols that are used to send and receive emails
properly. The email protocols provide the ability for the client to transmit the mail to or
from the intended mail server. Email protocols are a set of commands for sharing mails
between two computers. Email protocols establish communication between the sender
and receiver for the transmission of email. Email forwarding includes components like
two computers sending and receiving emails and the mail server.

There are three basic types of email protocols.

(1)SMTP
(2)POP
(3) IMAP
1) SMTP:-

SMTP stands for Simple Mail Transfer Protocol. It was first proposed in 1982. It is a
standard protocol used for sending e-mail efficiently and reliably over the internet.

Key Points

 SMTP is application level protocol.

 SMTP is connection oriented protocol.
 SMTP is text based protocol.
 It handles exchange of messages between e-mail servers over TCP/IP network.
 Apart from transferring e-mail, SMPT also provides notification regarding
incoming mail.
 When you send e-mail, your e-mail client sends it to your e-mail server which
further contacts the recipient mail server using SMTP client.
 These SMTP commands specify the sender’s and receiver’s e-mail address, along
with the message to be send.
 The exchange of commands between servers is carried out without intervention of
any user.
 In case, message cannot be delivered, an error report is sent to the sender which
makes SMTP a reliable protocol.
POP Commands

S.N. Command Description

HELLO
1
This command initiates the SMTP conversation.

EHELLO
2 This is an alternative command to initiate the conversation. ESMTP indicates
that the sender server wants to use extended SMTP protocol.

MAIL FROM
3
This indicates the sender’s address.

RCPT TO
4 It identifies the recipient of the mail. In order to deliver similar message to
multiple users this command can be repeated multiple times.

SIZE
5
This command let the server know the size of attached message in bytes.

DATA
6 The DATA command signifies that a stream of data will follow. Here stream of
data refers to the body of the message.

QUIT
7
This commands is used to terminate the SMTP connection.
 VERFY
8 This command is used by the receiving server in order to verify whether the
given username is valid or not.

EXPN
9 It is same as VRFY, except it will list all the users name when it used with a
distribution list.

2) POP:-

POP stands for Post Office Protocol. It is generally used to support a single client.
There are several versions of POP but the POP 3 is the current standard.

Key Points

 POP is an application layer internet standard protocol.

 Since POP supports offline access to the messages, thus requires less internet usage
time.
 POP does not allow search facility.
 In order to access the messaged, it is necessary to download them.
 It allows only one mailbox to be created on server.
 It is not suitable for accessing non mail data.
 POP commands are generally abbreviated into codes of three or four letters. Eg.
STAT.
POP Commands
S.N. Command Description

LOGIN
1
This command opens the connection.

STAT
2
It is used to display number of messages currently in the mailbox.

LIST
3 It is used to get the summary of messages where each message summary is
shown.

RETR
4
This command helps to select a mailbox to access the messages.

DELE
5
It is used to delete a message.

RSET
6
It is used to reset the session to its initial state.
 QUIT
7
It is used to log off the session.

3) IMAP:-
IMAP stands for Internet Message Access Protocol. It was first proposed in 1986.
There exist five versions of IMAP as follows:
1. Original IMAP
2. IMAP2
3. IMAP3
4. IMAP2bis
5. IMAP4

Key Points:

 IMAP allows the client program to manipulate the e-mail message on the server
without downloading them on the local computer.
 The e-mail is hold and maintained by the remote server.
 It enables us to take any action such as downloading, delete the mail without reading
the mail.It enables us to create, manipulate and delete remote message folders called
mail boxes.
 IMAP enables the users to search the e-mails.
 It allows concurrent access to multiple mailboxes on multiple mail servers.
IMAP Commands

The following table describes some of the IMAP commands:

S.N. Command Description

IMAP_LOGIN
1
This command opens the connection.

CAPABILITY
2
This command requests for listing the capabilities that the server supports.

NOOP
3 This command is used as a periodic poll for new messages or message status
updates during a period of inactivity.

SELECT
4
This command helps to select a mailbox to access the messages.

EXAMINE
5
It is same as SELECT command except no change to the mailbox is permitted.

CREATE
6
It is used to create mailbox with a specified name.
 DELETE
7
It is used to permanently delete a mailbox with a given name.

RENAME
8
It is used to change the name of a mailbox.

LOGOUT
This command informs the server that client is done with the session. The server
9
must send BYE untagged response before the OK response and then close the
network connection.

 Introduction to HTML
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Brief History of HTML:-

Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The
latest version of HTML is HTML5

HTML Versions:-
(1)HTML 1.0 , (2)HTML 2.0 , (3)HTML 3.2 ,(4) HTML 4.01 ,(5) HTML5

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.
 It is a markup language.

A Simple HTML Document (Page Structure)

Code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 <h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Output:

My First Heading

My first paragraph.

Explanation:-
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

What is an HTML Attributes?

All HTML elements can have attributes which provides additional

information about elements. Attributes usually come in name/value pairs
like: name="value"

<a href="https://www.google.com">google</a>
 Body Tag Attributes

There are many attributes in the <body> tag that are depreciated from
HTML5 are listed below:

Attribute Values Description

It contains the URL of the background

background image. It is used to set the background
image.

It is used to specify the background color

bgcolor
of an image.

It is used to specify the color of the active

alink
link.

It is used to specify the color of visited

link
links.

It specifies the color of the text in a

text
document.

vlink It specifies the color of visited links.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
</head>
<!-- body background absolute path e:\folder\image.extention
background="11.png"-->
<body background="11.png" link="red" bgcolor="green" text="blue"
vlink="black">
<h1>heading 1</h1>
<h2>body Tag</h2>
<p>This is paragraph text</p>
<a href="#" > click here </a>
</body>
</html>
 HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Code:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
Output:
This is heading 1
This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

 HTML Text Formatting

HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS.

In HTML the formatting tags are divided into two categories:

(1)Physical Style Tags : Physical Style Tags are used in HTML to provide actual
physical formatting to the text. Following are the Physical tags commonly used in HTML

Tag Description

<b> Defines bold text

 Tag Description

<big> Defines big text

<i> Defines italic text

<small> Defines small text

<sup> Defines superscripted text

<sub> Defines subscripted text

<tt> Defines teletype text

<u> Deprecated. Use styles instead

Code:

<!DOCTYPE html>
<html>
<head>
<title>Physical Tags</title>
</head>
<body>
<h1> Physical Tags </h1>
Text without any formatting <br>
<b> HTML- This is Bold text </b> <br>
<big> HTML - This is BIG text </big> <br>
<i> HTML - This is Italic text </i> <br>
<small> HTML - This is Small text </small> <br>
1^st <br>
H₂O <br>
<tt> HTML - This is teletype text </tt> <br>
<u> HTML - This is underlined text</u> <br>
</body>
</html>
(2)Logical Tags :Logical Tags are used in HTML to display the text according to the
logical styles. Following are the Logical tags commonly used in HTML.
Tag Description

<abbr> Defines an abbreviation

<acronym> Defines an acronym

 Tag Description

<address> Defines an address element

<cite> Defines citation

<code> Defines computer code text

<blockquote> Defines a long quotation

<del> Defines text

<dfn> Defines a definition term

<ins> Defines inserted text

<kbd> Defines keyboard text

<pre> Defines preformatted text

<q> Defines short quotation

<samp> Defines sample computer code

<strong> Defines strong text

<var> Defines a variable

Code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Logical Tags </h1>
Welcome to <abbr title="Internet Protocol">IP</abbr> <br>
This is <acronym title=" Internet Protocol "> IP </acronym> <br>
<address> rakshit, 5th & 6th Floor, Royal Kapsons, A- 118,
Sector- 136, Noida,
Uttar Pradesh (201305) </address> <br>
 <cite> Internet Protocol </cite> is my favourite website. <br>
<code> Sample code: system.out.println(); </code>
<blockquote cite="https://www.google.org/">
A Computer Science portal for geeks. It contains well written, well
thought and well
explained computer science and programming articles, and quizzes.
</blockquote>
<del> This contains deleted content.</del>
<ins> Newly inserted content.</ins>
<p>
<dfn> Computer </dfn> is an electronic machine.
written, well thought and well explained computer science and
programming articles,
and quizzes.
</p>
<kbd> computer - This is a Keyboard input </kbd>
<pre> Dear User,
Congratulations !!
We are delighted to inform you that you are going to be part
of worlds journey.
Thanks,
IT Team
This is a predefine formatted text </pre>
</body>
</html>

 Hyperlinks

An anchor tag is a HTML element that creates a link to a target URL. When correctly
implemented, the link can wrap around text, images, or as buttons, so that users can interact
with it and visit the link's destination.

Example

<a href="https://www.example.com">My sample page </a>

Example

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- _blank _self _top _parent -->
<a href="http://www.google.com" target="_blank" title="new page"
rel="noopener"> click here to open in new page </a> <br>
<a href="#"> click here for refresh </a> <br>
<a href="page2.html"> click here to open page 2 </a> <br>
<a href="https://www.google.com"> Google Home </a>
<br><br><br><br><br><br>
<a href="#" name="to bottom"> go to top </a> <br>
</body>
</html>

Font Tag :

The HTML <font> Tag plays an important role in the web page to create an attractive and
readable web page. The font tag is used to change the color, size, and style of a text.

Syntax :

<font attribute = "value"> Content </font>

Attributes of font tag

1. size : The Font size attribute is used to adjust the size of the text.The range of size of the
font in HTML is from 1 to 7 and the default size is 3.
2. face : face attribute used to set font type.
3. color : color attribute used to set font color.

<html>
<head>
<title>Document</title>
</head>
<body>
<font size="7" face="Verdana" color="red">first line</font> <br>
<font size="2" face="Comic sans MS" color="#ff9922">second line</font>
<br>
<font size="4" face="Bedrock" color="green">third line</font> <br>
</body>
</html>
 Horizontal Rule ( <HR>)

<hr> tag stands for horizontal rule. HR is an HTML tag that enables us to add a horizontal
rule or a thematic break to an HTML page. Using the <hr> tag, we can divide document
sections.

o Attributes :-

Attribute Value Description

align left | center | right It sets the alignment of the horizontal rule.
width pixels or percentage To specify the width of the rule.
size pixels or percentage It specifies the height of the horizontal line.
noshade noshade It defines the bar without a shading effect.
color color To set the color of the horizontal rule through the color name or hex value.

Example:
<body>
<p>Example of a horizontal rule with CSS border Property.</p>
<hr width="50%" align="right" size="20%" color="red" noshade>
<p>Example of a horizontal rule with CSS border Property.</p>
</body>

 Working with Images

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

Attributes of img tag

 src: It is used to specify the path to the image.

 alt: It is used to specify an alternate text for the image. It is useful as it informs the user
about what the image means and also due to any network issue if the image cannot be
displayed then this alternate text will be displayed.
 crossorigin: It is used to import images from third-party sites that allow cross-origin
access to be used with canvas.
 height: It is used to specify the height of the image.
 width: It is used to specify the width of the image.
 ismap: It is used to specify an image as a server-side image map.
 loading: It is used to specify whether a browser should defer the loading of images until
some conditions are met or load an image immediately.
 longdesc: It is used to specify a URL to a detailed description of an image.
 referrerpolicy: It is used to specify which referrer information to use when fetching an
image i.e. no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin,
unsafe-url.
 sizes: It is used to specify image sizes for different page layouts.
 srcset: It is used to specify a list of image files to use in different situations.
 usemap: It is used to specify an image as a client-side image map.

Example :
(1)image with attributes
<html>
<head>
<title>Inserting an image using "img" tag</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src="11.png"
alt="img not found"
width="200"
height="200"
title="image" border="5" />
</body>
</html>
(2)image with css
<html>
<body>
<h1>Align image with CSS</h1>
<h2>vertical-align: bottom</h2>
<p>This is some text. <img src="smily.jpg" alt="Smiley face" width="42"
height="42" style="vertical-align:bottom;border:5px solid black;"> This is
some text. This is some text. This is some text.</p>
<h2>vertical-align: middle</h2>
<p>This is some text. <img src="smily.jpg" alt="Smiley face" width="42"
height="42" style="vertical-align:middle;border:5px solid black;"> This is
some text. This is some text. This is some text.</p>
<h2>vertical-align: top</h2>
<p>This is some text. <img src="smily.jpg" alt="Smiley face" width="42"
height="42" style="vertical-align:top;border:5px solid black;"> This is some
text. This is some text. This is some text.</p>
<h2>float: right</h2>
<p>This is some text. <img src="smily.jpg" alt="Smiley face" width="42"
height="42" style="float:right;border:5px solid black;">This is some text.
This is some text. This is some text.</p>
<h2>float: left</h2>
<p>This is some text. <img src="smily.jpg" alt="Smiley face" width="42"
height="42" style="float:left;border:5px solid black;">This is some text. This
is some text. This is some text.</p>
</body>
</html>
  Image Map
The HTML <map> tag defines an image map. An image map is an image with clickable
areas. The areas are defined with one or more <area> tags.

In image mapping an image is specified with certain set of coordinates inside the image
which act as hyperlink areas to different destinations. It is different from an image link
since in image linking, an image can be used to serve a single link or destination whereas in
a mapped image, different coordinates of the image can serve different links or
destinations.

Elements required in Mapping an Image :

There are three basic html elements which are required for creating a
mapped image.
1. Map : It is used to create a map of the image with clickable areas.
2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.

Create Image Map

add a <map> element.
The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:
Example : <map name="workmap">

The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

Example 1 : if shape = “rect”

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer to go to a new page and read more about the
topic:</p>
<img src="pc1.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
 <area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
</map>
</body>
</html>

Example 2 : if shape = “circle”

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the
topic:</p>
<img src="pc2.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>

Example 3 : if shape = “poly”

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the
topic:</p>
<img src="food.jpg" alt="French Food" usemap="#foodmap" width="450"
height="675">
<map name="foodmap">
<area shape="poly"
coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,
37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>
</body>
</html>

 List in HTML
A list is a record of short pieces of related information or used to display the
data or any information on web pages in the ordered or unordered form.
Types of List
1. Unordered List
2. Ordered List
3. Description List

1. Unordered List : An unordered list starts with the “ul” tag. Each list item starts with the
“li” tag. The list items are marked with bullets i.e small black circles by default.

 Attribute of UL tag
o compact: It will render the list smaller.
o type: It specifies which kind of marker is used in the list. Possible values are
disk, circle and square.
Example :
<html>
<head>
<title>HTML ul tag</title>
</head>
<body>
<h2>Unordered List</h2>
<ul type="disc" compact>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
Note : compact is not working in html5.

2. Ordered List : An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag. The list items will be marked with numbers by default.

 Attribute of OL tag
o type: Sets the numbering type:
 a for lowercase letters
 A for uppercase letters
 i for lowercase Roman numerals
 I for uppercase Roman numerals
 1 for numbers (default)
o Start: An integer to start counting from for the list items. For example, to start
numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

o Reversed: This Boolean attribute specifies that the list's items are in reverse
order. Items will be numbered from high to low.
Example:

<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h2>ordered List</h2>
<ol type="A" start="5" reversed>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</body>
</html>

3. Description List : A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term.

Example:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

Nested List
<ol type="A" start="5" reversed>
<li>item 1</li>
<li>item 2</li>
<ol type="i" start="2">
<li>item 2.1</li>
<li>item 2.2</li>
</ol>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
  Table

The <table> in HTML element represents tabular data—that is, information presented in a
two-dimensional table comprised of rows and columns of cells containing data.

HTML Tags Descriptions

Defines the structure for organizing data in rows and columns within a web
<table>
page.

<tr> Represents a row within an HTML table, containing individual cells.

<th> Shows a table header cell that typically holds titles or headings.

<td> Represents a standard data cell, holding content or data.

<caption> Provides a title or description for the entire table.

<thead> Defines the header section of a table, often containing column labels.

Represents the main content area of a table, separating it from the header
<tbody>
or footer.

<tfoot> Specifies the footer section of a table, typically holding summaries or totals.

Defines attributes for table columns that can be applied to multiple

<col>
columns at once.

Groups together a set of columns in a table to which you can apply

<colgroup>
formatting or properties collectively.
 Attributes of table tags
1.align: Specifies the horizontal alignment of the table within its parent element. The
possible enumerated values are left, center, and right.
2.bgcolor: Defines the background color of the table.
3.border: Defines, as a non-negative integer value (in pixels), the size of the frame
surrounding the table.
4.cellpadding: Defines the space between the content of a cell and its border.
5.cellspacing: Defines the size of the space between two cells in a percentage value or
pixels.
6.frame: Defines which side of the frame surrounding the table must be displayed. The
possible enumerated values are void, above, below, hsides, vsides, lhs, rhs, box and border.
7.rules: Defines where rules (borders) are displayed in the table. The
possible enumerated values are none (default value), groups (<thead>, <tbody>,
and <tfoot> elements), rows (horizontal lines), cols (vertical lines), and all (border around
every cell).
8.summary: Defines an alternative text that summarizes the content of the table.
9.width: Specifies the width of the table.

Attributes of TR tag :
 align: Align the content.
 bgcolor: Specify the background of the row
 char: Align the content to a character
 charoff: Set the number of character
 valign: Vertical align the content

Attributes of TD tag :
 Bgcolor: Specifies the background color of the table cell.
 Colspan : Specifies the number of columns the current cell spans across.
 Rowspan : Specifies the number of rows the current cell spans across.
 Valign : Vertical alignment.values Top,middle,bottom and baseline.
 Width : Specifies the width of the table cell.
 Nowrap : Prevents text from automatically wrapping.
 Height : Specifies the height of the table cell.
 Align : Visual alignment. Values right,left,center,justify,char

Example :
<table border="1">
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th scope="col">Person</th>
<th scope="col">Most interest in</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
 <tr>
<th scope="row">Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
Note: you can also create nested table in html.

 Frame :-
Frames are used to divide the web browser window into multiple sections where each
section can be loaded separately.

A frameset tag is the collection of frames in the browser window.

Attributes of frameset tag :

1. cols: The cols attribute is used to create vertical frames in web browser. This
attribute is basically used to define the no of columns and its size inside the frameset
tag. The size or width of the column is set in the frameset in the following ways:

a. Use absolute value in pixel Example:

<frameset cols = "300, 400, 300">
b. Use percentage value Example:
<frameset cols = "30%, 40%, 30%">
c. Use wild card values: Example:
 <frameset cols = "30%, *, 30%">
2. rows: The rows attribute is used to create horizontal frames in web browser. This
attribute is used to define no of rows and its size inside the frameset tag. The size of
rows or height of each row use the following ways:
a. Use absolute value in pixel Example:
<frameset rows = "300, 400, 300">
b. Use percentage value Example:
<frameset rows = "30%, 40%, 30%">
c. Use wild card values Example:
<frameset rows = "30%, *, 30%">
3. border: This attribute of frameset tag defines the width of border of each frames in
pixels. Zero value is used for no border. Example:
<frameset border="4" frameset>
4. frameborder: This attribute of frameset tag is used to specify whether the three-
dimensional border should be displayed between the frames or not for this use two
values 0 and 1, where 0 defines for no border and value 1 signifies for yes there will
be border.
5. framespacing: This attribute of frameset tag is used to specify the amount of
spacing between the frames in a frameset. This can take any integer value as an
parameter which basically denotes the value in pixel. Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag:
1. name: This attribute is used to give names to the frame. It differentiate one frame from
another. It is also used to indicate which frame a document should loaded into.
Example:
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src="C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src="C:/Users/dharam/Desktop/col_last.png"/>
Here we use three frames with names as left center and right.
2. src: This attribute in frame tag is basically used to define the source file that should be
loaded into the frame.The value of src can be any url. Example:
<frame name = "left" src = "/html/left.htm" />
In the above example name of frame is left and source file will be loaded from
“/html/left.htm” in frame.
3. marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels
between the border and contents of left and right frame. Example:
<frame marginwidth="20">
4. marginheight: This attribute in frame tag is used to specify height of the spaces in pixels
between the border and contents of top and bottom frame. Example:
<frame marginheight="20">
5. scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in
frame tag. This is basically used to control the appearance of scrollbar. The value of this
attribute can be yes, no, auto. Where the value no denotes there will be no appearance of
scroll bar. Example:
<frame scrollbar="no">
Practical Example : ( cols )
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>

<frameset rows = "30%, 40%, 30%">

<frame name = "top" src =
"11.png" />
<frame name = "main" src =
"pc1.jpg" />
<frame name = "bottom" src =
"pc2.jpg" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>

Practical Example : ( rows )

<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>

<frameset rows= "30%, 40%, 30%">

<frame name = "top" src =
"11.png" />
<frame name = "main" src =
"pc1.jpg" />
<frame name = "bottom" src =
"pc2.jpg" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>

Practical Example : ( rows & columns )

<frameset rows= "30%, 40%, 30%">
 <frame name = "top" src = "11.png" />
<frameset cols= "30%, 40%, 30%">
<frame name = "c1" src = "textformatting1.jpg" />
<frame name = "c2" src = "textformatting2.jpg" />
<frame name = "c3" src = "smily.jpg" />
</frameset>
<frame name = "main" src = "pc1.jpg" />
<frame name = "bottom" src = "pc2.jpg" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>

 Forms in HTML

 An HTML form is a section of a document which contains controls such as text

fields, password fields, checkboxes, radio buttons, submit button, menus etc.
 An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

HTML Form Syntax

<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
Attributes of Form tag :
1. action : The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.
2. target : The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values: _blank, _self, _parent, _top.
3. method : The method attribute specifies the HTTP method to be used when submitting the
form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.
4. autocomplete : The autocomplete attribute specifies whether a form should have
autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the
user has entered before.
5. novalidate : The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.

 The GET Method

GET is used to request data from a specified resource.

Note that the query string (name/value pairs) is sent in the URL of a GET request:

/test/demo_form.php?name1=value1&name2=value2

Some notes on GET requests:

 GET requests can be cached

 GET requests remain in the browser history
 GET requests can be bookmarked
 GET requests should never be used when dealing with sensitive data
 GET requests have length restrictions
 GET requests are only used to request data (not modify)

 The POST Method

POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the HTTP request:
POST /test/demo_form.php HTTP/1.1
Host: w3schools.com

name1=value1&name2=value2

Some notes on POST requests:

 POST requests are never cached

 POST requests do not remain in the browser history
 POST requests cannot be bookmarked
 POST requests have no restrictions on data length

 Compare GET vs. POST

GET POST

BACK button/Reload Harmless Data will be re-submitted

(the browser should alert the
user that the data are about to
be re-submitted)

Bookmarked Can be bookmarked Cannot be bookmarked

Cached Can be cached Not cached

Encoding type application/x-www-form- application/x-www-form-
urlencoded urlencoded or
multipart/form-data. Use
multipart encoding for binary
data

History Parameters remain in Parameters are not saved in

browser history browser history

Restrictions on data length Yes, when sending data, the No restrictions

GET method adds the data to
the URL; and the length of a
URL is limited (maximum
URL length is 2048
characters)

Restrictions on data type Only ASCII characters No restrictions. Binary data

allowed is also allowed

Security GET is less secure compared POST is a little safer than

to POST because data sent is GET because the parameters
part of the URL are not stored in browser
history or in web server logs
Never use GET when
sending passwords or other
sensitive information!

Visibility Data is visible to everyone in Data is not displayed in the

the URL URL

 HTML Form Tags

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

(1) HTML <input> element

The HTML <input> element is used to take input from user. We can apply different input
filed to gather different information form user. Followings are types of inputs.

1. <input type="button">
2. <input type="checkbox">
3. <input type="color">
4. <input type="date">
5. <input type="datetime-local">
6. <input type="email">
7. <input type="file">
8. <input type="hidden">
9. <input type="image">
10. <input type="month">
11. <input type="number">
12. <input type="password">
13. <input type="radio">
14. <input type="range">
15. <input type="reset">
16. <input type="search">
17. <input type="submit">
18. <input type="tel">
19. <input type="text">
20. <input type="time">
21. <input type="url">
22. <input type="week">

(1) <input type="text"> :-

The <input type="text"> defines a single-line input field for text input.
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
 (2) <input type="password"> :-
<input type="password"> defines a password field:
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">

(3) <input type="submit"> :-

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">

(4) <input type="reset">

<input type="reset"> defines a reset button that will reset all form
values to their default values:
<input type="reset" value="Reset">
(5) <input type="button">
<input type="button"> defines a button:
Attributes of buttons:

1. The type = submit , specifying that it is a submit button

2. The value attribute can be anything which we write on button on web page.
3. The name attribute can be omit here.

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

(6) <input type="radio"> :-

<input type="radio"> defines a radio button.
 Radio buttons let a user select ONLY ONE of a limited number of
choices:

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="Ja
vaScript">
<label for="javascript">JavaScript</label>

(7) <input type="checkbox"> :-

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited
number of choices.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>

(8) <input type="color"> :-

The <input type="color"> is used for input fields that should contain a
color.
Depending on browser support, a color picker can show up in the input
field.
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
 (9) <input type="date"> :-

The <input type="date"> is used for input fields that should contain a
date.
Depending on browser support, a date picker can show up in the input
field.
You can also use the min and max attributes to add restrictions to dates:

<label for="datemax">Enter a date before 1980-01-01:</label>

<input type="date" id="datemax" name="datemax" max="1979-12-31">
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">

(10) <input type="datetime-local"> :-

The <input type="datetime-local"> specifies a date and time input field,

with no time zone.
Depending on browser support, a date picker can show up in the input
field.

<label for="birthdaytime">Birthday (date and time):</label>

<input type="datetime-local" id="birthdaytime" name="birthdaytime">

(11) <input type="email"> :-

The <input type="email"> is used for input fields that should contain
an e-mail address.

<label for="email">Enter your email:</label>

<input type="email" id="email" name="email">

(11) <input type="file"> :-

The <input type="file"> defines a file-select field and a "Browse"

button for file uploads.

<label for="myfile">Select a file:</label>

<input type="file" id="myfile" name="myfile">

(12) <input type="hidden"> :-

The <input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by
users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the
form is submitted.
<input type="hidden" id="custId" name="custId" value="3487">
 (13) <input type="number"> :-

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value
from 1 to 5:

<input type="number" id="quantity" name="quantity" min="1" max="5">

(2)HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>

(3)Label Tag in Form

It is considered better to have label in form. As it makes the code

parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to
have for attribute in label tag that must be same as id attribute of input tag.

<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
(4) The <button> Element

The <button> element defines a clickable button:

<button type="button" onclick="alert('HelloWorld!')">Click Me!</button>

(5) The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">

 The <option> element defines an option that can be selected.

 By default, the first item in the drop-down list is selected.

 To define a pre-selected option, add the selected attribute to the

option:

<option value="fiat" selected>Fiat</option>

 Visible Values:

Use the size attribute to specify the number of visible values:

<select id="cars" name="cars" size="3">

 Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

<select id="cars" name="cars" size="4" multiple>

(6) The <optgroup>Element
Defines a group of related options in a drop-down list
<select name="cars" id="cars">
<optgroup label="SwedishCars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="GermanCars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

(7) HTML <fieldset> and <legend> element:

The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped
elements.
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
(8) The <datalist> Element

The <datalist> element specifies a list of pre-defined options for

an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

(9) The <output> Element

The <output> element represents the result of a calculation (like one

performed by a script).
 Example
Perform a calculation and show the result in an <output> element:

<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>

 HTML Registration Form Example

<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
 <input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/
>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>

<br>Enter your Address:<br>

<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>