Web

Andhra Pradesh State Council of Higher Education
B.Sc. Computer Science/Information Technology (IT) Syllabus Under CBCS

w.e.f.2017-2018
Structure of Computer Science/Information Technology (IT) Syllabus
III YEAR VI SEMESTER

Paper-VII : Elective-I(C)
WEB TECHNOLOGIES
Course Objective
 To provide knowledge on web architecture, web services, client side and server side
scripting technologies to focus on the development of web-based information systems and
web services.
 To provide skills to design interactive and dynamic web sites.
Course Outcome
1. To understand the web architecture and web services.

2. To practice latest web technologies and tools by conducting experiments.
3. To design interactive web pages using HTML and Style sheets.
4. To study the framework and building blocks of .NET Integrated Development
Environment.
5. To provide solutions by identifying and formulating IT related problems.
UNIT -1
Introduction to Internet : Definition of Internet – History of Internet – Advantages &
disadvantages of Internet – Tools of internet - How internet works. Introduction to WWW:
Definition of WWW –WWW tools - Web Terminology –web browser – web server
UNIT-2
E-Mail : Definition of e-mail – advantages & disadvantages of e-mail – how to work with e-
mail accounts – e-mail inner working : Store and forward method & Central mail spool
method– message components – message composition – features of e-mail. Protocols:
TCP/IP - HTTP
UNIT -3
Introduction to HTML: Basic HTML – HTML document structure – HTML tags – Basefont
tag – title tag – body tag – Text formatting tags – Character tags - Character entities
HTML Lists : Ordered List , Unordered List & Definition List – Using colors – Using Images
w.e.f.2017-2018
UNIT – 4
Horizontal Rule Tag - HTML Tables – Nested Tables - Hyperlinks: Textual, Graphical Links
to sections – Multimedia Objects – Frames – Nested Frames – Forms – Form Controls :
textbox, password, checkbox, radio button, select, text area - Processing of forms
UNIT – 5
Advanced HTML : Cascading Style Sheets: Introduction – Using Styles: As an attribute, tag
& external file – Defining Your own styles – Properties and values : properties related to
Fonts , Backgrounds & colors, text , boxes & borders
Text Book
1. Inline/Online: Fundamentals of the Internet and the World Wide Web, Raymond
Greenlaw Ellen Hepp, McGraw – Hill
2. Harvey M. Deitel and Paul J. Deitel, “Internet & World Wide Web How to
Program”, 4/e, Pearson Education.
References:
1. Chris Bates, Web Programming Building Internet Applications, Second Edition,

Wiley.
2. Uttam Kumar Roy, Web Technologies from Oxford University Press
3. Paul S.Wang Sanda S. Katila, An Introduction to Web Design Plus
Programming,Thomson.
4. Robert W.Sebesta, Programming the World Wide Web, Third Edition, Pearson
Education.
5. Joel Sklar, Principles of Web Design, Thomson.
6. Raj Kamal, Internet and Web Technologies, Tata McGraw Hill.
7. Gopalan & Akilandeswari, Web Technology: A Developer‟s Perspective, PHI.
Student Activities:
1. Prepare a web site for your college

2. Prepare your personal website
VIKRAMA SIMHAPURI UNIVERSITY :: NELLORE
CBCS – BSc(Computer Science) - III YEAR - SEMESTER-V
WEB TECHNOLOGIES
MODEL QUESTION PAPER
Time: 3 Hours Max. Marks : 75
Section-A
Answer any FIVE of the following Questions: (5 x 5= 25 Marks)
1. What is Internet? Write about advantages of Internet

2. Explain briefly about web server
3. What is protocol? Explain TCP/IP
4. Explain about message composition in Internet
5. What is HTML? Explain HTML document structure
6. Write about Basefont tag
7. Briefly explain about hyperlinks
8. Explain about frames
9. What is a property? Explain various properties
10. Explain about attribute.
Section - B
Answer any FIVE of the following Questions (5  10 =50 Marks)
11. Write about Tools of WWW

12. Explain about how Internet works
13. Write about e-mail advantages.
14. Explain various message components in creating an e-mail
15. Write in detail about HTML tags.
16. Explain about HTML lists.
17. Explain about tables in HTML
18. Write about form controls used in designing a web page.
19. Explain CSS with an example
20. Illustrate how to create a web page with your own styles.
Instruction to Paper Setter:
Two questions must be given from each unit in Section-A and Section-B

w.e.f.2017-2018
III YEAR VI SEMESTER

Web Technologies Lab
1. Create a simple HTML page which demonstrates all types of lists.

2. Create a letter head of your college using following styles
i. image as background
ii. use header tags to format college name and address
3. Create a web page, which contains hyper links like fruits, flowers, animals. When
you click on hyper links, it must take you to related web page; these web pages must
contain with related images.
4. Create a hyperlink to move around within a single page rather than to load another
page.
5. Create a leave letter using different text formatting tags.
6. Create a table format given bellow using row span and colspan.
MARKS
RNO NAME
M1 M2 M3 M4 M5
Insert 5 records.
7. Create a table with different formats as given bellow.
i. Give different background and font colors to table header, footer and body.
ii. Use table caption tag.
8. Divide a web page vertically and horizontally with scroll bars, name them as shown
bellow decorate it with some items.
F2
F1
F3
9. Create a student Bio-Data, using forms.

10. Create a web page using following style sheets
i. Inline style sheets.
ii. Embedded style sheets.
iii. External style sheets
WEB PROGRAMMING BCA II Year IV Semester
Unit-1
INTERNET:
The Internet is a global network that connects millions of computers all over the
world. It is a network of networks. Internet can link different organizations,
government offices, home users etc. It contains huge amount of information that is
accessed using webpages of World Wide Web (WWW).
Each computer on the Internet is called a Host. To connect to the Internet, the user
must gain access thru a commercial Internet Service Provider (ISP).
HISTORY OF INTERNET / MILE STONES OF INTERNET
Foundation:
1) In the early 1960’s American defense department developed a network to connect the
powerful computers for information exchange expecting nuclear attack.
2) In 1969, The ARPA (Advanced Research Projects Agency) of American defense
department researchers used packet switching to connect few computers. This network
is called as ARPANET (Advanced Research Projects Agency Network). This network
later called the ‘Internet’.
3) In 1972, a program developed for e-mail used to send and receive messages over the
Internet. It includes two important tools to transfer files and access remote computers.
Theyare: FTP (File Transfer Protocol) and TELNET (or) Remote Login
4) In 1979, a group of students and programmers started Usenet (Users News Network)
that provides NEWS through network.
Commercial use of Internet:
5) In 1980’s, Companies used computers to construct their own internal networks.

These networks used E-Mail software that can be used to communicate with other
companies.
6) In 1983, the protocols TCP/IP were developed to route the messages properly and
support variety of networking hardware and software.
7) In 1989, The NSF (National Science Foundation) permitted to use Internet service
commercially
Growth of the Internet:
8) In 1991 the NSF implemented privatization of Internet using Network Access Points
(NAPs) each operated by a separate company that sell Internet access through Internet
Services Providers (ISP’s).
9) Within 30 years, the Internet became one of the amazing technologies. Every year
billions of dollars spent for the development of Internet. Now the Internet has become
Krishna Degree College 5
the world largest network.
ADVANTAGES OF INTERNET
1. Electronic Mail (E-Mail):

E-mail or Electronic Mail means sending and/or receiving messages instantly thru
Internet. It is an online correspondence system. E-mail is one of the most widely used
services on the Internet. Anyone who has an Email Account can send an Email to any
other person who has an Email Account.
Eg: abcnellore@gmail.com
2. Download Facility: The Internet is a virtual trove of information. Any kind of

informationon any topic is available on the internet. It is possible to download games,
software, movies, songs etc., freely from the Internet.
3. Chatting :
It is another advantage of the Internet that allows two or more users to talk with each
other using an instant Messenger Software. The chatting can be text based, voice
based, video based or a combination of all these.
i. Text based chatting means exchange of typed-in messages between users.

ii. Voice based chatting means exchange of audio messages between users using
microphone.
iii. Video based chatting means exchange of video messages between users using webcam.
4. Online Banking: It is also known as Internet banking, e-banking or virtual
banking. It is an electronic payment system that enables customers of a bank to
conduct a range offinancial transactions like balance enquiry, fund transfer, etc.
5. Online Ticketing: Using Internet, tickets can be purchased for movies, travelling
like railways, airlines etc. An online ticket is also called e-ticket or Digital ticket.
6. Online Shopping:
Online shopping refers to buying or selling products on the Internet. Consumers
can buy or sell a variety of products using online stores such as books, clothes, toys,
hardware, software, etc. People can visit web stores any time as per their convenience
while sitting in their home, office or even while travelling.
Eg:. Flipkart.Com, Amazon.Com, OLX.Com, etc.
7. Search Engine:
The World Wide Web stores large amount of information on variety of topics in
many websites. Finding information from these sites is very difficult. Hence search
engine software is used.
A search Engine is special website used to find information stored on various websites.
Today more than 370 search engines are available on the Internet.
Eg; Google, Yahoo, MSN Search, etc.

DISADVANTAGES OF INTERNET
1) Internet Fraud: Internet fraud means that stealing personal information, conducting
fraudulent transactions over the Internet etc. The following are some common Internet
frauds.
a) Purchase Fraud: It occurs when a criminal purchases a product by using a fake
credit card. So the merchant does not receive money.
b) Online auction fraud: This fraud occurs when a fraudster starts an auction of
items on a website. He then accepts payment from auction winner. But the product
is not delivered.
c) Online retail fraud: This fraud occurs after receiving the payment either the
product is not delivered or damaged product is delivered.
d) Phishing: It is an activity that collects confidential information such as passwords,
credit card details, account numbers, etc. It is done thru messages or mails.
2) Denial of Service (DoS): It is an attempt to make a computer resource unavailable to
its users. DoS mainly attacks web servers of banks, Government organizations, credit
card payment gateways etc.
3) Spam Mail: Unauthorized users may send a large number of unwanted Email
messages toa particular mail server to full its disk space.
4) Addiction to Internet: People also get addicted to the Internet. Some people spend
most of their valuable time in browsing the internet. Internet Addiction has been
known to be amajor cause of obesity and some time leads to various diseases.
5) Malware Attacks: Malware (Malicious Software) is software designed with wrong
ideas. It is particularly designed to gain access to a computer either to disturb its
operation or to collect important data from it. It is a big threat to Internet security. It
includes virus, spyware, worm, Trojan horse.
HOW INTERNET WORKS
The Internet is a global network of computers. Each computer connected to the

Internet must have a unique address. Internet addresses are in the form nnn.nnn.nnn.nnn
where nnn is a number between 0 and 255. This address is known as an IP address. (IP
stands for Internet Protocol) To connect to the Internet, the user must gain access from
Internet Service Provider (ISP).
For Example, The picture below illustrates two computers connected to the
Internet; a computer with IP address 1.2.3.4 and another computer with IP address 5.6.7.8.
The Internet isrepresented as an abstract object between them.
IP Address: 1.2.3.4 IP Address: 5.6.7.8

If we send the message from one computer (1.2.3.4) to another computer (5.6.7.8)
through Internet, it is transmitted as shown below:
1. The message which is in digital form on sender’s computer (IP: 1.2.3.4)

sends toModem (Modulator and Demodulator)
2. The Modem converts digital signals into analog signals
3. Then Modem sends the analog signals to Internet Service Provider (ISP) thru
telephone lines
4. The ISPs router examines the destination address and determines where to send it.
NowISP transmitted the message to receiver’s computer’s modem thru telephone
lines
5. The modem on receiver’s computer receives the analog signals
6. Then it converts analog message into digital signals
7. Finally the receiver’s computer (IP: 5.6.7.8) receives the original message
TOOLS OF INTERNET
The Internet is now a globally used computer network that has millions of users to
access information available in World Wide Web. It contains extensive information about
large number of subjects, universities, organizations, companies, individuals and provides
many services over the Internet.
For example, a computer user connects to the Internet for e-mail, web searching,
file transfers etc. To use these services Internet provides many tools or services. Some of
them areas follows:
1) e-mail 5) Telnet
2) WWW (World Wide Web) 6) Gopher
3) IRC (Internet Relay Chat) 7) WAP (Wireless Application Protocol)
4) FTP (File Transfer Protocol) 8) VoIP (Voice over Internet Protocol)
Electronic Mail (E-Mail):

