STUDY MATERIAL FOR BCA

INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

UNIT CONTENT PAGE Nr

I INTRODUCTION TO INTERNET 02

II INTRODUCTION TO HTML 19

III DESIGNING TABLES 24

IV INTRODUCTIN TO DHTML 33

V FRAMES 38

Page 1 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
UNIT - I
INTRODUCTION TO THE INTERNET

COMPUTER IN BUSINESS:
Computer-based business applications were called Business Data Processing
Systems(BDPS) and COBOLwas largely used to design them. But in COBOL, even a simple
program has very lengthy codes.
After, people felt the need for a more flexible and simple system that would maintain
data files and support easy programming. So DBMS was developed for managing data
files.Dbase was the first popular DBMS.
New technology called Graphical User Inter-face(GUI) was introduced for designing
programs. GUI divides a program into two parts.One part is for managing the data file and the
other to design pictures and icons to get input from the user.

NETWORKING:
A network is a number of computers connected to each other. A type of network where
all users connect to a central server, which is the acting agent for all communications. This
server would store both the communications and the user account information. Most
public instant messaging platforms use a centralized network.Alsocalled centralized server-
structure.

INTERNET:
Internet is the world’s largest network of computer networks.

HISTORY:
The first workable prototype of the Internet came in the late 1960s with the
creation of ARPANET, or the Advanced Research Projects Agency Network. Originally
funded by the U.S. Department of Defense. Arpanet adopted the Transmission
ControlProtocol (TCP)in1983 and separated out the military network (MILnet), assigning a
subset for public research. Launched formally as the National Science Foundation Network
(NSFNET) in 1985, engineers designed it to connect university computer science departments
across the USARPAnet adopted the Transmission Control Protocol (TCP)in1983 and separated
out the military network (MILnet), assigning a subset for public research.
The Internet is a global network of networks that enables computers of all kinds to
directly and transparently communicate and share services throughout the world.
In 1969 the precursor of Internet is born: ARPAnet.

Page 2 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
ARPA = Advanced Research Projects Agency sponsored by the American Department of
Defense (DOD).Designed to connect military research centers.Distributed computer system
able to survive a nuclear attack
Problem: ARPAnet could connect only networks of the same type.
In 1970, ARPA starts developing the Transmission Control Protocol / Internet Protocol
(TCP/IP), a technology for connecting networks of different types (produced by different
companies) Other networks appear, such as CSNET and BITNET.
The Internet = a network of networks.
People around the world share ideas, information, comments, and stories.
E-mail
E-mail (electronic mail) is the most popularservice.
You can send and receive mail (electronic text), faster and cheaper than surfacemail.
Example email addresses: [email protected]
Web browsing to find information.
Example: www.gpcet.ac.in
Features of the Internet Mailinglists:
You can subscribe to lists on various subjects to receive emails, you can post (send)
messages, you can unsubscribe. Some lists are moderated. Newsgroups are collections of
messages on varioussubjects
FTP (File Transfer Protocol). You can copy files from one computer to another over the
internet. Telnet or remote login. Permits your computer to log onto another computer and use
it as if you were there.
You need to provide your username and password, for security reasons.
Chatrooms: You can exchange messages with other people, anonymously (using a
nickname).

GOPHER
For many people, the World Wide Web is synonymous with the Internet. While the
HTTP protocol dominates the modern internet, many protocols obsolete, obscure and well
known make up the Internet.
One of the more stubborn protocols is Gopher. Introduced in 1991 (the same year as
HTTP), Gopher, like the web, is document-centric.

By about 1990, information on the internet was expanding rapidly enough that it
needed more organization and a better search capability. In 1991 researchers at the University
of Minnesota developed the Gopher protocol in an attempt to provide some of that
organization. Gopher provides a hierarchical text-based menu system to organize the contents
of a data repository.

Page 3 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Soon after, the search capability came in the form of a new search engine called
Veronica. It used a dynamically updated database of every file and every hierarchy on every
Gopher server on the internet.

Veronica was eventually joined by an alternative search tool named Jughead. Jughead
differed from Veronica in that it did not use a large and expanding database, but on the other
hand you had to specify which Gopher server you wanted to search.

Clearly there was a problem with scaling here, and that is part of what led to Gopher’s
eventual decline as the internet kept expanding. Other threats came from the sheer versatility
of HTML and HTTP, the rise of universal text-based searching, and the eventual decision by the
University of Minnesota to charge licensing fees for the use of their software. Gopher was
wildly popular for a few years, but by about 1996 it had fallen far behind the new browser-
based web.

WORLD WIDE WEB(WWW)

WWW is a collection of pages maintained on the internet using a technique called
hyper-text.

The World Wide Web allows computer users to locate and view multimedia-based
documents (i.e., documents with text, graphics, animations, audios or videos) on almost any
subject.
Even though the Internet was developed more than three decades ago, the introduction
of the World Wide Web is a relatively recent event. In 1990, Tim Berners-Lee of CERN (the
European

Laboratory for Particle Physics) developed the World Wide Web and several
communication protocols that form the backbone of the Web.

The Internet and the World Wide Web surely will be listed among the most important
and profound creations of humankind.

Inthe past, most computer applications executed on “stand-alone” computers (i.e.,

computers that were not connected to one another)

HYPER-TEXT
Hypertext is text that links to other information. By clicking on a link in a hypertext
document, a user can quickly jump to different content.

Therefore, in a hypertext system it is possible to:

 link with a term that represents aspects of the content of a document
 connect two related documents
 relate a term to a fragment containing its definition and use
 link two related terms

INTRODUCTION TO WEB BROWSER AND SEARCH ENGINES

WEB BROWSER:-

 It is used to retrieve and transverse information across the World Wide Web.

Page 4 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
 It basically allows user to access and retrieve and view documents and other resources
on the internet. EX:- GoogleCrome, Opera Mini etc
 All major web browsers allows user to open multiple pages at the same time in one
