Internet & Web Page Designing: Unit - 1 2-8

KCRI Internet & Wpd 1
CONTENTS
Internet & Web UNIT – 1 2-8
Page Designing Overview of Internet :
What is Internet, Internet Evolution, Advantage &
Disadvantage of Internet, Extra Net, Reference
Models, Layeys, TCP/ IP Model, Domain name
system Architecture, DNS Working.
UNIT – 2 9-17
REVISION 1.0 Internet Services & Protocols :
1 DECEMBER, 2016
Communication Services, Web Services, World
Wide Web, Video Conferencing, Internet
Protocols, TCP, IP, UDP, FTP, HTTP, Email,
IMAP, POP, Email Working, E-mail Security.
UNIT – 3 18-33
Web Designing Concepts & Hosting :
ER. Gaurav Khandelwal
Professor
Wireframe, Web Designing Tools, Web
Department of Computer Science
Development Process, Websites Hosting, Types
of Hosting, Web sites Security, World Wide Web
Evolution & Architecture, Web Browsers, Web
Server, Proxy Server, Search Engines, Usenet,
Digital Signature, Firewall Security.
UNIT – 4 34-42
HTML – Overview :
HTMl Document Structure, Basic Tags- Heading
Paragraph, Line Break, Center Etc, HTML
Elements, HTML Attributes.
UNIT – 5 42-56
HTML Formating :
Type Style, Meta Tags, Comments,
Images,Tables, Text Links, HTML Fonts etc.
KCRI COLLEGE
ALWAR 301001 RAJASTHAN
2017-2018
Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

technological & Infrastructural

UNIT-1 changes as discussed below:
Overview of Internet  The origin of Internet devised
from the concept of Advanced
Research Project Agency
What is Iternet:
Network (ARPANET).
 Internet is a world-wide global
 ARPANET was developed by
system of interconnected computer
United States Department of
networks.
Defense.
 Internet uses the standard Internet
 Basic purpose of ARPANET was
Protocol (TCP/IP).
to provide communication
 Every computer in internet is among the various bodies of
identified by a unique IP address. government.
 IP Address is a unique set of  Initially, there were only four
numbers (such as 110.22.33.114) nodes, formally called Hosts.
which identifies a computer
 In 1972, the ARPANET spread
location.
over the globe with 23 nodes
 A special computer DNS (Domain located at different countries
Name Server) is used to give name and thus became known
to the IP Address so that user can as Internet.
locate a computer by a name.
 By the time, with invention of
 For example, a DNS server will new technologies such as TCP/IP
resolve a name protocols, DNS, WWW,
http://www.kcricollege.com to browsers, scripting languages
a particular IP address to uniquely etc.,Internet provided a medium
identify the computer on which this to publish and access
website is hosted. information over the web.
 Internet is accessible to every user
all over the world. Internet Advantages
Internet covers almost every aspect of
life, one can think of. Here, we will
discuss some of the advantages of
Internet:
Internet Evolution
The concept of Internet was originated
in 1969 and has undergone several

Internet Disadvantages
Extranet Issues
Apart for advantages there are also
some issues associated with extranet.
Extranet These issues are discussed below:
Extranet refers to network within an Hosting

organization, using internet to connect Where the extranet pages will be held
to the outsiders in controlled manner. i.e. who will host the extranet pages.
It helps to connect businesses with In this context there are two choices:
their customers and suppliers and  Host it on your own server.
therefore allows working in a  Host it with an Internet Service
collaborative manner. Provider (ISP) in the same way as
web pages.
But hosting extranet pages on your
own server requires high bandwidth
internet connection which is very
costly.
Security
Additional firewall security is required
if you host extranet pages on your
own server which result in a complex
security mechanism and increase work
load.
Extranet Benefits Accessing Issues

Information can not be accessed
without internet connection. However,
Extranet proves to be a successful
information can be accessed in
model for all kind of businesses
Intranet without internet connection.
whether small or big. Here are some
of the advantages of extranet for
employees, suppliers, business Decreased Interaction
partners, and customers: It decreases the face to face
interaction in the business which
results in lack of communication

among customers, business partners

and suppliers.
Extranet vs. Intranet

The following table shows differences
between Extranet and Intranet:
Extranet Intranet
Internal network
Internal network
that can not be
that can be
accessed
accessed externally. PHYSICAL LAYER
externally.
The Physical layer is responsible for
Extranet is Only limited the following activities:
extension of users of a  Activating, maintaining and
company's Intranet. company. deactivating the physical
For limited external connection.
Only for  Defining voltages and data rates
communication
communication needed for transmission.
between customers,
within a  Converting digital bits into
suppliers and
company. electrical signal.
business partners.
 Deciding whether the connection
is simplex, half duplex or full
duplex.
Internet Reference Models DATA LINK LAYER

The data link layer performs the
following functions:
OSI Reference Model  Performs synchronization and
OSI is acronym of Open System error control for the information
Interface. This model is developed by which is to be transmitted over
the International organization of the physical link.
Standardization (ISO) and  Enables error detection, and
therefore also referred as ISO- adds error detection bits to the
OSI Model. data which are to be
transmitted.
The OSI model consists of seven NETWORK LAYER

layers as shown in the following Following are the functions of Network
diagram. Each layer has a specific Layer:
function, however each layer provide  To route the signals through
services to the layer above. various channels to the other
end.
 To act as the network controller
by deciding which route data
should take.

 To divide the outgoing messages variant-caps: normal; font-

into packets and to assemble weight: 400; letter-spacing:
incoming packets into messages normal; orphans: 2; text-align:
for higher levels. start; text-indent: 0px; text-
transform: none; white-space:
normal; widows: 2; word-
TRANSPORT LAYER spacing: 0px; -webkit-text-
The Transport layer performs the stroke-width: 0px; text-
following functions: decoration-style: initial; text-
decoration-color: initial;">
 It decides if the data
transmission should take place  This layer makes it sure that the
on parallel paths or single path. information is delivered in such
a form that the receiving system
 It performs multiplexing,
will understand and use it.
splitting on the data.
 It breaks the data groups into
smaller units so that they are APPLICATION LAYER
handled more efficiently by the The Application layer performs the
network layer. following functions:
The Transport Layer guarantees  It provides different services

transmission of data from one end to such as manipulation of
other end. information in several ways,
retransferring the files of
information, distributing the
SESSION LAYER results etc.
The Session layer performs the
following functions:  The functions such as LOGIN or
 Manages the messages and password checking are also
synchronizes conversations performed by the application
between two different layer.
applications.
 It controls logging on and off, TCP/IP Reference Model

user identification, billing and
session management. TCP/IP model is practical model and
is used in the Internet. TCP/IP is
acronym of Transmission Control
PRESENTATION LAYER Protocol and Internet Protocol.
The Presentation layer performs the
following functions: The TCP/IP model combines the two
layers (Physical and Data link layer)
<="" ul="" style="box-sizing: into one layer i.e. Host-to-
border-box; color: rgb(49, 49, Network layer. The following diagram
49); font-family: Verdana, shows the various layers of TCP/IP
Geneva, Tahoma, Arial, model:
Helvetica, sans-serif; font-size:
14px; font-style: normal; font-
variant-ligatures: normal; font-

 TCP also handles flow control.

 The UDP is not reliable and
a connection less
protocol also does not perform
flow control.
Protocols used:
TCP/IP and UDP protocols are
employed in this layer.
INTERNET LAYER
The function of this layer is to allow
the host to insert packets into network
and then make them travel
independently to the destination.
However, the order of receiving the
packet can be different from the
sequence they were sent.
Protocols used: Internet Protocol

APPLICATION LAYER (IP) is employed in Internet layer.
This layer is same as that of the OSI
model and performs the following HOST-TO-NETWORK LAYER
functions: This is the lowest layer in TCP/IP
model. The host has to connect to
 It provides different services network using some protocol, so that
such as manipulation of it can send IP packets over it. This
information in several ways, protocol varies from host to host and
retransferring the files of network to network.
information, distributing the
results etc. Protocols used: ARPANET, SATNET,
 The functions such as LOGIN or LAN, packet radio are the protocols
password checking are also which are used in this layer.
performed by the application
layer.
Protocols used: TELNET, FTP,

Domain Name System
SMTP, DN, HTTP, NNTP are the Architecture
protocols employed in this layer. The Domain name system comprises
of Domain Names, Domain Name
TRANSPORT LAYER Space, Name Server that have been
It does the same functions as that of described below:
transport layer in OSI model. Here are
the key points regarding transport
layer:
Domain Names
Domain Name is a symbolic string
associated with an IP address. There
 It uses TCP and UDP protocol
are several domain names available;
for end to end transmission.
some of them are generic such
 TCP is reliable and connection
as com, edu, gov, net etc, while
oriented protocol.

some country level domain names Domain Name Space

such as au, in, za, us etc. The domain name space refers a
The following table shows hierarchy in the internet naming
the Generic Top-Level Domain structure. This hierarchy has multiple
names: levels (from 0 to 127), with a root at
the top. The following diagram shows
Domain
Meaning
the domain name space hierarchy:
Name
Com Commercial business

Edu Education
U.S. government
Gov
agency
Int International entity
Mil U.S. military
Net Networking organization
Org Non profit organization In the above diagram each subtree
represents a domain. Each domain
The following table shows can be partitioned into sub domains
the Country top-level domain and these can be further partitioned
names: and so on.
Domain
Name
Meaning Name Server
Name server contains the DNS
au Australia database. This database comprises of
in India various names and their
corresponding IP addresses. Since it is
cl Chile not possible for a single server to
maintain entire DNS database,
fr France
therefore, the information is
us United States distributed among many DNS servers.
za South Africa
 Hierarchy of server is same as
uk United Kingdom hierarchy of names.
 The entire name space is divided
jp Japan into the zones
es Spain
de Germany Zones
ca Canada Zone is collection of nodes (sub
domains) under the main domain. The
ee Estonia server maintains a database called
hk Hong Kong zone file for every zone.