E-mail or Electronic Mail means sending and/or receiving messages instantly thru
Internet. It is an online correspondence system. E-mail is one of the most widely
used services on the Internet. E-mail uses a number of protocols like SMTP
(Simple Mail Transfer Protocol), POP (Post Office Protocol) etc.
1. World Wide Web: WWW is a global information service for publishing

information on the Internet. It is a software application through which Internet
users can access global data in the form of web pages (hypertext documents).
These hypertext documents can be transferred through the Hyper Text Transfer
Protocol (HTTP).
2. IRC: Internet Relay Chat (IRC) protocol is used to chat on the web. A user must
require an IRC program for chatting. This program connects to an IRC server and
allows the user to visit IRC channels.
Examples: EFnet (Eris Free Network), NewNet etc.
3. File Transfer Protocol (FTP): The FTP is most commonly used Internet tool to
transfer files from client’s computer to web server. It provides security to the
stored files and programs. It is mainly used by web site developers.
4. Telnet: Telnet is a network protocol that allows a user on one computer to log into
another computer. It is a tool that allows user to log into a remote system just as
they are logging into a local system. Once logged into the remote system, users
can use it as their own system.
5. Gopher: It is a protocol designed for searching and retrieving documents over the
Internet. Gopher is one of the information search and retrieval tools of Internet.
Gopher provides the user with tools to locate information on specific topics around
the world.
6. WAP: WAP stands for Wireless Application Protocol. WAP is a technical standard
for accessing information on wireless devices like mobile phones. A WAP browser
for mobile devices uses this protocol. It supports Internet services like e-mail,
searching etc.
7. VoIP (Voice over Internet Protocol): It is a group of technologies for the
delivery of voice communications and multimedia sessions over Internet. VoIP is
also known as IP telephony or Internet telephony.
World Wide Web (WWW)
World Wide Web is a global information service for publishing information on

theInternet. It is a software application through which Internet users can access
global data in the form of web pages (hypertext documents). These hypertext
documents can be transferred through the Hyper Text Transfer Protocol (HTTP).
Information on the WWW is published in the form of web pages. These web pages
are created by Hyper Text Markup Language (HTML). Each web page can be referred by
their corresponding Uniform Resource Locator (URL). Web servers transfer HTML
documents to each other through the Hyper Text Transfer Protocol (HTTP).
A company’s WWW homepage can be viewed as an interactive bulletin board to

the user. The WWW contains huge amount of information in the form of Web sites. This
information can be obtained easily by using some search tools like search engines.
WWW TOOLS
WWW provides many tools or services. Some of them areas follows:
1. e-mail 5. Telnet
2. WWW (World Wide Web) 6. Gopher
3. IRC (Internet Relay Chat) 7. WAP (Wireless Application
4. FTP (File Transfer Protocol) Protocol)
8. VoIP (Voice over Internet Protocol)
1. Electronic Mail (E-Mail):

i. E-mail or Electronic Mail means sending and/or receiving messages
instantly thru Internet. It is an online correspondence system. E-mail is one
of the most widely used services on the Internet. E-mail uses a number of
protocols like SMTP (Simple Mail Transfer Protocol), POP (Post Office
Protocol) etc.
2. World Wide Web: WWW is a global information service for publishing information
on the Internet. It is a software application through which Internet users can access
documents can be transferred through the Hyper Text Transfer Protocol (HTTP).
3. IRC: Internet Relay Chat (IRC) protocol is used to chat on the web. A user must require
an IRC program for chatting. This program connects to an IRC server and allows the
user to visit IRC channels.
1. Examples: EFnet (Eris Free Network), NewNet etc.
4. File Transfer Protocol (FTP): The FTP is most commonly used Internet tool to
transfer files from client’s computer to web server. It provides security to the stored
files and programs. It is mainly used by web site developers.
5. Telnet: Telnet is a network protocol that allows a user on one computer to log into
another computer. It is a tool that allows user to log into a remote system just as they
are logging into a local system. Once logged into the remote system, users can use it
as their own system.
6. Gopher: It is a protocol designed for searching and retrieving documents over the
Internet. Gopher is one of the information search and retrieval tools of Internet. Gopher
provides the user with tools to locate information on specific topics around the world.
7. WAP: WAP stands for Wireless Application Protocol. WAP is a technical standard for
accessing information on wireless devices like mobile phones. A WAP browser for
mobile devices uses this protocol. It supports Internet services like e-mail, searching
etc.
8. VoIP (Voice over Internet Protocol): It is a group of technologies for the delivery of
voice communications and multimedia sessions over Internet. VoIP is also known as
IP telephony or Internet telephony.
WEB BROWSERS
A web browser, simply called browser, is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web. It allows
users to
view or browse HTML documents on WWW. An information resource is identified
by a Uniform Resource Locator (URL) and may be a web page, image, video or any other
content.
Browsers can also be used to access information provided by web servers in

private networks or files in file systems. Web browser software is built on the concept of
hyperlinks, which allows users to point and click with a mouse to jump from document to
document in anymanner.
Most Web browsers are also capable of downloading and transferring files,
providing access to newsgroups, displaying graphics, playing audio and video files
associated with the document.
The major web browsers are Mozilla Firefox, Google Chrome, Microsoft
Internet Explorer, Opera, and Safari.
Components of Web Browser

The components of a browser may differ from one browser to another. But most
oflatest browsers have the following components.
Title Bar: It shows the browser name, default web site name, maximize, minimize and
closebuttons.
Tabs: Tab is a separate part in the browser window. Tabs are used to view various web
sites in a single browser. Each tab shows only one web site.
Address Bar: It shows the web site address.
Document Area: It shows the web page of the web site.
SAMPLE GOOGLE CHROME BROWSER:
Address Bar Title Bar Tabs Document Area
WEB SERVERS
A web server is a computer that runs websites. It contains server software that
uses HTTP to serve HTML documents, any associated files and scripts when requested
by a clientor Web browser.
The primary function of a web server is to store, process and deliver web pages to
users. Pages delivered are most frequently HTML documents, which may include text,
images, stylesheets and scripts etc.
When anyone requests for a website by adding the URL or web address on a web
browser's address bar (like www.google.com), the browser sends a request to the Internet
for viewing the corresponding web page for that address. A Domain Name Server (DNS)
converts this URL to an IP Address (For example 216.58.196.195), which points to a Web
Server.
Apart from HTTP, a web server also supports SMTP (Simple Mail transfer
Protocol) and FTP (File Transfer Protocol) protocols for emailing and for file transfer and
storage.
A web server needs TCP/IP to work. A computer having a modem will have
TCP/IP installed, an IP address of 127.0.0.1 and a domain name of local host. If web
server software (like PWS) is installed in such computer, then HTML pages can be accessed
by those addresses. Such computer acts as both client and server.
Internet
Types of Web Servers:
Apache server: It is the most common web server available in the market. Apache is an o
pensource software that handles almost 70% of all websites available today. Most
of the web-based applications use Apache as their default Web Server
environment. It is mostly used in UNIX and Win32 systems.
Personal Web Server (PWS): It is developed by Microsoft Corporation. It can be

installed on Windows 95, Windows 98 or Windows NT. PWS is very useful for
the development of web sites containing CGI (Common Gateway Interface)
scripts.
IIS Server: Internet Information Service or Internet Information Server is also developed
by Microsoft. It is built-in software that can be available in latest versions of
Windows operating systems.

WEB PROGRAMMING BSC III Year VI Semester
WORLD WIDE WEB TERMINOLOGY
The WWW is the most widely used part of the Internet. It is based on URL and
HTTP, and allows dynamic links to a large amount of information. The following are
various terms used frequently on Internet.
ISP: An Internet service provider (ISP) is an organization that provides services for
accessing and using the Internet. Internet service providers may be commercial,
non-profit, or privately owned.
It provides individuals and other companies to access the Internet and

otherrelated services such as Web site building and virtual hosting.
Browser: A web browser, simply called browser, is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web. It
allows users to view or browse HTML documents on WWW.
The most popular browsers are Google Chrome, Mozilla Firefox, and
MicrosoftInternet Explorer.
URL: Uniform Resource Locator is the global web address of web page and other
resources on the World Wide Web. The URL is displayed in address bar of a
browser. The URLaddress contains two parts.
1. The first part of the address indicates what protocol to use

2. The second part specifies the IP address or the domain name where the
resourceis located.
protocol://domain name/folder/file
how where what
Eg. http://www.example.com/index.html
WWW: World Wide Web is a global information service for publishing information on
the Internet. It is a software application through which Internet users can access
documents canbe transferred through the Hyper Text Transfer Protocol (HTTP).
HTTP: HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files (text,
graphic images, sound, video, and other multimedia files) on the World Wide
Web. It is the essential protocol used by the World Wide Web. When a user
opens their Web browser, the user is indirectly making use of HTTP.
Hypertext: Hypertext is special text which contains links to other texts. It can include
text, graphics, video and sound. The hypertext pages are interconnected by
hyperlinks, typically activated by a mouse click.
HTML: HTML stands for hypertext markup language. HTML is used to create web pages
and web applications. These web pages can be viewed using any browser software.
HTMLcontains many tags (instructions) to design web pages.

Tags: Tags are the instructions in HTML. The HTML tags tell the web browser how to
format and organize the web page. All the HTML tags must be enclosed with in a
pair of angular brackets i.e. ‘<’ and ‘>’ symbols.
Web page: A webpage is a document commonly written in HyperText Markup Language

(HTML). It is accessible through the Internet using a web browser. A unique
URL identifies every web page. A collection of web pages is called web site.
Web site: A website is a location that contains a collection of web pages. Each website
has its own unique web address (URL) which can be reached through an internet
connection.
The opening page of a website is usually called homepage which contains

hyperlinks to other pages on the same or other site(s). Each site is owned and
managed by an individual or organization.
MODEM(Modulator – Demodulator):A device that modulates and demodulates signals

transmitted over communications circuits.

Web Technologies
UNIT-II
E-MAIL
E-mail is defined as transmission of messages over communication networks. E-Mail
is used in the Internet to transfer information (messages) from one author to one or more
recipients. E-Mail is one of the most popular services available through the internet.
Advantages of E-Mail:
1) Convenience 5) Reliable
2) Speed 6) Global
3) Inexpensive 7) Generality
4) Printable
1) Convenience: There is no requirement of stationary and stamps. One does not have to go
to post office. But all these things are not required for sending or receiving a mail.
2) Speed: E-Mail is fast, based on the speed of the underlying communication network.
Usually the messages can reach the destination within seconds.
3) Inexpensive: cost of sending a message is very small or less.
4) Printable: A hard copy is easy to obtain. We can keep an electronic copy of a message for
our own records.
5) Global: Using e-mail we can send messages to any part of the world where network
connections are available.
Disadvantages of E-Mail:
Apart from several benefits of E-mail, there also exists some disadvantages as discussed below:
1) Misdirection 4) Overload
2) Interception 5) Junk
3) Forgery 6) No response
1) Misdirection: Sometimes there is a chance of sending an e-mail message to an unintended
(accidentally) receiver and this cannot be identified by e-mail service.
2) Forgery: E-mail doesn’t prevent from forgery, that is, someone impersonating the sender,
since sender is usually not authenticated in any way.
3) Overload: As e-mail is too convenient, it may result in overflow of mails. Once the inbox
is full new incoming messages are rejected as a result messages can be lost.
4) Junk: sometimes we may get some unauthorized mails from unknown sender to our inbox.
These mails are called Junk mails. This process of sending junk mails is called “Spamming”
5) No response: This occurs with recipients who do not read and respond to their e-mail on
regular basis.
--------------
HOW TO WORK WITH E-MAIL
Email is a service which allows us to send the message in electronic mode over the
internet. Each user of email is assigned a unique name for his email account.
User ID, Password and E-Mail Address:

User ID
User-ID is also referred as ‘user name’ or ‘account name’. The meaning of User ID is
user identification. In user IDs uppercase or lowercase is not significant i.e. either “sachin” or
“SACHIN” are treated as the same.
Passwords:
A password is a secret code that authenticates the user of E-mail account.
Web Technologies
A good password should be:

 At least 8 character long.
 It Contains non-alphabetical symbols (special characters) such as +,
-, *, & etc.
 It Contains numbers.
 It contains uppercase and lowercase letters.
The Case is significant in passwords i.e. both “sachin” and “SACHIN” are treated as
different.
E-Mail Address:
Each user of email is assigned a unique name for his email account. This name is known
as E-mail address. Different users can send and receive messages according to the e-mail
address.
The basic form of an e-mail address is as follows:
username@domainname
The text before the “@” sign specifies the username of the individual, while the text
after "@" sign indicates domain name.
Example:billagtes@hotmail.com
Example: billgates@yahoo.co.in
The number of periods (.) varies from e-mail address to e-mail address. Most addresses
have either one or two dots (.). A given field in an e-mail address i.e. apart from dots can be 63
characters long.
Domain names:
Domain names are used to identify one or more IP addresses. The seven generic top-
level domains are COM, EDU, GOV, INT, MIL, NET and ORG. Every country has its own
top-level domain name i.e. also known as “country codes”. The following figure shows the
organization of the domain names:
Generic Top-Level Domain Names Country Top-Level Domain Names

Domain Name Meaning Domain Name Meaning
COM Commercial business IN India
EDU Education AU Australia
GOV Govt. Agency CA Canada
INT International entity ES Spain
MIL Military JP Japan
NET Networking organization US United states
ORG Non-profit organization UK United kingdom
EMAIL INNER WORKING

An e-mail inner working is compared with the postal mail. In postal mail, we can
divide the mailing of the letter into the following 3 phases.
Phase 1: In this phase, the following functions will take place. They are compose, addressing,
package, stamps, and depositing a letter in a suitable place.
Phase 2: In this phase, the mail person pick up, schedule and retrieves the letter from its place
of deposit. If that letter is correctly addressed or directed with a proper postage then is routed
to its final destination mail box.
Web Technologies
Phase 3: The receiver checks for a mail, retrieves the letter from the mail box, opening the
envelope, read the mails and files it.
E-mail system comprises of the following three components:
 Mailers
 Mail Servers3
 Mail Boxes
Mailer:
A mailer is a software that allows the user to manage read and compose e-mail. A mailer
is also called as mail program, mail application or mail client. The mailer activity is similar to
the phase1 in the postal mail.
Mail Server:
The function of Mail Server is to receive, store and deliver a mail. Conceptually the
mail server is always “listening” for the arrival of a new e-mail. Once the e-mail has arrived
mail server checks its address and sends it to the appropriate receiver. Mail server is also called
a 24*7 machine.
Mailboxes:
Mailbox is a folder that contains emails and information about them. A mailbox is
created at the time of creating the e-mail account.
Working of E-mail:
Email working follows the client server approach. In this client is the mailer i.e. the
mail application or mail program and server is a device that manages emails.
The terms which used in E- mail working
1. Mail User Agent (MUA) : The MUA is the application the sender(who composes mail)
uses to compose and read email, such as Eudora, Outlook, Thunderbird, etc.
2. Mail Delivery Agent (MDA): A mail delivery agent or message delivery agent (MDA) is a
computer software component that is responsible for the delivery of e-mail messages to a
local recipient’s mailbox.
3. Mail Transfer Agent (MTA): A message transfer agent or mail transfer agent (MTA) or
mail relay is software that transfers electronic mail messages from one computer to another
using a client-server application architecture.
4. Domain Name System (DNS):In simpler words, a domain name system (DNS) translates
the domain name to IP addresses.
Protocols used in email systems

The email communication is done via three protocols in general. They are listed below.
 IMAP
 POP
 SMTP
IMAP
 IMAP stands for Internet message access protocol. This protocol is also used to access e-mails but it
is far more capable than POP. One of the most prominent feature an IMAP server provides is the
Web Technologies
central access to e-mails. Unlike POP server, an IMAP server keeps the e-mails on the server itself
and so you can access e-mails from any machine or device.
 This server also provides easy management of e-mails like searching, categorizing the e-mails and
placing them into various sub-folders etc. The only problem that one could imagine with IMAP
server is that you always need an Internet connection so that the e-mail client is able to fetch e-mails
from the IMAP server. But today, almost all of the e-mail clients have the capability to cache the e-
mails so that you can even view them when you are offline.
POP:
 POP stands for Post Office Protocol. A POP (or POP3) server in it’s simplest form stores the
messages for a particular user in a text file. The file for a particular user is appended with
information each time an e-mail is received by a POP server. If your e-mail client is configured to
use a POP3 protocol then whenever you try to fetch e-mails through your e-mail client then a request
is sent to your POP server for the same.
 A POP server requires the log-in credentials of a user that are sent through e-mail client. Once a user
is authenticated, the POP server provides access to user’s e-mails. As with any client server
architecture, the e-mail client interacts with the POP server through a predefined set of commands.
Here is a list of common commands used to interact with POP server :
 USER – For User-ID

 PASS – For Password
 LIST – Provide message list
 DELE – To delete a message
 QUIT – To end the interaction
SMTP :The Simple Mail Transfer Protocol (SMTP) is an internet standard communication
protocol for electronic mail transmission. Mail servers and other message transfer agents use SMTP to
send and receive mail messages. User-level email clients typically use SMTP only for sending messages
to a mail server for relaying, and typically submit outgoing email to the mail server on port 587 or 465
per RFC 8314. For retrieving messages, IMAP and POP3.
E-main working step by step
1. A user wants to send an email to several recipients, so he accesses an email

client program and adds recipients in To, CC and BCC fields. He composes the email and
click Send button.
2. Based on configuration, email client sends email to either MSA or MTA for
further processing. If MSA is configured, email will be forwarded to it. If MSA is not
configured, email will be forwarded to MTA directly.
3. If MSA is configured and mail is received, it rewrites the header and performs
several essential checks based on its configuration. Once all defined checks are done, it
forwards mail to MTA.
4. If MSA is not configured and mail is directly received, MTA performs all
MSA’s tasks and checks the recipient’s addresses. If recipients are more than one, it makes a
separate copy of email from original email for each recipient.
5. MTA performs a DNS lookup to figure out the recipient’s address. If recipient
address is resolved, MTA packs email in envelop and forwards it to the MTA which is
authorized to receive recipient’s mail.
Web Technologies
6. At recipient’s MTA, if MDA is configured, received email will be forwarded to

it. Based on configuration, MDA performs several security checks such as virus scanning and
spam filtering. If MDA is not configured, MTA will perform all MDA’s tasks. Once pre-
delivery checks are done, email is forwarded to message store.
7. Email remains in message store until it is downloaded by email client program.
Once email is downloaded it will be available in inbox of recipient.
Web Technologies
E-MAIL MESSAGE COMPONENTS

E-mail message contains of different components: E-mail Header, Greeting, Text, and
Signature. These components are described in the following diagram:
From: sachintendulkar<sachin@yahoo.com>
Date: Fri 24 Feb 2017 11:00:46 AM
Header Part to: dravid@gmail.com
Subject: cricket
Cc: ganguly@reddiffmail.com
Greetings Hi guys,
Text Part I want to play cricket, but I am so frustrated by my back pain that I am
not able to play. I hope we can have a match this Sunday. So practice well.
Bye……….
------------------------- Sachin -------------------------

Signature Ramesh Sachin Tendulkar | office- 99658 96324
Part 333 West Line | fax - 365 789545
East Province, Mumbai. | email: sachin@yahoo.com
1. Header part
2. Greeting part
3. Text part Body part
4. Signature part
I) Header Part: The header part is the first part of the message, which contains the following
fields:
A. FROM: The From field indicates the sender’s address i.e. who sent the e-mail.
B. DATE: The Date field indicates the date when the e-mail was sent.
Web Technologies
C. TO: The To field indicates the recipient’s address i.e. to whom the e-mail is
sent.
D. SUBJECT: The Subject field indicates the purpose of e-mail. It should be
precise and to the point.
E. CC: CC stands for Carbon copy. It includes those recipient addresses whom we
want to keep informed but not exactly the intended recipient.
F. BCC: BCC stands for Black Carbon Copy. It is used when we do not want one
or more of the recipients to know that someone else was copied on the message.
II) Greeting Part: The greeting part is used to specify some greetings to the receiver. For
example, we can use greetings like hi, dear friend, respected sir etc.
III) Text Part: The main content of the e-mail message is called the text of the message or
text part. Here we can use any number of paragraphs to present our message.
IV) Signature Part: The final part of the message is known as signature. The signature part
contains sender’s complete address like name, area, phone number, e-mail ID etc.
-------------
MESSAGE COMPOSITION
Before sending an email, we need to compose a message. When we are composing an
email message. The manner in which a user can compose an e-mail message may vary from
one mail program to another, but the basic elements remain the same.
a) Structure: When the user is composing an e-mail message by using the mailer, it
will prompt the user with certain information i.e. when the user clicks the compose
button. The following information will be presented.
To:
Subject:
CC:
BCC:
Attach files
Attachments:
Formatting Toolbar
CANCEL
 TO:The To field indicates the recipient’s address i.e. to whom the e-mail is
sent.
 SUBJECT: The Subject field indicates the purpose of e-mail. It should be
precise and to the point.
Web Technologies
 CC: CC stands for Carbon copy. It includes those recipient addresses whom
we want to keep informed but not exactly the intended recipient.
 BCC: BCC stands for Blind Carbon Copy. It is used when we do not want
one or more of the recipients to know that someone else was copied on the
message.
 ATTACHMENTS: The “attach files” button is used for attaching some
additional files to the original message.
b) Composition: For sending an e-mail to the close friends, we can simply type the
message and send it. When applying for jobs or communicating with the people for the
first time, then proof reading and spell checking of the message is required.
c) Netiquette (Guidelines for Message Composition):
To compose a message, the user must follow some guidelines. These guidelines
are called netiquette or Network etiquette. The common guidelines for message
composition are as follows:
1) It is always preferable to type the message in lowercase.
2) We can use some special symbols called emotion icons to represent our emotion in
the message.
3) Before sending the message, we must check the spelling mistakes in the message
by using spell checkers, which are available in the mailer.
4) Before sending the message, the user must verify the “to” address (receivers
address).
5) It is preferable to see that the message should be limited to a single page.
6) It is recommended to verify whether the senders signature was placed or not in the
message.
7) Keep size of attachment as small as possible.
E-MAIL FEATURES
Now a day the mail client comes with enhanced features. The following are some e-
mail features that most e-mail programs offer.
Offline and Online text drafting:
Messages can be composed by being online as well as offline. Online messages can be
composed by clicking either New or Compose options. To compose Off-line messages, we can
use some message composing tools like MS outlook Express etc.
Spell Check:
It is always preferable to check the composed message for spelling mistakes before
sending. Most mailers (e-mail programs) provide built in spellcheckers.
Attachments with e-mail message:
This feature allows the sender to compose a message with images, audio, video,
documents etc. along with the text.
The e-mail alerts:
If we are offline and just logged-in, e-mail program provides a message that, you have
got new messages in your inbox. If we are online, message arrival will be notified by a beep
sound.
Mailbox managing:
This feature helps in creating number of file folders. Using these folders we can
manage messages date-wise, sender identity-wise and subject-wise.
Deleting a Mail:
A Received message can be deleted by selecting it and clicking delete option.
Suchdiscarded messages will be remained in Trash folder until it is deleted from it.
Removing Expired messages:
This feature helps us to automatically delete a message in case it has been read
and isolder than a certain number of days, say 30,60 or 90 days.
Reply to incoming mail / to all:

By using reply feature we can send reply to current received message’s address or
alladdresses that are in the address book.
Forwarding a Mail:
This feature helps us to redirect a received message to another address or account.
Automated Response:
This feature generates automatic replies to the received messages. It is useful
when auser is in vacation.
PROTOCOL
A protocol is a set of rules that direct how computers can communicate. The protocol defines
 The way addresses are assigned to machines
 The formats in which they will pass data
 The amount of data which can be sent at a time
