Basic Internet Concepts – UNIT-I (Page 2-42)

Name of the Paper : Web Designing (INTERDISCIPLINARY ELECTIVE )

Semester : V
Department : B.Sc (Information Technology)
Name of the Faculty : Dr.S.Subash Chandra Bose S
Designation : Assistant Professor
1
 Topics

 What is Internet ?

 History of Internet

 Host Machines and Host Names

 Client / Server Model

 Domain Names

 Protocols

 IP Address

2
 Internet
INTERNET
• The Internet is essentially a global network of computing resources.
• You can think of the Internet as a physical collection of routers and circuits as a set of
shared resources.
• A network of networks based on the TCP/IP communications protocol.
• A community of people who use and develop those networks.
Internet-Based Services
Basic services available to Internet users are −
• Email − A fast, easy, and inexpensive way to communicate with other Internet users
around the world.
• Telnet − Allows a user to log into a remote computer as though it were a local system.
• FTP −File Transfer Protocol- Allows a user to transfer virtually every kind of file that can
be stored on a computer from one Internet-connected computer to another.
• UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
• World Wide Web (WWW) − A hypertext interface to Internet information resources.

3
 WORLD WIDE WEB
WWW

• WWW stands for World Wide Web. A technical definition of the World Wide Web is − All the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
• The World Wide Web is the universe of network-accessible information, an embodiment of
human knowledge.
• In simple terms, The World Wide Web is a way of exchanging information between
computers on the Internet, tying them together into a vast collection of interactive
multimedia resources.

HTTP
• HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer
hypertext documents that makes the World Wide Web possible.
• A standard web address such as Yahoo.com is called a URL and here the prefix http indicates
its protocol

4
 URL ?

• URL stands for Uniform Resource Locator, and is used to specify addresses on the
World Wide Web.
• A URL is the fundamental network identification for any resource connected to
the web (e.g., hypertext pages, images, and sound files).

A URL will have the following format −

• protocol://hostname/other_information The protocol specifies how information is
transferred from a link.
• The protocol used for web resources is HyperText Transfer Protocol (HTTP).

• Other protocols compatible with most web browsers include FTP, telnet,
newsgroups, and Gopher.
• The protocol is followed by a colon, two slashes, and then the domain name. The
domain name is the computer on which the resource is located.
• Links to particular files or subdirectories may be further specified after the domain
name. The directory names are separated by single forward slashes.

5
 Website
• Currently you are on our website https://Gurunanakcollege.edu.in which is a
collection of various pages written in HTML markup language.
• This is a location on the web where people can find tutorials on latest
technologies. Similarly, there are millions of websites available on the web.
• Each page available on the website is called a web page and first page of any
website is called home page for that site.
Web Server
• Every Website sits on a computer known as a Web server. This server is always
connected to the internet.
• Every Web server that is connected to the Internet is given a unique address made
up of a series of four numbers between 0 and 256 separated by periods.
For example, 68.178.157.132 or 68.122.35.127.
• When you register a Web address, also known as a domain name, such as
https://Gurunanakcollege.edu.in you have to specify the IP address of the Web
server that will host the site.

6
 Web Browser
• Web Browsers are software installed on your PC.
• To access the Web you need a web browsers, such as Netscape Navigator,
Microsoft Internet Explorer or Mozilla Firefox.
• Currently you must be using any sort of Web browser while you are navigating
through my site tutorialspoint.com.
• On the Web, when you navigate through pages of information this is commonly
known as browsing or surfing.

SMTP Server

• SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of
delivering emails from one server to another server.
• When you send an email to an email address, it is delivered to its recipient by a
SMTP Server.

7
 ISP
• ISP stands for Internet Service Provider. They are the companies who provide you
service in terms of internet connection to connect to the internet.
• You will buy space on a Web Server from any Internet Service Provider. This space
will be used to host your Website.
What is HTML?
• HTML stands for Hyper Text Markup Language. This is the language in which we
write web pages for any Website. Even the page you are reading right now is
written in HTML.
• This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic
publishing, the specific standard used for the World Wide Web.
What is Hyperlink?
• A hyperlink or simply a link is a selectable element in an electronic document that
serves as an access point to other electronic resources. Typically, you click the
hyperlink to access the linked resource. Familiar hyperlinks include buttons, icons,
image maps, and clickable text links.

8
What is DNS?
• DNS stands for Domain Name System.
• When someone types in your domain name, www.example.com, your browser will
ask the Domain Name System to find the IP that hosts your site.
• When you register your domain name, your IP address should be put in a DNS
along with your domain name. Without doing it your domain name will not be
functioning properly.

9
 History of the Internet
• 1961: Kleinrock @ MIT: packet-switched network
• 1962: Licklider’s vision of Galactic Network
• 1965: Roberts connects computers over phone line
• 1967: Roberts publishes vision of ARPANET
• 1969: BBN installs first
InterfaceMsgProcessor at UCLA
• 1970: Network Control Program (NCP)
• 1972: Public demonstration of ARPANET
• 1972: Kahn @ DARPA advocates
Open Architecture
• 1972: Vint Cerf @ Stanford writes TCP

10
 More Internet History
More Internet History

• 1974: Cerf and Kahn paper on TCP (IP kept separate)

• 1980: TCP/IP adopted as defense standard
• 1983: ARPANET and MILNET split
• 1983: Global NCP to TCP/IP flag day
• 198x: Internet melts down due to congestion
• 1986: Van Jacobson saves the Internet (BSD TCP)
• 1987: NSFNET merges with other networks
• 1988: Deering and Cheriton propose multicast
• 1994: NSF backbone dismantled, private backbone
• 1999-present: The Internet boom and bust … and boom
• 2007: Release of iPhone, rise of Mobile Internet What is next?

11
 Internet Applications Over Time
Internet Applications Over Time
• 1972: Email
• 1973: Telnet – remote access to computing
• 1982: DNS – “phonebook” of the Internet
• 1985: FTP – remote file access
• 1989: NFS – remote file systems
• 1991: The World Wide Web (WWW) goes public
• 1995: SSH – secure remote shell access
• 1995-1997: Instant messaging (ICQ, AIM)
• 1998: Google
• 1999: Napster, birth of P2P
• 2001: Bittorrent
• 2004: Facebook
• 2005: YouTube
• 2007: The iPhone What is next?

12
 Takeaways
• Communication is fundamental to human nature
• Key concepts have existed for a long time

– Speed/bandwidth
– Latency
– Switching
– Packets vs. circuits
– Encoding
– Cable management
– Multiplexing
– Routing

• The Internet has changed the world

– Promise of free ($) and free (freedom) communication
– Shrunk the world
• What made the Internet so successful? Stay tuned!

13
 HOST MACHINES
• A host (also known as "network host") is a computer or other device that
communicates with other hosts on a network. Hosts on a network include clients and
servers -- that send or receive data, services or applications.

• An Internet host can be a machine or an application connected to the Internet that has
an Internet Protocol address (IP address).

• An IP address is used to uniquely identify every host on the Internet.

• Because these IP address are unique, they can be used as the source and destination IP
addresses in any IP-based communication.

