HTML FULL DETAIL DOCUMENT WITH ALL SUB-TOPIC

INTRODUCTION TO INTERNET
❖ Internet:
The word Internet is derived from two words: Interconnection and Networks. Also referred Net to as
‘the Net’, Internet is a worldwide system of computer networks, that is, a network of networks, which
allows the participants (users) to share information on those linked computers. It consists of
thousands of separately administered networks of various sizes and types.
❖ Define protocol. Explain various Internet Protocol:
Protocol:-A protocol is a standard set of rules to be followed by all computers wanting to communicate
with each other.
o The various Internet Protocols are:
▪ IP (Internet Protocol)
▪ TCP (Transmission Control Protocol)
▪ FTP (File Transfer Protocol)
▪ HTTP (Hypertext Transfer Protocol)
▪ UDP (User Datagram Protocol)
▪ SMTP (Simple Mail Transfer Protocol)
▪ MIME (Multipurpose Internet Mail Extension)
▪ POP (Post Office Protocol)
▪ IMAP (Internet Message Access Protocol)
▪ ICMP (Internet Control Message Protocol)
o IP (Internet Protocol) :
▪ The Internet Protocol (IP) is the method or protocol by which data is sent from one computer to
another on the Internet.
o TCP (Transmission Control Protocol)
▪ It is used to transfer data between two computers.
▪ It is a reliable protocol.
▪ TCP is connection oriented. TCP requires that connection between two remote points be
established before sending actual data.
▪ It breaks up the message into TCP Segments and reassemble them at the receiving side.

MAS: 105 MAS-105: INTRODUCTION TO MS-OFFICE AND INTERNET
2
o TCP/IP (Transmission Control Protocol/Internet Protocol)
▪ TCP (Transmission Control Protocol) and IP (Internet Protocol) are two different protocols that
are often linked together. The linking of several protocols is common.
▪ TCP/IP (Transmission Control Protocol/Internet Protocol) is the basic communication protocol of
the Internet.
▪ It can also be used as a communications protocol in a private network (either an intranet or an
extranet).
o FTP: (File Transfer Protocol)
▪ The FTP is very commonly used protocol on Internet.
▪ FTP is used to transfer files from one computer on the Internet to another.
▪ FTP uses the Internet's TCP/IP protocols to enable data transfer. FTP is commonly used to transfer
Web page files from their creator to the computer that acts as their server for everyone on the
Internet. It's also commonly used to download programs and other files to your computer from
other servers.
▪ When you transfer a file from your computer to a remote computer it is called file uploading and
when you transfer a file from remote host to your computer it is referred to as file downloading.
▪ File uploading:-Transferring a file from a local computer to a remote host.
▪ File Downloading:-Transferring a file from a remote host to a local computer.
o HTTP (Hypertext Transfer Protocol)
▪ Basically, HTTP is a TCP/IP based communication protocol, that is used to deliver data (HTML
files, image files, query results, etc.) on the World Wide Web.
▪ It provides a standardized way for computers to communicate with each other.
▪ HTTP specification specifies how clients' request data will be constructed and sent to the server,
and how the servers respond to these requests.
▪ There are three basic features that make HTTP a simple but powerful protocol:
✓ HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and after a
request is made, the client disconnects from the server and waits for a response. The server
processes the request and re-establishes the connection with the client to send a response
back.

3
✓ HTTP is media independent: It means, any type of data can be sent by HTTP as long as both
the client and the server know how to handle the data content. It is required for the client as
well as the server to specify the content type using appropriate MIME-type.
✓ HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result of
HTTP being a stateless protocol. The server and client are aware of each other only during a
current request. Afterwards, both of them forget about each other. Due to this nature of the
protocol, neither the client nor the browser can retain information between different
requests across the web pages.
o SMTP: (Simple Mail Transfer Protocol)
▪ The SMTP is a standard protocol used to transfer mail message between computers.
▪ SMTP is used to transfer e-mail from a client to a server as well as from server to another server.
▪ Most e-mail systems that send mail over the Internet use SMTP to send messages from one server
to another
▪ SMTP uses the ASCII character set for composing a message. It is a request-response protocol.
▪ SMTP can send message only in 7-bit ASCII format.
▪ SMTP specifies how messages are sent to the Internet.
o MIME: (Multiple Internet Mail Extension)
▪ MIME is used to exchange e-mail messages containing non-textual data such as graphics, sound,
and other multimedia files.
▪ MIME offers a way to extend Internet standard mail so that users can interchange text in language
with different character sets, and multimedia electronic mail among different computer systems
that implemented standard mail.
▪ The MIME encodes non-textual file in a textual form, which can be sent using the SMTP. The
recipient can then decode this MIME encoded data to the original non-text file.
o POP: (Post Office Protocol)
▪ The POP defines how mail client can retrieve messages from a mail server.
▪ The POP was developed for single user computers.
▪ The POP3 (Post Office Protocol 3) protocol provides a simple, standardized way for users to
access mailboxes and download messages to their computers.

4
▪ When using the POP protocol all eMail messages will be downloaded from the mail server to local
computer. You can keep copies of eMails on the server. The advantage is that once messages are
downloaded, messages can be read at any time without internet connection.
o IMAP: (Internet Message Access Protocol)
▪ IMAP stands for Internet Message Access Protocol.
▪ IMAP is mail access protocol. It is similar to POP3, but it has more features. IMAP is more powerful
and more complex.
▪ POP3 does not allow the user to organize her mail on the server; the user cannot have different
folders on the server. In addition, POP3 does not allow the user to partially check the content of
the mail before downloading.
▪ IMAP provides the following extra functions:
• A user can check the email header prior to downloading.
• A user can search the content of the email for a specific string of characters prior to
downloading.
• A user can create, delete or rename mailboxes on the mail server.
• A user create hierarchy of mailboxes in a folder for email storage
o UDP:- (User Datagram Protocol)
▪ UDP is a connectionless, unreliable protocol.
▪ UDP is a simple Datagram oriented, transport protocol.
▪ UDP (User Datagram Protocol) is a communications protocol that offers a limited amount of
service when messages are exchanged between computers in a network that uses the Inter.
Protocol (IP).
▪ UDP assumes that error checking and correction is either not necessary or performed in the
application, avoiding the overhead of such processing at the network interface level.
▪ Time-sensitive applications often use UDP because dropping packets is preferable to waiting for
delayed packets, which may not be an option in a real-time system.
o Internet Control Message Protocol (ICMP)
▪ The Internet Control Message Protocol (ICMP) is one of the core protocols of the Internet
Protocol Suite.

5
▪ It is use to send error messages indicating, for example, that a requested service is not available or
that a host or router could not be reached.
❖ Internet Utilities
E-mail:
▪ The most popular use of the Internet is electronic mail, e-mail or email which may contain files, images,
audio, video or other attachments sent through a network to a specified individual or group of
individuals.
▪ Each user of E-mail has a mailbox address to which messages are sent and mailbox can be accessed
from anywhere anytime.
▪ It is available for free on the Web with Yahoo Mail, Hotmail, Gmail.
▪ The valid e-mail address consists of a usernarne and a domain name separated by the @ sign E.g.
abc@grnail.com.
o The first portion all e-mail addresses is the alias, user, group, or department of a company.
o The @ (at sign) is used as a divider in the e-mail address and is always required for all SMTP e-
mail addresses.
Internet
Utilities
E-mail
Searching
Chatting
and Instant
Messaging
UseNet
Newsgro
ups
Discussi
on
boards
Blog
IRC
Video
Confere
ncing