The whole of INTERNET is underpinned by two protocols, TCP (Transmission
ControlProtocol) and IP (Internet Protocol)
Transmission Control Protocol/Internet Protocol (TCP/IP):
It is the combination of two protocols TCP and IP. These protocols provide all the
requirements to transmit and receive data across complex networks. Networks are made of
layers with each layer providing certain functionality. The following figure shows how the
most important layers fit together.

1. Application layer
This is the top layer of TCP/IP protocol suite. This layer includes applications or processes that use
transport layer protocols to deliver the data to destination computers.
At each layer there are certain protocol options to carry out the task designated to that particular
layer. So, application layer also has various protocols that applications use to communicate with the
second layer, the transport layer. Some of the popular application layer protocols are :
HTTP (Hypertext transfer protocol)

FTP (File transfer protocol)
SMTP (Simple mail transfer protocol)
SNMP (Simple network management protocol) etc
2. Transport Layer
This layer provides backbone to data flow between two hosts. This layer receives data from the
application layer above it. There are many protocols that work at this layer but the two most
commonly used protocols at transport layer are TCP and UDP.
TCP is used where a reliable connection is required while UDP is used in case of unreliable
connections.
3. Network Layer
This layer is also known as Internet layer. The main purpose of this layer is to organize or handle
the movement of data on network. By movement of data, we generally mean routing of data over
the network. The main protocol used at this layer is IP. While ICMP(used by popular ‘ping’
command) and IGMP are also used at this layer.
4. Data Link Layer

This layer is also known as network interface layer. This layer normally consists of device drivers in
the OS and the network interface card attached to the system. Both the device drivers and the
network interface card take care of the communication details with the media being used to transfer
the data over the network. In most of the cases, this media is in the form of cables. Some of the
famous protocols that are used at this layer include ARP(Address resolution protocol), PPP(Point to
point protocol) etc.
Internet Protocol
Once the packets are made ready to transfer by TCP these packets will be assigned
with IP header that consists of all the information that is needed to transfer a packet from
source to destination. IP packets will contain 20 to 60 bytes of header information and up
to 65,515 of message data.
Internet Addresses:
In any network each system should have identification, then only data can be sent
and received appropriately. This identification of a system in a network is called IP
address. Every system that is connected to the internet will have a unique IP address.
These IP addresses are of two types. They are:
1) Static IP Addresses which are fixed addresses
2) Addresses which are dynamically addressed each time when a system connects to
internet
Eg: 192.168.100.15
in which first two bytes represent network component and the other two bytes represent

host component. The value range for each byte is 0 to 255. Based on these IP addresses
only, the packet will be routed through network by choosing best route to the destination
address.
Hyper Text Transfer Protocol (HTTP)

HTTP is a communication protocol. It defines mechanism for communication
between browser and the web server. It is also called request and response protocol
because the communication between browser and server takes place in request and
response pairs.
HTTP Request
HTTP request contains of lines which contains:
 Request line
 Header Fields
 Message body
Key Points
 The first line i.e. the Request line specifies the request method i.e. Get or Post.
 The second line specifies the header which indicates the domain name of the
server from where index.htm is retrieved.
HTTP Response
Like HTTP request, HTTP response also has certain structure. HTTP response contains:
 Status line
 Headers
 Message body
Following are some response codes:
Response Code Meaning
200 -OK the message contains requested data including all necessary headers.
201 -Created the server has created a file which the browser should load.
204 -No Content the request was processed successfully, but no data to return.
301 -Moved Permanently the requested page has been moved to new URL.
400 -Bad Request the request from client used invalid syntax and could not be processed.
401 -Unauthorized the required authorization was not provided
404 -Not Found the request is valid but the server could not find the document.
500-InternalServer Error the server generated an error which cannot be handled.

UNIT-3
Hypertext Markup Language
Basic HTML:
HTML stands for hypertext markup language. Html was developed by “Tim Berners-Lee”, in early
1990’s at European practical physics laboratory in Geneva, Switzerland. HTML is an application of SGML
(Standard Generalized Markup Language).
Basically HTML is a document-layout language (i.e. document designing language) but not a
programming language. It is used to create HTML documents also called as “web pages”. These web pages
can be viewed (displayed) using any browser software such as (Microsoft Internet Explorer (or) Netscape
Navigator).
HTML accepts some content usually combination of text and images with certain structure and adds
formatting to it (using tags). This formatting is processed by the browser to display as web page output.
HTML contains tags that are predefined combination of characters enclosed between angular brackets
i.e. less than ‘<’ and greater than ‘>’ symbols. Sample tags are <html>, <title> and <body> etc.
A tag is a format name that describes how the elements of a web page are to be used. These tags are
embedded within the text of web page. Html up to version4 is not a case sensitive language, but XHTML is a
case sensitive language and hence tags must be in lower case letters.
Html Tags:
Html tags are the instructions that are embedded directly in to the text of a web page. The html tags
tell the web browser how to format and organize the web page. All the html tags must be enclosed with in a
pair of angular brackets i.e. ‘<’ and ‘>’ symbols.
In html, the tags are classified into two types. They are:
1) Singular tags
2) Paired tags
1) Singular tags: These tags are also known as one-sided tags. They have an opening tag, but do not
have a closing tag (ending tag).
e.g. <br>, <hr>
2) Paired tags: These tags are also known as two-sided tags. They have both opening and closing tags
(ending tags). The opening tag is the same as that of its opening tag except that it is preceded by a “/”
character.
e.g. <html> and </html>, <body> and </body>
The general syntax of the html tags are as follows:
<TAG attri1=”v1” attri2=”v2”……>
Item to be formatted
</TAG>
Here <TAG> means HTML tag, “attri” means attribute and v1, v2… are the values of attributes.
Many html tags have attributes. All attributes are optional. Each attribute usually have a choice of
various values.
e.g. <body bgcolor=”black” text=”red”>
India is a great nation </body>
Structure of HTML (XHTML) Document:
An HTML document is ASCII (text) file, which can be created using any text editor such as ‘notepad’.
Every HTML document must have a file extension of “.html” or “.htm”. Usually an HTML document is also
called as a web page. Each html document usually contains different tag embedded within the text of the
document. The basic structure of HTML document is as follows:
<html>
<head>
<title>Information about the html program</title>
</head>
<body>
Actual content for designing the web page
</body>
</html>
In every html document, the tags <HTML> and </HTML> defines the beginning and ending of the
html document. These tags inform the browser that the entire document is a HTML file. Within these tags all
other tags are included. Every HTML document has two parts or sections. They are:
1) Header section (i.e, the Document Head)
2) Body section (i.e, the Document Body)
1) Header section or Document Head: The header section is specified by using the tag <HEAD> and
</HEAD>. This section usually provides information about the web page (i.e., metadata) such as the
title of the web page, style sheets and scripting code etc. This section contains control information to
be used by browsers and servers.
2) Body section or Document Body: This section is specified by using the <body> and </body>. In
this section, we can specify the actual contents like the text, images, hyperlinks and tables etc. the
content of these section will be displayed as the webpage output.
E.g.: <html>
<head>
<title>Welcome</title>
</head>
<body>
INDIA IS A GREAT NATION
</body>
</html>
Comment Tag:
Comment is a plain text included inside the program. This plain text is used to describe what the
program does and how it works. The comment tag is used for comments in web pages.
The comment tag start with “<!” and end with “>”. Each comment can contain single or multiple lines. If
a comment is more than one line then, each line must start and end with “--“ and must not contain “--“
within its body.
Comments can be placed in either the head or body of web pages. Usually programmers use comments
for displaying the following:
 Name of the application
 Description of purpose of code
 Name of the author
 Original creation date
 Version number
 Copyright information