DNS Working
DNS translates the domain name into
IP address automatically. Following
steps will take you through the steps
included in domain resolution process:
1. When we type
www.tutorialspoint.com into
the browser, it asks the local
DNS Server for its IP address.
If the domain is not further divided into Here the local DNS is at ISP end.
sub domains then domain and zone
refers to the same thing. 2. When the local DNS does not
The information about the nodes in find the IP address of requested
the sub domain is stored in the domain name, it forwards the
servers at the lower levels however; request to the root DNS server
the original server keeps reference to and again enquires about IP
these lower levels of servers. address of it.
3. The root DNS server replies with
TYPES OF NAME SERVERS delegation that I do not know
Following are the three categories of the IP address of
Name Servers that manages the www.tutorialspoint.com but
entire Domain Name System: know the IP address of DNS
1. Root Server Server.
2. Primary Server
3. Secondary Server 4. The local DNS server then asks
the com DNS Server the same
ROOT SERVER question.
Root Server is the top level server 5. The com DNS Server replies the
which consists of the entire DNS tree. same that it does not know the
It does not contain the information IP address of
about domains but delegates the www.tutorialspont.com but
authority to the other server. knows the address of
tutorialspoint.com.
PRIMARY SERVERS
Primary Server stores a file about its 6. Then the local DNS asks the
zone. It has authority to create, tutorialspoint.com DNS server
maintain, and update the zone file. the same question.
7. Then tutorialspoint.com DNS
SECONDARY SERVER server replies with IP address of
Secondary Server transfers complete www.tutorialspoint.com.
information about a zone from another
8. Now, the local DNS sends the IP
server which may be primary or
address of
secondary server. The secondary
www.tutorialspoint.com to the
server does not have authority to
computer that sends the
create or update a zone file.
request.

UNIT-2 Information Retrieval Services

There exist several Information
Internet Services & retrieval services offering easy access
to information present on the internet.
Protocols The following table gives a brief
introduction to these services:
Communication Services S.
There are various Communication Service Description
N.
Services available that offer exchange
of information with individuals or File Transfer Protocol (FTP)
1
groups. The following table gives a Enable the users to transfer files.
brief introduction to these services:
Archie
It’s updated database of public
S. 2
Service Description FTP sites and their content. It
N. helps to search a file by its name.
Electronic Mail Gopher
1 Used to send electronic message Used to search, retrieve, and
over the internet. 3
display documents on remote
Telnet sites.
Used to log on to a remote Very Easy Rodent Oriented
2
computer that is attached to Netwide Index to Computer
internet. Achieved (VERONICA)
Newsgroup 4 VERONICA is gopher based
Offers a forum for people to resource. It allows access to the
3 information resource stored on
discuss topics of common
interests. gopher’s servers.
Internet Relay Chat (IRC)

4 Allows the people from all over the Web Services
world to communicate in real time. Web services allow exchange of
information between applications on
Mailing Lists
the web. Using web services,
Used to organize group of internet
5 applications can easily interact with
users to share common
each other.
information through e-mail. The web services are offered using concept
Internet Telephony (VoIP) of Utility Computing.
Allows the internet users to talk
6
across internet to any PC equipped World Wide Web (WWW)
to receive the call. WWW is also known as W3. It offers a
way to access documents spread over
Instant Messaging the several servers over the internet.
Offers real time chat between These documents may contain texts,
7 individuals and group of people. graphics, audio, video, hyperlinks. The
Eg. Yahoo messenger, MSN hyperlinks allow the users to navigate
messenger. between the documents.

Video Conferencing o Efficient Flow Control

Video conferencing or Video o Full-duplex operation.
teleconferencing is a method of o Multiplexing.
communicating by two-way video and
audio transmission with help of  TCP offers connection oriented
telecommunication technologies. end-to-end packet delivery.
 TCP ensures reliability by
MODES OF VIDEO CONFERENCING sequencing bytes with a
POINT-TO-POINT forwarding acknowledgement
This mode of conferencing connects number that indicates to the
two locations only. destination the next byte the
source expect to receive.
 It retransmits the bytes not
acknowledged with in specified
time period.
MULTI-POINT Internet Protocol (IP)

This mode of conferencing connects Internet Protocol
more than two locations is connectionless and unreliable pr
through Multi-point Control Unit otocol. It ensures no guarantee of
(MCU). successfully transmission of data.
In order to make it reliable, it must be
paired with reliable protocol such as
TCP at the transport layer.
Internet protocol transmits the data in
form of a datagram as shown in the
following diagram:
Internet Protocols
Transmission Control Protocol
(TCP)
User Datagram Protocol
 Transmission Control Protocol (UDP)
(TCP) corresponds to the
Transport Layer of OSI Model. Like IP, UDP is connectionless and
 TCP is a reliable and connection unreliable protocol. It doesn’t require
oriented protocol. making a connection with the host to
exchange data. Since UDP is
 TCP offers:
unreliable protocol, there is no
o Stream Data Transfer.
o Reliability.

mechanism for ensuring that data sent Trivial File Transfer Protocol
is received.
UDP transmits the data in form of a
(TFTP)
datagram. The UDP datagram consists
Trivial File Transfer Protocol is also
of five parts as shown in the following
used to transfer the files but it
diagram:
transfers the files without
authentication. Unlike FTP, TFTP does
not separate control and data
information. Since there is no
authentication exists, TFTP lacks in
security features therefore it is not
recommended to use TFTP.
Key points
File Transfer Protocol (FTP)  TFTP makes use of UDP for data
FTP is used to copy files from one host transport. Each TFTP message is
to another. FTP offers the mechanism carried in separate UDP
for the same in following manner: datagram.
 FTP creates two processes such  The first two bytes of a TFTP
as Control Process and Data message specify the type of
Transfer Process at both ends message.
i.e. at client as well as at server.  The TFTP session is initiated
 FTP establishes two different when a TFTP client sends a
connections: one is for data request to upload or download a
transfer and other is for control file.
information.  The request is sent from an
 Control connection is made ephemeral UDP port to the UDP
between control port 69 of an TFTP server.
processes while Data
Connection is made Telnet
between<="" b="" style="box- Telnet is a protocol used to log in to
sizing: border-box;"> remote computer on the internet.
There are a number of Telnet clients
 FTP uses port 21 for the control having user friendly user interface.
connection and Port 20 for the The following diagram shows a person
data connection. is logged in to computer A, and from
there, he remote logged into
computer B.

Hyper Text Transfer Protocol protocol used for sending e-mail

efficiently and reliably over the
(HTTP) internet.
HTTP is a communication protocol. It
defines mechanism for communication
Key Points:
between browser and the web server.  SMTP is application level
It is also called request and response
protocol.
protocol because the communication  SMTP is connection oriented
between browser and server takes
protocol.
place in request and response pairs.  SMTP is text based protocol.
 It handles exchange of
HTTP REQUEST
messages between e-mail
HTTP request comprises of lines which
servers over TCP/IP network.
contains:
 Apart from transferring e-mail,
 Request line
SMPT also provides notification
 Header Fields
regarding incoming mail.
 Message body
 When you send e-mail, your e-
mail client sends it to your e-
Key Points mail server which further
 The first line i.e. the Request
contacts the recipient mail
line specifies the request server using SMTP client.
method i.e. Get or Post.
 These SMTP commands specify
 The second line specifies the
the sender’s and receiver’s e-
header which indicates the
mail address, along with the
domain name of the server from message to be send.
where index.htm is retrieved.
 The exchange of commands

between servers is carried out
HTTP RESPONSE
without intervention of any user.
Like HTTP request, HTTP response
 In case, message cannot be
also has certain structure. HTTP
delivered, an error report is sent
response contains:
to the sender which makes
 Status line
SMTP a reliable protocol.
 Headers
 Message body
IMAP
IMAP stands for Internet Mail
Email Access Protocol. It was first
Email is a service which allows us to proposed in 1986. There exist five
send the message in electronic mode versions of IMAP as follows:
over the internet. It offers an efficient, 1. Original IMAP
inexpensive and real time mean of 2. IMAP2
distributing information among 3. IMAP3
people. 4. IMAP2bis
5. IMAP4
E-mail Protocols
Key Points:
SMPTP  IMAP allows the client program
SMTP stands for Simple Mail to manipulate the e-mail
Transfer Protocol. It was first message on the server without
proposed in 1982. It is a standard downloading them on the local
computer.

 The e-mail is hold and program and server is a device that

maintained by the remote manages emails.
server. Following example will take you
through the basic steps involved in
 It enables us to take any action
sending and receiving emails and will
such as downloading, delete the
give you a better understanding of
mail without reading the mail. It
working of email system:
enables us to create, manipulate
and delete remote message
 Suppose person A wants to send
folders called mail boxes.
an email message to person B.
 IMAP enables the users to search  Person A composes the
the e-mails. messages using a mailer
 It allows concurrent access to program i.e. mail client and then
multiple mailboxes on multiple select Send option.
mail servers.  The message is routed
to Simple Mail Transfer
POP Protocol to person B’s mail
POP stands for Post Office Protocol. It server.
 The mail server stores the email
is generally used to support a single
client. There are several versions of message on disk in an area
POP but the POP 3 is the current designated for person B.
standard.
The disk space area on mail server is
Key Points called mail spool.
 POP is an application layer
internet standard protocol. Now, suppose person B is

 Since POP supports offline running a POP client and knows

access to the messages, thus how to communicate with B’s
requires less internet usage mail server.
 It will periodically poll the POP
time.
 POP does not allow search
server to check if any new email
facility. has arrived for B.As in this case,
 In order to access the person B has sent an email for
messaged, it is necessary to person B, so email is forwarded
download them. over the network to B’s PC. This
 It allows only one mailbox to be
is message is now stored on
created on server. person B’s PC.
 It is not suitable for accessing
The following diagram gives pictorial
non mail data. representation of the steps discussed
 POP commands are generally
above:
abbreviated into codes of three
or four letters. Eg. STAT.
E-mail Working
Email working follows the client server
approach. In this client is the mailer
i.e. the mail application or mail

E-mail Operations
CREATING EMAIL ACCOUNT
There are various email service
provider available such as Gmail,
hotmail, ymail, rediff mail etc. Here
we will learn how to create an account
using Gmail.
 Open gmail.com and

click create an account.
 Now a form will appear. Fill your Key Points:
details here and click Next  Gmail manages the mail into
Step. three categories
namely Primary, Social
and Promotions.
 Compose option is given at the
right to compose an email
message.
 Inbox, Starred, Sent mail,
Drafts options are available on
the left pane which allows you
to keep track of your emails.
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)
 This step allows you to add your
 Subject of email message
picture. If you don’t want to
 Text
upload now, you can do it later.
 Signature
Click Next Step.
 Now a welcome window appears. You should specify the correct email
Click Continue to Gmail. address; otherwise it will send an error
back to the sender.
 Wow!! You are done with Once you have specified all the above
creating your email account with parameters, It’s time to send the
Gmail. It’s that easy. Isn’t it? email. The mailer program provides a
Send button to send email, when you
 Now you will see your Gmail click Send, it is sent to the mail server
account as shown in the and a message mail sent
following image: successfully is shown at the above.

READING EMAIL and Subject: field is prefixed