6
o Finally, gmail.corn is the domain name of where the user belongs.
To send and receive E-mail
To send and receive e-mail messages we can use an e-mail program, also known as an e-mail client such as
Microsoft Outlook or Mozilla Thunderbird. When using an e-mail client we must have a server that stores
and delivers the e-mail. This service is provided by the ISP but can also be a service provided by another
company. The e-mail client will connect to the server to download all new e-mail and deliver any unseat
An alternative way of sending and receiving e-mail and a more popular solution for most people is an online e-
mail service or webmail such as Hotmail. Gmail, and Yahoo Mail. Many of the online email services
including the above examples are free or have a free account option.
Writing an E-mail
When writing a new e-mail message a window will appear. Several fields are required when sending an e-
mail.
o From or Reply-To: The From field indicates the sender’s address i.e. who sent the e-mail.
o The CC or Carbon Copy: It includes those recipient addresses whom we want to keep informed but
not exactly the intended recipient.
o 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.
o To: The To field indicates the recipient’s address i.e. to whom the e-mail is sent.
o Subject: The Subject field indicates the purpose of e-mail. It should be precise and to the point.
o Greeting: Greeting is the opening of the actual message. Eg. Hi Sir or Hi Guys etc.
o Text: It represents the actual content of the message.
o Signature: This is the final part of an e-mail message. It includes Name of Sender, Address, and
Contact Number.
Searching:
▪ It is one of the most powerful and widely used applications of the Internet.
▪ You can search for information of an item, place, location and many other things.
▪ The most productive way to conduct a search on the internet is through a search engine.

7
▪ A web search engine is a software system designed to search for information on the World Wide
Web.
▪ The search results are generally presented in a line of results often referred to as search engine
results pages (SEROs). The information may be a mix of web pages, images, and other types of files.
Some search engines also mine data available in databases or open directories.
▪ The top web search engines are Google, Bing, Yahoo, Ask.com, and AOL.com.
Chatting and Instant Messaging:
▪ Chat programs allow users on the Internet to communicate with each other by typing in real time.
▪ Instant messaging allows a user on the Web to contact another user currently logged in and type a
conversation.
▪ Such as WhatsApp, WeChat, Hangouts, MSN messenger, Yahoo Messenger provides Chatting and
Instant Messaging.
UseNet Newsgroups:
▪ Usenet is a worldwide distributed Internet discussion system.
▪ It is a service dedicated to discussions on a particular topic through posted articles.
▪ A Usenet newsgroup is a repository usually within the Usenet system, for messages posted from
many users in different locations.
Discussion boards
▪ An Internet forum, or message board, is an online discussion site where people can hold
conversations in the form of posted messages. They differ from chat rooms in that messages are at
least temporarily archived. Also, depending on the access level of a user and/or the forum set-up, a
posted message might need to be approved by a moderator before it becomes visible.
Blog
▪ A blog (a blend of the term web log) is a type of web site or part of a web site. Blogs are usually
maintained by an individual with regular entries of commentary, descriptions of events, or other
material such as graphics or video. Entries are commonly displayed in reverse-chronological
order.

8
IRC (Internet Relay Chat):
▪ IRC is a method to broadcast and receive live, synchronous, messages.
▪ It allows real-time text based communication through the Internet.
▪ It is organized by topic of interest into media channels. Discussion occurs in "chat rooms" of the
website. Some Websites have built-in chat rooms.
It provides the user with the facility to engage in simultaneous (synchronous) online 'conversations'
with other users from anywhere in the world.
Video Conferencing:
▪ It uses the same technology as IRC, but also provides sound and video pictures. It enables direct
face-to-face communication across networks via web cameras, microphones, and other
communication tools.
❖ Web Browser
▪ A software application used to access information on the World Wide Web is called a Web Browser.
When a user requests some information, the web browser fetches the data from a web server and then
displays the webpage on the user’s screen.
▪ Web Browser allows to
o Connect to an appropriate server
o Query the server for the information to be read
o Provides on interface to read the information returned by the server
▪ Examples of Web browsers are: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera,
Netscape Navigator
▪ Browsers are of tow types:
o Graphical Browsers
o Text Browsers
o Graphical Browsers
Graphical Browsers allows retrieval of text, images, audio, and video. Navigation is
accomplished by pointing and clicking with a mouse on highlighted words and graphics.
Example: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera, Netscape Navigator
o Text Browsers

9
Text browsers provide access to the web in text-only mode. Navigation is accomplished by
highlighting emphasized words on the screen with the arrow up and down keys, and then
pressing the Enter key to follow the link. Lynx is an example of text-based browser.
Functions of Web Browser
o The main function is to retrieve information from the World Wide Web and making it available
for users
o Visiting any website can be done using a web browser. When a URL is entered in a browser,
the web server takes us to that website
o To run Java applets and flash content, plug-ins are available on the web browser.
o It makes Internet surfing easy as once we reach a website we can easily check the hyperlinks
and get more and more useful data online
o Browsers user internal cache which gets stored and the user can open the same webpage time
and again without losing extra data
o Multiple WebPages can be opened at the same time on a web browser
o Options like back, forward, reload, stop reload, home, etc. are available on these web browsers,
which make using them easy and convenient
❖ Web Server
▪ Computers which store web pages in the form or directories and files and provide these files to be
read are called servers. They act like service provides that service the need for information. The server
computer runs special software called the Web Server software that allows
1. Web site management
2. Accepts a client’s request for information
3. Responds to client’s request by providing the pages with the required information.
▪ Some of the popular software which server runs to allow them to respond to client request for
information is IIS, Apache Web Server, Netscape Server, Microsoft personal web server.
▪ Web server software stores and manage web pages. The web server accepts requests for these web
pages, retrieve these web pages from its Hard Disk and sends the page back to the client who
requested for it.
HTML