E.g.: <body>
<! -- This is an example for --
-- Comment tag -->
India is my beloved nation
</body>
Blocks:
HTML documents are structured as blocks of text, each of which can be formatted independently. The
two major blocks of text in HTML documents are the paragraph and heading. The paragraph tag is used for
specifying paragraphs and heading tag is used to specify a heading.
Paragraph Tag: The paragraph tag is used to break the text into paragraph. To specify a block of text
as a paragraph, enclose it within the paragraph tag <P> and </P>. the ending tag is optional. It contains
various attributes such as align, style etc. The paragraph tag can be used in the following form:
<p align=”value” style=”color:value;backgroundcolor:value;>
Text to be formatted </p>
In the above syntax, closing tag is optional. The style attribute has “property:value” pair which
specifies appearance of the text. Each “property:value” is terminated by a semicolon.
E.g.: <body>
<p align=”center” style=”color:red; background:yellow;>
A tag is an instruction that is interpreted by the browser. The commonly used browsers
are Interner Explorer and Netscape Navigator.
</p>
</body>
Headin g Tag: The heading tag is a paired tag. It provides 6 levels of headings of various sizes. The
beginning of the heading tag is <hi> and corresponding ending tag is </hi>. Here base ‘i’ can be any
value from 1 to 6. The largest heading is <h1> and the smallest is <h6>. The heading tag can be used
in following form:
<h1> HTML </h1> ---- Level One
<h2> HTML </h2> ---- Level Two
<h3> HTML </h3> ---- Level Three
<h4> HTML </h4> ---- Level Four
<h5> HTML </h5> ---- Level Five
<h6> HTML </h6> ---- Level Six
The heading tags are very useful for dividing a web page into sections. The attribute “align”
can be used with the heading tag. The align attribute takes values “left/center/right”.
HR Tag: This tag is used to draw a horizontal line on the web page. It is a singular tag. The attributes
associated with HR tag are ALIGN, WIDTH and SIZE. It has the following format:
Syntax: <hr align=”value”
width=”value”
size=”value”
noshade>
In the above syntax, the line WIDTH and the SIZE set the basic appearance of the line. The
SIZE attribute specifies the thickness of the line in terms of pixels. Width is also specified in terms of
pixels. By default horizontal line has shade by using “NOSHADE” we can avoid the shade.
E.g.: <body>
HTML
<hr align=”center” width=”50%” size=”5”>
<hr width=”60%” size=”10” noshade>
</body>
Note: Since <hr> tag cannot contain anything, hence it can’t be used for putting images and text.
Hence in XHTML, we can specify this tag as <hr />, which indicates that the tag ends immediately
after the opening tag.
Sample Program:
<! This program demonstrates the basic tags explain above >
<html>
<head>
<title>Welcome</title> <! Title of the web page>
</head>
<body>
<h1 align=”center”>Welcome to Basic HTML</h1>
<hr size=”10” width=”50%”>
<! -- This is a paragraph tag used --
-- to specify paragraphs -->
<p align=”left” style=”color:white;background:orange;”>
HTML stands for hypertext markup language. Basically HTML is a document-layout
language (i.e. document designing language) but not a programming language. It is used to
create HTML documents also called as “web pages”. These web pages can be viewed using
any browser software such as (Microsoft Internet Explorer (or) Netscape Navigator).
</p>
</body>
</html>
Text (Text Formatting Commands):
The text in an HTML page can be altered in a number of ways such as the font, the look and style of
the text can be changed. The following tags can be used to alter the text:
BASEFONT Tag: The <basefont> tag is a singular tag. It is used to define the font to be used in the
web page. The default font size is “3”. Usually many browsers support the font size from 1 to 7 points.
This tag has an attribute “size” which can be used to define the font size. The syntax of the base font
tag is as follows:
<basefont size=”value”>
E.g. <basefont size=”5”>
This example sets the font size of the web page to 5 points. We can also specify the size in the
following format:
<basefont size=”+2”>
The above example sets the font size of the web page to 2points larger than the default font size.
Font Tag: The font tag is used to change the appearance of the text in a web page. It is a paired tag
and has many attributes. Some of them are:
a) FACE
b) SIZE
c) COLOR
FACE: This attribute is used to specify the type of font.
SIZE: This attribute is used to specify the font size of a particular section of a web page.
COLOR: This attribute is used to specify the text color for a particular section of a web page.
The general format of the font is as follows:
<font face=”text style” size=”value” color=”colorname/colorcode”>
text to be formatted
</font>
e.g. <body>
<font face=”verdana” size=”10” color=”red”>
Microsoft Corporation
</font>
</body>
Bold Tag: The bold tag <b> is used to make the text in bold face. It adds emphasis to the text. Most
browsers darken the text and widen the letters.
E.g. <b> India is Great </b>
Italic Tag: The italic tag <i> is used to make the text into italics.
E.g. <i> India is Great </i>
Strong Tag: The strong tag <strong> is used to indicate an even higher level of emphasis.
E.g. This is very <strong> important </strong> day for me.
Monospaced Typewriter Text Tag: This tag <tt> is used to display text as typewriter output. It is
useful for displaying program code in a web page.
E.g. <tt> India is a beautiful nation </tt>
Subscript Tag: The subscript tag <sub> is used to generate a subscript.
E.g. Formula for water is H<sub>2</sub>O.
Superscript Tag: The superscript tag <sup> is used to produce superscripts.
E.g. Ten square is written as 10<sup>2</sup>
BR Tag (Blank Return Tag or Line Break Tag):
The <br> tag is used to insert a line break i.e. a new line. This is a singular tag and has no attributes, hence
in XHTML it can also be used as <br />. It can be used in the following form:
e.g. <body>
courses in sv university <br>
1. mscs <br />
2. mpcs <br />
3. mecs
</body>
PRE Tag (PRE-Formatted):
When it is necessary to include ready-formatted text on a web page like program code, poetry etc. we
can use PRE tag <pre>. In this tag the text is only wrapped when there is a line break and tabs. The
multiple white spaces are not converted to a single space.
e.g. <pre>
main()
{
int a=10, b=20;
cout<<”Sum”<<a+b;
}
</pre>
HTML Character Entities (or Character Escape Sequences):
Sometimes the user may need to include special characters in a web page that are not available
on the keyboard and the characters, which HTML uses as control sequences. Such characters can be
displayed using Character Escape Sequences.
Character Escape Sequences are special characters composed of character strings. Each
character string is preceded by an ampersand (&). All Character Escape Sequences can be directly
included in a web page. The following are some Character Escape Sequences:
Character
Character Description
Code
“ Double Quotes "
& Ampersand Symbol &
> Greater than Symbol >
< Less than Symbol <
[Blank Space] Non-Breaking Space
© Copyright Symbol ©
® Registered Trade Mark ®
Symbol
Sample Program:
<! This program demonstrates the text formatting commands >
<html>
<head>
<title>Welcome to Text Formatting Tags</title> <! Title of the web page>
</head>
<body>
<basefont size=”5”>
<h1 align=”center”>Text Formatting Tags</h1>
<font color=”blue” size=”7” style=”verdana”>HTML</font>
stands for <b>hypertext markup language</b>. Basically <b>HTML</b> is a <i>document-
layout language</i> (i.e. document designing language) but not a programming language. It is
used to create HTML documents also called as <strong>“web pages”</strong>.
These web pages can be viewed using any browser software such as <tt>(Microsoft
Internet Explorer (or) Netscape Navigator)</tt>.
HTML provides tags from subscript and superscript. For example, we can specify square value
of “a” as:<br>
a<sup>2</sup> <br>
Similarly, the formula of water is: <br>
h<sub>2</sub>
<br> HTML provides various codes such as: <br>
© --- Copyright Symbol <br>
®--- Registered Trade Mark Symbol <br>
<--- Less Than Symbol <br>
> --- Greater Than Symbol <br>
PRE is useful for formatting computer code or poetry where whitespace is important, it is used
in the following form: <br>
<pre>
main()
{
int a=10, b=20;
cout<<”Sum”<<a+b;
}
</pre>
</body>
</html>
HTML LISTS:
A list is a collection of elements that belong to a particular category in html. There are three types of lists:
1) A numbered list (Ordered list)
2) The basic bulleted list (Unordered list)
3) Definition list
1) A numbered list (Ordered list): A numbered list is the list of elements, which is having a particular order
or sequence. In a numbered list, every element contains a particular order. In html, we can create the
numbered list by using the ordered list tag <ol>.
The general format of the ordered list is as follows:
Syntax: <ol type=”1/a/A/i/I” start=”value” compact>
<li>………….</li>
<li>………….</li>
………………
………………
</ol>
In the above syntax, the “type” attribute is used to specify a particular sequence type. In HTML we can
specify the following sequence types:
i. Arabic numbers ordering (natural numbers)
ii. Alphabetic ordering (upper case and lower case)
iii. Roman number ordering (upper case and lower case)
The “start” attribute is used for specifying the starting position for the sequence.
The “compact” attribute is used to reduce the amount of space that a list uses.
The list item tag <li> is used for specifying a particular list item. The closing tag for a list item is
required under the rules of XHTML.
Note: By default, the sequence of numbered list is numerical ordering.
E.g.-1: <ol> Output:
<li>Mangoes 1. Mangoes
2. Grapes
<li>Grapes 3. Apples
<li>Apples
</ol>
E.g.-2: <ol type=”I” start=”3”> Output:
III. Mangoes
<li>Mangoes
IV. Grapes
<li>Grapes V. Apples
<li>Apples
</ol>
E.g.-3: <ol type=”a” start=”4”>
<li>Mangoes Output:
d. Mangoes
<li>Grapes e. Grapes
<li>Apples f. Apples
</ol>
Un-ordered list:
An un-ordered list is a list of elements without any sequence. In unordered list each element starts with
a bullet point such as “filled circle”, “empty circle” (or) “filled square”.
Syntax:
<ul type=”disc/circle/square” compact>
<li>
<li>
<li>
</ul>
E.g.-1: <ul>
Output:
<li>Mangoes  Mangoes
<li>Grapes  Grapes
 Apples
<li>Apples
</ul>
E.g.-2: <ul type=”circle”>
Output:
<li>Mangoes o Mangoes
o Grapes
<li>Grapes o Apples
<li>Apples
</ul>
Definition list:
A definition list is a list of elements in which every element is divided into two parts i.e. list item being
defined (definition term) and its definition (data definition). The data definition contains some description
about the definition term.
The general format of the definition list is as follows:
Syntax: <dl compact>
<dt>Definition term 1
<dd> Data definition
<dt> Data definition 2
<dd> Data definition
< /dl>
In the above syntax the <dl> tag is used for creating definition list. The definition term tag <dt> is
used for specifying the list item being defined. Similarly, data definition tag <dd> is used to define the
description about list item (definition term).
E.g.: <dl>
<dt>MSCS
<dd>Math’s Statistics Computer Science
----------------------
----------------------
</dl>
Note: In non-standard html versions, the closing tags of list item </li>, definition term </dt> and data
definition </dd> are optional. But in XHTML these tags are compulsory.
Sample Program:
<! This program demonstrates the HTML LISTS >
<html>
<head>
<title>Welcome to HTML Lists</title> <! Title of the web page>
</head>
<body>
<h1 align=”center”>HTML Lists</h1>
India has many States, some of them are: <br>
<ol type=”a”>
<li>Andhra Pradesh</li>
<li>Tamilnadu</li>
<li>Madhya Pradesh</li>
<li>Jammu & Kashmir</li>
<li>Goa</li>
</ol>
Andhra Pradesh has many Districts, some of them are: <br>