with Fw.
Every email program offers you an
interface to access email messages. DELETING EMAIL
Like in Gmail, emails are stored under
different tabs such as primary, social, If you don’t want to keep email into
and promotion. When you click one of your inbox, you can delete it by
tab, it displays a list of emails under simply selecting the message from the
that tab. message list and clicking delete or
In order to read an email, you just pressing the appropriate command.
have to click on that email. Once you Some mail clients offers the deleted
click a particular email, it gets opened. mails to be stored in a folder called
The opened email may have some file deleted items or trash from where you
attached with it. The attachments are can recover a deleted email.
shown at the bottom of the opened
email with an option called download E-mail Security
attachment.
E-MAIL HACKING
REPLYING EMAIL
Email hacking can be done in any of
After reading an email, you may have the following ways:
to reply that email. To reply an email,  Spam
click Reply option shown at the  Virus
bottom of the opened email.  Phishing
Once you click on Reply, it will
automatically copy the sender’s SPAM
address in to the To field. Below the
To field, there is a text box where you E-mail spamming is an act of
can type the message. sending Unsolicited Bulk E-mails
Once you are done with entering (UBI) which one has not asked for.
message, click Send button. It’s that Email spams are the junk mails sent
easy. Your email is sent. by commercial companies as an
advertisement of their products and
FORWARDING EMAIL services.
It is also possible to send a copy of VIRUS

the message that you have received
along with your own comments if you Some emails may incorporate with
want. This can be done files containing malicious script which
using forward button available in when run on your computer may lead
mail client software. to destroy your important data.
The difference between replying and PHISHING

forwarding an email is that when you
reply a message to a person who has Email phishing is an activity of
send the mail but while forwarding sending emails to a user claiming to
you can send it to anyone. be a legitimate enterprise. Its main
When you receive a forwarded purpose is to steal sensitive
message, the message is marked with information such as usernames,
a > character in front of each line passwords, and credit card details.

Such emails contains link to websites  Avoid replying to emails which

that are infected with malware and you have received from
direct the user to enter details at a unknown persons.
fake website whose look and feels are
same to legitimate one.  Never buy anything in response
to a spam that advertises a
product.
E-MAIL SPAMMING AND JUNK MAILS
Email spamming is an act of sending

Unsolicited Bulk E-mails (UBI) which E-MAIL CLEANUP AND ARCHIVING
one has not asked for. Email spams
are the junk mails sent by commercial In order to have light weighted Inbox,
companies as an advertisement of it’s good to archive your inbox from
their products and services. time to time. Here I will discuss the
Spams may cause the following steps to clean up and archive your
problems: Outlook inbox.
 It floods your e-mail account  Select File tab on the mail pane.
with unwanted e-mails, which
may result in loss of important  Select Cleanup Tools button on
e-mails if inbox is full. account information screen.
 Time and energy is wasted in  Select Archive from cleanup

reviewing and deleting junk tools drop down menu.
emails or spams.
 Select Archive this folder and
 It consumes the bandwidth that all subfolders option and then
slows the speed with which click on the folder that you want
mails are delivered. to archive. Select the date from
the Archive items older
 Some unsolicited email may than: list. Click Browse to
contain virus that can cause create new .pst file name and
harm to your computer. location. Click OK.
BLOCKING SPAMS
E-mail Providers
Following ways will help you to reduce
spams: There are several email service
providers available in the market with
 While posting letters to their enabled features such as
newsgroups or mailing list, use a sending, receiving, drafting, storing an
separate e-mail address than email and much more.
the one you used for your
personal e-mails. The following table shows the popular
email service providers:
 Don’t give your email address on
the websites as it can easily be
spammed.

S.
Service and Description
N.
Gmail
Gmail is an email service that
1. allows users to collect all the
messages. It also offers approx 7
GB of free storage.
Hotmail
Hotmail offers free email and
2.
practically unlimited storage
accessible on web.
Yahoo Mail
Yahoo Mail offers unlimited
3. storage, SMS texting, social
networking and instant messaging
to boot.
iCloud Mail
iCloud Mail offers ample storage,
4.
IMAP access, and an elegantly
functional web application.
ATM Mail
5. ATM Mail is a free email service
with good spam protection.
Mail.com and GMX Mail
Mail.com and GMX Mail offers
6.
reliable mail service with unlimited
online storage.
Shortmail
Shortmail offers easy and fast
7.
email service but with limited 500
characters per message.
Inbox.com
Inbox.com offers 5 GB of free
8.
online storage. IMAP is not
supported by Inbox.com
Facebook Messages
9. Facebook Messages includes the
message conversation.
My Way Mail
My Way Mail offers clean and fast
10.
free email service but lacks in
secure messaging.

Calls to action
UNIT-3 
 Text blocks
Website Designing Wireframe can be created using program like
Visio but you can also use a pen and paper.
Concepts & Hosting
Web Designing Tools
Here is the list of tools that can be
Web designing has direct link to visual
used to make effective web designs:
aspect of a web site. Effective web
design is necessary to communicate
 Photoshop CC
ideas effectively.
 Illustrator CC
 Coda 2
 Omni Graffle
 Sublime Text
 GitHub
 Pen and Parer
 Vim
 Image optim
 Sketch 3
 Heroku
 Axure
 Hype 2
 Slicy
Web desinging is subset of web  Framer.js
development. However these terms are  Image Alpha
used interchangeably.  Emmet Live Style
Key Points  Hammer
Design Plan should include the  Icon Slate
following:  JPEG mini Lite
 Bug Herd
 Details about information
architecture. Web Page Anatomy
 Planned structure of site.
A web site includes the following
 A site map of pages
components:
Wireframe Containing Block

Wireframe refers to a visual guide to Container can be in the form of
appearance of web pages. It helps to page’s body tag, an all containing div
define structre of web site, linking tag. Without container there would be
between web pages and layout of no place to put the contents of a web
visual elements. page.
Following things are included in a
wireframe:
Logo
 Boxes of primary graphical Logo refers to the identity of a
elements website and is used across a
 Placement of headlines and sub company’s various forms of marketing
headings such as business cards, letterhead,
 Simple layout structure brouchers and so on.

Naviagation  Sound or video that starts

The site’s navigation system should automatically
be easy to find and use. Oftenly the  Hidden or disguised navigation
anvigation is placed rigth at the top of
 100% flash content.
the page.
Content Web development

The content on a web site should be Web development refers to building
relevant to the purpose of the web website and deploying on the web.
site. Web development requires use of
scripting languages both at the server
Footer end as well as at client end.
Footer is located at the bottom of the
page. It usually contains copyright,
contract and legal information as well
as few links to the main sections of
the site.
Whitespace
It is also called as negative
space and refers to any area of page
that is not covered by type or
illustrations.
Before developing a web site once
should keep several aspects in mind
like:
 What to put on the web site?

 Who will host it?
 How to make it interactive?
 How to code it?
 How to create search engine
friendly web site?
 How to secure the source code
frequently?
 Will the web site design display
well in different browsers?
 Will the navigation menus be
easy to use?
Web design Mistakes  Will the web site loads quickly?
One should be aware of the following  How easily will the site pages
common mistakes should always keep print?
in mind:  How easily will visitors find
important details specific to the
 Website not working in any other web site?
browser other internet explorer.  How effectively the style sheets
be used on your web sites?
 Using cutting edge technology
for no good reason

Web Development Process These tools allow the web developer

Web development process includes all to use HTML, CSS and JavaScript etc..
the steps that are good to take to These are accessed by hovering over
build an attractive, effective and an item on a web page and selecting
responsive website. These steps are the “Inspect Element” from the
shown in the following diagram: context menu.
FEATUES
Following are the common featuers

that every web development tool
exhibits:
HTML AND THE DOM

HTML and DOM viewer allows you to
see the DOM as it was rendered. It
also allows to make changes to HTML
and DOM and see the changes
reflected in the page after the change
is made.
WEB PAGE ASSESTS, RESOURCES, AND

NETWORK INFORMATION
Web development tools also helps to
inspect the resources that are loaded
and available on the web page.
PROFIING AND AUDITING
Profiling refers to get information

about the performance of a web page
or web application
and Auditing provides developers
suggestions, after analyzing a page,
for optimizations to decrease page
load time and increase
responsiveness.
Skills Required
For being a successful web developer,
Web development tools one should possess the following
Web development tools helps the skills:
developer to test and debug the web
sites. Now a days the web  Understanding of client and
development tooll come with the web server side scripting.
browsers as add-ons. All web  Creating, editing and modifying
browsers have built in tools for this templates for a CMS or web
purpose. development framework.

 Testing cross browser company puts thousand of

inconsistencies. website on the same physical
 Conducting observational user server. Each customer has their
testing. own allocation of physical web
 Testing for compliance to space and a set of bandwidth
specified standards such as limit. As all websites share same
accessibility standards in the physical memory, MYSQL server
client region. and Apache server, one website
 Programming interaction with on the server experiencing high
javaScript, PHP, and Jquery etc. traffic load will affect
performance of all websites on
Websites Hosting the server.
Virtual Private Server (VPS)
It is also known as Virtual
Web hosting is a service of providing
Dedicated Server. It is a server
online space for storage of web pages.
which is partitioned into smaller
These web pages are made available
servers. In this customer is given
via World Wide Web. The companies
their own partition, which is
which offer website hosting are known
installed with its own operating
as Web hosts.
2. system. Unlike shared hosting,
VPS doesn’t share memory or
The servers on which web site is
processor time rather it allocates
hosted remain switched on 24 x7.
certain amount of memory and
These servers are run by web hosting
CPU to use which means that
companies. Each server has its own IP
any problem on a VPS partition
address. Since IP addresses are
on the same drive will not affect
difficult to remember therefore,
other VPS customers.
webmaster points their domain name
to the IP address of the server their Dedicated Server
website is stored on. In this kind of hosting, single
dedicated server is setup for just
It is not possible to host your website one customer. It is commonly
3.
on your local computer, to do so you used by the businesses that
would have to leave your computer on need the power, control and
24 hours a day. This is not practical security that a dedicated server
and cheaper as well. This is where offers.
web hosting companies comes in.
Reseller Hosting
A reseller acts as a middle man
Types of Hosting 4.
and sells hosting space of
someone else’s server.
The following table describes different
types of hosting that can be availed as Grid Hosting
per the need: Instead of utilizing one server,
Grid Hosting spreads resources
over a large number of servers.
5.
S.N. Hosting Description It is quite stable and flexible.
The servers can be added or
Shared Hosting taken away from the grid
1.
In shared hosting, the hosting without crashing the system.

Web Hosting Companies SQL INJECTION