window or in different windows.
 They also include pop up blockers to prevent unwanted windows from popping up
without users consent.
 Most browser functions can be extended by installing different plugins. Some of the
common user interface in a web browser is the refresh button, forward and back
button, refresh button as well as the status and address bar.

SEARCH ENGINES:
They are programs used to search documents with specified keywords and returns list of
documents with the keywords.
Some of the search engine are Google, Bing and yahoo that enables user to search
documents on the World Wide Web.

WORKING OF A SEARCH ENGINE:-

 A spider is sent out by the search engine to fetch as many documents as
possible.
 Then the indexer reads these documents and creates an index based on the
words found.
 They also use an algorithm to return only the meaningful result for each query.

Internet Technologies:
Modem
Modem is abbreviation for Modulator – Demodulator and is used for data transfer
from one computer network to another computer network through telephone lines. The
computer network works in digital mode, while analog technology is used for carrying massages
across phone lines.

Page 5 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Internet Addressing
A way to locate people, computers, and Internet resources. It can be
 IP (Internet Protocol) addresses and domain names
 Electronic mail addresses
 URLs

Internet Service Providers (ISP)

Internet Service Provider (ISP) is a company offering access to internet. They offer various
services:
 Internet Access
 Domain name registration
 Dial-up access
 Leased line access

ISP Types
ISPs can broadly be classified into six categories as shown in the following diagram:

ACCESS PROVIDERS
They provide access to internet through telephone lines, cable wi-fi or fiber optics.

MAILBOX PROVIDER
Such providers offer mailbox hosting services.

HOSTING ISPS
Hosting ISPs offers e-mail, and other web hosting services such as virtual machines,
clouds etc.

Page 6 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
VIRTUAL ISPS
Such ISPs offer internet access via other ISP services.

FREE ISPS
Free ISPs do not charge for internet services.
Connection Types
There exist several ways to connect to the internet. Following are these connection types
available:
1. Dial-up Connection
2. ISDN
3. DSL
4. Cable TV Internet connections
5. Satellite Internet connections
6. Wireless Internet Connections
7. Dial-up Connection

Dial-up connection uses telephone line to connect PC to the internet. It requires a modem to
setup dial-up connection. This modem works as an interface between PC and the telephone
line.
There is also a communication program that instructs the modem to make a call to
specific number provided by an ISP.

Dial-up connection uses either of the following protocols:

1. Serial Line Internet Protocol (SLIP)
2. Point to Point Protocol (PPP)
The following diagram shows the accessing internet using modem:

ISDN
ISDN is acronym of Integrated Services Digital Network. It establishes the connection
using the phone lines which carry digital signals instead of analog signals.
There are two techniques to deliver ISDN services:
1. Basic Rate Interface (BRI)
2. Primary Rate Interface (PRI)

Key points:
 The BRI ISDN consists of three distinct channels on a single ISDN line: t1o 64kbps B
(Bearer) channel and one 16kbps D (Delta or Data) channels.
 The PRI ISDN consists of 23 B channels and one D channels with both have operating
capacity of 64kbps individually making a total transmission rate of 1.54Mbps.

Page 7 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
The following diagram shows accessing internet using ISDN connection:

DSL
DSL is acronym of Digital Subscriber Line. It is a form of broadband connection as it
provides connection over ordinary telephone lines.
Following are the several versions of DSL technique available today:
1. Asymmetric DSL (ADSL)
2. Symmetric DSL (SDSL)
3. High bit-rate DSL (HDSL)
4. Rate adaptive DSL (RDSL)
5. Very high bit-rate DSL (VDSL)
6. ISDN DSL (IDSL)

All of the above mentioned technologies differ in their upload and download speed, bit
transfer rate and level of service.

Page 8 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
The following diagram shows that how we can connect to internet using DSL
technology:

Cable TV Internet Connection

Cable TV Internet connection is provided through Cable TV lines. It uses coaxial cable
which is capable of transferring data at much higher speed than common telephone line.

Key Points:
 A cable modem is used to access this service, provided by the cable operator.
 The Cable modem comprises of two connections: one for internet service and
other for Cable TV signals.
 Since Cable TV internet connections share a set amount of bandwidth with a
group of customers, therefore, data transfer rate also depends on number of
customers using the internet at the same time.

The following diagram shows that how internet is accessed using Cable TV connection:

Page 9 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Satellite Internet Connection
Satellite Internet connection offers high speed connection to the internet. There are two
types of satellite internet connection: one way connection or two way connection.
In one way connection, we can only download data but if we want to upload, we need a
dialup access through ISP over telephone line.
In two way connection, we can download and upload the data by the satellite. It does
not require any dialup connection.

The following diagram shows how internet is accessed using satellite internet connection:

Wireless Internet Connection

Wireless Internet Connection makes use of radio frequency bands to connect to the
internet and offers a very high speed. The wireless internet connection can be obtained by
either WiFi or Bluetooth.

Key Points:
 Wi Fi wireless technology is based on IEEE 802.11 standards which allow the electronic
device to connect to the internet.
 Bluetooth wireless technology makes use of short-wavelength radio waves and helps to
create personal area network (PAN).

Internet Browser
Internet Browser(web Browser) is an application software that allows us to view and
explore information on the web. User can request for any web page by just entering a URL into
address bar.
Web browser can show text, audio, video, animation and more. It is the responsibility of
a web browser to interpret text and commands contained in the web page.
Earlier the web browsers were text-based while now a days graphical-based or voice-
based web browsers are also available. Following are the most common web browser available
today:

Page 10 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Browser Vendor

Internet Explorer Microsoft

Google Chrome Google

Mozilla Firefox Mozilla

Netscape Navigator Netscape Communications Corp.

Opera Opera Software

Safari Apple

Sea Monkey Mozilla Foundation

K-meleon K-meleon

Architecture
There are a lot of web browser available in the market. All of them interpret and display
information on the screen however their capabilities and structure varies depending upon
implementation. But the most basic component that all web browser must exhibit are listed
below:
 Controller/Dispatcher
 Interpreter
 Client Programs