<ul type=”circle”>
<li>vizag</li>
<li>Tirupathi</li>
<li>Kurnool</li>
<li>Vijayawada</li>
<li>Prakasam</li>
</ul>
</body>
</html>
Using Colors and Images:
Colors:
Using colors in web pages makes them more beautiful and attractive. The color can be specified either
as a color name or color code. The color names are general names such as RED, BLUE etc., but the color
codes are six figure hexadecimal values enclosed between double quotes and preceded by a hash symbol (#).
Colors can be used in a number of places in a web page like: background of a web page, individual
elements and hyperlink colors etc. For example, the body tag can be used to change colors in following way:
<BODY bgcolor=”colorname/colorcode”
text=”color name/color code”
link=”color name/color code”
vlink=”color name/color code”
alink=”color name/color code”>
BGCOLOR: It is used to change the background color of the entire web page.
TEXT: It is used to change the color of the entire text on the web page.
LINK: This attribute sets the color for hyperlinks in the web page that have not been visited i.e an
unvisited hyperlink
VLINK: This attribute is used to set the color for visited hyperlinks in a web page.
ALINK: This attribute is used to set the color for active hyperlinks in a web page.
e.g.: <body bgcolor=”Orange”
text=”Black”
link=”#00ff00”
vlink=”#0000ff”
alink=”ff0000”>
Colors can also be used within many tags like heading tag, table tags etc. For example, to change the color of
a headings or tables in the following way:
e.g.-1: <h1 color=”#ff0000”>Color Heading</h1>
e.g.-2: <th bgcolor=”#ababab”>
Images:
Images can be used to make a web page more attractive. The problem with images is that if they are
not used properly, then web page size will increase and takes longer time to download. Browsers display a
limited range of image types like Joint Photographic Experts Group (JPG), Graphics Interchange Format
(GIF) and Portable Network Graphics (PNG) etc.
An image can be used as a background as well as a foreground object on the web page. By using the
BACKGROUND attribute in the body tag we can assign an image as a background to the web page in the
following format:
<body background=”path of the image file”>
The image tag <img>, is used for placing an image on the web page as a foreground object. Such images
are called in-line images. The image tag has several attributes such as “SRC”, “HEIGHT”, “WIDTH”,
“ALT”, “ALIGN”, and “USEMAP”. The general format of image tag is as follows:
<img src=”path of the image file”

height=”value in pixels / percentage
width=”value in pixels / percentage”
alt=”value”
align=”top / bottom / center / left / right”
usemap=”url”>
In the above syntax, the “SRC” attribute means source attribute that is used to specify the path of
image file. The “HEIGHT” and “WIDTH” attributes are used to specify the displaying size of the image on
the web page.
The “ALT” attribute is used to specify a text to describe the image in words. This text is called “Tool tip
text” and it will be displayed when the user places mouse pointer on the image. If the image is not
displayed then the text will appear in the area where the image has to be displayed.
The “ALIGN” attribute with value “top/bottom/center/left/right” is used to align the image relative to
the text surrounding it on the web page.
e.g. : <body>
This is a
<img src=”d:\images\house.jpg” height=”150” width=”30%” alt=”sample image”
align=”left”>
Sample program
</body>
Image Hyperlink (Graphical Hyperlink):
The image hyperlink is a hyperlink that creates a clickable image. When we click on the image, it will
open the web page that is associated with the image hyperlink. The general format of image hyperlink is as
follows:
Syntax: <a href=”path of the web page”>
<img src=”path of the image file” height=”value” width=”value”>
</a>
E.g. <body>
<a href=”d:\kcdc\college.html”>
<img src=”d:\kcdc\college.jpg” height=”200” width=”300”>
</a>
</body>
In the above example, college.jpg image is displayed on the web page as a clickable image.
When we click on the image, the web page “college.html” is opened.
Image Maps:
Image map is a large picture which has areas that the user can click. Each clickable area provides a
link to other web page. Image maps are very popular as a navigational tool. For example, an actual
geographical map is an excellent tool for image maps. The process of creating the image maps is divided into
the following steps:
Image Tag with usemap Attribute:
Place an image on the web page that is going to be linked with the mapping code by using the
following format:
<img src=”path of image file”>
This image can be linked with mapping code by using usemap attribute in the <img> tag. The value to
the usemap attribute is mapping code name, proceeding with “#”.
For eg: - <img src=”d:\states\ap.jpg” usemap=”#mapping code name”>
Map Tag and Area Tags:
The mapping code can be developed by using area tags within <map> tag. The <area> tags are used to
draw areas on the image and these areas are bounded with (given) a name by using name attribute in the map
tag.
<map name=”mapping code name”>
-----------------
List of area tags
-----------------
</map>
By using area tag we can draw a circle, rectangle, polygon and a default shape. The syntax of area
tag is as follows:
<area shape=”shape name”
coords=”co-ordinate values”
href=”url”
alt=”Alternative text”>
In the above syntax, the SHAPE attribute defines the shape that is to be drawn on the image. The value
to this attribute should be rect, circle, poly and default.
The COORDS attribute is used to define the coordinate values of the corresponding shape. While
using default shape no need of specifying coordinate values.
Coordinates (Coords)
Shape
Circle (x, y, r) where x, y denotes as midpoint and r is
radius of circle in terms of pixels.
Rectangle (Rect) (x1,y1,x2,y2) where x1, y1 are Coordinates of
the top left corner and x2, y2 are bottom right
corner.
Polygon (Poly) (x1,y1,x2,y2,.,.,.,.xi,yi,.,.,.,.,.,xn,yn)where xi ,
yi are Coordinates of ith vertex.
Default No coordinates
The HREF attribute refers to the webpage (location) that is to be displayed, when the user clicks on a
particular area.
The ALT attribute acts as a hint to the user by displaying alternative text while clicking an area.
Sample Program:
<! This program demonstrates the Image Tag and Image Mapping>
<html>
<head> <title>Image Maps</title></head>
<body bgcolor=”Orange” text=”Black” link=”#00ff00” vlink=”#0000ff” alink=”ff0000”>
<img src=”d:\states\ap.jpg” width=”400” height=”400” usemap=”#shapes”>
<map name=”shapes”>
<area shape=”circle” coords=”50,50,30” href=”nlr.html” alt=”About Nellore”>
<area shape=”rect” coords=”200,20,350,100” href=”tirupathi.html” alt=”About
Tirupathi”>
<area shape=”poly” coords=”250,200,210,300,350,275,350,300,350,200”
href=”hyd.html” alt=”About Hyderabad”>
</map>
</body>
</html>
UNIT-4
HR TAG: The HTML <hr> tag is used for creating a horizontal line. This is also called
Horizontal Rule in HTML.
Example
<! DOCTYPE html>
<html>
<head>
<title>HTML hr Tag</title>
</head>
<Body>
<p>This text will be followed by a horizontal line <hr/></p>
</body>
</html>
This will produce following result:
Output:
This text will be followed by a horizontal line
Attributes: The HTML <hr> tag also supports following additional attributes:
Align: The “align” attribute is used for specifying the alignment of the table.
Noshade: Removes the usual shading effect that most browsers display.
size: Specifies the height of the horizontal rule in pixels or %.
Width: Specifies the width of the horizontal rule in pixels or %.
-----------------
HTML Tables
In html, a table is a collection of rows and columns. We can use the tables to represent
the data in row wise and column wise format. Usually the tables are used to provide information
in an organized way so that information can be easily readable and understandable.
HTML Table Tags: The following five tags are used to create a table in web pages.
1) Table Tag <TABLE>
2) Table Row Tag <TR>
3) Table Division Tag OR Table Data Tag <TD>
4) Table Header Tag <TH>
5) Caption Tag <CAPTION>
1) Table Tag: The table tag is used for creating a table environment on the web page. The
general format of the table tag is as follows:
Syntax :< TABLE BORDER=”value”
BORDERCOLOR=” color name/color code”
BGCOLOR=” color name/color code”
ALIGN=” left/center/right”
CELLSPACING=”value”
CELLPADDING=”value”
WIDTH=”value”
HEIGHT=”value”>
</TABLE>
Attributes:
Border: this attribute is used for specifying size for the table border. The default border size is
one pixel.
BorderColor: The “bordercolor” attribute is used for specifying a particular color to the table
border. BgColor: The “bgcolor” attribute is used for specifying a particular color for the table
as background. Background: The “background” attribute is used for specifying an image as
background to the table. Align: The “align” attribute is used for specifying the alignment of
the table.
Width: By using “width” attribute we can specify desired width for the table. The value to this
attribute can be either in pixels or in percentage.
Height: By using “height” attribute we can specify desired height for the table. The value to
this attribute can be either in pixels or in percentage.
Cellspacing: The “cellspacing” attribute is used for specifying particular space between the
cells in the table.
Cellpadding: The “cellpadding” attribute is used for specifying the space between the text and
the inner edges of a particular cell in the table.
E.g.: <TABLE BORDER=”2” BORDERCOLOR=” red” BGCOLOR=”
blue” WIDTH=”70%” ALIGN=” center” CELLSPACING=”10”
CELLPADDING=”10”>
---------------------------
---------------------------
</TABLE>
2) Table Row Tag: The table row tag <TR>, is used for creating a particular row in a table.
The ending tag of the table row is optional i.e. </TR>. This tag must be used with in the table
tag. The syntax of the table row tag is as follows:
Syntax: <TR BGCOLOR=” colorname/colorcode”
VALIGN=” top/center/right”>
</TR>
In the above syntax, the “bgcolor” attribute specify the background color of a particular row.
Align: the align attribute is used for specifying the horizontal alignment of data in a row.
Valign: The valign attribute is used for specifying the vertical alignment of data in a row.
3) Table Data Tag and Table Header Tag: The table data tag <td> and table header tag <th>
are used to create data cells and heading cells in a table row. The data in heading cells will be
displayed in bold face and aligned to center. These tags use common attributes like bgcolor,
rowspan, colspan, align, valign and nowrap. The syntax of the table header tag is as follows:
Syntax: <TH BGCOLOR=” colorname/colorcode”
ROWSPAN=”value”
COLSPAN=”value”
VALIGN=” top/middle/bottom”
NOWRAP>
</TH>
The table data tag <td> also follows the same syntax of <th>. In the above syntax, the
“bgcolor” attribute specifies the background color of a particular cell. The “align” attribute is
used for specifying the alignment of data in a particular cell. The “rowspan” attribute is used
for specifying the span(extent) of a particular cell towards rows (row wise). The “colspan”
attribute is used for specifying the span (extent) of a particular cell towards columns (column
wise). The valign attribute is used for specifying the vertical alignment of data in a cell. The
“nowrap” is used to remove word wrap option in a cell.
-----------------
NESTED TABLES
we can use one table inside another table. Not only tables we can use almost all the tags
inside table data tag <td>.Nested Table always need to be placed between < td > ... < /td > tags
of the outer container Table. we can format nested tables as we would format any other HTML
Table.The following HTML code create a Table with one row and two columns and inside the
second column again create another table (nested table) with two rows.
<html>
<body >
<table border=5 bordercolor=red>
<tr><td>First Column of Outer Table </td>
<td>
<table border=5 bordercolor=green>
<tr><td> First row of Inner Table </td></tr>
<tr><td> Second row of Inner Table </td></tr>
</td>
</tr>
</table>
</body>
</html>
--------------------
Hyperlink (Anchor tag or Link Tag)
Representing huge information in a single lengthy web page is not an efficient way.
Because lengthy web pages will take longer time to get downloaded, which makes the user to
wait long time. If this happens user may switch to other website to gather information.
To reduce the downloading time of the web page, huge information should be
distributed among multiple web pages rather than in a single web page. These multiple web
pages should be linked to each other so that the user can navigate among web pages to gather
information quickly. These links among web pages are called hyperlinks.
In HTML, hyperlinks can be created by using link tag (anchor tag), which uses the
following format:
<a href=” address”>text/Image</a>
In the above syntax, the link tag has three sections:
1) Opening tag with address of the referenced file (local, remote, section)
2) Content to be displayed as link
3) Closing tag
1) Opening tag with address of referenced file:

The HREF attribute is used to specify address of the local web page or services (remote web
pages) at other sites or address of the specific part of current page.
Eg-1:<a href=” d:\bca\student\details.html”>Show Student Details</a>
In the above example, HREF attribute refers to a local web page (details.html) by using
absolute path.
Eg-2:
<a href=” http://www.simhapuriuniv.ac.in/graduation/bca/results.html”>BCAResults</a>
In the above example, HREF attribute refers to a remote web page (results.html) by using
absolute path.
Paths are of two types:
a) Absolute path
b) Relative path
a) Absolute Path:
An absolute path specifies a file location using the drive letter and complete folder path along
with the file name to show a file’s physical location. The absolute path can be specified
in the following format:
d:\bca\student\details.html
b) Relative Path:
A relative path specifies the location of a file relative to the current working directory. In a
relative path, a single dot (.) at the start of the path is used to indicate the current directory
i.e. ./[Filename].Similarly, a pair of dots (..) at the start of the path are used to indicate
the parent directory of the current directory. i.e. ../[Filename].
Suppose that a web server has the following folder structure and files:
Vehicles
Vehicles.html
Bikes Cars Tractors

Bikes.html T1.html
T2.html
C1.ht T3.html
Bajaj Honda
B1.html H1.html
B2.htmlPR H2.html
EVIEW H3.htmlSE
ND
If we want to access c1.html in cars folder from t1.html in tractors folder, the relative path
would be:
Ex: ../cars/c1.html
Similarly, if we want to access t2.html in tractors folder from b1.html in Bajaj folder, the
relative path would be:
Ex: ../../tractors/t2.html
URL (Uniform Resource Locator): The string of characters that specify an address of a web
page is known as “uniform Resource Locator (URL)”.
The general format of the URL is:
type://host.domain/folder path/file
how where what
E.g. http://www.simhapuriuniv.ac.in/index.html
type: It defines the protocol that the browser should use to access a web page (how) from the
server. The protocol can be either: http, ftp, etc.
host.domain/folder path: It defines the domain name of the computer where the web page is
available. The name “simhapuriuniv.ac.in” in the above example, tells the browser on
which computer (where) it has to find the requested web page.
file: It is a uniquely identifiable local file name (what) that has to be loaded when the browser
requests the web server. If any page name is not specified, then the web server supplies a
default web page.
2) Content to be displayed as link:
The content that is to be enclosed between the anchor tags should be either text or image,
which acts as clickable content.
Link to Specific Sections (Intra-Document Hyperlinks):

Intra document linking allows us to create hyperlinks from one position to another
position within web page. To create intra document links, first we have to create or define
labels (section names) to different sections of the web page using the “NAME” attribute of
anchor tag. After specifying the label, we can link one section with other sections by using the
labels as addresses in the “HREF” attribute of the anchor tag. In “HREF” attribute the label
names must be preceded by ‘#’ symbol.
The general format of intra document linking is as follows:
<a href=” #section_name1”> text </a><br>
<a href=” #section_name2”> text </a><br>
------------------
------------------
<a name=” section_name1”>
------------------
lines of text
------------------
</a>
<a name=” section_name2”> text
------------------
lines of text
------------------
</a>
e.g.: <body>
<a href=” #courses”> University Details </a><br>
<a href=” #address”> Address Details </a><br>
------------------
lines of text
------------------
<a name=”courses”>
<h3> About Courses </h3></a>
B.Sc<br>
B.Com<br>
B.C.A<br>
<a name=” address”>
<h2> ADDRESS </h2></a>
VIKRAMA SIMHAPURI UNIVERSITY, <br>
NELLORE,<br>
ANDHRA PRADESH.
</body>
Image Hyperlink (Graphical Hyperlink): The image hyperlink is a hyperlink that

creates a clickable image. When we click on the image, it will open the web page that
associated with the image hyperlink. The general format of image hyperlink is as
follows:
Syntax: <a href=” path of the web page”>
<imgsrc=” path of the image file” height=”value”
width=”value”>
</a>
E.g. <body>
<a href=” d:\college\college.html”>
<imgsrc=” d:\college\college.jpg” height=”200”
width=”300”>
</a>
</body>
In the above example, college.jpgimage is displayed on the web page as a
clickable image. When we click on the image, the web page “college.html” is opened.
Sample Program:
<! This program demonstrates the Hyperlink Tags >
<html>
<head>
<title>Welcome to HTML Hyperlinks</title><! Title of the web page>
</head>
<body>
<h2 align=” center”>This is a text hyperlink</h2>
<a href=” d:\bca\student\details.html”>Show Student Details</a>
<h2 align=” center”>These are Intra-Document Hyperlinks</h2>
<a href=” #courses”> University Details </a><br>

<a href=” #address”> Address Details </a><br>
------------------
Lines of text
------------------
<a name=” courses”>
<h2> About Courses </h2></a>
B.Sc<br>
B.Com<br>
BCA<br>
------------------
Lines of text
------------------
<a name=” address”>
<h2> ADDRESS </h2></a>
VIKRAMA SIMHAPURI UNIVERSITY, <br>
NELLORE, <br>
ANDHRA PRADESH.
<h2 align=” center”>This is an Image Hyperlink</h2>
<a href=” d:\college\college.html”>