It is an attempt by the hackers to
Following are the several companies
manipulate your database. It is easy
offering web hosting service:
to insert rogue code into your query
that can be used to manipulate your
S.N. Hosting Company database such as change tables, get
1. Blue Host information or delete data.
2. Go Daddy
CROSS SITE SCRIPTING (XSS)
3. Host Gator
It allows the attackers to inject client
4. just Host side script into web pages. Therefore,
while creating a form It is good to
5. Laughing Squid endure that you check the data being
6. Hivelocity submitted and encode or strip out any
HTML.
7. liquid Web
ERROR MESSAGES
8. Media TempleServInt
You need to be careful about how
9. Wired Tree much information to be given in the
error messages. For example, if the
10. Wild West Domains user fails to log in the error message
11. Wix should not let the user know which
field is incorrect: username or
12. WIPL password.
13. Big Rock
VALIDATION OF DATA
The validation should be performed on
both server side and client side.
Website Security
PASSWORDS
Considerations It is good to enforce password
Websites are always to prone to requirements such as of minimum of
security risks. Cyber crime impacts eight characters, including upper case,
your business by hacking your lower case and special character. It
website. Your website is then used for will help to protect user’s information
hacking assaults that install malicious in long run.
software or malware on your visitor’s
computer.
Hackers may also steal important customer UPLOAD FILES
data such as credit card information, destroy The file uploaded by the user may
your business and propagate illegal content contain a script that when executed
to your users. on the server opens up your website.
Security Considerations
SSL
UPDATED SOFTWARE It is good practice to use SSL protocol
It is mandatory to keep you software while passing personal information
updated. It plays vital role in keeping between website and web server or
your website secure. database.

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).
A broader definition comes from the
organization that Web inventor Tim
Berners-Lee helped found,
the World Wide Web Consortium
(W3C).
The World Wide Web is the universe of

network-accessible information, an
embodiment of human knowledge.
In simple terms, The World Wide Web WWW Architecture
is a way of exchanging information
between computers on the Internet, WWW architecture is divided into
tying them together into a vast several layers as shown in the
collection of interactive multimedia following diagram:
resources.
Internet and Web is not the same
thing: Web uses internet to pass over
the information.
WWW Evolution
World Wide Web was created
by Timothy Berners Lee in 1989
at CERN in Geneva. World Wide Web
came into existence as a proposal by IDENTIFIERS AND CHARACTER SET
him, to allow researchers to work Uniform Resource Identifier
together effectively and efficiently (URI) is used to uniquely identify
at CERN. Eventually it became World resources on the web
Wide Web. and UNICODE makes it possible to
The following diagram briefly defines built web pages that can be read and
evolution of World Wide Web: write in human languages.

SYNTAX USER INTERFACE AND APPLICATIONS

XML(Extensible Markup On the top of layer User interface
Language) helps to define common and Applications layer is built for
syntax in semantic web. user interaction.
DATA INTERCHANGE
Resource Description Framework WWW Operation
(RDF) framework helps in defining
core representation of data for web. WWW works on client- server
RDF represents data about resource in approach. Following steps explains
graph form. how the web works:
TAXONOMIES 1. User enters the URL

RDF Schema (RDFS) allows more (say, http://www.tutorialspo
standardized description int.com) of the web page in the
of taxonomies and address bar of web browser.
other ontological constructs.
2. Then browser requests the
Domain Name Server for the IP
ONTOLOGIES
address corresponding to
Web Ontology Language
www.tutorialspoint.com.
(OWL) offers more constructs over
RDFS. It comes in following three 3. After receiving IP address,
versions: browser sends the request for
 OWL Lite for taxonomies and web page to the web server
simple constraints. using HTTP protocol which
 OWL DL for full description logic specifies the way the browser
support. and web server communicates.
 OWL for more syntactic freedom 4. Then web server receives
of RDF request using HTTP protocol and
checks its search for the
RULES requested web page. If found it
RIF and SWRL offers rules beyond returns it back to the web
the constructs that are available browser and close the HTTP
from RDFs and OWL. Simple Protocol connection.
and RDF Query Language
(SPARQL) is SQL like language used 5. Now the web browser receives
for querying RDF data and OWL the web page, It interprets it
Ontologies. and display the contents of web
page in web browser’s window.
PROOF
All semantic and rules that are
executed at layers below Proof and
their result will be used to prove
deductions.
CRYPTOGRAPHY
Cryptography means such as digital
signature for verification of the origin
of sources is used.

WWW Future are also available. Following are the

There had been a rapid development most common web browser available
in field of web. It has its impact in today:
almost every area such as education,
research, technology, commerce, Browser Vendor
marketing etc. So the future of web is
Internet
almost unpredictable. Microsoft
Explorer
Apart from huge development in field
of WWW, there are also some Google Chrome Google
technical issues that W3 consortium
has to cope up with. Mozilla Firefox Mozilla
Netscape
USER INTERFACE Netscape
Communications
Work on higher quality presentation of Navigator
Corp.
3-D information is under deveopment.
The W3 Consortium is also looking Opera Opera Software
forward to enhance the web to full fill Safari Apple
requirements of global communities
which would include all regional Sea Monkey Mozilla Foundation
languages and writing systems.
K-meleon K-meleon
TECHNOLOGY
Work on privacy and security is under Architecture
way. This would include hiding
There are a lot of web browser
information, accounting, access
available in the market. All of them
control, integrity and risk
interpret and display information on
management.
the screen however their capabilities
and structure varies depending upon
ARCHITECTURE
implementation. But the most basic
There has been huge growth in field of
component that all web browser must
web which may lead to overload the
exhibit are listed below:
internet and degrade its performance.
Hence more better protocol are
 Controller/Dispatcher
required to be developed.
 Interpreter
 Client Programs
Web Browsers
web Browser is an application Controller works as a control unit in
software that allows us to view and CPU. It takes input from the keyboard
explore information on the web. User or mouse, interpret it and make other
can request for any web page by just services to work on the basis of input
entering a URL into address bar. it receives.
Web browser can show text, audio,
video, animation and more. It is the Interpreter receives the information
responsibility of a web browser to from the controller and execute the
interpret text and commands instruction line by line. Some
contained in the web page. interpreter are mandatory while some
Earlier the web browsers were text- are optional For example, HTML
based while now a days graphical- interpreter program is mandatory and
based or voice-based web browsers java interpreter is optional.

Client Program describes the specific

protocol that will be used to access a
particular service. Following are the
client programs tat are commonly
used:
 HTTP
 SMTP
 FTP
 NNTP
 POP
Key Points
 When client sends request for a
web page, the web server
search for the requested page if
requested page is found then it
will send it to client with an
HTTP response.
 If the requested web page is not
found, web server will the send
an HTTP response: Error 404
Not found.
 If client has requested for some
other resources then the web
Web Server server will contact to the
Web server is a computer where the application server and data store
web content is stored. Basically web to construct the HTTP response.
server is used to host the web sites
but there exists other web servers
also such as gaming, storage, FTP,
email etc. Architecture
Web site is collection of web pages Web Server Architecture follows the
whileweb server is a software that following two approaches:
respond to the request for web
resources. 1. Concurrent Approach
2. Single-Process-Event-Driven
Approach.
Web Server Working
Web server respond to the client CONCURRENT APPROACH
request in either of the following two Concurrent approach allows the web
ways: server to handle multiple client
requests at the same time. It can be
 Sending the file to the client achieved by following methods:
associated with the requested
URL.  Multi-process
 Generating response by invoking  Multi-threaded
a script and communicating with  Hybrid method.
database