10
❖ HTML
▪ HTML stands for for Hyper Text Markup Language.
▪ It is one type of scripting language, which is used to create WebPages.
▪ It is interpreted or rendered by web browser.
▪ The definition of HTML is Hyper Text Markup Language.
o HyperText is the method by which you move around on the web — by clicking on special text
called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not
linear — i.e. you can go to any place on the Internet whenever you want by clicking on links —
there is no set order to do things in.
o Markup is what HTML tags do to the text inside them. They mark it as a certain type of text
(italicized text, for example).
❖ Types of HTML documents
HTML pages are of three types:
▪ Static
▪ Dynamic
▪ Directory Listing
Static Pages
▪ Static pages are static HTML pages that are prepared in advance of the request. The Web server
returns the HTML pages to the user, but takes no special action.
▪ The user requests a static page by typing in an URL (in the following illustration,
http://www.company.com/home.htm) or by clicking a link pointing to an URL. The URL request is
sent to the server. The server responds by returning the static HTML page.

11
Static Pages
Dynamic Pages
▪ Dynamic pages are created in response to a user's request.
▪ A Web browser collects information by presenting a page with text boxes, menus and check boxes that
the user fills in or selects. When the user clicks on a button on a form, the data from the form is sent to
the Web server. The server either passes the data to a script or application to be processed or it
queries or posts data to a database. The server then returns the results to the user in HTML page.
▪ The following illustration shows how a user can send a query to a server application that adds two
numbers. The user types the two numbers to be added, then clicks a button, which in turn sends the
two numbers to the Web server. The Web server calls the application to add the numbers, and then
returns the results to the user in HTML page.

12
Dynamic Pages need an application at the server
▪ The following illustration shows a user posting an order to a database using the Internet Database
Connector. The user completes a form, and then clicks a button, which in turn sends the data in the
form to the server. The server posts the data to a database then confirms the order by sending HTML
page.
A Dynamic Page using Database kept at the server
Directory Listing
▪ If users send queries without specifying a particular file, you can either create a default document for a
Web site or for a particular directory or you can configure your server for directory browsing.
▪ If no default document is created for a directory and directory browsing is configured, a directory
listing (a hypertext version of a Windows Explorer or File Manager listing) is returned to the user in
the form of HT.ML page.
▪ The user can then jump to the appropriate file by clicking it in the directory listing.

13
Web Servers allows listing of directories
❖ Document Structure Elements
All HTML documents are composed of four parts:
▪ A HTML document begins with a line declaring which version of HTML is being used to create the
document. The tag used is <!DOCTYPE>.
▪ A HTML element that describes the document as a HTML document.
▪ A declarative header section which is enclosed in the <head> element. The <head> contains
information about the document such as the title, indexing information, and ownership.
▪ The main body of the document which contains the actual document content. The body can be
contained within either the <body> or <frameset>elements. The <body> consists of images, text
and hotlinks to other documents and files displayed by the Web browser. The <frameset> element
holds one or more <frame> elements. Each <frame> element can hold a separate document.
<frameset> is not supported in HTML 5.
Model HTML document:
< !DOCTYPE html>
<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>

14
</HTML>
Document Type Declaration
▪ The <!DOCTYPE> element defines the document type definition for the element.
▪ It is an instruction to the web-browser about what version of the mark-up language the page is
written is.
▪ <!DOCTYPE> should appear at the very beginning of an HTML document in order to identify the
content of the document.
▪ The DOCTYPE for HTML5 is short, and case-insensitive as given below. HTML5 is not based on
SGML, and therefore does not require a reference to a DTD.
<!DOCTYPE html>
▪ Doctypes from earlier versions of HTML were longer because the HTML language was based on
SGML and therefore required a reference to a DTD. The DTD specifies the rules for the markup
language, so that the browsers render the content correctly.
<!DOCT
YPE
[Top
Elements]
Availabil
ity
“Registrati
on //
Organization
//
Type Label//
Languag
e”
“[URL]”>
<!DOCTY
PE
HTML PUBLIC “-// W3C//
DTD
HTML
4.0
Transitio
nal//
EN”
http://ww
w.w3.org/
TR/html4
/loose.dtd
>
(1) [Top Element] - Indicates the top level element type declared in the DTD; for HTML it is
<html>.
(2) [Availability] - Field indicates whether the identifier is a publicly accessible object (PUBLIC)
or a system resource (SYSTEM) such as a local file or URL. HTML DTDs are specified by
PUBLIC identifiers.
(3) [Registration] - Indicated by either a plus ("+") or minus ("-"). A plus symbol indicates that
the organization name that follows is ISO-registered. A minus sign indicates the

15
organization name is not registered. The IETF and W3C are not registered ISO organizations
and thus use a "-".
(4) [Organization] - This is the "OwnerID" - a unique label indicating the name of the entity or
organization responsible for the creation and/or maintenance of the artifact (DTD, etc.)
being referenced by the DOCTYPE. The IETF and W3C are the two originating organizations
of the official HTML DTDs.
(5) [Type] - This is the "Public Text Class" - the type of object being referenced. There are many
different keywords possible here, but in the case of an HTML DTD, it is "DTD" - a Document
Type Definition.
(6) [Label] - This is the "Public Text Description" - a unique descriptive name for the public text
(DTD) being referenced. If the public text changes for any reason, a new Public Text
Description string should be created for it.
Signature:
HTML 4.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational
or deprecated elements (like font). Framesets are not allowed.
HTML 4.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are not allowed.
HTML 4.0 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
(7) [Language] - This is the "Public Text Language"; the natural language encoding system used
in the creation of the referenced object. HTML DTDs are usually written in English ("EN".)

16
(8) [URL] - This is the optional explicit URL to the DTD being referenced.
▪ Doctype for HTML-5 is simple short and case-insensitive. HTML-5 is not based on SGML, and therefore
it does not require a reference to a DTD.
<!DOCTYPE html>
Head Section
▪ The head section is opened and closed by the <head> and </head> tags. Information belonging in
the head section should be placed between these two tags.
▪ The head of HTML document is an unordered collection of information about the document. A
number of tags can be placed between the <head> and </head> tags including <base>, <link>,
<meta>, <script>, <style> and <title>.
▪ Example:
<html>
<head>
<title> Introduction to HTML </title>
</head>
<body> … </body>
</html>
▪ The <head> and </head> elements do not directly affect the look of the document when
rendered.
Body Section
▪ The body section is opened and closed by the <body> and </body> tags.
▪ The text and images of the document itself to be displayed by the Web browser, should be placed
within these two tags.
▪ The body of HTML document contains all the text and images that make up the page together with all
the HTML elements that provide the control/formatting of the page.
▪ Syntax:
<html>
<head> . . . </head>
<body>
<!-- Content of the body tag !-- >
</body>

17
</html>
▪ Example:
<html>
<head> ..... </head>
<body>
Welcome!!!
</body>
</html>
Output:
▪ </body> ends the portion of the page containing the document itself. </html> ends the page itself.
The head and body sections are enclosed within the opening <html> and closing </html> tags.
❖ Understanding Common HTML Terms
Elements
▪ Element is an object within a page. Such as heading, paragraph or image.
▪ Some of the more frequently used elements include multiple levels of headings (identified
as <h1> through <h6> elements) and paragraphs (identified as the <p>element); the list goes on to
include the <a>, <div>, <span>, <strong>, and <em>elements, and many more.
Tags
▪ Tags are instructions that are embedded directly into the text of document.
▪ All HTML tag begins with open angle bracket ( < ) and ends with a close angle bracket ( > ).
▪ Tags are comprises of elements and attributes.
▪ An opening tag marks the beginning of an element. It consists of a less-than sign followed by an
element’s name, and then ends with a greater-than sign; for example,<div>.
▪ A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash
and the element’s name, and then ends with a greater-than sign; for example, </div>.

18
▪ The content that falls between the opening and closing tags is the content of that element. An anchor
link, for example, will have an opening tag of <a> and a closing tag of </a>. What falls between these
two tags will be the content of the anchor link.
Attributes
▪ Attributes are properties used to provide additional information about an element. The most common
attributes include the id attribute, which identifies an element; the src attribute, which specifies a
source for embeddable content; and the href attribute, which provides a hyperlink reference to a
linked resource.
▪ Attributes are defined within the opening tag, after an element’s name. Generally attributes include a
name and a value. The format for these attributes consists of the attribute name followed by an equals
sign and then a quoted attribute value. For example, an <a> element including an href attribute would
look like the following:
<a href="http://WebDesigning.com/"> Web Designing </a>
HTML tag can be of two types:
✓ Pair Tag or Container Tag:
A tag is said to be pair tag if it along with a companion tag. In paired tags, the first tag is referred to
as Opening Tag and the second tag is referred to as Closing Tag.
For example, <b> . . . </b>, <u> . . . </u>
✓ Singular Tag or Non-container Tag:
Singular Tag does not have a companion tag. It is also known as Stand-Alone Tags.
For example, <br/> , <hr/>, <img />
❖ <head> tag:

19
▪ The head of HTML document is an unordered collection of information about the document.
A number of tags can be placed between the <head> and </head> tags including <base>,
<link>, <meta>, <script>, <style> and <title>.
▪ <title> tag:
o The <title> tag defines the title of the document.
o Example:
<html>
<head>
<title>Web Page</title>
</head>
<body>
<p>Welcome</p>
</body>
</html>
Output:
▪ <base> tag:
o The <base> tag specifies the base URL/target for all relative URLs in a document.
Attribute Syntax Value Description
Href <base href="URL"> URL
Specifies the base URL for all relative URLs in
the page
target
<base target="_blank |
_self | _parent | _top |
framename">
Specifies the default target for all hyperlinks
and forms in the page
_blank Opens the link in a new window or tab
_parent Opens the link in the parent frame
_self
Opens the link in the same frame as it was
clicked
_top Opens the link in the full body of the window
framename Opens the link in a named frame

20
o Example:
<html>
<head>
<base href="http://www.itsolution.com/" target="_blank">
</head>
<body>
<p><a href="/">BASE</a> - The link opens in a new window, even if it has no target="_blank"
attribute. This is because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
❖ <body> tag:
The body of HTML document contains all the text and images that make up the page together with all
the HTML elements that provide the control/formatting of the page.
Bgcolor <body bgcolor="color_name |
hex_number | rgb_number">
The BGCOLOR attribute specifies the
background color for the document.
color_name Specifies the background color with a color
name (e.g. "green")
hex_number Specifies the background color with a hex
code (e.g. "#ff00ff")
“#rrggbb" is a hexadecimal red-green-blue
triplet used to specify the background
color.
rgb_number Specifies the background color with an rgb
code (e.g. "rgb(150,100,0)")
Example:
✓ <html>
<body bgcolor="violet">
</body>

21
</html>
✓ <body bgcolor="#ff8822">
✓ <body bgcolor="rgb(100,100,10)">
background <body background="URL or
path/filename”>
URL or Path
/ Filename
The background attribute specifies a
background image for a document.
The value of this attribute is the URL of the
image you want to use.
If the image is smaller than the browser
window, the image will repeat itself until it
fills the entire browser window.
It would cause whatever text, images, etc.
appeared in that document to be placed on
a background consisting of the graphics file
being tiled to cover the viewing area. URL
can be absolute or relative.
Example:
<body background="img.jpg">
text <body text="color_name |
The text attribute specifies the color of the
text in a document.
This basically consists of all text that is not
specially colored to indicate a link. The
format of text is the same as that of bgcolor.
color_name Specifies the text color with a color name
(e.g. "green")
hex_number Specifies the text color with a hex code (e.g.
"#ff00ff")
“#rrggbb" is a hexadecimal red-green-blue
triplet used to specify the text color.
rgb_number Specifies the text color with an rgb code

22
(e.g. "rgb(150,100,0)")
Example:
<body text=”#ffff00”>
leftmargin <body leftmargin=”pixels or
% value”>
pixels
or
% value
This attribute allows the left-hand margin
of the document to be set.
For example:
<body leftmargin="60">
This document is indented 60 pixels from
the left hand side of the page.
topmargin <body topmargin=”pixels or
% value”>
pixels
or
% value
This attribute allows the top margin of the
document to be set.
For example:
<body topmargin="60">
the bottom of the page.
bottommargi
n
<body bottommargin=”pixels
or % value”>
pixels
or
% value
This attribute allows the bottom margin of
the document to be set.
For example:
<body bottommargin ="60">
the top of the page.
rightmargin <body rightmargin=”pixels or
% value”>
pixels
or
% value
This attribute allows the right margin of
the document to be set.
For example:
<body rightmargin="60">
the right of the page.
link <body link="color_name |
Specifies the color of unvisited links in a
document.
color_name Specifies the link color with a color name
(e.g. "black")
hex_number Specifies the link color with a hex code (e.g.
"#0000ff")

23
❖ Character Formatting Elements
[OR]
Markup for characters
[OR]
Text Formatting tags:
• HTML provides a set of elements to change the appearance of the text by applying various
formatting features. In general, HTML formatting elements are grouped into two categories.
o Physical Style
rgb_number Specifies the link color with an rgb code
(e.g. "rgb(0,255,0)")
Example:
<body link=”#ff1010” >
alink <body alink="color_name |
Specifies the color of an active link in a
document.
(e.g. "black")
"#0000ff")
(e.g. "rgb(0,255,0)")
Example:
<body alink=”#ff0000” >
vlink <body vlink="color_name |
Specifies the color of visited links in a
document.
(e.g. "black")
"#0000ff")
(e.g. "rgb(0,255,0)")
Example:
<body vlink=”#ff00ff” >