Controller
It works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it
and make other services to work on the basis of input it receives.

Interpreter
Itreceives the information from the controller and executes the instruction line by line.
Some interpreterare mandatory while some are optional For example, HTML interpreter
program is mandatory and java interpreter is optional.

Client Program
It describes the specific protocol that will be used to access a particular service. Following
are the client programs tat are commonly used:
 HTTP
 SMTP
 FTP
 NNTP
 POP

Page 11 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Starting Internet Explorer

Internet explorer is a web browser developed by Microsoft. It is installed by default with
the windows operating system however it can be downloaded and be upgraded.

To start internet explorer, follow the following steps:

 Go to Start button and click Internet Explorer.

The Internet Explorer window will appear as shown in the following diagram:

Page 12 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Accessing Web Page

Accessing web page is very simple. Just enter the URL in the address bar as shown the
following
Diagram:

Page 13 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Navigation
A web page may contain hyperlinks. When we click on these links other web page is
opened. These hyperlinks can be in form of text or image. When we take the mouse over an
hyperlink, pointer change its shape to hand.

Key Points
 In case, you have accessed many web pages and willing to see the previous webpage
then just click back button.
 You can open a new web page in the same tab, or different tab or in a new window.

Saving Webpage
You can save web page to use in future. In order to save a webpage, follow the steps
given below:
 Click File > Save As. Save Webpage dialog box appears.
 Choose the location where you want to save your webpage from save in: list box. Then
choose the folder where you want to save the webpage.
 Specify the file name in the File name box.
 Select the type from Save as type list box.
 Webpage, complete
 Web Archive
 Webpage HTML only
 Text File
 From the encoding list box, choose the character set which will be used with your
webpage. By default, Western European is selected.
 Click save button and the webpage is saved.

Saving Web Elements

Web elements are the pictures, links etc. In order to save these elements follow the
steps given below:

Page 14 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Right click on the webpage element you want to save. Menu options will appear. These
options may vary depending on the element you want to save.

Save Picture As
This option let you save the picture at specific location with its name. When you click
this option, a dialog box is opened where you can specify its name and location.

Favorites
The Favorites option helps to save addresses of the webpages you visited often. Hence
you need not to remember long and complex address of websites you visit often.
In order to open any webpage, you just need to double click on the webpage that you
have marked from bookmarks list.

ADDING A WEB PAGE TO YOUR FAVORITES

In ordered to add website to your favorite list, follow the steps given below:
 Open webpage that you want to add to your favorite.
 Click on favorite menu and then click on Add to Favorites option. AddFavorites dialog
box appears.

You can also click Favorites button available in the toolbar. Favorites panel will open in
the left corner of the internet explorer window. Click add button, AddFavorites dialog box will
appear.

Page 15 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

 In AddFavorites dialog box, the Name: text box will contains the name of the web page
that you want to add to favorites.
 Click the Create in button, Favorites folder will appear. Move to the folder where you
want to store the favorites by clicking on the folder name.
 Now click OK button to save the favorites.

OPENING FAVORITES
In order to open favorites, follow the steps given below:
 In the Favorite Panel, take the mouse over the site that you want to open. Now click on
the address to open that site.

Favorite can also be opened from the Favorites menu by selecting the appropriate one.

Page 16 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

ORGANIZING FAVORITES
Favorites can be organized by categorizing web pages, creating folder for each category
and then storing web pages into them. In order to organize favorites, follow the steps given
below:
 Click Favorites menu > Organize Favorites. Organize favorites dialog box will appears.
 In order to organize the webpages, drag the individual webpage to the respective folder.
Similarly to delete a favorite, Click on deletebutton.

Page 17 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Page 18 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
UNIT - II
INTRODUCTION TO HTML

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags

HISTORY OF HTML
HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially,
which was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a
major version of HTML.

HTML GENERATIONS
HTML 1.0 was released in 1993 with the intention of sharing information which can be
readable and accessible via web browsers. But not much of the developers were involved in
creating websites. So the language was also not growing.
Then comes the HTML 2.0, published in 1995; which contains all the features of HTML
1.0 along with that few additional features; which remained as the standard markup language
for designing and creating websites until January 1997 and refined various core features of
HTML.
Then comes the HTML 3.0, where Dave Raggett who introduced a fresh paper or draft
on HTML. It included improved new features of HTML, giving more powerful characteristics for
webmasters in designing web pages. But these powerful features of new HTML slowed down
the browser in applying further improvements.
Then comes the HTML 4.01 which is widely used and was a successful version of HTML
before HTML 5.0, which is currently released and used worldwide. HTML 5 can be said for as an
extended version of HTML 4.01 which was published in the year 2012.

HTML DOCUMENTS
All the web pages will have at least the base elements: html, head, title and body.

<html> element
An HTML document will always begin with a <html> tag and will end with </html>.
<head> element
The <head> element is the one that comes next.
<title> element
So that everything goes well you must put the title tag inside the head tag. what you
write between those two title tags ( <title> and </title>) will be seen as browser's name, usually
in the upper right side. Next we have the source code:

<html>
<head>
<title> My first web page!</title>
</head>
</html>

Page 19 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text,
hyperlinks, images, tables, lists, etc.

The basic elements of an HTML page are:

 A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
 A paragraph, denoted using the <p> tag.
 A horizontal ruler, denoted using the <hr> tag.
 A link, denoted using the <a> (anchor) tag.
 A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element)
tags.
 An image, denoted using the <img> tag
 A divider, denoted using the <div> tag
 A text span, denoted using the <span> tag

Anchor Tag or Hyperlink

Anchor Tag or HTML Anchor Tag <a> defines a Hyperlink <a href=""> in html document.
A hyperlink links a webpage with other webpages and external pages. A hyperlink can
be Internal Link, External Link, Internal Link, Mail Link or telephone link .