<imgsrc=” d:\college\college.jpg” height=”200” width=”300”>
</a>
<h2 align=” center”>This is a mailto Hyperlink</h2>
<a href=” mailto: minsoft@yahoo.com”>

Minsoft Corporation
</a>
</body>
</html>
------------------
FRAMES
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into frames in a similar way the tables
are organized: into rows and columns.To display multiple web pages in a single browser
window, we use the following tags:
Frames Not Supported in HTML5.
The <frame> tag was used in HTML 4 to define one particular window (frame) within
a <frameset>.
• Frameset Tag
• Frame Tag
Frameset Tag:
The frameset tag defines how the browser window will be divided into frames.
Theses frames can be either horizontal or vertical frames. The general format of the
frame set tag is as follows:
Syntax:<frameset cols=” number of frames with size in
percentages”
rows=” number of frames with size in percentages”
border=”value”
bordercolor=” color name / color code”>
---------------------------------
---------------------------------
</frameset>
In the above syntax, the “cols” attribute is used for specifying number of
vertical frames. The “rows” attribute is used to specify the number of horizontal frames.
We can specify the size of the frames in percentage values.
The “border” attribute is used for specifying the size of the frame border.
The “bordercolor” attribute is used for specifying a particular color for the
frame border.
E.g.-1:<frameset cols=”20%, *, 20%”
border=”4”
bordercolor=” #co9ffu”>
<frame>
<frame>
<frame>
</frameset>
In the above example, the frameset tag creates three vertical frames of sizes
20%, 60% and 20%. Here the “*” symbol represents the remaining space of the web
browser i.e., 60%.
E.g.-2:<FRAMESET ROWS=”20%, *, 20%”
BORDER=”4”
BORDERCOLOR=” #CO9FFU”>
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
In the above example, the frameset tag creates three horizontal frames of sizes 20%,
60% and 20%. Here the “*” symbol represents the remaining space of the web browser
i.e., 60%
Note: While using frameset tag, the body tag must not be used in a web page.
Frame Tag:
The Frame tag is used for specifying the content of a particular frame. A frame
is an independent scrollable area of browser window. The general format of frame tag
is as follows:
Syntax:<frame src=” path of the web page”
name=” frame name”
marginwidth=”value”
marginheight=”value”
scrolling=” yes/no”
noresize>
In the above syntax,
the name attribute is used for specifying a particular name for the frame.
The src attribute is used for specifying the path of the web page that is to be displayed
in the frame.
The scrolling attribute is used for adding or removing the scrollbars in a frame. This
attribute contains values “yes” or “no”.
The “marginwidth” and “marginheight” attributes are used for specifying the left and
right margins or top and bottom margins of the frame.
By default, frames can be resized, to remove this effect we use “noresize”.
E.g. <frame src=” d:\college\a.html”
name=”one”
scrolling=” yes”
marginwidth=”5”
marginheight=”10”
noresize>
The following example creates three frames and puts three webpages: index.html,
courses.html and marks.html in those frames.
E.g.<frameset cols=” *, *, *”
border=”4”
bordercolor=” #co9ffu”>
<frame name=”one” src=” d:\college\index.html”>
<frame name=” two” src=” d:\college\courses.html”>
<frame name=” three” src=” d:\college\marks.html”>
</frameset>
Targeted Hyperlink:
Generally, when we can click a hyperlink, the web page that is linked by that
hyperlink will be opened in a separate window or same window. To display the linked
web page in a particular frame, we can use targeted hyperlinks.
A targeted hyperlink is a hyperlink, which contains a particular frame as a target
i.e. when we click the targeted hyperlink, the web page that is linked by the targeted
hyperlink will be opened in the specified target frame. In HTML, we can create targeted
hyperlinks by using the anchor tag with “target” attribute. The syntax of the targeted
hyperlink is as follows:
<a href=” path of the webpage” target=” frame name”>
----------------------------------
----------------------------------
</a>
In the above syntax, the “href” attribute is used to specify the address of the
webpage. The target attribute is used to specify the frame name as a target for the
hyperlink.
E.g. <a href=” d:\college\hello.html” target=”one”>
targeted hyperlink
</a>
Nesting of Frame: A frame in turn can be divided into frames i.e. we can create frames
inside another frame. This is called nesting of frames. We can create nested frame by
using frameset tag inside another frameset tag.
E.g. <frameset rows=”50%, *”>
<frame>
<frameset cols=”50%, *”>
<frame>
<frame>
</frameset>
</frameset>
---------------------
HTML Forms:
Html form is a collection of several fields such as text boxes, radio buttons, check
boxes, passwords, action buttons etc. Html form is a mechanism used to create interactive
(Dynamic) Webpages. Forms are generally used for collecting data.
In each web page, we can create single or multiple forms by using form tag. The
following are various tags, which are used to design a form:
1) Form Tag
2) Input Tag
3) Select Tag
4) Textarea Tag
1) Form Tag: The form tag is used to create a form. The syntax of the form tag is as follows:
<form name=” form name” action=”URL” method=” post/get”>
Form Elements
</form>
In the above syntax, the NAME attribute is used to assign a name to the form. The
ACTION attribute specifies the name and location of a CGI script that is used to process
the form data. The METHOD attribute is used for specifying how the form data should be
transferred from the browser to the web server.
Data can be sent in one of two ways: post and get. When get is used, all input
values are included as part of the URL and sent to the web server. The get method is a
default method for transferring a form.
When thepost is used, the data is encoded within the body of the message and send to the
web server after communication has been established. Post can be used to send large
amounts of data and is more secure than get.
2) Input Tag: The input tag is used for designing the html form elements. By using the input
tag, we can create the following types of form elements:
a) Text box
b) Radio buttons
c) Check box
d) Button
e) Action Buttons: Submit/Reset
f) Password field
g) Image
The general syntax of input tag:
<input
type=”text/password/checkbox/radio/submit/reset/button/image
”
name=” string”
value=” string”
size=”value”
maxlength=”value”
src=”url”
align=” left/right/top/bottom/middle”
checked>
HTML Input Types

Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
Input Type Text
<input type="text"> defines a single-line text input field:
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Username:
Password:
The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
First name:
John
Last name:
Doe
Submit
If you omit the submit button's value attribute, the button will get a default text:
Example
<input type="submit">
</form>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their
default values:
Example
<input type="reset">
</form>
First name:
John
Last name:
Doe
Submit Reset
If you change the input values and then click the "Reset" button, the form-data will be
reset to the default values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
HTML
CSS
JavaScript
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
I have a bike
I have a car
I have a boat
Input Type image
The <input type="image"> defines an image as a submit

button.
The path to the image is specified in the src attribute.
Example
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time
zone.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match
email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Input Type Hidden
The <input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field let web developers include data that cannot be seen or modified by users
when a form is submitted.
A hidden field often stores what database record that needs to be updated when the
form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible (and
can be edited) using any browser's developer tools or "View Source" functionality. Do not
use hidden inputs as a form of security!
Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
</form>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from
1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from
0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" v
alue="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is
not important (like a slider control). Default range is 0 to 100. However, you can set
restrictions on what numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular
text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url
input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Type: The type attribute defines the type of the form element that can be placed on a
form. Each value of the type produces different input element. They are as follows:
• Text: The text value creates a textbox which is used to enter the plain text such as
name, age etc.
• Password: Password works exactly like text box but the data entered is not readable
because each character is displayed as “*” (asterisk). The password is not encoded
and is sent to the server as plain text, hence it does not provide good security.
• Checkbox: This value creates a checkbox which allows the user to select more than
one option from a group of options.
• Radio: This value creates a radio button that is used for selecting a single option
from a group of options. These are always grouped elements with same name but
different values.
• Submit: This value creates a submit button that is used for sending the data entered
in the form to the web server.
• Reset: This value creates a reset button that clears the data entered in the form i.e.
when we click the reset button, all the form elements will be bought to default state.
• Image: This value is used to place a picture on the form instead of a button.
Name: The name attribute is used to give a name for a particular form element or group.
Value: The value attribute is used to define a default value for the form elements.
Size: The size attribute is used to define the displaying size of form elements like textbox
and password fields.
Maxlength: This attribute defines the maximum number of characters that can be
entered in a textbox or password filed.
Checked: This value can be used to select a default option from checkboxes and radio
buttons.
Src: This is used to define the path of image file.
Align: This used to align the image to the top, bottom, right, left, middle.
3) Select Tag: A select tag is used for creating a list box that contains a list of options. We can
select a single option or multiple options from the list box (by using MULTIPLE). The option
tag has SELECTED attribute that allows default selection of the option.
Syntax: <select name=” list box name” size=”value” multiple>
<option value=” list option value”> Option1
..........
..........
<option selected>OptionN
</select>
E.g. <select name=” games” size=”3” multiple>
<option>cricket
<option>football
<option>tennis
<option selected>volleyball
</select>
4) Textarea Tag: The textarea tag is used for create large text boxes that allow to enter text in
multiple lines. The rows and cols attributes are used for specifying the number of displaying
rows and columns in the textarea.
Syntax: <textarea rows=”value” cols=”value” maxlength=”value>
Default Text
</textarea>
E.g.<textarea rows=”5” cols=”3” maxlength=”100”>
....... ..
</textarea>
UNIT-V
Cascading Style Sheets
Introduction:
Web pages which are available over internet can be accessed by the user through many
devices like computers, mobile phones or televisions which can display text, images, and
table’s etc. Because of this reason, web pages should be designed in such a way that they can
be accessed and viewed by any interactive device. Html with its tags has no facilities to design
such kind of web pages so such web pages can be designed by using style sheets along with
html tags.
A style sheet is simply a set of formatting instructions that can be applied
to desired text or content on the web page. HTML is used to structure content whereas CSS
is used for formatting structured content. Styles can be cascaded i.e., default formats or
properties can be over ridden by using styles.
Note: Some old browsers may not support all the styles. This is the reason why designers
(programmers) should be careful while designing web pages by using styles.
Using Styles:
CSS is a style language that defines layout of HTML documents. There are three ways to
apply styles to an html document:
1) As an Attribute
(In-Line Style Sheets)
2) As a Tag
3) As an External File (External Style Sheets)
1) As an Attribute:
Inline style sheets can be applied using style attribute that can be applied for a specific
html tag like <h1>, <p> and <hr> etc. For example, to define a desired style for the heading
tag <h1>, we can use the following code:
<h1 style =”background-color: blue;
color: white;
text-align: center”>
-------------------------------
</h1>
In the above example, the default format of <h1> is over reddening by style attribute
and these properties will be applied only to the content of heading tag <h1>.
2) As a Tag:
Inline style sheets can also be applied using <style> tag within the HEAD section that
can be applied to the whole document. For example, to define a desired style for the paragraph
tag <p>, we can use the following code:
<head>
<style>
p { background-color: blue;
color: green;
letter-spacing: 10
}
</style>
</head>
In the above example, properties which were defined will be applied to the whole
document i.e., to the content in every paragraph tag of that particular document.
3) As an External File:
An external style sheet is a text file with an extension .CSS. All the properties and
values of styles are placed in these external style sheets. Then they can be linked with multiple
documents by using the <link> tag. For example, to define a desired style for the heading tag
<h1> in multiple documents like page1.html, page2.html and page3.html, we can use the
following steps:
Step-1: Declaration of properties or creation of CSS file:
h1 {background-color: blue;
color: green;
border-size: 5}
Save the above code with a file name and .css extension.
Ex: mystyles.css
Step-2: Link mystyles.css to page1.html, page2.html and page3.html by using
<link> tag. The syntax of link tag is as follows:
<link rel=”stylesheets”
type=”text/css”
href=”url or path of css file“>
Ex: <link rel =”style sheet “
type=”text/css”
href=”mystyles.css”>
Defining Own Styles:
Styles are defined by simple rules. We can declare single or multiple sets of styles which
can be linked to a particular content in different situations. When we define more number of
styles, there will be a chance that they may cascade (override) with each other.
Rules of Styles:
A style has two parts: SELECTOR and a SET OF DECLARATIONS enclosed
within flower brackets “{ }”. The selector is used to create a link between rule and tag.
Declaration has two parts known as PROPERTY and VALUE which are separated with a
colon (:) and each property colon value pair must be separated with a semicolon (;). Selector
can be placed into classes, so that content of a tag can be formatted with different styles.
Declarations using selector uses the following format:
selector {property1: value1;
Property2: value2;
------------------;
property n: value n;
}
Ex: h1 {background-color: blue;
color: white; letter-spacing: 10
}
Classes:
Generally by using selectors we can assign common properties to the content of a
particular tag, But to use a set of declarations in different tags or multiple sets of declarations
in a single tag at different places we must use classes. These classes can be defined in two
ways:
a) Using selector and class name to define properties, it uses the following format:
selector.classname {property1: value1;
property2: value2;
“
“
“
property n: value n
}
<selector class =” classname”>
-------------------------------
</selector>
Ex: h1.mystyle {background-color: blue;
color: green;
border-color: blue
}
<h1 class =”mystyle” > OH GOD! </h1>
b) Using Only Class Names to Define Properties:

These classes are called anonymous classes, which can be used by different
tags. Anonymous class uses the following format:
. s1 { property1: value1;
property2: value2;
“
“
“
property n: value n}
Ex: <html >

<head><title> using anonymous classes </title></head>
<style > .s1 {background-color: blue;
color: green;
border-style: dashed;
border-color: green
}
.s2 {background-color: blue;
color: green;
letter-spacing: 10
}
</style>
</head>
<body><h1 class =”s1”>

SYNTACTIC TAGS
</h1>
<p class =”s1” >
syntactic tags are ---------------------------------------
-----------------------------------------------------------
-------------------------
</p>
<h2 class =”s2” >
SEMANTIC TAGS
</h2>
<p class =”s2” >
semantic tags are -----------------------------------------
--------------------------------------------------------------
----------
</p>
</body>
</html>
In the above example, the style s1 is used by more than one type of tag (h1,p) ,
as well as paragraph tag used more than one style (s1 & s2 ) at different places.
Properties and Values in Styles:
A number of properties are available to format content on the web page using styles.
We can change the web page appearance by using different properties related to fonts, colors,
text, boxes etc., Styles with appropriate and limited number of properties make the web page
more attractive. The following are some of the mostly used properties:
• Properties related to fonts
• Properties related to backgrounds and colors
• Properties related to text
• Properties related to boxes
Properties related to Fonts:
Font-Family: This property is used to assign a desired font name to the text. The values to the
font-family property are font-family name and generic family name (optional). Most of the
browsers support font family names and all the browsers support generic family names. We
can include more than one font name, among this list. The font name that can be recognized by
browser will be considered. The format of font-family is:
Syntax: font-family:<family name>[<generic family name>]\
Ex: font-family:”Verdana”, “Times New Roman”, “Arial”;
Font-Style: This property defines the displaying style of text i.e., Normal, Italic, Oblique
Syntax: font-style:normal|italic|oblique
Ex: font-style:italic;
Font-Weight: This property defines thickness of the text i.e., normal, bold, lighter etc. We can
also give absolute weight in terms of pixels.
Syntax: font-weight:normal|lighter|bold|bolder|100|200
Ex-1: font-weight:bolder;
Ex-2: font-weight: 200;
Font-Size: This property is used to define the size of the text. This size can be in terms of
relative or absolute.
Syntax:font-size:small|medium|large|smaller|larger|value in terms of pixels
In the above syntax relative size includes smaller, larger and absolute size includes small,
medium, large etc.
Ex-1: font-size:large
Ex-2: font-size:100;
Properties related to Backgrounds & Colors:
Colors: By using this property we can assign a desired color to a particular text or block of text.
The value to this property should be color name or color code.
Syntax: color:colorname|color code
Ex-1: color:red;
Ex-2: color:#ff0000;
Background-Color: By using this property we can assign a color as background to desired
content or area. The value to this property should be color name or color code or transparent.
Syntax: background-color:colorname|colorcode|transparent
Ex: background-color:blue;
Background-Image: Instead of color, we can set an image as a background to desired content
or area using background image property.
Syntax: background-image:URL (path of image)
Ex: Background-image:URL(microsoft.jpg)
Properties related to Text:

Text-Decoration: to decorate a particular text with underline, overline, line through (striking
effect) and blink effect, we can use text-decoration property.
Syntax: text-decoration:none|underline|overline|line-through|blink
In the above syntax, internet explorer will not support blink value.
Ex: text-decoration:overline;
Text-Transform: This property converts and displays the text into upper case, lower case and
in capitalize format. Capitalized format means initial character of a word will be displayed in
upper case.
Syntax: text-transform:none|capitalize|uppercase|lowercase
Ex: text-transform:uppercase;
Text-Align: This property is used especially for justifying paragraph on the web page. In
general text-align property aligns the text on the web page.
Syntax: text-align:left|right|center|justify
Ex: text-align:justify;
Text-Indent: This property defines the indentation of text from left margin to the web page.
Generally, text-indent property can be used to leave some space from left to the text of first
line in a paragraph.
Syntax: text-indent:length|percentage
Ex: text-indent:20;
Properties related to Boxes and Borders:
By drawing or placing boxes or borders, we can encase desired content or text. The
following are properties to draw boxes or to assign borders.
Border-Style: This property is used to assign desired type of border. The value to this property
can be none or dotted or dashed etc.
Syntax: border-style:none|dotted|dashed|solid|double|groove|ridge
Ex: border-style:dotted;
Border-Color: This property is used to set a desired color to four sides of a box.
Syntax: border-color:colorname|color code
Ex: border-color:orange;
Border-Width: This property defines thickness of border. The values to this attribute can be
thin, thick etc.
Syntax: border-width:thin|thick|medium|value in pixels
Ex: border-width:thin;
Margin: Margin property is used to define left, right etc. for the box. It can accept 1, 2 or 4
values. If one value is specified it will be treated as left, right, top & bottom margin. If two
values are specified, then first value will be considered for top and bottom margins and second
value for left & right margins. If 4 values are given they will be considered as top, margin,
right, bottom and left margin respectively.
Syntax: margin:length|percentage|auto
Ex: margin:15,15
Padding: This property determines the amount of space between the content and surrounding
borders of a box.
Syntax: padding:length|percentage
Ex: padding:10
Width and Height: These properties define displaying size of the box. The value to these
properties should be either in terms of pixels or percentage or auto.
Syntax: width:length|percentage|auto
height:length|percentage|auto
Ex: width:300;
height:400;
Note: By default all the above properties except WIDTH and HEIGHT of boxes can be
assigned for four sides. Based on the number of values given to each property, formatting can
be done to each side or a pair of sides also.
Ex: 1 value for four sides
2 values for top, bottom and left
4 values for top, right, bottom and left sides
Formatting Blocks of Information:

Divisions:
An element in an html document can be either block or an inline element i.e., a block
means some lines of text (paragraph) and in-line element means a word, sentence or an image
etc., each of these can be formatted separately, if they are separated logically by using <div>
Syntax: <div id=”name of logical block”
class=”class name”
style=”set of declarations”>
-----------------
-----------------
</div>
In the above syntax “id” attribute defines the identification of block through which a
block can be accessed dynamically.
The class attribute defines class name of declarations that has to be assigned to the
block. Style attribute contains a set of declarations, which defines the appearance of block.
Ex: <div id=”b1”
class=”s1”>
<p> -----------------
----------------- </p>
<h1> ----------------- </h1>
<p> ----------------- </p>
</div>
Spans:
If we want to format an inline content instead of a block, the span tag can be used. By
using span tag, we can define desired formatting to characters, words, sentences, images etc.
The syntax of span tag is as follows:
Syntax: <span id=”name of inline content”
class=”class name”
style=”set of declarations”>
-----------------
-----------------
</span>
In the above syntax, “id” attribute defines the identification of inline content. The class
attribute defines the class name of declarations that has to be assigned to inline content. Style
attribute is used to define a set of declarations.
Layers:
Defining layers to a web page is an efficient way of representing information and space
usage. By default any web page will have a background and foreground, which can be treated
as layer1. If we want to place some objects or content above layer1, we need to define or place
second layer i.e. layer2 on layer1. Similarly we can create layer3 on layer2 and so on.
Layers can be defined by using layer tag but it is browser dependent (Netscape
navigator). Layers can also be defined independent of browser using division tag with z-index
property. The syntax of division tag for creating layers is as follows:
Syntax: <div style=”z-index:value for layer number;
position:absolute|relative;
left:value;
top:value;
width:value;
height:value;”
-----------------
-----------------
</div>
z-index: The lowest layer appearing on top of background has z-index of 1. By giving a values
range from 2 to 20 at z-index, we can create corresponding layers. For example, if we want to
create a layer on layer1, the value of z-index property should be 2.
Position: This property defines the position of layer on the screen. It can be absolute or relative
to the other content.
Left and Right Properties: These properties define the top left corners of the layer.
Width and Height: These properties define the size of layer in terms of width i.e,, amount of
spaces needed to display content.
Ex: <div style=”z-index:2;
position:absolute;
left:10;
top:10;
width:300;
height:200;”>
----------------
----------------
</div>

Web

Uploaded by

Document Information

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

Web

Uploaded by

Copyright:

Available Formats

Andhra Pradesh State Council of Higher Education

B.Sc. Computer Science/Information Technology (IT) Syllabus Under CBCS

III YEAR VI SEMESTER

1. To understand the web architecture and web services.

1. Chris Bates, Web Programming Building Internet Applications, Second Edition,

1. Prepare a web site for your college

1. What is Internet? Write about advantages of Internet

Answer any FIVE of the following Questions (5  10 =50 Marks)

11. Write about Tools of WWW

Instruction to Paper Setter:

B.Sc. Computer Science/Information Technology (IT) Syllabus Under CBCS

III YEAR VI SEMESTER

Web Technologies Lab

1. Create a simple HTML page which demonstrates all types of lists.

9. Create a student Bio-Data, using forms.

HISTORY OF INTERNET / MILE STONES OF INTERNET

5) In 1980’s, Companies used computers to construct their own internal networks.

1. Electronic Mail (E-Mail):

2. Download Facility: The Internet is a virtual trove of information. Any kind of

i. Text based chatting means exchange of typed-in messages between users.

Eg:. Flipkart.Com, Amazon.Com, OLX.Com, etc.

Eg; Google, Yahoo, MSN Search, etc.

Krishna Degree College 6

The Internet is a global network of computers. Each computer connected to the

IP Address: 1.2.3.4 IP Address: 5.6.7.8

Krishna Degree College 7

1. The message which is in digital form on sender’s computer (IP: 1.2.3.4)

Electronic Mail (E-Mail):

1. World Wide Web: WWW is a global information service for publishing

World Wide Web (WWW)

World Wide Web is a global information service for publishing information on

A company’s WWW homepage can be viewed as an interactive bulletin board to

WWW provides many tools or services. Some of them areas follows:

1. Electronic Mail (E-Mail):

Browsers can also be used to access information provided by web servers in

Components of Web Browser

Address Bar Title Bar Tabs Document Area

Types of Web Servers:

Personal Web Server (PWS): It is developed by Microsoft Corporation. It can be

Krishna Degree College 12

It provides individuals and other companies to access the Internet and

1. The first part of the address indicates what protocol to use

how where what

Krishna Degree College 1

Web page: A webpage is a document commonly written in HyperText Markup Language

The opening page of a website is usually called homepage which contains

MODEM(Modulator – Demodulator):A device that modulates and demodulates signals

Krishna Degree College 2

User ID, Password and E-Mail Address:

A good password should be:

Generic Top-Level Domain Names Country Top-Level Domain Names

EMAIL INNER WORKING

E-mail system comprises of the following three components:

Protocols used in email systems

Here is a list of common commands used to interact with POP server :

 USER – For User-ID

E-main working step by step

1. A user wants to send an email to several recipients, so he accesses an email

6. At recipient’s MTA, if MDA is configured, received email will be forwarded to

E-MAIL MESSAGE COMPONENTS

------------------------- Sachin -------------------------

Reply to incoming mail / to all:

Krishna Degree College 9

HTTP (Hypertext transfer protocol)