24
o Logical Style
o HTML Physical Style tags
Physical tags are used to indicate exactly how specific characters are to be formatted.
Tag Description
<b>
The Bold element specifies that the text should be rendered in boldface where available.
<b> tag makes any text between its tags to be formatted as bold.
e.g. <b>This text is bold</b>
<i>
The Italic element specifies that the text should be rendered in italic font where
available. <i> tag makes any text between its tags to be formatted as italic.
e.g. <i>This text is italic</i>
<u>
The <u> tag underlines the text which appears in between its tags.
e.g. <u> This tag will underline the text inside the tag.</u>
<sub>
The <sub> element specifies that the enclosed text should be displayed as a subscript.
e.g. <p>The Element is H<sub>2</sub>SO<sub>4</sub></p>
<sup>
The <SUP> element specifies that the enclosed text should be displayed as a
superscript.
e.g. <p>The cube of 4 i.e. 4<sup>3</sup> is 64</p>
<big>
The <big> tag specifies that the enclosed text should be displayed big. The browser
renders the text one font size larger than the surrounding text.
e.g. <big>This text is big</big>
<small>
The <small> tag specifies that the enclosed text should be displayed small. The browser
renders the text one font size smaller than the surrounding text.
e.g. <small>This text is small</small>
<strike>
The <strike>…</strike> tag states that the enclosed text should be displayed with a
horizontal line striking through the text.
e.g. <strike> horizontal line striking through the text. </strike>
<tt>
The teletype element specifies that the text should be rendered in fixed-width
typewriter font.
e.g. <tt>This text is teletype</tt>
<blink>
Surrounding any text with this element will cause the selected text to blink on viewing
page.

25
e.g. <blink>This text would blink on the page in Netscape & FireFox </blink>
o HTML Logical Style tags
Logical tags are used to indicate to the visually impaired that there is some emphasizes on the text.
Each browser has its own technique as to how to indicate to its viewer that the text between the
tags is different.
<em>
The <em> tag indicates that the content should be emphasized.
e.g. <em>This text is emphasized</em>
<strong>
Defines strong text. The <strong> tag specifies that the enclosed text should be
displayed strong.
e.g. <strong>This text is strong</strong>
<del> The <del> tag defines text that has been deleted from a document.
<ins>
The <ins> tag defines text that has been inserted into a document.
e.g. <p> M.R.P. <del> ` 91000.00</del> <ins>` 84000.00</ins>!</p>
<code> Refers to the program code
<kdb> Refers to the keyboard keys
<var> Indicates a variable
<cite> Indicates short quotes or citations
<samp> Displays the sample program output on the Web page
❖ Block Formatting Elements
▪ Paragraph Tag:
o The paragraph tags are used to define a block of text as a paragraph.
o The paragraph tag controls the line spacing of the lines within the paragraph as well as the line
spacing between paragraphs.
o The default line spacing is single space within the paragraph and double space between the
paragraphs.
o Each paragraph in document should start with an opening paragraph tag <p> and end with a
closing paragraph tag </p>.
Attribute:
align:

26
o The align attribute specifies the alignment of the text within a paragraph.
o Syntax:
align=left | center | right | justify
Left Text is aligned to the left margin
Right Text is aligned to the right margin
Center Center-align text
Justify Stretches the lines so that each line has equal width (like in newspapers and
magazines) Text is justified to both margins.
o Example:
✓ <p align="right">This is right aligned.</p>
✓ <p align="center">This is center aligned.</p>
▪ Line Break:
o The line break tag <br> causes any text following it to begin on the next line.
o The <br> tag inserts a single line break.
o Example:
<p> This is <br> an example of line break tag. </p>
▪ No break:
o The <nobr> tag stands for No Break.
o All the text between the start and end of the <nobr> tag cannot have line break inserted.
o <nobr> is useful for character sequences that don’t want to be broken.
o Example:
<nobr>
This tag is used to instruct the browser not to break the specified text. This is a very long
sequence of text that is forced to be on a single line, even if doing so causes the browser to
extend the document window beyond the size of the viewing pane and the poor user must
scroll right to read the entire line.
</nobr>

27
▪ Word Break:
o The <wbr> tag stands for word Break.
o The <wbr> element’s purpose is to suggest/hint to the browser where within a word/phrase
would be the most appropriate point for it to be broken (indicated with a hyphen) in the event
that the browser viewport or containing element is reduced in size such that wrapping occurs.
o When the <wbr> element is used inside the <nobr> (no break) element, its purpose is
somewhat different. Rather than hinting at where a word break may occur, it tells the browser
that a word break should occur (simply using a br element inside a nobr would not have any
effect).
o Example:
<nobr>
The wbr element’s purpose is to suggest/hint to the browser where within a word/phrase
would be the most appropriate point <wbr> for it to be broken in the event that the
browser viewport or containing element is reduced in size such that wrapping occurs.
</nobr>
▪ Horizontal Rules:
o The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in
HTML.
o The <hr> tag creates a line from the current position in the document to the right margin and
breaks the line accordingly.
align <hr align="left|center|right"
/>
left
center
right
Left-aligns the horizontal line
Center-aligns the horizontal line
(default)
Right-aligns the horizontal line
size <hr size="pixels" /> Pixels Specifies the height of the horizontal
rules
width <hr width="pixels|%" /> pixels
%
Specifies the width of a the
horizontal rules
color <hr
color=”color_name|hex_num
Color name
Hexadecimal
Specifies the color of a the
horizontal rules