MULTI-PROCESSING (IIS)
In this a single process (parent The Internet Information Server
process) initiates several single- (IIS) is a high performance Web
threaded child processes and Server from Microsoft. This web
distribute incoming requests to these server runs on Windows NT/2000
child processes. Each of the child and 2003 platforms (and may be
processes are responsible for handling on upcoming new Windows
single request. version also). IIS comes bundled
with Windows NT/2000 and
It is the responsibility of parent 2003; Because IIS is tightly
process to monitor the load and integrated with the operating
decide if processes should be killed or system so it is relatively easy to
forked. administer it.
MULTI-THREADED Lighttpd
Unlike Multi-process, it creates The lighttpd, pronounced lighty is
multiple single-threaded process. also a free web server that is
distributed with the FreeBSD
operating system. This open
3.
HYBRID source web server is fast, secure
It is combination of above two and consumes much less CPU
approaches. In this approach multiple power. Lighttpd can also run on
process are created and each process Windows, Mac OS X, Linux and
initiates multiple threads. Each of the Solaris operating systems.
threads handles one connection. Using
Sun Java System Web Server
multiple threads in single process
This web server from Sun
results in less load on system
Microsystems is suited for
resources.
medium and large web sites.
Though the server is free it is not
Examples open source. It however, runs on
Following table describes the most Windows, Linux and UNIX
4.
leading web servers available today: platforms. The Sun Java System
web server supports various
languages, scripts and
S.N. Web Server Descriptino technologies required for Web
2.0 such as JSP, Java Servlets,
Apache HTTP Server PHP, Perl, Python, and Ruby on
This is the most popular web Rails, ASP and Coldfusion etc.
server in the world developed by
the Apache Software Foundation. Jigsaw Server
Apache web server is an open Jigsaw (W3C's Server) comes
source software and can be from the World Wide Web
1 Consortium. It is open source
installed on almost all operating
systems including Linux, UNIX, and free and can run on various
5.
Windows, FreeBSD, Mac OS X platforms like Linux, UNIX,
and more. About 60% of the web Windows, and Mac OS X Free
server machines run the Apache BSD etc. Jigsaw has been written
Web Server. in Java and can run CGI scripts
and PHP programs.
2. Internet Information Services

Proxy Server
Proxy server is an intermediary
server between client and the
interner. Proxy servers offers the
following basic functionalities:
REVERSE PROXIES
 Firewall and network data In this the requests are forwarded to
filtering. one or more proxy servers and the
 Network connection sharing response from the proxy server is
 Data caching retrieved as if it came directly from
the original Server.
Proxy servers allow to hide, conceal
and make your network id anonymous
by hiding your IP address.
Purpose of Proxy Servers

Following are the reasons to use proxy
servers:
Architecture
 Monitoring and Filtering The proxy server architecture is
 Improving performance divided into several modules as shown
 Translation in the following diagram:
 Accessing services anonymously
 Security
Type of Proxies
Following table briefly describes the
type of proxies:
FORWARD PROXIES
In this the client requests its internal
network server to forward to the
internet.
OPEN PROXIES
Open Proxies helps the clients to
conceal their IP address while
browsing the web.

PROXY USER INTERFACE  Then it will also check whether

This module controls and manages the caching is allowed or not and
user interface and provides an easy to accordingly will cache the page.
use graphical interface, window and a
menu to the end user. This menu CACHE MANAGER
offers the following functionalities: This module is responsible for storing,
deleting, clearing and searching of
 Start proxy web pages in the cache.
 Stop proxy
 Exit LOG MANAGER
 Blocking URL This module is responsible for viewing,
 Blocking client clearing and updating the logs.
 Manage log
 Manage cache CONFIGURATION
 Modify configuration This module helps to create
configuration settings which in turn let
PROXY SERVER LISTENER other modules to perform desired
It is the port where new request from configurations such as caching.
the client browser is listened. This
module also performs blocking of
clients from the list given by the user. Search Engines
CONNECTION MANAGER
It contains the main functionality of Search Engine refers to a huge
the proxy server. It performs the database of internet resources such as
following functions: web pages, newsgroups, programs,
images etc. It helps to locate
 It contains the main functionality information on World Wide Web.
of the proxy server. It performs User can search for any information
the following functions: by passing query in form of keywords
or phrase. It then searches for
 Read request from header of the relevant information in its database
client. and return to the user.
 Parse the URL and determine
whether the URL is blocked or
not.
 Generate connection to the web
server.
 Read the reply from the web
server.
 If no copy of page is found in the
cache then download the page
from web server else will check
its last modified date from the
reply header and accordingly will
read from the cache or server
from the web.

Search Engine Components shows the relevant web pages

Generally there are three basic as a result. These retrieved web
components of a search engine as pages generally include title of
listed below: page, size of text portion, first
several sentences etc.
1. Web Crawler These search criteria may vary from
2. Database one search engine to the other. The
3. Search Interfaces retrieved information is ranked
according to various factors such as
WEB CRAWLER frequency of keywords, relevancy of
It is also known as spider or bots. It information, links etc.
is a software component that  User can click on any of the
traverses the web to gather search results to open it.
information.
DATABASE
Usenet (USER NETwork)
Like mailing lists Usenet is also a way
All the information on the web is of sharing information. It was started
stored in database. It consists of huge
by Tom Truscott and Jim Ellis in 1979.
web resources. Initially it was limited to two sites but
today there are thousands of Usenet
SEARCH INTERFACES sites involving millions of people.
This component is an interface
Usenet is a kind of discussion group
between user and the database. It where people can share views on topic
helps the user to search through the
of their interest. The article posted to
database.
a newsgroup becomes available to all
readers of the newsgroup.
Search Engine Working
Web crawler, database and the search Mailing list vs. Newsgroup
interface are the major component of
a search engine that actually makes
search engine to work. Search engines S.
Mailing List Newsgroup
make use of Boolean expression AND, N.
OR, NOT to restrict and widen the Messages are
results of a search. Following are the Messages are not posted to
steps that are performed by the delivered to individual
search engine: individual mailboxes but
1. mailboxes of can be viewed
 The search engine looks for the subscribed by anyone who
keyword in the index for member of has subscribed
predefined database instead of group. to that
going directly to the web to newsgroup.
search for the keyword.
 It then uses software to search Working with
Working with a
for the information in the mailing list is
particular
database. This software easier than
newsgroup
component is known as web 2. newsgroup. It is
requires proper
crawler. easy to compose
knowledge of
 Once web crawler finds the and receive
that newsgroup.
pages, the search engine then emails.

In order to send based social networking services in for

It requires a of apps such as Whatsapp, hike, Line
or receive mails,
3. newsgroup etc.
you required an
reader.
email program.
Available Social networking
Messages are
delivered to
Messages are Services
4. available to The following table describes some of
certain group of
public. the famous social networking services
people.
provided over web and mobile:
Mailing list does Newsgroup
not support supports
5. S.
threaded threaded Service Description
N.
discussion. discussion.
Facebook
Messages
Article posted Allows to share text, photos, video
delivered to 1.
on a newsgroup etc. It also offers interesting online
6. listed subscribers
can be games.
can not be
cancelled.
cancelled. Google+
2. It is pronounced as Google Plus. It
is owned and operated by Google.
Online Education Twitter
There are several forms of online Twitter allows the user to send and
education available as discussed reply messages in form of tweets.
3.
below: These tweets are the small
messages, generally include 140+
Online Training characters.
Online Training is a form of distance Faceparty
learning in which educational Faceparty is a UK based social
information is delivered through 4. networking site. It allows the users
internet. There are many online to create profiles and interact with
applications. These applications vary each other using forums messages.
from simple downloadable content to
structured programs. LinkedIn
5. Linkedin is a business and
professional networking site.
Social Networking Flicker
Social Networking refers to grouping
6. Flickr offers image hosting and
of individuals and organizations
video hosting.
together via some medium, in order to
share thoughts, interests, and Ibibio
activities. Ibibo is a talent based social
There are several web based social 7. networking site. It allows the users
network services are available such as to promote one’s self and also
facebook, twitter, linkedin, Google+ discover new talent.
etc. which offer easy to use and
interactive interface to connect with Whatsapp
people with in the country an overseas 8. It is a mobile based messaging app.
as well. There are also several mobile It allows to send text, video, and

audio messages Email Phishing

Email phishing is an activity of
Line
sending emails to a user claiming to
9. It is same as whatsapp. Allows to
be a legitimate enterprise. Its main
make free calls and messages. purpose is to steal sensitive
Hike information such as usernames,
It is also mobile based messager passwords, and credit card details.
10.
allows to send messages and Such emails contains link to websites
exciting emoticons. that are infected with malware and
direct the user to enter details at a
fake website whose look and feels are
same to legitimate one.
Internet Security
Internet security refers to securing
communication over the internet. It WHAT A PHISHING EMAIL MAY
includes specific security protocols CONTAIN?
such as: Following are the symptoms of a
phishing email:
 Internet Security Protocol
(IPSec) SPELLING AND BAD GRAMMAR
 Secure Socket Layer (SSL) Most often such emails contain
grammatically incorrect text. Ignore
such emails, since it can be a spam.
BEWARE OF LINKS IN EMAIL
Threats Don’t click on any links in suspicious
Internet security threats impact the emails.
network, data security and other
internet connected systems. Cyber THREATS
criminals have evolved several Such emails contain threat like “your
techniques to threat privacy and account will be closed if you didn’t
integrity of bank accounts, respond to an email message”.
businesses, and organizations. SPOOFING POPULAR WEBSITES OR
Following are some of the internet COMPANIES
security threats:
These emails contain graphics that
 Mobile worms appear to be connected to legitimate
website but they actually are
 Malware connected to fake websites.
 PC and Mobile ransomware
 Large scale attacks like Stuxnet Digital Signature
that attempts to destroy Digital signatures allow us to verify
infrastructure. the author, date and time of
 Hacking as a Service signatures, authenticate the message
contents. It also includes
 Spam authentication function for additional
 Phishing capabilities.

security risks. It controls network

traffic, in both directions.
The following diagram depicts a

sample firewall between LAN and the
internet. The connection between the
two is the point of vulnerability. Both
hardware and the software can be
used at this point to filter network
traffic.
A digital signature should not only be

tied to the signing user, but also to the
message.
Applications
There are several reasons to
implement digital signatures to
communications:
AUTHENTICATION
Digital signatures help to authenticate
the sources of messages. For
example, if a bank’s branch office
sends a message to central office,
requesting for change in balance of an
There are two types of Firewall system:
account. If the central office could not
One works by using filters at the
authenticate that message is sent
network layer and the other works by
from an authorized source, acting of
using proxy servers at the user,
such request could be a grave
application, or network layer.
mistake.
INTEGRITY
Once the message is signed, any
Key Points
change in the message would
invalidate the signature.
 Firewall management must be
addressed by both system
NON-REPUDIATION
managers and the network
By this property, any entity that has
managers.
signed some information cannot at a
later time deny having signed it.  The amount of filtering a firewall
varies. For the same firewall,
the amount of filtering may be
Firewall Security different in different directions.
Firewall is a barrier between Local
Area Network (LAN) and the Internet.
It allows keeping private resources
confidential and minimizes the

UNIT - 4 HTML Tags

HTML – Overview
As told earlier, HTML is a markup
HTML stands language and makes use of various
for Hypertext Markup Language, and tags to format the content. These tags
it is the most widely used language to are enclosed within angle
write Web Pages. braces <Tag Name>. Except few
tags, most of the tags have their
 Hypertext refers to the way in corresponding closing tags. For
which Web pages (HTML example, <html> has its closing
documents) are linked together. tag </html> and <body> tag has
Thus, the link available on a its closing tag </body> tag etc.
webpage is called Hypertext. Above example of HTML document
 As its name suggests, HTML is uses the following tags –
a Markup Language which
means you use HTML to simply
"mark-up" a text document with Sr. Tag & Description
tags that tell a Web browser No
how to structure it to display.
1 <!DOCTYPE...>
Originally, HTML was developed with
This tag defines the document
the intent of defining the structure of
type and HTML version.
documents like headings, paragraphs,
lists, and so forth to facilitate the 2 <html>
sharing of scientific information This tag encloses the complete
between researchers. HTML document and mainly
Now, HTML is being widely used to comprises of document header
format web pages with the help of which is represented by
different tags available in HTML <head>...</head> and
language. document body which is
represented by
Basic HTML Document <body>...</body> tags.
In its simplest form, following is an
3 <head>
example of an HTML document –
This tag represents the
<!DOCTYPE html> document's header which can
<html> keep other HTML tags like
<title>, <link> etc.
<head>
<title>This is document 4 <title>
title</title> The <title> tag is used inside
</head> the <head> tag to mention the
document title.
<body>
<h1>This is a heading</h1> 5 <body>
<p>Document content goes This tag represents the
here.....</p>
document's body which keeps
</body>
other HTML tags like <h1>,
<div>, <p> etc.
</html>

6 <h1>
This tag represents the
heading. The <!DOCTYPE>
7 <p> Declaration
This tag represents a The <!DOCTYPE> declaration tag is
paragraph. used by the web browser to
understand the version of the HTML
used in the document. Current version
of HTML is 5 and it makes use of the
To learn HTML, you will need to study following declaration –
various tags and understand how they
behave, while formatting a textual
<!DOCTYPE html>
document. Learning HTML is simple as
users have to learn the usage of
different tags in order to format the There are many other declaration
text or images to make a beautiful types which can be used in HTML
webpage. document depending on what version
of HTML is being used. We will see
World Wide Web Consortium (W3C) more details on this while discussing
recommends to use lowercase tags <!DOCTYPE...> tag along with other
starting from HTML 4. HTML tags.
HTML Document HTML - Basic Tags

Structure
Heading Tags
A typical HTML document will have the
following structure – Any document starts with a heading.
You can use different sizes for your
headings. HTML also has six levels of
<html> headings, which use the
elements <h1>, <h2>, <h3>,
<head> <h4>, <h5>, and <h6>. While
Document header related tags displaying any heading, browser adds
</head> one line before and one line after that
heading.
<body>
Document body related tags Example
</body>
<!DOCTYPE html>
</html>
<html>
<head>
We will study all the header and body <title>Heading Example</title>
tags in subsequent chapters, but for </head>
now let's see what is document
declaration tag. <body>
<h1>This is heading 1</h1>

<h2>This is heading 2</h2> closing tags, as there is nothing to go

<h3>This is heading 3</h3> in between them.
<h4>This is heading 4</h4> The <br /> tag has a space between
<h5>This is heading 5</h5> the characters br and the forward
<h6>This is heading 6</h6> slash. If you omit this space, older
</body> browsers will have trouble rendering
the line break, while if you miss the
</html> forward slash character and just use
This will produce the following result − <br> it is not valid in XHTML.
Example
Paragraph Tag
The <p> tag offers a way to structure <!DOCTYPE html>
your text into different paragraphs. <html>
Each paragraph of text should go in
between an opening <p> and a <head>
<title>Line Break
closing </p> tag as shown below in
Example</title>
the example –
</head>
Example <body>
<p>Hello<br />
<!DOCTYPE html> You delivered your
<html> assignment ontime.<br />
Thanks<br />
<head> Mahnaz</p>
<title>Paragraph </body>
Example</title>
</head> </html>
This will produce the following result −
<body>
<p>Here is a first paragraph
of text.</p>
<p>Here is a second paragraph Centering Content
of text.</p> You can use <center> tag to put any
<p>Here is a third paragraph content in the center of the page or
of text.</p> any table cell.
</body>
Example
</html>
This will produce the following result − <!DOCTYPE html>
<html>
Line Break Tag <head>

Whenever you use the <br <title>Centring Content
Example</title>
/> element, anything following it
</head>
starts from the next line. This tag is
an example of an empty element,
<body>
where you do not need opening and

<p>This text is not in the there is nothing to go in between

center.</p> them.
The <hr /> element has a space
<center> between the characters hr and the
<p>This text is in the forward slash. If you omit this space,
center.</p> older browsers will have trouble
</center> rendering the horizontal line, while if
</body> you miss the forward slash character
and just use <hr> it is not valid in
</html> XHTML
This will produce following result −
Preserve Formatting
Sometimes, you want your text to
Horizontal Lines follow the exact format of how it is
Horizontal lines are used to visually written in the HTML document. In
break-up sections of a document. these cases, you can use the
The <hr> tag creates a line from the preformatted tag <pre>.
current position in the document to Any text between the
the right margin and breaks the line opening <pre> tag and the
accordingly. closing </pre> tag will preserve the
For example, you may want to give a formatting of the source document.
line between two paragraphs as in the
given example below –
Example
Example
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html> <head>
<title>Preserve Formatting
<head> Example</title>
<title>Horizontal Line </head>
Example</title>
</head> <body>
<pre>
<body> function testFunction(
<p>This is paragraph one and strText ){
should be on top</p> alert (strText)
<hr /> }
<p>This is paragraph two and </pre>
should be at bottom</p> </body>
</body>
</html>
</html>
This will produce the following result − Try using the same code without
Again <hr /> tag is an example of keeping it
the empty element, where you do not inside <pre>...</pre> tags
need opening and closing tags, as

Nonbreaking Spaces Start Content End

Suppose you want to use the phrase Tag Tag
"12 Angry Men." Here, you would not
want a browser to split the "12, <p> This is paragraph </p>
Angry" and "Men" across two lines − content.
An example of this technique appears <h1> This is heading </h1>
in the movie "12 Angry Men." content.
In cases, where you do not want the
client browser to break text, you <div> This is division </div>
should use a nonbreaking space content.
entity instead of a normal
space. For example, when coding the <br />
"12 Angry Men" in a paragraph, you
should use something similar to the
following code – So here <p>....</p> is an HTML
element, <h1>...</h1> is another
HTML element. There are some HTML
Example elements which don't need to be
closed, such as <img.../>, <hr
<!DOCTYPE html> /> and <br /> elements. These are
<html> known as void elements.
<head> HTML documents consists of a tree of

<title>Nonbreaking Spaces these elements and they specify how
Example</title> HTML documents should be built, and
</head> what kind of content should be placed
in what part of an HTML document.
<body>
<p>An example of this
technique appears in the movie HTML Tag vs. Element
"12 Angry Men."</p> An HTML element is defined by
</body> a starting tag. If the element contains
other content, it ends with a closing
</html> tag.
This will produce the following result –
For example, <p> is starting tag of a
paragraph and </p> is closing tag of
the same paragraph but <p>This is
paragraph</p> is a paragraph
HTML - Elements element.
An HTML element is defined by a

starting tag. If the element contains
other content, it ends with a closing Nested HTML Elements
tag, where the element name is It is very much allowed to keep one
preceded by a forward slash as shown HTML element inside another HTML
below with few tags – element –

Example align attribute: left,

center and right.
Attribute names and attribute values
<!DOCTYPE html>
are case-insensitive. However, the
<html>
World Wide Web Consortium (W3C)
<head> recommends lowercase
<title>Nested Elements attributes/attribute values in their
Example</title> HTML 4 recommendation.
</head>
Example
<body>
<h1>This is <i>italic</i> <!DOCTYPE html>
heading</h1> <html>
<p>This is <u>underlined</u>
paragraph</p> <head>
</body> <title>Align Attribute
Example</title>
</html> </head>
This will display the following result −
<body>
<p align = "left">This is left
HTML – Attributes aligned</p>
We have seen few HTML tags and <p align = "center">This is
their usage like heading tags <h1>, center aligned</p>
<h2>,paragraph tag <p> and other <p align = "right">This is
tags. We used them so far in their right aligned</p>
simplest form, but most of the HTML </body>
tags can also have attributes, which
are extra bits of information. </html>
An attribute is used to define the This will display the following result –
characteristics of an HTML element
and is placed inside the element's
opening tag. All attributes are made Core Attributes
up of two parts − a name and The four core attributes that can be
a value used on the majority of HTML
elements (although not all) are –
 The name is the property you
want to set. For example, the  Id
paragraph <p> element in the  Title
example carries an attribute  Class
whose name is align, which you  Style
can use to indicate the
alignment of paragraph on the The Id Attribute
page. The id attribute of an HTML tag can be
 The value is what you want the used to uniquely identify any element
value of the property to be set within an HTML page. There are two
and always put within primary reasons that you might want
quotations. The below example to use an id attribute on an element −
shows three possible values of  If an element carries an id
attribute as a unique identifier,

it is possible to identify just that </html>

element and its content.
 If you have two elements of the This will produce the following result −
same name within a Web page Now try to bring your cursor over
(or style sheet), you can use the "Titled Heading Tag Example" and you
id attribute to distinguish will see that whatever title you used in
between elements that have the your code is coming out as a tooltip of
same name. the cursor.
We will discuss style sheet in separate
tutorial. For now, let's use the id
attribute to distinguish between two
The class Attribute
The class attribute is used to
paragraph elements as shown below.
associate an element with a style
sheet, and specifies the class of
Example
element. You will learn more about
<p id = "html">This para explains the use of the class attribute when
what is HTML</p> you will learn Cascading Style Sheet
<p id = "css">This para explains (CSS). So for now you can avoid it.
what is Cascading Style Sheet</p>
The value of the attribute may also be
a space-separated list of class names.
For example –
The title Attribute
The title attribute gives a suggested class = "className1 className2
title for the element. They syntax for className3"
the title attribute is similar as
explained for id attribute −
The behavior of this attribute will The style Attribute
depend upon the element that carries The style attribute allows you to
it, although it is often displayed as a specify Cascading Style Sheet (CSS)
tooltip when cursor comes over the rules within the element.
element or while the element is
loading.
<!DOCTYPE html>
Example <html>
<!DOCTYPE html> <head>

<html> <title>The style
Attribute</title>
<head> </head>
<title>The title Attribute
Example</title> <body>
</head> <p style = "font-family:arial;
color:#FF0000;">Some text...</p>
<body> </body>
<h3 title = "Hello
HTML!">Titled Heading Tag </html>
Example</h3> This will produce the following result −
</body> At this point of time, we are not
learning CSS, so just let's proceed

without bothering much about CSS.

Here, you need to understand what </html>
are HTML attributes and how they can
be used while formatting content. This will produce the following result −
When dir attribute is used within the
Internationalization <html> tag, it determines how text
will be presented within the entire
Attributes document. When used within another
There are three internationalization tag, it controls the text's direction for
attributes, which are available for just the content of that tag.
most (although not all) XHTML
elements. Generic Attributes
 dir Here's a table of some other attributes
 lang that are readily usable with many of
 xml:lang the HTML tags.
The dir Attribute Attrib Options Function

The dir attribute allows you to ute
indicate to the browser about the
direction in which the text should flow. align right, left, Horizontally
The dir attribute can take one of two center aligns tags
values, as you can see in the table
that follows – valign top, middle, Vertically aligns
bottom tags within an
HTML element.
bgcolo numeric, Places a

Val Meaning
r hexidecimal background
ue
, RGB color behind an
values element
ltr Left to right (the default value)
backgr URL Places a
rtl Right to left (for languages such
ound background
as Hebrew or Arabic that are
image behind an
read right to left)
element
Example id User Names an

Defined element for use
<!DOCTYPE html> with Cascading
<html dir = "rtl"> Style Sheets.
<head> class User Classifies an

<title>Display Defined element for use
Directions</title> with Cascading
</head> Style Sheets.
<body> width Numeric Specifies the

This is how IE 5 renders Value width of tables,
right-to-left directed text. images, or table
</body>

available to indicate how text can

cells.
appear in HTML and XHTML.
height Numeric Specifies the
Value height of tables, Bold Text
images, or table Anything that appears
cells. within <b>...</b> element, is
displayed in bold as shown below –
title User "Pop-up" title of
Defined the elements.
Example
We will see related examples as we
<!DOCTYPE html>
will proceed to study other HTML tags.
<html>
For a complete list of HTML Tags and
related attributes please check
<head>
reference to HTML Tags List. <title>Bold Text
Example</title>
</head>
<body>
<p>The following word uses a
<b>bold</b> typeface.</p>
</body>
</html>
Italic Text
Anything that appears
within <i>...</i> element is
displayed in italicized as shown below
−
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text
Example</title>
</head>
UNIT-5 <body>
HTML – Formatting <p>The following word uses an
If you use a word processor, you must <i>italicized</i> typeface.</p>
be familiar with the ability to make </body>
text bold, italicized, or underlined;
these are just three of the ten options </html>

This will produce the following result − <p>The following word uses a
<strike>strikethrough</strike>
typeface.</p>
Underlined Text </body>
Anything that appears </html>
within <u>...</u> element, is
displayed with underline as shown
below –
Superscript Text
Example The content of
a <sup>...</sup> element is
<!DOCTYPE html> written in superscript; the font size
<html> used is the same size as the
characters surrounding it but is
<head> displayed half a character's height
<title>Underlined Text above the other characters.
Example</title>
</head>
Example
<body>
<p>The following word uses an
<u>underlined</u> typeface.</p> <!DOCTYPE html>
</body> <html>
</html> <head>
<title>Superscript Text
This will produce the following result − Example</title>
</head>
<body>
Strike Text <sup>superscript</sup> typeface.</p>
Anything that appears </body>
within <strike>...</strike> element
is displayed with strikethrough, which </html>
is a thin line through the text as This will produce the following result −
shown below –
Example
Subscript Text
<!DOCTYPE html> The content of
<html> a <sub>...</sub> element is
written in subscript; the font size used
<head> is the same as the characters
<title>Strike Text surrounding it, but is displayed half a
Example</title> character's height beneath the other
</head> characters.
<body> Example
<!DOCTYPE html>

<html> <title>Deleted Text

Example</title>
<head> </head>
<title>Subscript Text
Example</title> <body>
</head> <p>I want to drink
<del>cola</del> <ins>wine</ins></p>
<body> </body>
<sub>subscript</sub> typeface.</p> </html>
</body> This will produce the following result −
</html>
This will produce the following result − Emphasized Text
Inserted Text Anything that
within <em>...</em> element
appears
is
Anything that appears
displayed as emphasized text.
within <ins>...</ins> element is
displayed as inserted text.
Example
Example
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html>
<head>
<head> <title>Emphasized Text
<title>Inserted Text Example</title>
Example</title> </head>
</head>
<body>
<body> <p>The following word uses an
<p>I want to drink <em>emphasized</em> typeface.</p>
<del>cola</del> <ins>wine</ins></p> </body>
</body>
</html>
</html> This will produce the following result −
This will produce the following result − Marked Text
Deleted Text Anything that appears with-
Anything that appears in <mark>...</mark> element, is
within <del>...</del> element, is displayed as marked with yellow ink.
displayed as deleted text.
Example
Example
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html>
<head>
<head> <title>Marked Text
Example</title>

</head> </head>
<body> <body>
<p>The following word has been <p>My best friend's name is
<mark>marked</mark> with yellow</p> <abbr title =
</body> "Abhishek">Abhy</abbr>.</p>
</body>
</html>
</html>
This will produce the following result –
Strong Text HTML - Meta Tags

Anything that appears HTML lets you specify metadata -
within <strong>...</strong> eleme additional important information about
nt is displayed as important text. a document in a variety of ways. The
META elements can be used to include
Example name/value pairs describing
properties of the HTML document,
such as author, expiry date, a list of
<!DOCTYPE html>
<html> keywords, document author etc.
The <meta> tag is used to provide
<head> such additional information. This tag is
<title>Strong Text an empty element and so does not
Example</title> have a closing tag but it carries
</head> information within its attributes.
You can include one or more meta
<body> tags in your document based on what
<p>The following word uses a information you want to keep in your
<strong>strong</strong> document but in general, meta tags
typeface.</p> do not impact physical appearance of
</body> the document so from appearance
point of view, it does not matter if you
</html> include them or not.
Adding Meta Tags to
Text Abbreviation Your Documents
You can abbreviate a text by putting it
You can add metadata to your web
inside opening <abbr> and closing
pages by placing <meta> tags inside
</abbr> tags. If present, the title
the header of the document which is
attribute must contain this full
represented
description and nothing else.
by <head> and </head> tags. A
Example meta tag can have following attributes
in addition to core attributes –
<!DOCTYPE html>
<html>
Sr. Attribute & Description
<head> No
<title>Text
Abbreviation</title> 1 Name

Name for the property. Can be </html>

anything. Examples include, This will produce the following result –
keywords, description, author,
revised, generator etc. Document Description
2 content You can use <meta> tag to give a
Specifies the property's value. short description about the document.
This again can be used by various
3 scheme search engines while indexing your
Specifies a scheme to interpret webpage for searching purpose.
the property's value (as declared Example
in the content attribute).
<!DOCTYPE html>
4 http-equiv <html>
Used for http response message
headers. For example, http-equiv <head>
can be used to refresh the page <title>Meta Tags
or to set a cookie. Values include Example</title>
content-type, expires, refresh <meta name = "keywords"
and set-cookie. content = "HTML, Meta Tags,
Metadata" />
Specifying Keywords <meta name = "description"
You can use <meta> tag to specify content = "Learning about Meta
important keywords related to the Tags." />
document and later these keywords </head>
are used by the search engines while
indexing your webpage for searching <body>
purpose. <p>Hello HTML5!</p>
</body>
Example </html>
Following is an example, where we are
adding HTML, Meta Tags, Metadata as Document Revision Date
important keywords about the You can use <meta> tag to give
document. information about when last time the
document was updated. This
<!DOCTYPE html> information can be used by various
<html> web browsers while refreshing your
webpage.
<head>
<title>Meta Tags
Example</title> Example
<meta name = "keywords"
content = "HTML, Meta Tags, <!DOCTYPE html>
Metadata" /> <html>
</head>
<head>
<body> <title>Meta Tags
<p>Hello HTML5!</p> Example</title>
</body>