• At the most basic level, Internet hosts fall into two categories, Servers and Clients.

• Some say that a computer 'hosts' or 'serves' the clients that use an application. This is the
orgin of the terms host and server. A host is not neccessarilly a single computer.

14
 HOST MACHINES

• It is possible for a single computer to use multiple IP addresses, especially when it

is providing multiple services such as an e-mail server and a web server at the same
time.

• One IP address will be used to identify the e-mail server software, the other IP
address will identify the web server software but both server applications are
running at the same time on the same computer.

• The IP addresses allow each to be accessed individually.

• Hosts are organized into groups called Networks. See the next section
on Networks for more information.

15
Architecture of Centralized Host
Control System

16
 Different clients are connected to a centralized host machine to share files and
folders.

 Clients should login to the server and they can upload, download and delete file
from the server machine.

 Server also perform the monitoring of clients and can restrict the activity of any
client

17
 HOST NAME
 The hostname is what a device is called on a network. Alternative terms for this
are computer name and site name.

 The hostname is used to distinguish devices within a local network.

 In addition, computers can be found by others through the hostname, which enables
data exchange within a network, for example. Hostnames are used on the internet
as part of the fully qualified domain name.

 Host Name: The unique identifier that serves as name of your computer or server
can be as long as 255 characters and consists of numbers and letters.

18
Differentiation between hostname, domain and fully
qualified domain name

• The hostname is a freely selectable name for a host.

• For example, you could call a server in a company network responsible for the
central administration of emails “mail” or “mail123”.

• However, if a computer needs to be available over the internet as well as locally, the
hostname needs to be supplemented by information that indicates what part of the
internet the computer is located in.

• In the internet, computers can be uniquely assigned using a combination

of hostname and domain.

• These uniquely identifiable name chains are known as a “Fully Qualified Domain
Name“ (FQDN). An example of an FQDN would be:
mail123.example.com.

19
Client / Server Network Architecture

20
 Client and Server model
Client and Server model
• A client and server networking model is a model in which computers such as
servers provide the network services to the other computers such as clients to
perform a user based tasks. This model is known as client-server networking model.
The application programs using the client-server model should follow the given
below strategies:
• An application program is known as a client program, running on the local machine
that requests for a service from an application program known as a server program,
running on the remote machine.
• A client program runs only when it requests for a service from the server while the
server program runs all time as it does not know when its service is required.
• A server provides a service for many clients not just for a single client. Therefore,
we can say that client-server follows the many-to-one relationship. Many clients
can use the service of one server.

21
 Client and Server model
 Services are required frequently, and many users have a specific client-server
application program. For example, the client-server application program
allows the user to access the files, send e-mail, and so on.

Client
• A client is a program that runs on the local machine requesting service from
the server. A client program is a finite program means that the service started
by the user and terminates when the service is completed.
Server
• A server is a program that runs on the remote machine providing services to the
clients. When the client requests for a service, then the server opens the door
for the incoming requests, but it never initiates the service.
• A server program is an infinite program means that when it starts, it runs
infinitely unless the problem arises. The server waits for the incoming requests
from the clients. When the request arrives at the server, then it responds to the
request.

22
 Advantages of Client-server Model
Advantages of Client-server Model:
Centralized: Centralized back-up is possible in client-server
networks, i.e., all the data is stored in a server.
Security: These networks are more secure as all the shared
resources are centrally administered.
Performance: The use of the dedicated server increases the
speed of sharing resources. This increases the
performance of the overall system.
Scalability: We can increase the number of clients and
servers separately, i.e., the new element can be added,
or we can add a new node in a network at any time.

23
 DOMAIN NAME SYSTEM
WHY DOMAIN NAME SYSTEM ?
• When DNS was not into existence, one had to download a Host file containing host
names and their corresponding IP address.
• But with increase in number of hosts of internet, the size of host file also increased.
This resulted in increased traffic on downloading this file. To solve this problem the
DNS system was introduced.
Domain Name System(DNS) helps to resolve the host name to an address. It uses a
hierarchical naming scheme and distributed database of IP addresses and
associated names.
IP Address
• IP address is a unique logical address assigned to a machine over the network. An
IP address exhibits the following properties:
• IP address is the unique address assigned to each host present on Internet.

24
• Each of the 4 bytes is represented by a number from 0 to 255, separated with dots.
For example 137.170.4.124
• IP address is 32-bit number while on the other hand domain names are easy to
remember names. For example, when we enter an email address we always enter a
symbolic string such as webmaster@tutorialspoint.com.
Uniform Resource Locator (URL)
• Uniform Resource Locator (URL) refers to a web address which uniquely
identifies a document over the internet.
• This document can be a web page, image, audio, video or anything else present on
the web.
• For example, www.tutorialspoint.com/internet_technology/index.html is an
URL to the index.html which is stored on tutorialspoint web server under
internet_technology directory.

25
URL Types
There are two forms of URL as listed below:

• Absolute URL
• Relative URL
• Absolute URL

• Absolute URL is a complete address of a resource on the web. This

completed address comprises of protocol used, server name, path name and
file name.
For example http:// www.tutorialspoint.com / internet_technology
/index.htm. where:
• http is the protocol.
• tutorialspoint.com is the server name.
• index.htm is the file name.

26
Absolute URL
• Absolute URL is a complete address of a resource on the web. This completed address
comprises of protocol used, server name, path name and file name.

For example http:// www.tutorialspoint.com / internet_technology /index.htm.

where:
• http is the protocol.
• tutorialspoint.com is the server name.
• index.htm is the file name.

• The protocol part tells the web browser how to handle the file. Similarly we have some other
protocols also that can be used to create URL are:
• FTP
• https
• Gopher
• mailto
• news

27
Relative URL
• Relative URL is a partial address of a webpage. Unlike absolute URL, the protocol
and server part are omitted from relative URL.
• Relative URLs are used for internal links i.e. to create links to file that are part of
same website as the WebPages on which you are placing the link.For example, to
link an image on
tutorialspoint.com/internet_technology/internet_referemce_models, we can use the
relative URL which can take the form like /internet_technologies/internet-
osi_model.jpg.

28
 Difference between Absolute and Relative
URL
Absolute URL Relative URL

Used to link web pages on different Used to link web pages within the same
websites website.

Difficult to manage. Easy to Manage

Changes when the server name or Remains same even of we change the
directory name changes server name or directory name.

Take time to access Comparatively faster to access.

29
 Domain Name System Architecture

• The Domain name system comprises of Domain Names, Domain Name

Space, Name Server that have been described below:

Domain Names

• Domain Name is a symbolic string associated with an IP address.

• There are several domain names available;

some of them are generic such as com, edu, gov, net etc, while some
country level domain names such as au, in, za, us etc.

30
Generic Top-Level Domain names:
Domain Name Meaning

Com Commercial business

Edu Education

Gov U.S. government agency

Int International entity

Mil U.S. military

Net Networking organization

Org Non profit organization

31
 Country top-level domain names
Domain Name Meaning

au Australia

in India

cl Chile

fr France

us United States

za South Africa

uk United Kingdom

jp Japan