28
ber|rgb_number” /> number
RGB number
noshade <hr noshade=” noshade” /> Noshade Specifies that rule should be
rendered as a solid bar without
shading.
o Example:
✓ <hr align="center" width="400" size="15" color="#00FFFF"/>
✓ <hr align="left" width="700" size="5" color="#00FFFF"/>
✓ <hr align="right" width="800" size="5" color="#00FFFF"/>
▪ <address>
o The address tag specifies information as address, signature and authorship, often at the top or
bottom of a document. Typically, an address is rendered in an italic typeface and may be
indented. It carries an implied paragraph break before and after the text enclosed.
o The <address> tag defines the contact information for the author or owner of a document.
[This way, the reader is able to contact the document's owner.]
o The <address> element is usually added to the header or footer of a webpage.
o Example:
<address>
TMT BCA College<br/>
Athwagate,Surat<br/>
395007
</address>
▪ <blockquote>
o The <blockquote> tag defines a long quotation.
o The BLOCKQUOTE tag is useful for including quotations of large blocks of text.
o A typical rendering would be a slight extra left and right indent and/or italic font. The
blockquote element causes a paragraph break and typically provides space above and below
the quote.
o Example:
<blockquote>

29
The BLOCKQUOTE tag is useful for including quotations of large blocks of text.
It calls them out and separates them as being something other than the surrounding text.
</blockquote>
▪ <pre>
o Any text between the pre tags, including spaces, carriage returns and punctuation will appear
in the browser as it would in a text editor.
o Example:
<pre>
for i = 1 to 10
print i
next i
</pre>
▪ Center:
o All lines of text between the start and end of the <CENTER> tag are centered between the
current left and right margin.
o Example:
<center>This text will be center-aligned.</center>
▪ Comment:
o Comment tags  are used to insert comments in HTML.
o Any text placed between the  tags will not render on the screen allowing comments
to be placed in HTML documents.
▪ Basefont:
o The <basefont> tag specifies a default font-color, font-size, and font-family for all the text in a
document.
color
<basefont
color="color_name|hex_number
|rgb_number"/>
Color name
Hexadecimal
number
RGB number
Specifies the default color for text in
a document

30
face <basefont face="font_family" /> font_family
Specifies the default font for text in a
document
size <basefont size="number" /> number
Specifies the default size of text in a
document.
A number from 1 to 7 that defines
the size of the text. Default value is 3
o Example:
<basefont size="4" color="blue" face="Arial" />
▪ Font:
o The <font> tag is used to set font color, font size, and font family of the text in a document.
color
<font
color="color_name|hex_number
|rgb_number">
Color name
Hexadecimal
number
RGB number
Specifies the color for text
face <font face="font_family"> font_family
Specifies the font for text. If the user
viewing the page doesn’t have the
font installed, they will not be able to
see it, instead they will switch to
default Times New Roman and
option is to choose a few that are
similar in appearance.
size <font size="number">
Number
(pixels)
Specifies the size of text
o Example:
<font color="#9911dd" size="6" face="Times New Roman"> Web Designing</font>
▪ Marquee:
o The HTML <marquee> tag is used for scrolling piece of text or image.
o An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down on webpage depending on the settings.

31
bgcolor
<marquee bgcolor="color
name|hex value|rgb
value" >
Color name
Hexadecimal
number
RGB number
This specifies background color for
the marquee.
width
<marquee width="number
(pixels or %)" >
pixels or %
This specifies the width of the
marquee.
height
<marquee height="number
(pixels or %)" >
pixels or %
This specifies the height of the
marquee.
hspace
<marquee
hspace="number (pixels or
%)" >
pixels or %
This specifies horizontal space
around the marquee.
vspace
<marquee
vspace="number (pixels or
%)">
pixels or %
This specifies vertical space around
the marquee.
behavior
<marquee
behavior=" { scroll |slide |
alternate } ">
scroll
This is the default behavior.
This lets the Text to scroll across the
screen.
The text should start from only one
side and it should scroll completely
to the opposite end and start again
slide
This lets the text move from one end
to the other end and once the text
reaches the other ends it stops
scrolling.
alternate
This lets the Marquee text to bounce
back and forth i.e. Starts from one
end and on reaching opposite end it
moves in the opposite direction.
direction
<marquee
direction=" { left | right |
up | down } " >
It specifies in which direction the text
should scroll.
left Scrolling to the left from the right

32
o Examples:
✓ <marquee > This text will scroll from right to left. </marquee>
✓ <marquee > <img src="img.jpg"/> </marquee>
✓ <marquee width="100%" height="20" bgcolor="aqua" scrollamount="20">
Hello
</marquee>
✓ <marquee height="20%" bgcolor="aqua" direction="right" hspace="60" vspace="80">
TMTBCA
</marquee>
❖ Headings
▪ HTML has 6 levels of heading.
(default)
right Scrolling to the right from the left
up Scrolling to the up from the bottom
down Scrolling to the down from the top
loop
<marquee loop="value
(number of loops)"> number
This specifies how many times to
loop. The default value is INFINITE,
which means that the marquee loops
endlessly.
scrolldelay
<marquee
scrolldelay="number">
milliseconds
(1/1000 of a
second)
500 = half a
second
Specifies the number of milliseconds
between each successive draw of the
marquee text.
i.e. it controls the speed at which text
draw takes place.
(default is 85 milliseconds)
scrollamount
<marquee
scrollamount="pixels”>
pixels
Specifies the number of pixels
between each successive draw of the
marquee text.
i.e. the amount for the text to move
between each draw.
(default is 6 pixels)

33
▪ The <h1> specifies highest level of heading while <h6> specifies the lowest level of headings.
▪ Headings are used to logically organize a page into separate sections for easier comprehension.
Lower level headings in turn subdivide each section.
▪ HTML documents use larger fonts to specify higher level headings.
▪ Each heading style act like a paragraph tag providing an automatic line break and extra line
spacing after the element. The default spacing after a heading is one line.
▪ Example:
<html>
<head>
<title>Headings Demo</title>
</head>
<body>
<h1>This is Heading 1</h1>
</body>
</html>
Output:
❖ <div> tag:
▪ Divisions are a higher level of block formatting, usually reserved for groups of related paragraphs,
or sometimes only a single paragraph.

34
▪ The division tag provides a simple solution for formatting larger sections of a document.
▪ The <div> tag defines a division or section in a page and makes it easy to manage, style, and
manipulate those divisions or sections.
▪ Browsers usually place a line break before and after the div element.
▪ Use the <div> tag to group block-elements to format them with styles.
align
<div align="left |
right | center |
justify">
The align attribute specifies the horizontal
alignment of the content inside a <div>
element.
left Left-align content
right Right-align content
center Center-align content
justify Stretches the lines so that each line has
equal width
Example:
<html>
<body>
<div style="color:#00FF00">
<h3>Header</h3>
<p>Paragraph.</p>
</div>
</body>
</html>
❖ LIST
▪ Lists are easy and effective way to itemize things, such as elements or components.
▪ Words or phrases which need to be set apart from the rest of the body of text can be emphasized
with a bullet or number.
▪ The text of a list entry uses the same style and font as normal text.
▪ HTML support following types of list:
o Unordered List

35
o Ordered List
o Definition List
▪ List item tag <li> is used to itemize element elements of unordered, ordered list, definition and
menu list.
o <li> tag:
The <li> tag defines a list item.
It creates a bullet in front of text and causes all text after it to be indented, either until another
list tag is detected or until the end of the list is reached.
▪ Unordered List
o An unordered list is a collection of related items that have no special order or sequence.
o This list is used where the items are generally of equal importance and do not need to go in any
particular order.
o Each item in the list is marked with a bullet.
o This list is created by using HTML <ul> tag.
o Each item begins with a <li> tag.
o A line space is inserted before and after an unordered list.
o Unordered list may be nested inside unordered list or inside any other type of list.
Attributes:
o Example:
<html>
<body>
<h1> Mobile Operating System</h1>
<ul>
<li> Android </li>
<li> Blckberry </li>
type
<ul
type="disc|circle|square">
The type attribute specifies the kind of marker
to use in the unordered list.
disc A filled circle
square A filled square
circle An unfilled circle