In HTML5, an anchor tag can contain both block level and inline level elements. That
means, we can write text, image or a div inside anchor tag. Also anchor tag with href is known
as hyperlink.

Anchor Tag is a tag used to build hyperlinks.

<a>Anchor Tag</a>

Hyperlink means an Anchor Tag with href attribute. Hyperlink is used to link webpages.
<a href="">Hyperlink Tag</a>

HTML Internal Link

 HTML Internal Link is linked within the same web page. This link can be absolute path or
relative path.
 HTML internal link name is followed by head sign(#). HTML <a> tag is use for anchor
point name, which is referred to a internal link into a same page.
 When click on this anchor link, It's referred link automatically scrolls and display on
browser.
 Example :< a name = “ Lession .1 “Link can be referred as <a href = “ # Lession ,1 “>
Lession.1</a> automatically.
 Example
<html>
<head>
</head>
<body>
<a href="#Lession.1">Lession.1</a><br />
<a href="#Lession.2">Lession.2</a><br />
<a href="#Lession.3">Lession.3</a><br />

Page 20 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<a href="#Lession.4">Lession.4</a><br />
<br />

<a name="Lession.1">Introduction of Lession.1</a>

<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.2">Introduction of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.3">Introduction of Lession.3</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a name="Lession.4">Introduction of Lession.4</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>

HEAD AND BODY SECTION

An HTML file is divided into two basic sections: the head and the body, each demarcated
by their respective tags. Thus, the essential structure of an HTML document looks like this:

<!DOCTYPE html>

<htmllang="...">

<head>

...

</head>

<body>

...

</body>

</html>

The HEAD Element

Page 21 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
All data in the head section of an HTML document is considered "meta-data", meaning
"data about data". The information in this section is not normally displayed directly. Instead
elements such as style affect the appearance of other elements in the document. Some items in
the head section may be used by programs such as search engines to learn more about the
page for reference purposes.
The head element should always contain a title element which sets the title commonly
displayed by the web browser in the title bar of the window. Here is an example of the use of
the title element:

<head>

<title>This is the Title</title>

</head>

There can only be one title in the header section.

There may be any number of the following elements inside the head element:

Style
Style is used to embed style rules in a document. In most cases, a consistent look across
multiple web pages is desired, so style is specified in a separate stylesheet file, linked using
the link element. Thus, style is used in the head when the style applies to this page only.

Link
Link is used to link the page to various external files, such as a style sheet or the location
of the RSS feed for the page. The type of link is set using the real attribute. The typeattribute
specifies the MIME type of the document found at the location given by the href attribute. This
allows the browser to ignore links to MIME types it does not support.

Examples:

<linkrel="stylesheet"type="text/css"href="style.css">

<linkrel="alternate"type="application/rss+xml"href="rss.aspx"title="RSS 2.0">

Script
Script is used to link to an external Javascript file or to embed Javascript in the page. Linking to
an external file is the preferred technique in real web pages though many examples embed the script for
simplicity.

Meta
Meta is used to set additional meta-data properties for the HTML document, such as related
keywords, etc. Examples:

<metacharset="utf-8">
<metaname="keywords"content="web, HTML, markup, hypertext">

The Title Element:

Page 22 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
The title element contains your document title and identifies its contents in a global
context. The title is typically displayed in the title bar at the top of the browser's window.It is
also displayed on the bookmark list of the browser.Title is also used to identify your page for
search engines.

Example:
<html>
<head><title>Some Amazing Web Page</title>
</head>
</html>
The Body Element:
Unlike the head element, any plain text placed between the <body> tags will be
displayed on the web page by the browser.

<body text='black' link='red' alink='pink' vlink='blue'

bgcolor='#DDDDDD' background='wallpaper.gif'>
...

</body>

Page 23 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
UNIT - III
DESIGNING TABLES
DESIGNING BODY SECTION:
The BODY tag encapsulates your document content. Prior to HTML 3.2, there were no
attributes for the BODY element. HTML 3.2 includes attributes first developed by Netscape for
its Navigator browser. These attributes allow you to control the overall appearance of the
document by specifying a background color or background image (BGCOLOR, BACKGROUND),
and the color of text, links, visited and activated links (TEXT, LINK, VLINK, ALINK). You can
specify the color values as RGB value pairs in hexadecimal notation (e.g.. white would be
"#FFFFFF") or use one of the sixteen color names HTML 3.2-conformant browsers understand:

aqua gray navy silver

black green olive teal

blue lime purple white

fuschia maroon red yellow

Here are some BODY attribute usage examples:

<BODY BACKGROUND="mars.gif" TEXT="#ffffff">
<BODY BGCOLOR="white" TEXT="black" LINK="red

Headings
HTML provides six levels of heading tags (<H1>-<H6>). All levels are rendered larger
than surrounding text, with the lowest level rendered at the largest size. Heading tags also
insert vertical space between the text marked and the surrounding text.
You should avoid skipping levels to achieve a certain visual effect as there is no
guarantee how the headings will be rendered on any given system. They are intended to
indicate document structure.
Here is a markup example along with tagged examples for all six levels:
<H1>Level 1</H1>
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
Font Tags:
These tags control the appearance the text they contain. They should be used within
document structures such as paragraphs or tables.
Type Styles
 <B> will display text in BOLD
 <I> will display text in Italics
 <STRIKE> will display text with a line drawn through it through

Page 24 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
 <SUB> will display text as a subscript.
 <SUP> will display text as a superscript.
 <TT> will display text in a fixed typewriter-like font
 <U> will display underlined text underlined

Font Size
 <BIG> will display text in a larger font.
 <FONT> lets you specify how much larger or smaller the contained text should be than
the surrounding text. It requires a SIZE attribute:
<FONT SIZE=+3>Three times larger<FONT>
Thee times larger
 <SMALL> will display text in a smaller font.

Block Elements
Paragraph <p>...</p>
Function:
When the browser reads a <p> tag, it breaks to a new line, and skips some white spaces.
For example,
<p>This is a paragraph of texts.</p>
Older HTML documents often omit the closing </p>, which is a bad practice, not recommended,
and disallowed in XML/XHTML.

To create an empty paragraph, you need to use <p>&nbsp;</p> which encloses a non-
breaking space. This is because browsers typically ignore <p></p>.

Line Break <br> (or <br />)

Function:
Instruct the browser to break to a new line, without skipping white spaces as in <p>.
Note that the line breaks in the HTML codes are treated as white spaces and do not translate to
new lines in the display. Hence, you have to insert the <br> manually. For example,
<p>This
paragraph<br>with a
line-break
in between.</p>
This paragraph with a line-break in between.

Heading Level 1 to 6 <h1>...</h1> to <h6>...</h6>

Function:
Establish six levels of document headings. <h1> is the highest (with the largest font size)
and <h6> is the lower. Headings are usually displayed in bold, have extra white spaces above
and below.
For example,

<h1>This is Heading Level 1</h1>

<h2>This is Heading Level 2</h2>
<h3>This is Heading Level 3</h3>

Page 25 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<h4>This is Heading Level 4</h4>

<h5>This is Heading Level 5</h5>
<h6>This is Heading Level 6</h6>
<p>This is a paragraph</p>

Horizontal Rule <hr> (or <hr />)

Function:
Draw a horizontal line (or rule). By default, the rule is full width (100%) across the
screen, 1 point in size, and has a shading effect for a 3D appearance.
For example,
<h1>Heading</h1>
<hr>
<p>Discussion begins here...</p>

Pre-Formatted Text <pre>...</pre>

Function:
Texts enclosed between <pre>...</pre> container tags are treated as pre-formatted, i.e.,
white space, tabs, new-line will be preserved and not ignored. The text is usually displayed in a
fixed-width (or monospace) font. <pre>...</pre> is mainly used to display program codes. For
example, my favorite Java's "Hello-world":

<pre>public class Hello {

public static void main(String[] args) {
System.out.println("Hello");
}
}</pre>
public class Hello {
public static void main(String[] args) {
System.out.println("Hello");
}
}

Without the <pre> tag, the entire program will be shown in one single line.
Quote <blockquote>...</blockquote>
Function:
Mark out a block of quote. Browsers typically indent the entire block to the right

Ordered And Unordered Lists

HTML lists are used to present list of information in well-formed and semantic way.
There are three different types of list in HTML and each one has a specific purpose and
meaning:
 Unordered list — used to group a set of related items, in no particular order.
 Ordered list — used to group a set of related items, in a specific order.
 Description list — used to display a list of terms and their descriptions.

Note: Inside a list item you can put text, line breaks, images, links, etc. You can also place an
entire list inside a list item to create nested list.

Page 26 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
HTML Unordered Lists
An unordered list created using the <ul> tag, and each list item starts with the <li> tag.
The list items in unordered lists are marked with bullets (small black circles), by default.
Example
Try this code »
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
— The output of the above example will look something like this:
 Chocolate Cake
 Black Forest Cake
 Pineapple Cake

HTML Ordered Lists

An ordered list, created using the <ol> tag, and each list item starts with the <li> tag.
Ordered list contain information where order should be emphasized.

The list items in ordered lists are marked with numbers.

<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>

TYPE ATTRIBUTE:
<ol type="1|a|A|i|I">

Value Description

1 Default. Decimal numbers (1, 2, 3, 4)

a Alphabetically ordered list, lowercase (a, b, c, d)

A Alphabetically ordered list, uppercase (A, B, C, D)

i Roman numbers, lowercase (i, ii, iii, iv)

I Roman numbers, uppercase (I, II, III, IV)

NESTED LIST:

A list inside a list is called nested list.

<html>
<body>

Page 27 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<h4>A list inside a list:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>
The output will be,

A list inside a list:

 Coffee
 Tea
 Black tea
 Green tea
 Milk

TABLE HANDLING
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under <td> are regular
and left aligned by default

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<tableborder="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Page 28 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

</body>
</html>

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells.
If you do not need a border, then you can use border = "0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. Normally you will put your top row as table heading
as shown below, otherwise you can use <th> element in any row. Headings, which are defined
in <th> tag are centered and bold by default.

Example
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tableborder="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<tableborder="1">

Page 29 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tdrowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<tdcolspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

Table Backgrounds:
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one
cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use
these attributes.
Example
<!DOCTYPE html>

<html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<tableborder="1"bordercolor="green"bgcolor="yellow">

<tr>

<th>Column 1</th>

<th>Column 2</th>

Page 30 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<th>Column 3</th>

</tr>

<tr>

<tdrowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<tdcolspan="3">Row 3 Cell 1</td>

</tr>

</table>

</body>

</html>

Table Height and Width:

You can set a table width and height using width and height attributes. You can specify
table width or height in terms of pixels or in terms of percentage of available screen area.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<tableborder="1"width="400"height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Page 31 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table.
<html>
<head><title>HTML Table Caption</title>

</head>
<body>
<tableborder="1"width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>

Page 32 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
UNIT - IV
INTRODUCTIN TO DHTML
DHTML is not a language but a term used to describe the way of making dynamic and
interactive web pages. It is a combination of HTML, JavaScript, Cascading Style Sheets (CSS)
and Document Object Model (DOM). Dynamic content is added to static HTML pages using
scripts and styles. DHTML uses client side scripting languages like JavaScript to change the static
attributes of a HTML page to generate a dynamic effect. This means all DHTML effects achieved
are after loading of content on a page without interacting with server again.

Features of DHTML:
 Simplest feature is making the page dynamic.
 Can be used to create animations, games, applications, provide new ways of navigating
through web sites.
 DHTML use low-bandwidth effect which enhance web page functionality.
 Dynamic building of web pages is simple as no plug-in is required.
 Facilitates the usage of events, methods and properties and code reuse.
Advantages of DHTML
There are many advantages of using DHTML especially when the content is to be modified
dynamically.
 DHTML supports adding styles to static content in various manners.
 It is dynamic so it can be changed even during the run time execution.
 Webmasters are often limited to use default fonts such as Arial or Times Roman. DHTML
allows downloadable fonts which make the web pages looking more attractive.
 DHTML page is also saved as an .html file.

Examples of DHTML
Here is an example of a flip image displayed using HTML image tag and flipped
horizontally using CSS to display a text behind the image.

STYLE SHEETS:
Cascading Style Sheets (CSS) describe how documents are presented on screens, in
print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets
on the Web since the consortium was founded in 1994.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties for a

Page 33 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
given HTML element. Each property has a name and a value, separated by a colon (:). Each
property declaration is separated by a semi-colon (;).
Example
First let's consider an example of HTML document which makes use of <font> tag and
associated attributes to specify text color and font size −

Note:-
The font tag deprecated and it is supposed to be removed in a future version of HTML.
So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But
still for learning purpose, this chapter will work with an example using the font tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><fontcolor="green"size="5">Hello, World!</font></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<pstyle="color:green; font-size:24px;">Hello, World!</p>
</body>
</html>

You can use CSS in three ways in your HTML document

 External Style Sheet − Define style sheet rules in a separate .css file and then include
that file in your HTML document using HTML <link> tag.
 Internal Style Sheet
using <style> tag.
 Inline Style Sheet − Define style sheet rules directly along-with the HTML elements
using style attribute.
Let's see all the three cases one by one with the help of suitable examples.
External Style Sheet

Page 34 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
If you need to use your style sheet to various pages, then its always recommended to
define a common style sheet in a separate file. A cascading style sheet file will have extension
as .css and it will be included in HTML files using <link> tag.

Example
Consider we define a style sheet file style.css which has following rules:
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}