content = "HTML, Meta Tags,
Metadata" /> Page Redirection
<meta name = "description" You can use <meta> tag to redirect
content = "Learning about Meta your page to any other webpage. You
Tags." /> can also specify a duration if you want
<meta name = "revised" content to redirect the page after a certain
= "Tutorialspoint, 3/7/2014" /> number of seconds.
</head>
<body> Example
<p>Hello HTML5!</p> Following is an example of redirecting
</body> current page to another page after 5
seconds. If you want to redirect page
</html> immediately then do not
specify contentattribute.
Document Refreshing
A <meta> tag can be used to specify
a duration after which your web page <!DOCTYPE html>
will keep refreshing automatically. <html>
Example <head>
If you want your page keep refreshing <title>Meta Tags
after every 5 seconds then use the Example</title>
following syntax. <meta name = "keywords"
Metadata" />
<!DOCTYPE html>
<meta name = "description"
<html>
content = "Learning about Meta
Tags." />
<head>
<meta name = "revised" content
<title>Meta Tags
= "Tutorialspoint, 3/7/2014" />
Example</title>
<meta http-equiv = "refresh"
content = "5; url =
http://www.tutorialspoint.com" />
Metadata" />
</head>
<meta name = "description"
content = "Learning about Meta
<body>
Tags." />
<p>Hello HTML5!</p>
<meta name = "revised" content
</body>
= "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh"
</html>
content = "5" />
</head>
HTML – Comments
<body>
Comment is a piece of code which is
<p>Hello HTML5!</p>
</body> ignored by any web browser. It is a
good practice to add comments into
</html> your HTML code, especially in complex
documents, to indicate sections of a
document, and any other notes to