36
<li> iPhone </li>
<li> Windows Phone </li>
</ul>
<h1>Mobile Manufacturers</h1>
<ul type = "square">
<li> Samsung </li>
<li> HTC </li>
<li type = "disc"> Micromax </li>
<li type = "circle"> Apple </li>
</ul>
</body>
</html>
Output:
▪ Ordered List
o In ordered list, list items are marked with numbers. This list is used where the items are in
sequential order. Each item begins with <li> tag.
o Ordered list may be nested inside ordered list or inside any other type of list.
o A line space is automatically inserted.
o Attributes:
start <ol number Specifies the start value of an ordered list

37
start="number">
type
<ol
type="1|a|A|i|I">
Specifies the kind of marker to use in the list
1 Decimal numbers (1, 2, 3, 4)
a
Alphabetically ordered list, lowercase (a, b, c, d, so
on)
A
Alphabetically ordered list, uppercase (A, B, C, D, so
on)
i Roman numbers, lowercase (i, ii, iii, iv, so on)
I Roman numbers, uppercase (I, II, III, IV, so on)
value
<ol
value=”number”>
number
Specifies the list item number to be allocated to
item.
o Example:
<html>
<body>
<ol start="50">
<li>MCA</li>
<li>MBA</li>
<li value="60">MSc</li>
</ol>
</body>
</html>
Output:
▪ Definition List
o This list is used where the items are individual terms paired with their definition. And each
definition is indented and placed one line down from each item. Definition list may be nested
inside definition list or inside any other types of list.
o Definition list have two elements for each item:
✓ A definition term (<dt> …</dt>)

38
✓ A definition definition (<dd> … </dd>)
o Example:
<html>
<body>
<dl>
<dt>JAVASCRIPT</dt>
<dd>This is scripting language.</dd>
<dt>JAVA</dt>
<dd>This is a programming language.</dd>
</dl>
</body>
</html>
Output:
❖ LINKS
▪ Weblinks have two basic components: The Link and the Target.
The link is the text in the main document that refers to another document. The target is the
document to which the link leads.
▪ A hyperlink is a connection to another document or file(video, audio, image) or another section of
the same document. When user clicks the hyperlink, he is taken to the URL specified in the link.
The text or image that provides such linkage is called hypertext, hyperlink or hotspot.
▪ The <a> tag defines an anchor. An anchor can be used in two ways.
o External Navigation
To create a link to another document
o Internal Navigation
To create a bookmark inside a document

39
href <a href=”URL”> URL
HREF is used to specify the target of a link.
Gives the URL of the Web resource to which the
hyperlink should point.
Possible values of URL:
An Absolute URL: Points to another website
A Relative URL: points to a file within a website
An Anchor URL: points to an anchor within a page
name
<a
name=”anchor_name”>
Anchor Name Specifies the name of an anchor
target
<a target="_blank | _self |
_parent | _top |
framename">
Target controls where the new document will be
displayed when the user follow a link.
_blank
Opens the linked document in a new window or
tab
_parent Opens the linked document in the parent frame
_self
Opens the linked document in the same frame as it
was clicked (default)
_top
Opens the linked document in the full body of the
window
framename Opens the linked document in a named frame
title <a title=”text”> Text
This causes current browser to display the text of
the title as a tooltip when the mouse hovers over
them.
accesskey
<a
accesskey=”character”>
Character
The accesskey attribute specifies a shortcut key to
activate/focus an element.
tabindex <a tabindex=”number”> Number Specifies the tabbing order of the element
▪ Example:
✓ <html>
<body>
<a href="/flowers.jpg">Click here to view image... </a>
</body>
</html>