32
Domain Name Space
• The domain name space refers a hierarchy in the internet naming structure.
• This hierarchy has multiple levels (from 0 to 127), with a root at the top. The
following diagram shows the domain name space hierarchy:
• In the below diagram each subtree represents a domain. Each domain can be
partitioned into sub domains and these can be further partitioned and so on.

33
 Name Server

Name Server
• Name server contains the DNS database.

• This database comprises of various names and their corresponding IP addresses.

• Since it is not possible for a single server to maintain entire DNS database,
therefore, the information is distributed among many DNS servers.

1. Hierarchy of server is same as hierarchy of names.

2. The entire name space is divided into the zones

34
 Protocols
Protocol
A protocol is a standard set of rules that allow electronic devices to communicate
with each other. ... Examples include wired networking (e.g., Ethernet), wireless
networking (e.g., 802.11ac), and Internet communication (e.g., IP)
There are various types of protocols that support a major and compassionate role in
communicating with different devices across the network. These are:
• Transmission Control Protocol (TCP)
• Internet Protocol (IP)
• User Datagram Protocol (UDP)
• Post office Protocol (POP)
• Simple mail transport Protocol (SMTP)
• File Transfer Protocol (FTP)
• Hyper Text Transfer Protocol (HTTP)
• Hyper Text Transfer Protocol Secure (HTTPS)
• Telnet
• Gopher

35
• Transmission Control Protocol (TCP): TCP is a popular communication
protocol which is used for communicating over a network.
• It divides any message into series of packets that are sent from source to
destination and there it gets reassembled at the destination.
• Internet Protocol (IP): IP is designed explicitly as addressing protocol. It is
mostly used with TCP.
• The IP addresses in packets help in routing them through different nodes in a
network until it reaches the destination system. TCP/IP is the most popular
protocol connecting the networks.
• User Datagram Protocol (UDP): UDP is a substitute communication protocol
to Transmission Control Protocol implemented primarily for creating loss-
tolerating and low-latency linking between different applications.
• Post office Protocol (POP): POP3 is designed for receiving incoming E-mails.
• Simple mail transport Protocol (SMTP): SMTP is designed to send and
distribute outgoing E-Mail.

36
• File Transfer Protocol (FTP): FTP allows users to transfer files from one
machine to another. Types of files may include program files, multimedia files,
text files, and documents, etc.
• Hyper Text Transfer Protocol (HTTP): HTTP is designed for transferring a
hypertext among two or more systems. HTML tags are used for creating links.
These links may be in any form like text or images.
• HTTP is designed on Client-server principles which allow a client system for
establishing a connection with the server machine for making a request. The
server acknowledges the request initiated by the client and responds
accordingly.
• Hyper Text Transfer Protocol Secure (HTTPS): HTTPS is abbreviated as
Hyper Text Transfer Protocol Secure is a standard protocol to secure the
communication among two computers one using the browser and other fetching
data from web server.
• HTTP is used for transferring data between the client browser (request) and the
web server (response) in the hypertext format, same in case of HTTPS except
that the transferring of data is done in an encrypted format. So it can be said
that https thwart hackers from interpretation or modification of data throughout
the transfer of packets.

37
• Telnet: Telnet is a set of rules designed for connecting one system with another. The
connecting process here is termed as remote login. The system which requests for connection
is the local computer, and the system which accepts the connection is the remote computer.

• Gopher: Gopher is a collection of rules implemented for searching, retrieving as well as

displaying documents from isolated sites. Gopher also works on the client/server principle.

Some Other Protocols

Some other popular protocols act as co-functioning protocols associated with these primary
protocols for core functioning. These are:

• ARP (Address Resolution Protocol)

• DHCP (Dynamic Host Configuration Protocol)
• IMAP4 (Internet Message Access Protocol)
• SIP (Session Initiation Protocol)
• RTP (Real-Time Transport Protocol)
• RLP (Resource Location Protocol)
• RAP (Route Access Protocol)
• L2TP (Layer Two Tunnelling Protocol)
• PPTP (Point To Point Tunnelling Protocol)
• SNMP (Simple Network Management Protocol)
• TFTP (Trivial File Transfer Protocol)

38
 IP Address

• Internet Protocol hierarchy contains several classes of IP Addresses to be used

efficiently in various situations as per the requirement of hosts per network.
Broadly, the IPv4 Addressing system is divided into five classes of IP Addresses.
All the five classes are identified by the first octet of IP Address.
• Internet Corporation for Assigned Names and Numbers is responsible for assigning
IP addresses.
• The first octet referred here is the left most of all. The octets numbered as follows
depicting dotted decimal notation of IP Address −

39
• The number of networks and the number of hosts per class can be derived by
this formula −

• When calculating hosts' IP addresses, 2 IP addresses are decreased because they

cannot be assigned to hosts, i.e. the first IP of a network is network number and
the last IP is reserved for Broadcast IP.
Class A Address
• The first bit of the first octet is always set to 0 (zero). Thus the first octet ranges
from 1 – 127, i.e.

40
• Class A addresses only include IP starting from 1.x.x.x to 126.x.x.x
only. The IP range 127.x.x.x is reserved for loopback IP addresses.
• The default subnet mask for Class A IP address is 255.0.0.0 which
implies that Class A addressing can have 126 networks (27-2) and
16777214 hosts (224-2).
• Class A IP address format is
thus: 0NNNNNNN.HHHHHHHH.HHHHHHHH.HHHHHHHH
Class B Address
• An IP address which belongs to class B has the first two bits in the first
octet set to 10, i.e.

41
• Class B IP Addresses range from 128.0.x.x to 191.255.x.x. The default subnet mask
for Class B is 255.255.x.x.
• Class B has 16384 (214) Network addresses and 65534 (216-2) Host addresses.
• Class B IP address format
is: 10NNNNNN.NNNNNNNN.HHHHHHHH.HHHHHHHH
Class C Address
• The first octet of Class C IP address has its first 3 bits set to 110, that is −

• Class C IP addresses range from 192.0.0.x to 223.255.255.x. The default subnet

mask for Class C is 255.255.255.x.
• Class C gives 2097152 (221) Network addresses and 254 (28-2) Host addresses.
• Class C IP address format
is: 110NNNNN.NNNNNNNN.NNNNNNNN.HHHHHHHH

42
ADVANCE INTERNET CONCEPTS -UNIT II (page 43-66)

43
Anatomy of Email Message
• Email is a service which allows us to send the message in electronic
mode over the internet.
• It offers an efficient, inexpensive and real time mean of distributing
information among people.
• E-Mail Address
• Each user of email is assigned a unique name for his email
account. This name is known as E-mail address. Different users can
send and receive messages according to the e-mail address.
• E-mail is generally of the form username@domainname. For
example, webmaster@tutorialspoint.com is an e-mail address where
webmaster is username and tutorialspoint.com is domain name.
• The username and the domain name are separated by @
(at) symbol.
• E-mail addresses are not case sensitive.
• Spaces are not allowed in e-mail address.
44
E-mail Message Components
• E-mail message comprises of different components: E-mail Header, Greeting, Text,
and Signature. These components are described in the following diagram:

45
E-mail Header
• The first five lines of an E-mail message is called E-mail header. The header part
comprises of following fields:
• From
• Date
• To
• Subject
• CC
• BCC
From
• The From field indicates the sender’s address i.e. who sent the e-mail.
Date
• The Date field indicates the date when the e-mail was sent.
To
• The To field indicates the recipient’s address i.e. to whom the e-mail is sent.
Subject
• The Subject field indicates the purpose of e-mail. It should be precise and to
the point.

46
CC
• CC stands for Carbon copy. It includes those recipient addresses whom
we want to keep informed but not exactly the intended recipient.
BCC
• BCC stands for Black Carbon Copy. It is used when we do not want
one or more of the recipients to know that someone else was copied on
the message.
Greeting
• Greeting is the opening of the actual message. Eg. Hi Sir or Hi Guys
etc.
Text
• It represents the actual content of the message.
Signature
• This is the final part of an e-mail message. It includes Name of Sender,
Address, and Contact Number.

47
Advantages
• E-mail has prooved to be powerful and reliable medium of commmunication. Here are the
benefits of E-mail:
• Reliable
• Convenience
• Speed
• Inexpensive
• Printable
• Global
• Generality
Reliable
• Many of the mail systems notify the sender if e-mail message was undeliverable.
Convenience
• There is no requirement of stationary and stamps. One does not have to go to post office. But
all these things are not required for sending or receiving an mail.
Speed
• E-mail is very fast. However, the speed also depends upon the underlying network.
Inexpensive
• The cost of sending e-mail is very low.
Printable
• It is easy to obtain a hardcopy of an e-mail. Also an electronic copy of an e-mail can also be
saved for records.
Global
• E-mail can be sent and received by a person sitting across the globe.
Generality
• It is also possible to send graphics, programs and sounds with an e-mail.
48
Disadvantages
• Apart from several benefits of E-mail, there also exists some
disadvantages as discussed below:
• Forgery
• Overload
• Misdirection
• Junk
• No response
Forgery
• E-mail doesn’t prevent from forgery, that is, someone impersonating the
sender, since sender is usually not authenticated in any way.
Overload
• Convenience of E-mail may result in a flood of mail.
Misdirection
• It is possible that you may send e-mail to an unintended recipient.
Junk
• Junk emails are undesirable and inappropriate emails. Junk emails are
sometimes referred to as spam.
No Response
• It may be frustrating when the recipient does not read the e-mail and
respond on a regular basis.
49
Anatomy of an Email message
50
51
Reading Email or viewing
• Every email program offers you an interface to access email messages.
• Like in Gmail, emails are stored under different tabs such as primary, social, and
promotion.
• When you click one of tab, it displays a list of emails under that tab.
• In order to read an email, you just have to click on that email. Once you click a
particular email, it gets opened.
• The opened email may have some file attached with it.
• The attachments are shown at the bottom of the opened email with an option
called download attachment.
Composing and Sending Email
Before sending an email, we need to compose a message. When we are composing an
email message, we specify the following things:
• Sender’s address in To field
• Cc (if required)
• Bcc (if required)
• Subject of email message
• Text
• Signature

52
Replying Email
• After reading an email, you may have to reply that email. To reply an email,
click Reply option shown at the bottom of the opened email.
• Once you click on Reply, it will automatically copy the sender’s address in to
the To field. Below the To field, there is a text box where you can type the
message.
• Once you are done with entering message, click Send button. It’s that easy.
Your email is sent.

53
 SEARCH ENGINES

Introduction
• Search Engine refers to a huge database of internet resources such as web pages,
newsgroups, programs, images etc. It helps to locate information on World Wide
Web.
• User can search for any information by passing query in form of keywords or
phrase. It then searches for relevant information in its database and return to the
user.

54
 Search Engine Components
Search Engine Components
Generally there are three basic components of a search engine as listed below:
1. Web Crawler
2. Database
3. Search Interfaces

1. Web crawler

• It is also known as spider or bots. It is a software component that traverses the

web to gather information.

2. Database

• All the information on the web is stored in database. It consists of huge web
resources.
3. Search Interfaces

• This component is an interface between user and the database. It helps the user to
search through the database.
55
 Search Engine Working

Search Engine Working

• Web crawler, database and the search interface are the major component of a
search engine that actually makes search engine to work.
• Search engines make use of Boolean expression AND, OR, NOT to restrict and
widen the results of a search.
Following are the steps that are performed by the search engine:
• The search engine looks for the keyword in the index for predefined database
instead of going directly to the web to search for the keyword.
• It then uses software to search for the information in the database. This
software component is known as web crawler.
• Once web crawler finds the pages, the search engine then shows the relevant
web pages as a result.
• These retrieved web pages generally include title of page, size of text portion,
first several sentences etc.

56
 Examples
Following are the several search engines available today:

Search Engine Description

Google It was originally called BackRub. It is the

most popular search engine globally.

Bing It was launched in 2009 by Microsoft. It is

the latest web-based search engine that
also delivers Yahoo’s results.

Ask It was launched in 1996 and was originally

known as Ask Jeeves. It includes support
for match, dictionary, and conversation
question.

AltaVista It was launched by Digital Equipment

Corporation in 1995. Since 2003, it is
powered by Yahoo technology.

AOL.Search It is powered by Google.

57
 Meta-Search Engines

Metasearch engine- is an online information retrieval tool that uses the data of a web search
engine to produce its own results. Metasearch engines take input from a user and
immediately query search engines for results. Sufficient data is gathered, ranked, and
presented to the users

58
 Search Engines Generations

• 1st Generation - Basic SEs:

• 2nd Generation - Meta SEs:

• 3rd Generation - Popularity Ses

59
 2nd Generation SEs - MetaSEs

• Using several SEs in parallel.

• The results are filtered, ranked and presented to the user as a uniformed list.

• The ranking is a combination of the number of sources each page appeared in, and
the ranking in each source

60
Meta SE is a Meta-Service
• It doesn’t use an Index/database of its own.
• It uses other external search services that provide the information necessary to
fulfill user queries.

61
Google · Yahoo ·Jeeves Ask
About · LookSmart · Overture
FindWhat

62
 MSE - Motivation

1. The number and variety of SEs.

2. Each SE provides an incomplete snapshot of Web.
3. Users are forced to try and retry their queries
across different SEs.
4. Each SE has its own interface.
5. Irrelevant, outdated or unavailable responses.
6. Each query is independent.
7. No individual customization.
8. The result is not homogenized.

63
64
 When to Use Mets Search Engine?

• When single Basic-SE fails to provide good results.

• One-stop shopping - prefer to search multiple
SEs/sites at once to get blended ranked results (so as
to save effort/time).
• Searching for multi-faceted topics.
• Want to get clustered results to focus search
on the relevant keywords.
• Looking for current events/news.

65
Meta-SEs Features Chart

66
HTML INTRODUCTION

UNIT – III (Page 67-94)

67
68
 Front End Development: Backend Development:
Backend is server side of the website.
The part of a website that user interacts with
directly is termed as front end. It stores and arranges data, and also makes sure everything
on the client-side of the website works fine.
It is also referred to as the ‘client side’ of the
application. It is the part of the website that you cannot see and
interact with.
It includes everything that users experience
directly: text colors and styles, images, It is the portion of software that does not come in direct
graphs and tables, buttons, colors, and contact with the users.
navigation menu.
The parts and characteristics developed by backend
HTML, CSS, and Javascript are the designers are indirectly accessed by users through a front-
languages used for Front End development. end application.
The structure, design, behavior, and content Activities, like writing APIs, creating libraries, and
of everything seen on browser screen when working with system components without user interfaces
websites, web applications, or mobile apps or even systems of scientific programming, are also
are opened up, is implemented by front End included in the backend.
developers.
Backend developer focuses on databases, scripting, and the
Responsiveness and performance are two architecture of websites.
main objectives of the front End.
Code written by back-end developers helps to
communicate the database information to the browser.
69
 Frontend Developer vs. Backend Developer
Parameter Frontend Backend

Skillsets The languages that a front-end web The database, Server, API, etc.
developer should be familiar with are HTML,
CSS, and JavaScript.

Team Front-end developers design the look of the Back-end developers develop an application
website, by taking user's inputs and that supports the front-end. It should also
modifying it through testing. provide support, security, and content
management.

Stand-alone Service Front-end development service can't be Back-end development can be offered as an
offered independently. independent service in the form of BaaS
(Back-end as a service).

Goal Front-end developers should make sure that The back-end team may need to create an
the website is accessible to all users, and it application around the front-end and
remains responsive in all views - mobile and support it. Moreover, they need to make
desktop. sure that the website opens up and
functioning properly.

70
“Application Programming Interface.”

Think of an API like a menu in a restaurant.

The menu provides a list of dishes you can order, along with a description of each dish.
When you specify what menu items you want, the restaurant’s kitchen does the work
and provides you with some finished dishes.
You don’t know exactly how the restaurant prepares that food, and you don’t really need
to.
If you want to capture photos or video from the iPhone’s camera, you don’t have to
write your own camera interface.
You use the camera API to embed the iPhone’s built-in camera in your app.
If APIs didn’t exist to make this easy, app developers would have to create their own
camera software and interpret the camera hardware’s inputs.
But Apple’s operating system developers have done all this hard work so the developers
can just use the camera API to embed a camera, and then get on with building their app.
And, when Apple improves the camera API, all the apps that rely on it will take
advantage of that improvement automatically

71
72
 Structure of how HTML page works

<!DOCTYPE html>
<html>
<head>
<title>GURU NANAK COLLEGE</title>
</head>
<body>

<h1>B.Sc(IT)</h1>
<p>USER INTERFACE PROGRAMMING.</p>

</body>
</html>

A basic HTML page structure mainly consists of 4 HTML tags:

<!DOCTYPE html> : This is the Document Type Declaration that informs the web
browser about the type and version of HTML used on a web page.
<html> : A Web page begins & end with HTML tag
<head> : It includes the page title, scripts, styles & meta-information about website
<body> : It will contain the main content of the web page.

73
Document Type Declaration:
A document type declaration (DTD), <!DOCTYPE html>, is an instruction to the
browser about the type of document.
The DTD specifies the rules for the markup language so that the browsers
render the content correctly.
It is always good to add a declaration to your HTML documents for proper
standards.
Html
HTML starting tag <html> indicates the browser that it is an HTML document begins
and HTML closing tag </html> tells the browser that the HTML document is
completed.

Header
The header section does not output text inside the browser, it is used to specify
information about the web page.
It is used to display the page title, scripts, and style for the web page.
Body
This is the main part of the HTML document.
The content which we want to display on the browser will be written inside body tags.
The HTML body contains different types of content and tags.
For example, we have used <h1> heading and <p>paragraph tags inside body.
74
How to Create, Save and Open an HTML file in Notepad

Notepad is a Windows Text Editor which comes free, Pre-installed in our Windows
Operating.
Notepad is capable to Create, Save, Edit and Open an HTML File.
CREATE
To Create HTML File using Notepad, You need to create a Blank file.
After that Write your HTML Code inside the Notepad text Editor’s Blank File.
You have successfully created an HTML File. Now your Final Step is to save your HTML file.

SAVE
To save HTML Code using Notepad Text Editor you need to Select the File Menu from the
Top Navigation Bar.
Select Save Option from there.
Give your HTML file a Name with .html Extension.
And click save Button to save your HTML File.

How to Open HTML file in Notepad Text Editor

To open an HTML file or .html File in Notepad Text Editor, you have to follow These Steps:
Step 1: Select File Menu
Step 2: Select Open option From There
Step 3: File Explorer will Pop-Up on your Screen
(Locate your HTML file in your File Explorer) 75
Step 4: Select and Open your HTML from there.
how to open html file in chrome

To Open or Run an HTML file in Chrome Browser we need to Double click on that
HTML file.

It will Automatically will open in your Web Browser.

If you file Isn’t opening in your Browser, Then Right click on that HTML file and
Select Open with option from there.

A small Menu with all the browser list will appear on the Screen.
Select Chrome form there and You HTML file will open / Run on your Chrome
Web Browser.

76
 History of HTML
HISTORY OF HTML
 W3C and WHATWG initially developed HTML.
 It was initially developed in 1993.
 W3C mainly checks for standards of Html and other stuff.
 Since the initial release, lots of version of Html has been developed.
 Initially, its version is 1.0 or simply HTML.
Different Versions of HTML
1. HTML 1.0
2. HTML 2.0
3. HTML 3.2
4. HTML 4.01
5. HTML5
6. W3C HTML Validator

77
• HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1.

• HTML5 is a standard for structuring and presenting content on the World Wide Web.

• The new standard incorporates features like video playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

• HTML5 introduces a number of new elements and attributes that can help you in building modern websites.

Features:

• It has introduced new multimedia features which supports audio and video controls by using <audio> and
<video> tags.

• There are new graphics elements including vector graphics and tags.

• Enrich semantic content by including <header> <footer>, <article>, <section> and <figure> are added.

• Drag and Drop- The user can grab an object and drag it further dropping it on a new location.

• Geo-location services- It helps to locate the geographical location of a client.

78
• Web storage facility, which provides web application methods to
store data on web browser.,

• Uses SQL database to store data offline.

• Allows to draw various shapes like triangle, rectangle, circle, etc.

• Capable of handling incorrect syntax.

• Easy DOCTYPE declaration i.e. <!doctype html>

• Easy character encoding i.e. <meta charset=”UTF-8″>

79
 HTML DOCUMENT
HTML Documents
• All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

80
 HTML DOCUMENT
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

81
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
• <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

82
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

83
XHTML Document Structure

84
The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the
most important attribute of the HTML a tag. and which links to destination page or URL.