anyone looking at the code. <img src = "Image URL" ...

Comments help you and others attributes-list/>
understand your code and increases
code readability.
The <img> tag is an empty tag, which
HTML comments are placed in
means that, it can contain only list of
between  tags. So, any
attributes and it has no closing tag.
content placed with-in 
tags will be treated as comment and
will be completely ignored by the Example
browser. To try following example, let's keep
our HTML file test.htm and image file
Example test.png in the same directory –
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head> 
<title>Using Image in
<title>This is document
Webpage</title>
title</title>
</head>
</head> 
<body>
<p>Simple Image Insert</p>
<body>
<img src =
<p>Document content goes
"/html/images/test.png" alt = "Test
here.....</p>
Image" />
</body>
</body>
</html>
</html>
This will produce the following result
without displaying the content given
as a part of comments –
You can use PNG, JPEG or GIF image
file based on your comfort but make
HTML – Images sure you specify correct image file
name in src attribute. Image name is
Images are very important to beautify always case sensitive.
as well as to depict many complex The alt attribute is a mandatory
concepts in simple way on your web attribute which specifies an alternate
page. This tutorial will take you text for an image, if the image cannot
through simple steps to use images in be displayed.
your web pages. Set Image Location
Usually we keep all the images in a
Insert Image separate directory. So let's keep HTML
You can insert any image in your web file test.htm in our home directory and
page by using <img> tag. Following create a subdirectory images inside
is the simple syntax to use this tag. the home directory where we will keep
our image test.png.

Example Image" width = "150" height =

Assuming our image location is "100"/>
</body>
"image/test.png", try the following
example –
</html>
<!DOCTYPE html>
<html>
Set Image Border
<head> By default, image will have a border
<title>Using Image in around it, you can specify border
Webpage</title> thickness in terms of pixels using
</head> border attribute. A thickness of 0
means, no border around the picture.
<body>
<p>Simple Image Insert</p>
<img src = Example
"/html/images/test.png" alt = "Test
Image" /> <!DOCTYPE html>
</body> <html>
</html> <head>
This will produce the following result − <title>Set Image
Border</title>
</head>
Set Image Width/Height <body>

You can set image width and height <p>Setting image Border</p>
based on your requirement <img src =
using widthand height attributes. "/html/images/test.png" alt = "Test
You can specify width and height of Image" border = "3"/>
the image in terms of either pixels or </body>
percentage of its actual size.
</html>
Example This will produce the following result −
<!DOCTYPE html>
<html> Set Image Alignment
By default, image will align at the left
<head> side of the page, but you can
<title>Set Image Width and use alignattribute to set it in the
Height</title> center or right.
</head>
Example
<body>
<p>Setting image width and <!DOCTYPE html>
height</p> <html>
<img src =
"/html/images/test.png" alt = "Test <head>

<title>Set Image
Alignment</title> </body>
</head> </html>
<body> This will produce the following result −

<p>Setting image Alignment</p> Here, the border is an attribute of
<img src = <table> tag and it is used to put a
"/html/images/test.png" alt = "Test border across all the cells. If you do
Image" border = "3" align = not need a border, then you can use
"right"/> border = "0".
</body>
</html> Table Heading

Table heading can be defined
using <th> tag. This tag will be put to
HTML – Tables replace <td> tag, which is used to
represent actual data cell. Normally
you will put your top row as table
The HTML tables allow web authors to
heading as shown below, otherwise
arrange data like text, images, links,
you can use <th> element in any row.
other tables, etc. into rows and
Headings, which are defined in <th>
columns of cells.
tag are centered and bold by default.
The HTML tables are created using
the <table> tag in which
the <tr> tag is used to create table Example
rows and <td> tag is used to create
data cells. The elements under <td> <!DOCTYPE html>
are regular and left aligned by default <html>
Example
<head>
<title>HTML Table
Header</title>
<!DOCTYPE html> </head>
<html>
<body>
<head> <table border = "1">
<title>HTML Tables</title> <tr>
</head> <th>Name</th>
<th>Salary</th>
<body> </tr>
<table border = "1"> <tr>
<tr> <td>Ramesh Raman</td>
<td>Row 1, Column 1</td> <td>5000</td>
<td>Row 1, Column 2</td> </tr>
</tr>
<tr>
<tr> <td>Shabbir Hussein</td>
<td>Row 2, Column 1</td> <td>7000</td>
<td>Row 2, Column 2</td> </tr>
</tr> </table>
</table> </body>

<td colspan = "3">Row 3

</html> Cell 1</td>
</tr>
</table>
</body>
Tables Backgrounds
You can set table background using </html>
one of the following two ways −
 bgcolor attribute − You can set This will produce the following result −