Here we defined three CSS rules which will be applicable to three different classes
defined for the HTML tags. I suggest you should not bother about how these rules are being
defined because you will learn them while studying CSS. Now let's make use of the above
external CSS file in our following HTML document:

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<linkrel="stylesheet"type="text/css"href="/html/style.css">
</head>
<body>
<pclass="red">This is red</p>
<pclass="thick">This is thick</p>
<pclass="green">This is green</p>
<pclass="thick green">This is thick and green</p>
</body>
</html>

Internal Style Sheet

If you want to apply Style Sheet rules to a single document only, then you can include
those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.

Page 35 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Example
Let's re-write above example once again, but here we will write style sheet rules in the
same HTML document using <style> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<styletype="text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>

<body>
<pclass="red">This is red</p>
<pclass="thick">This is thick</p>
<pclass="green">This is green</p>
<pclass="thick green">This is thick and green</p>
</body>
</html>

Inline Style Sheet

You can apply style sheet rules directly to any HTML element using styleattribute of the
relevant tag. This should be done only when you are interested to make a particular change in
any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS file
as well as the rules defined in <style> element.

Example
Let's re-write above example once again, but here we will write style sheet rules along
with the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>

Page 36 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<pstyle="color:red;">This is red</p>
<pstyle="font-size:20px;">This is thick</p>
<pstyle="color:green;">This is green</p>
<pstyle="color:green;font-size:20px;">This is thick and green</p>
</body>
</html>