40
Output:
✓ <html>
<body>
<a href="img.html" accesskey="m">Flower</a>
<p> Use Alt + accessKey to access the element with the specified access key.</p>
</body>
</html>
Output:
▪ Creating Bookmark:
o Anchor tag can be used as a marker in the current document to provide a bookmark that can
be directly linked to a larger document having multiple sections. You can place links at the top
of the documents to each section, allowing the user to easily access each section.
o To create an anchor in a document, use the anchor tag with the name attribute.
o To link to the anchor, use the standard link but add the anchor name to the end of URL in the
link. To identify the name as anchor, separate it from the rest of the URL with a pound (#) sign.
o Example:
<html>
<body>
<p><a href="#C4">See also Chapter 4</a></p>
<h2>Chapter 1</h2><p>HTML</p>
<h2>Chapter 2</h2><p>DHTML</p>
<h2>Chapter 3</h2><p>JAVASCRIPT</p>
<h2><a name="C4">Chapter 4</a></h2><p>FRONT PAGE</p>
<h2>Chapter 5</h2><p>CSS</p>
<h2>Chapter 6</h2><p>FLASH</p>

41
</body>
</html>
Output:
▪ Absolute and Relative Link:
o There are two types of links:
✓ Absolute
✓ Relative
Absolute Link:
The URL used in this link provides the full path. These links are called Absolute link because
the URL itself is absolute. i.e. it does not change no matter where the document in which it
appears is kept.
Relative Link:
Relative link does not provide all of the details to the reference page. Hence, its address is
treated as relative to the document where the link appears. Relative link are useful for linking
to other pages on the same website.
Its path generally refers to a resource on the same machine as the current document. Relative
URLs are resolved to full URLs using a base URL.
Directory shortcuts to specify the page:

42
✓ Starting directory with a slash (/) references it as a subdirectory of the root directory.
✓ Starting directory with a dot and a slash (./) references it as a subdirectory of the current
directory.
✓ Starting directory with a double dot and a slash (../) references it as a parent directory to
the current directory.
❖ TABLE
▪ Table is used to resent data in a tabular form.
▪ It is a two dimensional matrix consists of rows and columns.
▪ Basic parts of Table:
o Caption: each table may have an associated caption that provides a short description of the
table purpose.
o Table headings: Table heading label the rows, columns or both.
o Table cells: Table cell may either contain header information or data. Cells may span multiple
rows and columns.
o Table data: The values in the cells.
▪ <table> Tag
o Tables are defined with the <table> … </table> tag.
o The <TABLE> tag is used to generate a row/column matrix within the document.
o A table is divided into rows and each row is divided into data cells. Cells may contain objects
such as text, images, and anchors and so on.
o A simple table structure is like:
<table>
<tr>

43
<td> content  </td>
</tr>
</table>
o The <tr> and </tr> tags are used for representing a row which contain the HTML tags that
define individual cells.
o Table cells can be represented in two ways:
✓ Header cells : for headers that appear over a column of data
✓ Data cells: for the individual entries in the table.
o A table header cell is defined with the <th>and </th> tag pair. The contents of the table header
cells are automatically centered and appear in boldface.
o The data within the cells is defined between <td> and </td> tag. Text in data cells is left
justified by default.
o To give a caption to the table, <caption> </caption> tag is used. It is an optional tag and is
defined within the <table> </table > tag and above the <TR>and <ITR> tag.
o At present, the table HTML elements are:
<table> …</table> The Table delimiter
<caption> ... </caption> Specifies the table Caption
<tr> …</tr> Specify number of rows in a table
<th> …</th> Specifies table header cell
<td> …</td> Specifies table data cells
o Example:
<html>
<body>
<table BORDER="1">
<tr>
<td>BCA</td>
<td>30%</td>
</tr>
<tr>
<td>B.COM</td>
<td>70%</td>

44
</tr>
</table>
</body>
</html>
Output:
Attributes of <table> tag:
align
<table align=”left | center |
right”>
Specifies the alignment of a table according to
surrounding text
left Left-aligns the table
center Right-aligns the table
right Center-aligns the table
bgcolor
<table bgcolor="color name|hex
value|rgb value">
color
name
hex value
rgb value
Specifies the background color for a table
border <table border="pixels"> pixels
This attribute defines the width of the border
around the table in pixels. By default a table
has no border defined.
cellpadding <table cellpadding=”pixels”> pixels
This attribute specifies the space between the
cell wall and the cell content.
cellspacing <table cellspacing=”pixels”> pixels
This attribute defines the amount of space
between the cells in the table.
height
<table
height="pixels or %">
pixels
%
Specifies the height of a table
width
<table
width="pixels or %">
pixels
%
Specifies the width of a table
frame <table frame="value">
The attribute specifies which parts of the
outside table borders that should be visible.

45
void The outside borders are not shown
above
This displays external borders at the top of
the table only.
below
This displays external borders at the bottom
of the table only.
hsides
This displays external borders at the
horizontal sides of the table i.e., at the top and
bottom of the table.
vsides
This displays external borders at both left
and right hand edges of the table.
lhs
This displays external borders at the left hand
edges of the table only.
rhs
This displays external borders at the right
hand edges of the table only.
box
This displays a box around the table (i.e. top,
bottom, left and right hand sides).
rules <table rules="value">
It affects the display of the internal table
borders ("rules").
none This removes all the internal rules.
rows
This displays horizontal borders between all
rows.
Cols
This displays horizontal borders between all
columns.
all This displays all the internal rules.
bordercolor
<table bordercolor="color
name|hex value|rgb value">
color
name
hex value
rgb value
This attribute sets the external border color to
be used for the entire table.
bordercolor
dark
<table bordercolordark="color
name|hex value|rgb value">
color
name
hex value
rgb value
This attribute allows independent, 3D color
control over the lower and right hand borders
of the external border color for the current
table.
bordercolor <table bordercolorlight="color color This attribute allows independent, 3D color

46
light name|hex value|rgb value"> name
hex value
rgb value
control over the upper and top hand borders
of the external border color for the current
table.
o Examples:
✓ <html>
<body>
<table border="1">
<tr>
<td>11</td>
</tr>
<tr>
<td>21</td>
</tr>
<tr>
<td>31</td>
</tr>
</table>
</body>
</html>
Output:
✓ <html>
<body>
<table border="1">
<tr>
<td>11</td>
<td>12</td>

47
<td>13</td>
</tr>
</table>
</body>
</html>
Output:
✓ <html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Nitu Kothari</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers :</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td> Nitu Kothari </td>
</tr>
<tr>
<th>Telephone:</th>

48
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output:
✓ <html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

49
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output:
<colgroup> tag:
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any
<thead>, <tbody>, <tfoot>, and <tr> elements.

50

51
Attributes of <colgroup> tag:
align
<colgroup
align="left | right |
center | justify">
The align attribute specifies the horizontal alignment
of the content in a column group.
justify Stretches the lines so that each line has equal width
valign
<colgroup
valign="top | middle
| bottom |
baseline">
The valign attribute specifies the vertical alignment of
the content in a column group.
top Top-align content
middle Center-align content
bottom Bottom-align content
baseline Align the content to the baseline
span
<colgroup
span="number">
number
The span attribute defines the number of columns a
<colgroup> element should span.
width
<colgroup
width="pixels|%|rel
ative_length">
pixels
%
relative_leng
th
The width attribute specifies the width of a column
group.
<col> tag:
The <col> tag specifies column properties for each column within a <colgroup> element.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell,
for each row.
Attributes of <col> tag:
align
<col align="left |
right | center |
justify">
The align attribute specifies the horizontal alignment
of the content related to a <col> element.

52
valign
<col valign="top |
middle | bottom |
baseline">
The align attribute specifies the vertical alignment of
the content related to a <col> element.
span
<col
span="number">
number
The span attribute defines the number of columns a
<col> element should span.
width
<col
width="pixels|%|rel
ative_length">
pixels
%
relative_leng
th
The width attribute specifies the width of a <col>
element.
<thead>, <tbody> and <tfoot> tags:
The <thead>, <tbody> and <tfoot> tags are used to group header, body and footer content respectively in
an HTML table.
The <thead>, <tbody> and <tfoot> elements are used to specify each part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and
footer. Also, when printing a large table that spans multiple pages, these elements can enable the table
header and footer to be printed at the top and bottom of each page.
Attributes:
Attribute Value Description
align
The align attribute specifies the horizontal alignment of the content inside
the element.

53
valign
This attribute specifies the vertical alignment of the content inside the
element.
<tr> tag:
The <tr> tag defines a row in an HTML table.
Attributes of <tr> tag:
align
<tr align=”left | right
| center | justify”>
This attribute indicates the horizontal alignment of the
cells within a row overriding the default alignment
of heading and table cells.
valign
<tr valign=”top |
middle | bottom”>
This attribute specifies the vertical alignment of the
cells within a row overriding the default alignment of
heading and table cells.
bgcolor
<tr
bgcolor=”color_nam
e | hex_value |
rgb_value”>
color name
hex value
rgb value
Specifies a background color for a table row
bordercolor
<tr bordercolor
=”color_name |
hex_value |
rgb_value”>
color name
hex value
rgb value
This attribute sets the border color to be used for the
table row.

54
bordercolor
dark
<tr
bordercolordark
=”color_name |
hex_value |
rgb_value”>
color name
hex value
rgb value
This attribute allows independent, 3D color control
over the lower and right hand borders of the the
current table row.
bordercolor
light
<tr
bordercolorlight
=”color_name |
hex_value |
rgb_value”>
color name
hex value
rgb value
This attribute allows independent, 3D color control
over the upper and top hand borders of the current
table row.
<td> tag:
The <td> tag defines a standard cell in an HTML table.
Attributes of <td> tag:
Attribute syntax Value Description
align
<td align=”left | right |
center | justify”>
The align attribute specifies the horizontal
alignment of the content in a cell.
justify
Stretches the lines so that each line has equal
width
valign
<td valign=”top | middle
| bottom”>
specifies the vertical alignment of the content in
a cell
bgcolor
<td
bgcolor=”color_name |
hex_value | rgb_value”>
color name
hex value
rgb value
Specifies a background color of a cell
colspan <td colspan="number"> number Specifies the number of columns a cell should

55
span.
The default COLSPAN for any cell is 1.
rowspan
<td
rowspan="number">
number
Specifies the number of rows a cell should span.
The default ROWSPAN for any cell is 1. A span
that extends into rows that were never specified
with a <tr> will be truncated.
height <td height="pixels|%">
pixels
%
Sets the height of a cell
width <td width="pixels|%">
pixels
%
Specifies the width of a cell
nowrap <td nowrap=”nowrap”> nowrap
Specifies that the content inside a cell should not
wrap.
The lines within this cell cannot be broken to fit
the width of the cell.
bordercolor
<td bordercolor
=”color_name |
color name
hex value
rgb value
This attribute sets the border color to be used for
the table cell.
bordercolordark
<td bordercolordark
=”color_name |
color name
hex value
rgb value
control over the lower and right hand borders of
the current table cell.
bordercolorlight
<td bordercolorlight
=”color_name |
color name
hex value
rgb value
control over the upper and top hand borders of
the current table cell.
o Example:
✓ <html>
<body>
<table border="5" height="50%" width=50%">
<tr>
<th rowspan="2" >Production</th>
<td>Wheat</td>
<td>1500000</td>
</tr>

56
<tr>
<td>Cotton</td>
<td>1080000</td>
</tr>
<tr>
<th rowspan="2" >Sales</th>
<td>Wheat</td>
<td>1500000</td>
</tr>
<tr>
<td>Cotton</td>
<td>1050000</td>
</tr>
</table>
</body>
</html>
Output:
✓ <html>
<body>
<table border="5" height="100" width="100">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

57
<tr>
<td colspan="2">4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Output:
<th> tag:
The <th> tag defines a header cell in an HTML table.
Attributes of <th> tag:
The Header cells are identical to data cells in all respects with the exception that header cells are in a
bold FONT and have a default ALIGN=center.
Attribute syntax Value Description
align
<th align=”left | right |
center | justify”>
Specifies the horizontal alignment of the content
in a header cell
justify Stretches the lines so that each line has equal

58
width
valign
<th valign=”top | middle
| bottom”>
specifies the vertical alignment of the content in
a header cell
bgcolor
<th
bgcolor=”color_name |
color name
hex value
rgb value
Specifies a background color of a header cell
colspan <td colspan="number"> number
Specifies the number of columns a header cell
should span.
The default COLSPAN for any cell is 1.
rowspan
<th
rowspan="number">
number
Specifies the number of rows a header cell
should span.
The default ROWSPAN for any cell is 1.
height <th height="pixels|%">
pixels
%
Sets the height of a header cell
width <th width="pixels|%">
pixels
%
Specifies the width of a header cell
nowrap <th nowrap=”nowrap”> nowrap
Specifies that the content inside a header cell
should not wrap.
The lines within this header cell cannot be
broken to fit the width of the cell.
bordercolor
<th bordercolor
=”color_name |
color name
hex value
rgb value
This attribute sets the border color to be used
for the table header cell.
bordercolordark
<th bordercolordark
=”color_name |
color name
hex value
rgb value
control over the lower and right hand borders
of the current table header cell.
bordercolorlight
<th bordercolorlight
=”color_name |
color name
hex value
rgb value
control over the upper and top hand borders of
the current table header cell.

59
<caption> tag:
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
align
<caption align=”left |
right | top | bottom”>
Defines the horizontal alignment of the caption
left Left align
right Right align
center Center align
valign
<caption valign=”top
| bottom”>
Defines the vertical alignment of the caption
top The caption is at the top of the table
bottom The caption is at the bottom of the table
o Example:
<html>
<body>
<table border="2" cellpadding="3" bordercolor="#F52887">
<caption valign="top" align=”center”>Favorite Food</caption>
<tr>
<th>Person</th> <th>Food</th>
</tr>
<tr>
<td>Ping</td> <td>French Toast</td>
</tr>
<tr>
<td>Andy</td> <td>Squirrel</td>
</tr>
</table>
</body>
</html>
Output:

60
❖ Image
▪ The Image element is used to incorporate in-line graphics in HTML document.
▪ Images are inserted into HTML document using the <img> tag.
▪ The <img> tag is a non container tag.
src <img src="URL" /> URL
The SRC attribute specifies the URL of the image to be
embedded.
The SRC attribute value can be a file on the same web
browser as the document or any valid URL pointing to
an image on a different web server.
You can use absolute or relative URL to specify the
location of the image to display.
align
<img align =" { top |
bottom | middle |
left | right | texttop |
absmiddle |
absbottom |
baseline } " />
Specifies the alignment of an image according to
surrounding elements
top Align the image with the top of nearby text or object
bottom Align the image with the bottom of nearby text or object
middle Align the image with the middle of nearby text or object
left Align the image to the left of nearby text or object
right Align the image to the right of nearby text or object
texttop
Aligns the image with the top of the tallest text in the
line
absmiddle Align the middle of text with the middle of the image
absbottom
Align the bottom of the image with the bottom of the
text
baseline
Aligns the bottom of the image with the baseline of the
text
alt <img alt="text" /> text The ALT attribute specifies an alternate text for an