background color for whole table Here is an example of
or just for one cell. using background attribute. Here we
 background attribute − You will use an image available in /images
can set background image for directory.
whole table or just for one cell.
You can also set border color also
using bordercolor attribute. <!DOCTYPE html>
Note − The bgcolor, background, <html>
and bordercolor attributes deprecated
in HTML5. Do not use these attributes. <head>
<title>HTML Table
Example Background</title>
</head>
<!DOCTYPE html> <body>
<html> <table border = "1"
bordercolor = "green" background =
<head> "/images/test.png">
<title>HTML Table <tr>
Background</title> <th>Column 1</th>
</head> <th>Column 2</th>
<th>Column 3</th>
<body> </tr>
<table border = "1"
<tr>
bordercolor = "green" bgcolor = <td rowspan = "2">Row 1
"yellow"> Cell 1</td>
<tr> <td>Row 1 Cell
<th>Column 1</th> 2</td><td>Row 1 Cell 3</td>
<th>Column 2</th> </tr>
<th>Column 3</th> <tr>
</tr> <td>Row 2 Cell 2</td>
<tr> <td>Row 2 Cell 3</td>
<td rowspan = "2">Row 1 </tr>
Cell 1</td> <tr>
<td>Row 1 Cell 2</td>
<td colspan = "3">Row 3
<td>Row 1 Cell 3</td> Cell 1</td>
</tr> </tr>
<tr> </table>
<td>Row 2 Cell 2</td> </body>
<td>Row 2 Cell 3</td>
</tr> </html>
<tr>

Example
This will produce the following result.
Here background image did not apply
<!DOCTYPE html>
to table's header.
<html>
Table Height and Width <head>

You can set a table width and height <title>HTML Table
using width and height attributes. Caption</title>
</head>
You can specify table width or height
in terms of pixels or in terms of
<body>
percentage of available screen area.
<table border = "1" width =
"100%">
Example <caption>This is the
caption</caption>
<!DOCTYPE html>
<html> <tr>
<td>row 1, column
<head> 1</td><td>row 1, columnn 2</td>
<title>HTML Table </tr>
Width/Height</title>
</head> <tr>
<td>row 2, column
<body> 1</td><td>row 2, columnn 2</td>
<table border = "1" width = </tr>
"400" height = "150"> </table>
<tr> </body>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td> </html>
</tr> This will produce the following result −
<tr>
</tr>
</table>
Table Header, Body,
</body> and Footer
Tables can be divided into three
</html> portions − a header, a body, and a
This will produce the following result − foot. The head and foot are rather
similar to headers and footers in a
word-processed document that remain
Table Caption the same for every page, while the
The caption tag will serve as a title or body is the main content holder of the
explanation for the table and it shows table.
up at the top of the table. This tag is The three elements for separating the
deprecated in newer version of head, body, and foot of a table are –
HTML/XHTML.
 <thead> − to create a separate
table header.

 <tbody> − to indicate the main </html>

body of the table. This will produce the following result −
 <tfoot> − to create a separate
table footer.
HTML - Text Links
A table may contain several <tbody>
elements to indicate different pages or A webpage can contain various links
groups of data. But it is notable that that take you directly to other pages
<thead> and <tfoot> tags should and even specific parts of a given
appear before <tbody> page. These links are known as
hyperlinks.
Example Hyperlinks allow visitors to navigate
between Web sites by clicking on
<!DOCTYPE html> words, phrases, and images. Thus you
<html> can create hyperlinks using text or
images available on a webpage.
<head> Note − I recommend you to go
<title>HTML Table</title> through a short tutorial
</head> on Understanding URL
<body>
<table border = "1" width = Linking Documents
"100%"> A link is specified using HTML tag
<thead> <a>. This tag is called anchor
<tr> tag and anything between the
<td colspan = opening <a> tag and the closing </a>
"4">This is the head of the tag becomes part of the link and a
table</td> user can click that part to reach to the
</tr> linked document. Following is the
</thead> simple syntax to use <a> tag.
<tfoot> <a href = "Document URL" ...

<tr> attributes-list>Link Text</a>
<td colspan =
"4">This is the foot of the
table</td> Example
</tr>
Let's try following example which links
</tfoot>
http://www.tutorialspoint.com at your
<tbody> page −
<tr>
<td>Cell 1</td> <!DOCTYPE html>
<td>Cell 2</td> <html>
<td>Cell 3</td>
<td>Cell 4</td> <head>
</tr> <title>Hyperlink
</tbody> Example</title>
</head>
</table>
</body> <body>
<p>Click following link</p>

<a href = <html>

"https://www.tutorialspoint.com"
target = "_self">Tutorials Point</a> <head>
</body> <title>Hyperlink
Example</title>
</html> <base href =
"https://www.tutorialspoint.com/">
</head>
This will produce the following result,
where you can click on the link <body>
generated to reach to the home page <p>Click any of the following
of Tutorials Point (in this example). links</p>
<a href = "/html/index.htm"
The target Attribute target = "_blank">Opens in New</a> |
<a href = "/html/index.htm"
We have used target attribute in our target = "_self">Opens in Self</a> |
previous example. This attribute is <a href = "/html/index.htm"
used to specify the location where target = "_parent">Opens in
linked document is opened. Following Parent</a> |
are the possible options – <a href = "/html/index.htm"
target = "_top">Opens in Body</a>
</body>
Sr. Option & Description
No
</html>
1 _blank This will produce the following result,
Opens the linked document in a where you can click on different links
new window or tab. to understand the difference between
various options given for target
2 _self attribute.
Opens the linked document in
the same frame.
HTML – Fonts
3 _parent
Opens the linked document in Fonts play a very important role in
the parent frame. making a website more user friendly
and increasing content readability.
4 _top Font face and color depends entirely
Opens the linked document in on the computer and browser that is
the full body of the window. being used to view your page but you
can use HTML <font> tag to add
5 targetframe style, size, and color to the text on
Opens the linked document in a your website. You can use
named targetframe. a <basefont> tag to set all of your
text to the same size, face, and color.
The font tag is having three attributes
Example called size, color, and face to
Try following example to understand customize your fonts. To change any
basic difference in few options given of the font attributes at any time
for target attribute. within your webpage, simply use the
<font> tag. The text that follows will
<!DOCTYPE html> remain changed until you close with

the </font> tag. You can change one

or all of the font attributes within one Relative Font Size
<font> tag. You can specify how many sizes larger
or how many sizes smaller than the
Note −The font and basefont tags are preset font size should be. You can
deprecated and it is supposed to be specify it like <font size =
removed in a future version of HTML. So "+n"> or <font size = "−n">
they should not be used rather, it's
suggested to use CSS styles to manipulate
your fonts. But still for learning purpose, Example
this chapter will explain font and basefont
tags in detail. <!DOCTYPE html>
<html>
Set Font Size <head>
You can set content font size
<title>Relative Font
using size attribute. The range of
Size</title>
accepted values is from 1(smallest) to </head>
7(largest). The default size of a font is
3. <body>
Example <font size = "-1">Font size =
"-1"</font><br />
<!DOCTYPE html> <font size = "+1">Font size =
<html> "+1"</font><br />
<font size = "+2">Font size =
"+2"</font><br />
<head> <font size = "+3">Font size =
<title>Setting Font "+3"</font><br />
Size</title> <font size = "+4">Font size =
</head> "+4"</font>
</body>
<body>
<font size = "1">Font size = </html>
"1"</font><br /> This will produce the following result −
<font size = "2">Font size =
"2"</font><br />
<font size
"3"</font><br />
= "3">Font size =
Setting Font Face
<font size = "4">Font size = You can set font face
"4"</font><br /> using face attribute but be aware that
<font size = "5">Font size = if the user viewing the page doesn't
"5"</font><br /> have the font installed, they will not
<font size = "6">Font size = be able to see it. Instead user will see
"6"</font><br /> the default font face applicable to the
<font size = "7">Font size = user's computer.
"7"</font>
</body> Example
</html>
<!DOCTYPE html>
This will produce the following result − <html>
<head>

<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman"
size = "5">Times New Roman</font><br
/>
<font face = "Verdana" size =
"5">Verdana</font><br />
<font face = "Comic sans MS"
size =" 5">Comic Sans MS</font><br
/>
<font face = "WildWest" size =
"5">WildWest</font><br />
<font face = "Bedrock" size =
"5">Bedrock</font><br />
</body>
</html>
Specify alternate font

faces
A visitor will only be able to see your
font if they have that font installed on
their computer. So, it is possible to
specify two or more font face
alternatives by listing the font face
names, separated by a comma.
<font face = "arial,helvetica">

<font face = "Lucida
Calligraphy,Comic Sans MS,Lucida
Console">
When your page is loaded, their

browser will display the first font face
available. If none of the given fonts
are installed, then it will display the
default font face Times New Roman.
Note − Check a complete list
of HTML Standard Fonts.

Internet & Web Page Designing: Unit - 1 2-8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internet & Web Page Designing: Unit - 1 2-8

Uploaded by

Copyright:

Available Formats

KCRI Internet & Wpd 1

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

technological & Infrastructural

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Extranet refers to network within an Hosting

Extranet Benefits Accessing Issues

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

among customers, business partners

Extranet vs. Intranet

Internet Reference Models DATA LINK LAYER

The OSI model consists of seven NETWORK LAYER

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

 To divide the outgoing messages variant-caps: normal; font-

The Transport Layer guarantees  It provides different services

 It controls logging on and off, TCP/IP Reference Model

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

 TCP also handles flow control.

Protocols used: Internet Protocol

Protocols used: TELNET, FTP,

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

some country level domain names Domain Name Space

Com Commercial business

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

UNIT-2 Information Retrieval Services

Internet Relay Chat (IRC)

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Video Conferencing o Efficient Flow Control

MULTI-POINT Internet Protocol (IP)

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Hyper Text Transfer Protocol protocol used for sending e-mail

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

 The e-mail is hold and program and server is a device that

 Since POP supports offline running a POP client and knows

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

 Open gmail.com and

COMPOSING AND SENDING EMAIL

 Sender’s address in To field

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

READING EMAIL and Subject: field is prefixed

It is also possible to send a copy of VIRUS

The difference between replying and PHISHING

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Such emails contains link to websites  Avoid replying to emails which

Email spamming is an act of sending

 Time and energy is wasted in  Select Archive from cleanup

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Wireframe Containing Block

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Naviagation  Sound or video that starts

Content Web development

 What to put on the web site?

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

Web Development Process These tools allow the web developer

Following are the common featuers

HTML AND THE DOM

WEB PAGE ASSESTS, RESOURCES, AND

Profiling refers to get information

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com

 Testing cross browser company puts thousand of

Opp. Military Hospital, Alwar (Raj.) Email: kcricollege@yahoo.com; Visit: www.kcricollege.com