Page 37 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
UNIT - V
FRAMES

Frames in HTML
In HTML, frames enable you present multiple HTML documents within the same
window. For example, you can have a left frame for navigation and a right frame for the main
content. Frames are achieved by creating a frameset page, and defining each frame from within
that page. This frameset page doesn't actually contain any content - just a reference to each
frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags
are nested with a frameset tag.
So, in other words, if you want to create a web page with 2 frames, you would need to
create 3 files - 1 file for each frame, and 1 file to specify how they fit together.

Creating Frames
Two Column Frameset
HTML Code:
The frameset (frame_example_frameset_1.html):

Page 38 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" /><frame src ="frame_example_right.html" />
</frameset>
</html>

The left frame (frame_example_left.html):

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>\
</body>
</html>

The right frame (frame_example_right.html):

<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

Page 39 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Add a Top Frame
You can do this by "nesting" a frame within another frame.
HTML Code:
The frameset (frame_example_frameset_2.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<framesrc="/html/tutorial/frame_example_left.html"/>
<framesrc="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
The top frame (frame_example_top.html):
<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>
(The left and right frames don't change)

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I
say, officially because this is what the HTML specification specifies. Having said that, different
browsers support different attributes, so for maximum browser support, use the frameborder,
border, and framespacing attributes.

HTML Code:

The frameset (frame_example_frameset_3.html):

<html>
<head>
<title>Frameset page</title></head>
<frameset border="0" frameborder="0" framespacing="0"rows="20%,*">

Page 40 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<frame src="/html/tutorial/frame_example_top.html">

<frameset cols = "25%, *">

<frame src ="/html/tutorial/frame_example_left.html"/>
<frame src ="/html/tutorial/frame_example_right.html"/>
</frameset>
</frameset>
</html>
(The left, right, and top frames don't change)

Load another Frame

Most websites using frames are configured so that clicking a link in one frame loads another
frame. A common example of this is having a menu in one frame, and the main body in the other (like
our example).
This is achieved using the name attribute. You assign a name to the target frame, then in your
links, you specify the name of the target frame using the target attribute.
Tip: You could use base target="content" at the top of your menu file (assuming all links share
the same target frame). This would remove the need to specify a target frame in each individual link.

HTML Code:
The frameset (frame_example_frameset_4.html):

<html>

<head>

<title>Frameset page</title>

</head>

<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">

<frame src ="/html/tutorial/frame_example_left_2.html" />

<frame name="content" src ="/html/tutorial/frame_example_yellow.html" />

</frameset>

</html>

The left frame (frame_example_left_2.html):

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p><p>

Page 41 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<a target="content" href="frame_example_yellow.html">Yellow</a><br /><a target="content"

href="frame_example_lime.html">Lime</a></p>
</body>
</html>
The yellow frame (frame_example_yellow.html):
<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>
The lime frame (frame_example_lime.html):
<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>
Tag Reference
In your frameset tag, you specify either cols or rows, depending on whether you want frames to
go vertically or horizontally.

Attribue Description

Rows Specifies the number of rows and their height in either pixels, percentages, or relative lengths.
Default is 100%
Cols Specifies the number of columns and their width in either pixels, percentages, or relativelengths.
Default is 100%
The frame Tag
For each frame you want to display, you specify a frame tag. You nest these within the frameset
tag.

Attribute Description
Name Assigns a name to a frame. This is useful for loading
contents into one frame from another
longdesc A long description - this can elaborate on a shorter
description specified with the title attribute
Src Location of the frame contents (for example, the HTML
page to be loaded into the frame).
Noresize Specifies whether the frame is resizable or not (i.e.
whether the user can resize the frame or not.
Scrolling Whether the frame should be scrollable or not (i.e.
should scrollbars appear). Possible values
auto
yes
no

Page 42 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

Frame border Whether the frame should have a border or not.

Possible values:
1 (border)
0 (no border)
Margin width Specifies the margin, in pixels, between the frame's
contents and it's left and right margins:
Margin height Specifies the margin, in pixels, between the frame's
contents and it's top and bottom margins:

The noframe Tag

The noframes tag is used if the user's browser doesn't support frames. Anything you type in
between theNoframes tags are displayed in their browser.
HTML Code:
<html>
<head>
<title>Frameset page</title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>

<frame src ="frame_example_left.html" />

<frame src ="frame_example_right.html" />
</frameset>
</html>

EXAMPLES
PRACTICAL - 1
Introduction to HTML: Create a basic HTML file
Hyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute
the appearance of a web document and the information it contains. It is a language for creating static
web pages. It specifies how the contents are to be presented on the web page. HTML is not a case
sensitive language so; HTML and html both are same.HTML is a text document with formatting codes
and this document has the suffix “.html” or “.htm”.

Basic HTML Document

An element called HTML surrounds the whole document. This element contains two sub-
elements,HEAD and BODY. These elements are required to form any HTML document.
<Html>
<Head>
<Title>The First Page</title>
</head>

Page 43 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<Body>
Hello World
</body>
</html>
Just write down above code in the notepad editor and save this file with the extension of .html
or .htm and then double click on that file you will get output on the default web browser.

OUTPUT

Following are more sub tags of <Head>

<HTML>
<HEAD>has sub-elements that define header material:
<TITLE>document title.
The title of your document is what appears in a web browser’sFavourite or Bookmark list.
Search engines on the Internet use the document’s title for indexing purposes.
</TITLE>
<BASE>can be used to record the document's location in the form of a URL.
</BASE><ISINDEX>indicates to the browser that the document is an index document. This is
used onlyif the document is on a server that does indexing.
</ISINDEX>
<LINK>indicates a relationship between this document and some other object on the Web.
</LINK>

Page 44 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<META>provides information such as the page’s keywords and description that appears in
HTTPheaders.
</META>
<SCRIPT>contains either JAVA Script or VB Script</SCRIPT><STYLE>contains information used
by cascading style sheets</STYLE>
</HEAD>
<BODY>
The remaining HTML elements are contained within these tags.
</BODY>
</HTML>
PRACTICAL 2
Create a static webpage using table tags of HTML
<html>
<body>
<TABLE BORDER="1" CELLPADDING="2">
<CAPTION ALIGN="Top"><b>Specification Table with Hours and Marks<CAPTION>
<TR>
<TH ROWSPAN="2">Unit No.</TH><TH ROWSPAN="2">Unit Title</TH><TH
ROWSPAN="2">Teaching Hours</TH>
<TH Colspan="4">Distribution of Theory Marks</TH>
</TR>
<TR>
<TD>R Level </TD>
<TD>U Level </TD>
<TD>A Level </TD>
<TD>Total Marks </TD>
</TR>
<TR>
<TD><center>I </TD>
<TD>Introduction to Internet Technology</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>0</TD>

Page 45 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<TD><center>8</TD>
</TR>
<TR>
<TD><center>II </TD>
<TD>Basics of HTML & CSS</TD>
<TD><center>6</TD>
<TD><center>0</TD>
<TD><center>2</TD>
<TD><center>6</TD>
<TD><center>8</TD>
</TR>
<TR>
<TD><center>III </TD>
<TD>Active Server Pages 3.0</TD>
<TD><center>6</TD>
<TD><center>4</TD>
<TD><center>8</TD>
<TD><center>0</TD>
<TD><center>12</TD>
</TR>
<TR>
<TD><center>IV </TD>
<TD>Server Side Coding with VBScript and XML</TD>
<TD><center>8</TD>
<TD><center>2</TD>
<TD><center>4</TD>
<TD><center>8</TD>
<TD><center>14</TD>
</TR>
<TR>
<TD><center>V </TD>
<TD>ASP Objects & Components</TD>
<TD><center>10</TD>
<TD><center>4</TD>

Page 46 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</TR>
<TR>
<TD><center>VI </TD>
<TD>Accessing database with ASP & ADO</TD>
<TD><center>10</TD>
<TD><center>4</TD>
<TD><center>4</TD>
<TD><center>6</TD>
<TD><center>14</TD>
</tr>
<TR>
<TD></TD>
<TD><center><b>Total</TD>
<TD><center><b>42</TD>
<TD><center><b>18</TD>
<TD><center><b>26</TD>
<TD><center><b>26</TD>
<TD><center><b>70</TD>
</tr>
</TABLE>
</body>
</html>
OUTPUT

PRACTICAL - 3

Page 47 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021
Create a static web page which defines all text formatting tags of HTML in tabular format

<html>

<body>

<center>

<table border=1>

<caption align="top"><font size="+2" color="red">Text

Formatting Tags</font></caption><tr>

<th>HTML Tag</th>

<th>Output</th>

</tr>

<tr>

<td>normal text</td>

<td>hello world</td>

</tr>

<tr>

<td>Font & its attributes</td>

<td><FONT SIZE="+2" COLOR="#RRGGBB"> hello world </FONT></td>

</tr>

<tr>

<td>&lt;B&gt;</td>

<td><B> Bold </B></td>

</tr>
<tr>
<td>&lt;I&gt;</td>
<td><I> Italic </I></td>
</tr>
<tr>
<td>&lt;U&gt;</td>
<td><U> Underline </U></td>
</tr>
<tr>
<td>&lt;EM&gt;</td>

Page 48 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<td><EM> Emphasis </EM></td>

</tr>
<tr>
<td>&lt;STRONG&gt;</td>
<td><STRONG> STRONG </STRONG></td>
</tr>
<tr>
<td>&lt;TELETYPE&gt;</td>
<td><TT> TELETYPE </TT></td>
</tr>
<tr>
<td>&lt;CITE&gt;</td>
<td><CITE> Citation </CITE></td>
</tr>
<tr>
<td>&lt;STRIKE&gt;</td>
<td><STRIKE> strike-through text </STRIKE></td>
</tr>
<tr>
<td>&lt;BIG&gt;</td>
<td><BIG> text in a big font </BIG></td>
</tr>
<tr>
<td>&lt;SMALL&gt;</td>
<td><SMALL> text in a small font <SMALL></td>
</tr>
<tr>
<td>&lt;SUB&gt;</td>
<td>a<SUB> b </SUB></td>
</tr>
<tr>

Page 49 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<td>&lt;SUP&gt;</td>
<td>a<SUP> b</SUP></td>
</tr>
</table>
</body>
</html>
PRACTICAL - 4
Create webpage using list tags of HTML
<html>
<body>
<b> HTML List: Ordered, Unordered & Definition List</b><hr>
Following is the list of proposed student activities like:
<OL type=1>
<li>Develop programs related with unit vice topics in computer laboratory.</li>
<li>Develop any module of to be useful in real life application.</li>
<li>Multimedia presentation of module developed by students.</li>
</OL>
<hr>
List of Software/Learning Websites
<UL>
<li><u>ASP Tutorial - W3Schools</u><br>
<a href=http://www.w3schools.com/asp/>www.w3schools.com/asp</a></li>
<li><u>Classic ASP Tutorials& Articles - Web Wiz</u><br><a
href="http://www.webwiz.co.uk">www.webwiz.co.uk
Knowledgebase</a></li>
<li><u>HTML Tutorial - W3Schools</u><br>
<a href=" ://www.w3schools.com/html/"> www.w3schools.com/html</a></li>
<li><u>CSS Tutorial</u><br>
<a href=" ://www.csstutorial.net/"> www.csstutorial.net</a></li>
<li><u>VBScript Tutorial - Tutorials Point</u><br><a

Page 50 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

href=" ://www.tutorialspoint.com/vbscript/index.htm">
www.tutorialspoint.com/vbscript/index.htm</a></li><li><u>ADO Tutorial - W3Schools</u><br>
<a href="http://www.w3schools.com/ADO/default.asp">
www.w3schools.com/ADO/default.asp</a></li>
</UL>
<hr>
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD><DT>XML</DT>
<DD>eXtensible Markup Language</DD>
</DL>
</body>
</html>
OUTPUT

PRACTICAL - 5
Create webpage to include image using HTML tag
<html>
<body background="Desert.jpg">
<center><img src="dns.gif">
</body>

Page 51 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

</html>
PRACTICAL –6

Create employee registration webpage using HTML form objects

<html>
<body>
<Center>
<img src="employee_icon.png" height=52 width=52>
<Font size="+3" color=red>Employee Registration Form</font><form method=post
action="prac.html">
<table>
<tr>
<td></td>
<td><input type=radio name=initial checked>Mr.
<input type=radio name=initial>Mrs.
<input type=radio name=initial>Ms.</td></tr><tr>
<td>First Name</td>
<td><input type=text name=fn placeholder="First Name"></td></tr><tr>
<td>Last Name</td>
<td><input type=text name=ln placeholder="Last Name"></td></tr><tr>
<td>Mail Address1</td>
<td><input type=text name=add1></td></tr><tr>
<td>Mail Address2</td>
<td><input type=text name=add2></td></tr><tr>
<td>City</td>
<td><input type=text name=ct></td></tr><tr>
<td>State</td>
<td><select name=state>
<option value="Gujarat">Gujarat <option value="Maharastra">Maharastra <option
value="Karnataka">Karnataka <option value="Delhi">Delhi
</select>
</td>
</tr><tr>
<td>Zip</td>
<td><input type=text name=zp></td></tr><tr>

Page 52 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2020-2021

<td>Upload Photo</td>
<td><input type=file name=photo></td></tr><tr>
<td>E-Mail</td>
<td><input type=text name=email size=30></td></tr><tr>
<td>Mobile</td>
<td><input type=text name=mob placeholder="+91"></td></tr><tr>
<td>Languages known</td>
<td><input type=checkbox name=lk value=Gujarati checked>Gujarati</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Hindichecked>Hindi</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Englishchecked>English</td>
</tr><tr>
<td></td>
<td><input type=checkbox name=lk value=Marathi >Marathi</td></tr><tr>
<td>Additional Information</td>
<td><textarea name=add rows=3 cols=20 placeholder="Optional"
wrap></textarea></td>
</tr><tr>
<td></td>
<td><input type=submit value=submit>&nbsp;<input type=resetvalue=reset></td>
</table>
</form>
</body>
</html>

Page 53 of 54
 STUDY MATERIAL FOR BCA
INTRODUCTION TO INTERNET
SEMESTER - V, ACADEMIC YEAR 2019-2020
OUTPUT

Page 54 of 54