61
(alternative
text)
image, if the image cannot be displayed.
This text is shown to the user if an image is missing or
can’t be downloaded. It is also shown to users who have
disabled images in their browser.
Internet Explorer also uses any ALT text set as a
ToolTip to be displayed when the user’s mouse pauses
over the image.
title <img title="text" />
text
(additional
information
)
Text contained within the title attribute is used to
display additional information.
When user hover over an image with title text, the data
contained within the title attribute pop up.
border
<img
border = "pixels" /> pixels
Specifies the width of the border around an image
This lets the document author control the thickness of
the border around an image displayed. This can be set
to 0 so that if the image is surrounded by <a> elements
the normal link border will not be shown.
height
<img
height = "number
(pixels or %)"
/>
number Specifies the height of an image.
width
<img
width = "number
(pixels or %)"/>
number Specifies the width of an image.
hspace
<img
hspace = "number
(pixels or %)" />
number
Specifies the whitespace on left and right side of an
image
vspace
<img
vspace = "number
(pixels or %)" />
number Specifies the whitespace on top and bottom of an image.
▪ Examples:
✓ <img src="img_tree.jpg" align="top" alt="Rose" title="Flower" border="1" hspace="10"
vspace="10"/>

62
✓ <img src="img7.jpg" width="300" height="300" hspace="100" />
Dreamweaver
▪ Adobe Dreamweaver is a software program for designing web pages, essentially a more fully
featured HTML web and programming editor.
▪ The program provides a WYSIWYG (what you see is what you get) interface to create and edit
web pages.
▪ Dreamweaver supports many markup languages, including HTML, XML, CSS, and JavaScript.
▪ As for human languages, it supports English, Spanish, French, German, Japanese, Chinese
(both simplified and traditional), Italian, Russian, and many more.
▪ Dreamweaver was originally developed and published by
Macromedia in 1997. Adobe purchased Macromedia (which included the rights to
Dreamweaver) in 2005 and continued the development of the program. The many features of
Dreamweaver make it a versatile web editing tool, where it can be used for creating complex
or very simple sites.
❖ DNS (Domain Name System)
▪ The Domain Name System serves as the phone book for the Internet by translating human-friendly
computer hostnames into IP addresses. For example, the domain name www.microsoft.com translates
to the addresses 207.46.130.108. To identify an entity, TCP/IP protocol uses the IP address which
uniquely identifies the connection of host to the Internet. People prefer to use names instead of
address.
▪ The DNS database resides on a hierarchy of special database servers. When client browsers issue
requests involving Internet host names, a piece of software called the DNS resolver first contacts a
DNS server to determine the server's IP address. If the DNS server does not contain the needed
mapping, it will in turn forward the request to a different DNS server at the next higher level in the
hierarchy. After potentially several forwarding and delegation messages are sent within the DNS
hierarchy, the IP address for the given host eventually arrives at the resolver, that in turn completes
the request over Internet Protocol.

63
▪ Internet domain names are organized by their levels, with the higher levels on the right. For example,
foe the domain www.twenty.net the top level domain is “net”, the second level domain is “twenty.net”,
and the third level domain is www.twenty.net”.
▪ The domain name space is divided into three different sections: generic domains, country domains,
and inverse domain.
▪ Generic Domains
It defines the registered hosts according to their generic behavior.
Label Description
Com Commercial Organizations
Edu Educational institutions
Gov Government institutions
Info Information service providers
Int International Organizations
Mil Military groups
museum Museum & other nonprofit organizations
Net Network Support centers
Org Nonprofit Organizations
▪ Country Domain
Each country in the world has its own top-level internet domain with a unique alphabetic designatiom
A few countries and example domain are shown below.
Label Country
.in India
.at Austria
.au Australia
.ca Canada
.ch Switzerland
.us United States
▪ Inverse Domain

64
The inverse domain is used for mapping an address to a name. When the server has received a request
from the client, and the server contains the files of only authorized clients. To determine whether the
client is on the authorized list or not, it sends a query to the DNS server and ask for mapping an
address to the name.
❖ Computer Network and its Types
▪ A computer network is a group of computers connected with each other through a
transmission medium such as cable, wire etc.
▪ Types of Computer Network
▪ There are mainly three types of computer networks based on their size:
1. Local Area Network (LAN)
2. Metropolitan Area Network (MAN)
3. Wide area network (WAN)
1. Local Area Network (LAN)
▪ Local area network is a group of computers connected with each other in a small places
such as school, hospital, apartment etc.
▪ LAN is secure because there is no outside connection with the local area network thus the
data which is shared is safe on the local area network and can’t be accessed outside.
▪ LAN due to their small size are considerably faster, their speed can range anywhere from
100 to 100Mbps.
▪ LANs are not limited to wire connection; there is a new evolution to the LANs that allows
local area network to work on a wireless connection.
2. Metropolitan Area Network (MAN)
▪ MAN network covers larger area by connections LANs to a larger network of computers.

65
▪ In Metropolitan area network various Local area networks are connected with each other
through telephone lines.
▪ The size of the Metropolitan area network is larger than LANs and smaller than
WANs(wide area networks), a MANs covers the larger area of a city or town.
3. Wide area network (WAN)
▪ Wide area network provides long distance transmission of data.
▪ The size of the WAN is larger than LAN and MAN. A WAN can cover country, continent or
even a whole world.
▪ Internet connection is an example of WAN. Other examples of WAN are mobile broadband
connections such as 3G, 4G etc.

HTML FULL DETAIL DOCUMENT WITH ALL SUB-TOPIC

More Related Content

Similar to HTML FULL DETAIL DOCUMENT WITH ALL SUB-TOPIC (20)

Recently uploaded (20)

HTML FULL DETAIL DOCUMENT WITH ALL SUB-TOPIC