An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext
link.
Search engines use the tag to determine the subject matter of the destination URL.
Users click on the anchor text to reach the link target.
<a href="http://www.example.com">My sample page </a>
An Anchor tag is defined with and consists of three parts:
the href attribute
the name attribute
the target attribute
Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.
An active link is underlined and red.
85
href attribute
To create a hyperlink, the destination (address) of the document must be known.
A hyperlink can link to pages on your own domain, to other websites, or to a file (such
as a PDF docume

the name attribute

The name attribute of the anchor tag can be used to enable users to “jump” to a
specific point on a page.

the target attribute

The target attribute specifies how the destination page or the target document should
be opened. “target=” _ blank “ is used for opening of the target page in a new tab.
86
 HTML Links - Hyperlinks
HTML Links - Hyperlinks
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
Note: A link does not have to be text. A link can be an image or any other
HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following
syntax:
<a href="url">link text</a>
• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL address.

87
Example
• This example shows how to create a link to W3Schools.com:
• <a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

88
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

HTML Links - The target Attribute

• By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

1. _self - Default. Opens the document in the same window/tab as it was clicked
2. _blank - Opens the document in a new window or tab
3. _parent - Opens the document in the parent frame
4. _top - Opens the document in the full body of the window

89
Example
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

90
 SAMPLE HTML DOCUMENTS
Doctype:
• DOCTYPE is the first thing which should be present in an HTML5 document
• A doctype or document type declaration is an instruction that tells the web browser
about the markup language in which the current page is written.
• The Doctype is not an element or tag, it lets the browser know about the version of
or standard of HTML or any other markup language that is being used in the
document.
• Declaration of a Doctype:
• A DOCTYPE declaration appears at the top of a web page before all other
elements.
• According to the HTML specification or standards, every HTML document
requires a document type declaration to ensure that the pages are displayed in the
way they are intended to be displayed.
• The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:
• < !DOCTYPE html > 91
HTML Program Examples with Output using all the
Basic Tags:
A cumulative example of all the elements we have described above is below.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
•
• <body>
• <h1>Homepage Headline</h1>
• <p>This is before the break tag<br />
• and this after the break tag.</p>
• </body>
•
• </html>
• Note: DOCTYPE is used to identify the type of document as an HTML file

92
Here is a sample document title:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE> ... other head elements...
</HEAD>
<BODY> ... document body...
</BODY>
</HTML>

93
DEPRECATED DOCUMENT EXAMPLE:
The following HTML fragment illustrates the use of the deprecated attributes. It
sets the background color of the canvas to white, the text foreground color to black,
and the color of hyperlinks to red initially, fuchsia when activated, and maroon once
visited.
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="red" alink="fuchsia"
vlink="maroon"> ... document body...
</BODY>
</HTML>

94
 UNIT – IV (Page 95-128)
HEAD AND BODY SECTIONS

95
Header Section

• Every HTML document must have a head section which begains with the tag
<HEAD> and ends with </HEAD>.

The following are some important compontents of the header section.

• Title

• Prologue

• Links

96
 HTML <title> Tag
Definition and Usage
The tile is the heading that appears as the title of the windows. It is enclosed between the
tags <TITLE> and </TITLE>.
• The <title> tag defines the title of the document. The title must be text-only, and it is
shown in the browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!
• The contents of a page title is very important for search engine optimization (SEO)! The
page title is used by search engine algorithms to decide the order when listing pages in
search results.
The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
Here are some tips for creating good titles:
• Go for a longer, descriptive title (avoid one- or two-word titles)
• Search engines will display about 50-60 characters of the title, so try not to have titles
longer than that
• Do not use just a list of words as the title (this may reduce the page's position in search
results)
Note: You can NOT have more than one <title> element in an HTML document.

97
Example
Define a title for your HTML document:
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

98
99
PROLOUGE

 A prologue is only a comment which can tell about the HTML version that is
adopted for preparing the document.

A prologue is shown as follows:-

<! Doctype HTML 3.0> 2.4 Links.

100
 LINKS

What is a link?

• It is a connection from one web resource to another.

• A link has two ends,An anchor and direction. The link starts at the
“source” anchor and points to the “destination” anchor, which may be
any Web resource such as an image, a video clip, a sound bite, a
program, an HTML document or an element within an HTML
document.
HTML Link Syntax
Links are specified in HTML using the “a” tag.

101
 LINKS

<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
<p>Click on the following link</p>
<a href = "https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>

</html>

102
 LINKS
Output

103
 LINKS
Internal Links
• An internal link is a type of hyperlink whose target or destination is a resource,
such as an image or document, on the same website or domain.
Input:
• <!DOCTYPE html>
• <html>
• <h3>Internal Link And External Link Example</h3>
• <body>
• <p><a href="html_contribute.asp/">GeeksforGeeks Contribute
• </a> It is a link to the contribute page on GeeksforGeeks' website.</p>
•
• <p><a href="https://www.geeksforgeeks.org">GeeksforGeeks
• </a> It is a link to the GeeksforGeeks website on the World Wide Web.</p>
•
• </body>
• </html>

104
LINKS

105
 COMMENT
Comment
• HTML comments are not displayed in the browser, but they can help document your
HTML source code.
• HTML programming language has the facility to include comment lines for the reference
of programmer. The comment will not appear in the web page.
• We include comments using the <!> tag.
You can add comments to your HTML source by using the following syntax:
<! Comment......>
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Example
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
• Comments are also great for debugging HTML, because you can comment out HTML
lines of code, one at a time, to search for errors:

106
Output :

107
 HEADING
• The <header> tag defines the header of a page or a section. It usually contains a
logo, search, navigational links, etc.
• This tag doesn’t present a new section in the outline. A <header> element
commonly contains the heading (an <h1>–<h6> element) of a surrounding section.
However, this is not required.
• The <header> tag is one of the HTML5 elements. In an HTML document, it is
allowed to use several <header> tags, which can be placed in any part of it.

It is not permitted to place the <header> tag inside

the <footer> and <address> elements, and in another <header> tag.
Syntax
The <header> tag comes in pairs. The content is written between the opening
(<header>) and closing (</header>) tags

108
 Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>

109
 Horizontal Rule
HTML <hr> Tag
• The <hr> tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page to divide or separate
document sections.
• The <hr> tag is an empty tag, and it does not require an end tag.
Tag Attributes: The table given below describe the <hr> tag attributes:
Attribute Value Description
Used to specify the
Align left center right alignment of the
horizontal rule.
Used to specify the bar
noshade noshade
without shading effect.
Used to specify the height
size pixels
of the horizontal rule.
Used to specify the width
width pixels
of the horizontal rule. 110
Syntax :

<hr> ...Below programs illustrate the <hr> tag in HTML:

Example 1:

HTML
<!DOCTYPE html>
<html>
<body>
<p>There is a horizontal rule below this paragraph.</p>
<!--HTML hr tag is used here-->
<hr>
<p>This is a horizontal rule above this paragraph.</p>
</body>
</html>
111
Output :

112
 PARAGRAPHS
HTML Paragraphs
• A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

• The HTML <p> element defines a paragraph.

• A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

113
Output :

114
HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different results.
• With HTML, you cannot change the display by adding extra spaces or extra lines in your
HTML code.
• The browser will automatically remove any extra spaces and lines when the page is
displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

115
Output :

116
 IMAGES AND PICTURES
Images - can improve the design and the appearance of a web page.
HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web 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.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">

117
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note:
 When a web page loads; it is the browser, at that moment, that gets the
image from a web server and inserts it into the page.
 Therefore, make sure that the image actually stays in the same spot in
relation to the web page, otherwise your visitors will get a broken link
icon.
 The broken link icon and the alt text are shown if the browser cannot find
the image.
Example

<img src="img_chania.jpg" alt="Flowers in Chania">

118
Output :

119
The alt Attribute
• The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

• The value of the alt attribute should describe the image:

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

120
Output :

121
HTML <picture> Element

122
The HTML <picture> element allows you to display different pictures for different devices or
screen sizes.
The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying image
resources.

The <picture> element contains one or more <source> elements, each referring to different images
through the srcset attribute. This way the browser can choose the image that best fits the
current view and/or device.

Each <source> element has a media attribute that defines when the image is the most suitable.

Example
Show different images for different screen sizes:

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
123
Output :

124
 Ordered and Unordered List
LIST
•A list is a record of short pieces of information, such as people’s names, usually written or
printed with a single thing on each line and ordered in a way that makes a particular thing easy to
find.
For example:
•A shopping list
•To-do list
•Lists in HTML
HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.
The types of lists that can be used in HTML are :
1. ul : An unordered list. This will list items using plain bullets.
2. ol : An ordered list. This will use different schemes of numbers to list
your items.
3. dl : A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
125
The HTML Ordered List
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items
are marked with numbers by default.

• <!DOCTYPE html>
• <html>
• <body>
• <h2> List OF COURSES</h2>
• <ol>
• <li>B.Sc(IT)</li>
• <li>B.Sc(CS)</li>
• <li>B.Sc(MATHS)</li>
• <li>B.Sc(PHYSICS)</li>
• </ol>
• </body>
• </html>

• Type=”A” : The list items will be numbered with uppercase letters.

• <ol type="a">
• Type=”a” : The list items will be numbered with lowercase letters.
• <ol type="a">
• Type=”I” : The list items will be numbered with uppercase roman numbers.
• <ol type="I">
• Type=”i” : The list items will be numbered with lowercase roman numbers
126
The Unordered HTML 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.

<!DOCTYPE html> <html>

<body>
<h2> LIST OF COURSES </h2>
<ul>
<li>B.Sc(IT)</li>
<li>B.Sc(CS)</li>
<li>B.Sc(MATHS)</li>
<li>B.Sc(PHYSICS)</li>
</ul>
</body>
</html>
• Circle : Sets the list item marker to a circle
• <ul style="list-style-type:circle">
• Square : Sets the list item marker to a square
• <ul style="list-style-type:square">

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

• <!DOCTYPE html>
• <html>
• <body>
• <h2>A Description List</h2>
• <dl>
• <dt>PENDRIVE</dt>
• <dd>- 16 GB</dd>
• <dt>HARD DISK</dt>
• <dd>- 1 TB</dd>
• </dl>
• </body>
• </html>

128
TABLES :UNIT – V (Pages 129-191)

129
 Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
Tables
 The <TABLE></TABLE> element has four sub-elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
 The table row elements usually contain table header elements or table data
elements.

130
 HTML Tables TAGS
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<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> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table 131
 Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>

132
 TABLE CREATED

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

133
HTML Table - Cell that contain Many Columns Spans
• To make a cell span more than one column, use
the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

134
Output :

135
136
HTML Table - Cell that Spans Many Rows
• To make a cell span more than one row, use
the rowspan attribute:
• Example
• <table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

137
Output :

138
Output:

139
HTML Table - Add Cell Padding

• Cell padding specifies the space between the cell content and its borders.
• If you do not specify a padding, the table cells will be displayed without
padding.
• To set the padding, use the CSS padding property:

Example :
th, td {
padding: 15px;
}

140
Output :

141
Output :

142
HTML Table - Add Border Spacing or Cell Spacing

• Border spacing specifies the space between the cells.

• To set the border spacing for a table, use the CSS border-
spacing property:
Example

table {
border-spacing: 5px;
}

143
Output :

144
Output :

145
 HTML NESTED TABLE
HTML Nested Table
• The nested table in HTML means creating a table on a webpage inside another
table on the same web page.
Note: The inner table always has to be placed between the <td> .......... </td> of the
outer table.
Example: The following example describes how to create a nested table. In this
example we create a table, which contains another table in the 2nd cell of first row.
<!DOCTYPE html>
• <html>
• <head>
• <title>
Example of Nested Table
• </title>
• </head>
• <body>
(Code Continue with next page)

146
<!?The following table tag is used to create outer table on a webpage.
This table tag contains two attributes border and bordercolor.
The border attribute is used to specify the border (4) of the outer table, and the borderc
olor is used to specify the green colour of border of an outer table. -->
• <table border="4" bordercolor="green">
• <tr>
• <td> It is a 1st Cell of 1st row in the 1st Table. </td>
• <td> It is a 2nd Cell of 1st row in the 1st Table.
• <!?
The following table tag is used to create an inner table which is shown in the second c
ell of the first row in the outer table on a webpage.
This table tag also contains two attributes border and bordercolor.
The border attribute is used to specify the border (6) of the inner table, and the borde
rcolor is used to specify the blue colour of border of an inner table. -->
• <table border="6" bordercolor="blue">
• <tr>
• <td> It is a 1st Cell of 1st row in the 2nd Table. </td>
• </tr>
• <tr> (Code Continue with next page)
147
• <td> It is a 2nd Cell of 2nd row in the 2nd Table. </td></tr>
• </table>
• </td>
• </tr>
• <tr>
• <td> It is a 3rd Cell of 2nd row in the 1st Table. </td>
• <td> It is a 4th Cell of 2nd row in the 1st Table. </td>
• </tr>
• </table>
• </body>
• </html>

148
Output:

149
 FRAMES
HTML frameset Tag
• The <frameset> tag in HTML is used to define the frameset.
• The <frameset> element contains one or more frame elements. It is used to specify
the number of rows and columns in frameset with their pixel of spaces.
• Each element can hold a separate document.
Note: The <frameset> tag is not supported in HTML
Syntax:
<frameset cols = "pixels|%|*">
HTML frames
 Frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset.

 The window is divided into frames in a similar way the tables are organized: into rows
and columns.

150
NESTED FRAMES

151
Nesting Frames
• It is possible to nest a frameset within another frameset, which means you can take
one row and divide it into several columns (or, conversely, divide a column into
several rows), as shown in Fig.
• Nesting gives you more page layout flexibility and complexity than simply dividing
a frameset into a grid of rows and columns.
• In above figure the top-level frameset specifies two columns.
• The first column is a frame 100 pixels wide. The second column (which occupies
the remainder of the window) is filled with another frameset, this one with three
rows.
• There is no technical limit on the number of levels that frames can be nested, only
practical ones.
• If you nest frames, be careful to close each successive frameset or the document
will not display correctly.

152
 Dropdown List in Html

In HTML, we can easily make a drop-down menu in the Html document using the
following different ways:

• Using Html Form

• Using the Internal CSS

Using Html Form

• If we want to make a dropdown menu in the Html document using Form, we have
to follow the steps which are given below. Using these steps, we can easily make a
dropdown menu:
• Step 1: Firstly, we have to type the Html code in any text editor or open the
existing Html file in the text editor in which we want to use the form for making a
dropdown menu.

153
 Dropdown List in Html
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Drop Down Menu using Html Form
</Title>
</Head>
<Body>
• This page helps you to understand how to make a dropdown menu in Html
document.
• And, this section helps you to understand how to make a drop-
down menu using Html form.
</Body>
</Html>

154
 Dropdown List in Html
Step 2: Now, we have to place the cursor at that point in the body tag of the Html document
where we want to show the dropdown menu. And, then we have to type the <form>
tag at that point.
<Body>
This page helps you to understand how to make a dropdown menu in the Html document.
And, this section helps you to understand how to make a drop-
down menu using Html form.
<form>

</form>
</Body>

Step 3: Now, we have to define the <label> tag and <select> tag between the starting and
closing form tag.
<form>
<label> Select Cars </label>
<select>

</select>
</form>
155
 Dropdown List in Html
Step 4: Now, we have to define the option tag according to the number of values which
are to be shown in the drop-down menu.
<form>
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW
</option>
<option value = "Mercedes"> Mercedes
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>

156
 Dropdown List in Html
Step 5: And, at last, we have to save the Html file and then run the file.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Drop Down Menu using Html Form
</Title>
</Head>
<Body>
• This page helps you to understand how to make a dropdown menu in Html document.
• And, this section helps you to understand how to make a drop down menu using Html fo
rm.
<form>
157
 Dropdown List in Html
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW
</option>
<option value = "Mercedes"> Mercedes
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>
</Body>
</Html>
158
The output of above Html Code is shown in the
following screenshot:

159
 FORMS

Forms add the ability to web pages to not only provide the person
viewing the document with dynamic information but also to
obtain information from the person viewing it, and process the
information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.

160
 FORMS
 To insert a form we use the <FORM></FORM> tags. The rest of the form elements
must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”>
</P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>

161
 <FORM> element attributes

 ACTION ATTRIBUTE: is the URL of the CGI (Common Gateway

Interface) program that is going to accept the data from the form, process it,
and send a response back to the browser.
 METHOD ATTRIBUTE: GET (default) or POST specifies which HTTP
method will be used to send the form’s contents to the web server. The CGI
application should be written to accept the data from either method.
 NAME: is a form name used by VBScript or
JavaScripts.
 TARGET: is the target frame where the response page will show up
Form Elements
 Form elements have properties: Text boxes, Password boxes,
Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and
Image.
 The properties are specified in the TYPE Attribute of the HTML element
<INPUT></INPUT>.

162
Sami Ali

Al al-Bayt University

163
 Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable
name to be passed to the CGI application

CHECKED= Button/box checked

SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters
accepted.

164
Sample Forms

165
 Text Box
 Text boxes: Used to provide input fields for text, phone
numbers, dates, etc.
<INPUT TYPE= " TEXT " >
Browser will display
Textboxes use the following attributes:
 TYPE: text.
 SIZE: determines the size of the textbox in characters.
Default=20 characters.
 MAXLENGHT : determines the maximum number of
characters that the field will accept.
 NAME: is the name of the variable to be sent to the CGI
application.
 VALUE: will display its contents as the default value.
166
 Example on Text Box
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following
bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
167
Output

168
 Password
 Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Browser will display
Text typed in a password box is starred out in the browser
display.
Password boxes use the following attributes:
 TYPE: password.
 SIZE: determines the size of the textbox in characters.
 MAXLENGHT: determines the maximum size of the password in
characters.
 NAME: is the name of the variable to be sent to the CGI
application.
 VALUE: is usually blank.

169
 Example on Password Box
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>
170
Output

171
 Hidden
 Hidden: Used to send data to the CGI application that
you don’t want the web surfer to see, change or have
to enter but is necessary for the application to process
the form correctly.
<INPUT TYPE=“HIDDEN”>
Nothing is displayed in the browser.
Hidden inputs have the following attributes:
 TYPE: hidden.
 NAME: is the name of the variable to be sent to the
CGI application.
 VALUE: is usually set a value expected by the CGI
application.
172
 Check Box
 Check Box: Check boxes allow the users to select more than
one option.
<INPUT TYPE=“CHECKBOX”>
Browser will display

Checkboxes have the following attributes:

 TYPE: checkbox.
 CHECKED: is blank or CHECKED as the initial
status.
 NAME: is the name of the variable to be sent to the
CGI application.
 VALUE: is usually set to a value.
173
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language" CHECKED><BR>
English:<INPUT TYPE="CheckBox" Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language">
<BR></FORM> </BODY></HTML>

174
Output

175
 Radio Button
 Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Browser will display

Radio buttons have the following attributes:

 TYPE: radio.
 CHECKED: is blank or CHECKED as the initial
status. Only one radio button can be
checked
 NAME: is the name of the variable to be sent to the
CGI application.
 VALUE: usually has a set value.

176
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
</BODY></HTML>

177
178
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED>
Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>
179
Output

180
 Push Button
 Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
Browser will display

Push Button has the following attributes:

 TYPE: button.
 NAME: is the name of the button to be used
in scripting.
 VALUE: determines the text label on the button.

181
<DIV align=center><BR><BR>
<FORM>
<FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button"
VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" >
<BR><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" >
<BR><BR>
<FONT Color=yellow>
</FORM></DIV>
182
183
 Submit Button
 Submit: Every set of Form tags requires a Submit button.
This is the element causes the browser to send the names
and values of the other elements to the CGI Application
specified by the ACTION attribute of the FORM element.
<INPUT TYPE=“SUBMIT”>
The browser will display
Submit has the following attributes:
 TYPE: submit.
 NAME: value used by the CGI script for processing.
 VALUE: determines the text label on the button, usually
Submit Query.

184
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

185
186
 Reset Button
• Reset: It is a good idea to include one of these for
each form where users are entering data. It allows
the surfer to clear all the input in the form.

• <INPUT TYPE=“RESET”>

• Browser will display

•
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button,
usually Reset.

187
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>

188
189
 Image Submit Button
 Image Submit Button: Allows you to substitute an
image for the standard submit button.

<INPUT TYPE=“IMAGE” SRC=“jordan.gif”>

Image submit button has the following attributes:

 TYPE: Image.
 NAME: is the name of the button to be used in scripting.
 SRC: URL of the Image file.

190
<form>
<H1><font color=blue>
Click to go Jordan’s Map:
<INPUT TYPE="IMAGE" SRC="jordan.gif">
</form>

191
References :

Text Book References :

1. Wendy G. Lehnert , “ Internet 101 – A Begineers Guide to Internet and the World
Wide Web” , Addison Wesley.
2. Xavier.C , World , “ Wide Web Design with HTML” , Tata McGraw Hill
Publishing Limited.

Website References :

1. https://www.w3schools.com/
2. https://www.tutorialspoint.com/internet_technologies/html.htm
3. https://www.geeksforgeeks.org/html-tutorials/

192
Syllabus for Students Reference

193
Thank You

194