INTERNET PROGRAMMING

INTERNET
The Internet is a huge collection of computers connected in a communications network.
These computers are of every imaginable size, configuration, and manufacturer. In fact, some of
the devices connected to the Internet—such as plotters and printers—are not computers at all.

The innovation that allows all of these diverse devices to communicate with each other is a single,
low-level protocol named Transmission Control Protocol/Internet Protocol (TCP/IP). TCP/IP
became the standard for computer network connections in 1982. It can be used directly to allow
a program on one computer to communicate with a program on another computer via the Internet.
In most cases, however, a higher-level protocol runs on top of TCP/IP. Nevertheless, it is TCP/IP
that provides the low-level interface that allows most computers (and other devices) connected to
the Internet to appear exactly the same. One node on this local network is physically connected
to the Internet. So, the Internet is actually a network of networks, rather than a network of
computers.

Internet Protocol Addresses: For people, Internet nodes are identified by names; for computers,
they are identified by numeric addresses. This relationship exactly parallels the one between a
variable name in a program, which is for people, and the variable’s numeric memory address,
which is for the machine. The Internet Protocol (IP) address of a machine connected to the Internet
is a unique 32-bit number. IP addresses usually are written (and thought of) as four 8-bit numbers,
separated by periods. The four parts are separately used by Internet-routing computers to decide
where a message must go next to get to its destination.

Domain Names: Because people have difficulty dealing with and remembering numbers,
machines on the Internet also have textual names. These names begin with the name of the
host machine, followed by progressively larger enclosing collections of machines, called
domains. There may be two, three, or more domain names. The first domain name, which appears
immediately to the right of the host name, is the domain of which the host is a part. The second
domain name gives the domain of which the first domain is a part. The last domain name identifies
the type of organization in which the host resides, which is the largest domain in the site’s name.

For organizations in the United States, edu is the extension for educational institutions, com
specifies a company, gov is used for the U.S. government, and org is used for many other kinds
of organizations. In other countries, the largest domain is often an abbreviation for the country—
for example, se is used for Sweden, and kz is used for Kazakhstan.

Consider this sample address:

movies.marxbros.comedy.com

is a part of comedy’s domain, which is a part of the com domain. The hostname and all of the
domain names are together called a fully qualified domain name. Because IP addresses are the
addresses used internally by the Internet, the fully qualified domain name of the destination for a
message, which is what is given by a browser user, must be converted to an IP address before the
message can be transmitted over the Internet to the destination. These conversions are done by
software systems called name servers, which implement the Domain Name System (DNS).

ANITHA N 1
INTERNET PROGRAMMING

Name servers serve a collection of machines on the Internet and are operated by organizations
that are responsible for the part of the Internet to which those machines are connected. All
document requests from browsers are routed to the nearest name server. If the name server can
convert the fully qualified domain name to an IP address, it does so. If it cannot, the name server
sends the fully qualified domain name to another name server for conversion.

Like IP addresses, fully qualified domain names must be unique. Figure 1shows how fully
qualified domain names requested by a browser are translated into IPs before they are routed to
the appropriate Web server. One way to determine the IP address of a Web site is by using telnet
on the fully qualified domain name

THE WORLD WIDE WEB

In 1989, a small group of people led by Tim Berners-Lee at CERN (Conseil Européen pour
la Recherche Nucléaire, or European Organization for Particle Physics) proposed a new protocol
for the Internet, as well as a system of document access to use it.3 The intent of this new system,
which the group named the World Wide Web, was to allow scientists around the world to use the
Internet to exchange documents describing their work.

The proposed new system was designed to allow a user anywhere on the Internet to search for
and retrieve documents from databases on any number of different document-serving computers
connected to the Internet. By late 1990, the basic ideas for the new system had been fully
developed and implemented on a NeXT computer at CERN. In 1991, the system was ported to
other computer platforms and released to the rest of the world.

For the form of its documents, the new system used hypertext, which is text with embedded links
to text in other documents to allow nonsequential browsing of textual material. The idea of
hypertext had been developed earlier and had appeared in Xerox’s NoteCards and Apple’s
HyperCard in the mid-1980s. From here on, we will refer to the World Wide Web simply as “the
Web.” The units of information on the Web have been referred to by several different names;
among them, the most common are pages, documents, and resources.

Perhaps the best of these is documents, although that seems to imply only text. Pages is widely
used, but it is misleading in that Web units of information often have more than one of the kind
of pages that make up printed media.
ANITHA N 2
INTERNET PROGRAMMING

There is some merit to calling these units resources, because that covers the possibility of
nontextual information. This text will use documents and pages more or less interchangeably, but
we prefer documents in most situations. Documents are sometimes just text, usually with
embedded links to other documents, but they often also include images, sound recordings, or other
kinds of media. When a document contains nontextual information, it is called hypermedia.

Web or Internet? It is important to understand that the Internet and the Web are not the same
thing. The Internet is a collection of computers and other devices connected by equipment that
allows them to communicate with each other. The Web is a collection of software and protocols
that has been installed on most, if not all, of the computers on the Internet. Some of these
computers run Web servers, which provide documents, but most run Web clients, or browsers,
which request documents from servers and display them to users. The Internet was quite useful
before the Web was developed, and it is still useful without it. However, most users of the Internet
now use it through the Web

CLIENT- SERVER ARCHITECTURE

Client-Server Architecture is a network model that allows communication and data exchange
between different applications over a single or multiple servers.This model divides the system
into two parts: the client side and the server side.

a) Client: An application that requests services from the server, such as data retrieval, storage,
calculations, or other functions.

b) Server: An application that processes client requests, sends responses, or performs specified
actions. The server and client may reside on the same machine or different devices across the
network. Effective Communication occurs via predefined protocols like HTTP, FTP, or SMTP.

Client-Server Architecture is widely used in applications such as email, web browsing, online
banking, and e-commerce.

Components of Client-Server Architecture : Client-Server Architecture depends on three main

components that need to work together for it to function. These components are:

ANITHA N 3
INTERNET PROGRAMMING

a) Client: A client device or software that requests services from a server. Clients are consumer-
facing and often include web browsers, mobile applications, or desktop applications that people
can interact with. They communicate with the server to retrieve data, make transactions, or
perform other tasks by delegating that responsibility to the server.

b) Server: A server is a computer or program that offers services or solutions to clients over a
network. Servers handle processing of client requests, which includes tasks like file storage,
database access, and application hosting, along with backend activities like computations, data
management, and business logic, significantly reducing what clients need to handle.

c) Network: This serves as the channel through which clients and servers are connected for data
transfer between them. Networks range from local area networks (LAN) within a single building
to wide area networks (WAN) and the internet, which can span countries. It acts as the
intermediary, facilitating the interchange of requests and responses between the clients and
servers, which influences the speed and reliability of these interactions.

d) Protocol: Protocols are rules that define how data is exchanged between clients and servers,
ensuring communication is orderly, secure, and understandable. Common protocols include
HTTP or HTTPS for web services, FTP for file transfers, and SMTP for email. They help bridge
communication between different systems, independent of their technology stack.

e) Middleware: Middleware acts as a bridge between client-side and server-side code, enabling
them to communicate. It performs tasks such as authentication, load balancing, data translation,
and message queuing, simplifying interactions within the Client-Server model by enhancing
transaction speed, scalability, and integration.

f) Application Logic: Application logic is the code and processes that determine how a server
responds to client requests, involving business rules, Big Data Processing, and workflows on the
server side. It ensures the server correctly interprets client requests, performs necessary
calculations or data manipulations, and delivers appropriate responses.

Characteristics of Client-Server Architecture: Client-Server architecture has distinct

characteristics:

ANITHA N 4
INTERNET PROGRAMMING

a) The client and server machines can differ greatly in hardware and software requirements and
may come from different vendors.

b) The network can scale horizontally by adding more client machines or vertically by upgrading
to more powerful servers or a multi-server configuration.

c) A single server can offer multiple services simultaneously, though each service must run its
own server program.

d) Both client and server applications interact directly with a transport layer protocol, establishing
communication to send and receive information.

e) Both client and server computers require a full stack of protocols, where the transport protocol
utilises lower-layer protocols to send and receive individual messages.

Client-Server Architecture Work: The basic steps of how Client-Server Architecture works
are:

1) In the first step, the client sends a request to the server using the network medium. The request
can be a query, a command, or a message.

2) In the second step, the server receives the request and processes it according to its logic and
data. The server may access its own resources or other servers to fulfil the request.

3) In the third step, the server sends a response back to the client using the network medium. The
response can be Data, an acknowledgement, or an error message.

4) Lastly, the client receives the response and displays it to the user or performs further actions
based on it.

Examples of Client-Server Architecture : You might be surprised at how often you encounter
Client-Server Architecture in everyday life. Here are three common examples:

1) Email Servers: Email has evolved into the primary communication method for businesses due
to its speed and convenience. Various server components work together to deliver emails between
users across different mail servers.

2) File Servers: When saving documents on services like Google Docs or Microsoft Office,
you're interacting with file servers. These servers store data centrally and allow multiple clients
to access it.

3) Web Servers: These high-powered servers host websites, which web clients access through
DNS or an IP address.

Here's a simplified process:

ANITHA N 5
INTERNET PROGRAMMING

a) A user enters a URL in the browser.

b) The browser requests the IP address from the Domain Name System (DNS) .

c) The DNS server provides the IP address to the browser.

d) The browser sends an HTTPS or HTTP request to the web server.

e) The server sends back the requested files.

f) The user retrieves the files, and the process continues as needed.

Types of Client-Server Architecture: There are different types of Client-Server Architecture,

depending on how many tiers or layers are involved in the communication process. Some of the
common types are:

1) One-tier Architecture : A self-contained application on a single platform. In one-tier

architecture, the client, server, and database are all on the same machine. The client handles user
interaction and business logic, the server provides services like data storage and processing, and
the database manages data. While simple and popular for small apps, this architecture is rarely
used in production because it doesn't meet most system requirements.

2) Two-tier Architecture: This basic Client-Server Architecture involves direct communication

between the client and server without an intermediate layer. The client manages the User Interface
(UI) and business logic, while the server handles data storage and processing. An example is a
web browser requesting pages from a web server, which responds with HTML files. It's easy to
implement but has drawbacks like low scalability, high network traffic, and security risks.

3) Three-tier Architecture: A more complex client-server setup with an intermediate layer

(usually middleware or an application server) that handles business logic, acting as a bridge
between the client and server. The client deals with the user interface (UI), while the server
manages data storage. An example is an online banking system where the client is a web browser,
the middleware checks transactions, and the server stores account data. This architecture
improves scalability, performance, and security but increases complexity and cost.

ANITHA N 6
INTERNET PROGRAMMING

4) N-tier Architecture

A more flexible Client-Server Architecture with more than three tiers, allowing greater
scalability, flexibility, and modularity. Each tier can be distributed across different machines or
networks and updated independently. An example is an e-commerce system with a web browser
displaying the product catalog, a web server handling HTTP requests, an application server
processing business logic, and a database storing product information. While suitable for complex
systems, it requires more resources and management.

WEB BROWSER
When two computers communicate over some network, in many cases one acts as a client
and the other as a server. The client initiates the communication, which is often a request for
information stored on the server, which then sends that information back to the client. The Web,
as well as many other systems, operates in this client-server configuration. Documents provided
by servers on the Web are requested by browsers, which are programs running on client machines.
They are called browsers because they allow the user to browse the resources available on servers.
The first browsers were text based—they were not capable of displaying graphic
information, nor did they have a graphical user interface. This limitation effectively constrained
the growth of the Web. In early 1993, things changed with the release of Mosaic, the first browser
with a graphical user interface. Mosaic was developed at the National Center for Supercomputer
Applications (NCSA) at the University of Illinois. Mosaic’s interface provided convenient access
to the Web for users who were neither scientists nor software developers.
The first release of Mosaic ran on UNIX systems using the X Window system. By late
1993, versions of Mosaic for Apple Macintosh and Microsoft Windows systems had been
released. Finally, users of the computers connected to the Internet around the world had a
powerful way to access anything on the Web anywhere in the world. The result of this power and
convenience was an explosive growth in Web usage.

WEB SERVER
Web servers are programs that provide documents to requesting browsers. Servers are slave
programs: They act only when requests are made to them by browsers running on other computers
on the Internet. The most commonly used Web servers are Apache, which has been implemented
for a variety of computer platforms, and Microsoft’s Internet Information Server (IIS), which runs
under Windows operating systems.
ANITHA N 7
INTERNET PROGRAMMING

WEB PROTOCOLS
Protocol: A protocol is a set of predefined rules that handle how data is exchanged
between computers over the Internet. It ensures that devices can communicate in a structured,
reliable, and secure manner. In essence, protocols dictate how data is sent, received, formatted,
and processed.
While there are over 200 recognized protocols in use today across various domains like
networking, security, and applications, more than 90% of internet communication relies on a
few key protocols—HTTP, HTTPS, TCP/IP, FTP, and DNS—commonly known as web
protocols. Without these protocols, devices wouldn't be able to understand each other, rendering
online communication impossible.
• DNS Protocol translates the domain name into an IP address.
• TCP/IP Protocol manages the routing and delivery of data.
• HTTP/HTTPS Protocol handles the actual exchange of webpage content.

What is HTTP?
When a user enters a website URL, the client sends an HTTP request to the server asking for
the webpage or specific data. The server then processes this request and sends back an HTTP
response containing the required content. This entire exchange happens over a TCP
(Transmission Control Protocol) connection, which ensures that the data is sent reliably and in
the correct order. HTTP is the communication protocol that makes this client-server interaction
possible, allowing users to access web content.

Characteristics of HTTP
• HTTP is IP based communication protocol that is used to deliver data from server to client
or vice-versa.
• Any type of content can be exchanged as long as the server and client are compatible with
it.
• It is a request and response protocol based on client and server requirements.

HTTP Request
HTTP request is a kind of message a client (in most cases, a web browser) sends to the server
demanding some specific resources. It comprises of several elements like the request method
(GET, POST and etc. ), the headers and occasionally the body carrying the data. This is the
request part where the client outlines a request to the server and what they want.

ANITHA N 8
INTERNET PROGRAMMING

HTTP Response
Http response is a message sent by the server to the client in response to an Http request. In
simple terms, it has status code that describes the result of a request; header, which is
information about the response; and the body, which is the actual response or an error message

How Does the HTTP Protocol Work?

This means that the HTTP protocol uses a forms of a request and response operational mode.
When a client wants to retrieve information, it uses http request to the servers as shown in the
following stages. The request is received by the server and in the form of an HTTP response the
server returns the data which the client requested or an error message. This takes place over the
internet using port 80 by default, to assist in the identification of this protocol it is often referred
to as the http or the hip protocol.

What is HTTPS?
HTTPS stands for Hyper Text Transfer Protocol Secure. HTTP Secure (HTTPS), could be a
combination of the Hypertext Transfer Protocol with the SSL/TLS convention to supply
encrypted communication and secure distinguishing proof of an arranged web server. HTTPS
is more secure than HTTP because HTTPS is certified by the SSL(Secure Socket Layer).
Whatever website you are visiting on the internet, if its URL is HTTP, then that website is not
secure.

Characteristics of HTTPS
• HTTPS encrypts all message substance, including the HTTP headers and the
request/response data. The verification perspective of HTTPS requires a trusted third
party to sign server-side digital certificates.
• HTTPS is presently utilized more frequently by web clients than the first non-secure
HTTP, fundamentally to ensure page genuineness on all sorts of websites, secure accounts
and to keep client communications.
In short, both of these are protocols using which the information of a particular website is
exchanged between the Web Server and Web Browser. But there are some differences between
these two. A concise difference between HTTP and HTTPS is that HTTPS is much more secure
compared to HTTP.

How Does the HTTPS Protocol Work: HTTPS can be said to be similar to the HTTP only
that it also provides a level of security. It first creates a connection between the client and server

ANITHA N 9
INTERNET PROGRAMMING

over SSL/TLS, which enhances security by encrypting the Client and server communication.
When a client makes a request for a resource using the https then the server and the client agree
on the encryption keys that will be used in encrypting the data that will be transmitted in that
particular session. This makes sure that data being exchanged between them is encrypted and
coded hence cannot be intercepted.

HTTP and HTTPS are protocols that are used in the web to transfer data. HTTPS is more secure
since it is encrypted and authenticated. HTTP is recommended for use in delivering non-
sensitive information and is adequate for this job, while HTTPS is important in securing online
transactions and the information of the user. With the emergence of new technologies the usage
of the HTTPS protocol is expected to be the standard for secure browsing.

OVERVIEW OF CLIENT SIDE AND SERVER-SIDE TECHNOLOGIES

In a website, the side where the user can view the content and perform any action is known
as the client side, whereas the server side, or backend, refers to the area hidden from users and in
charge of storing and browsing data. This is general knowledge that even non-techies are aware
of. However, if you want to be a software developer, you need to understand the more technical
parts of both the client and server sides, which is what this article is about. So let us now look at
the distinctions between the client and server sides.

Client-Side Development
Client-side development (front end) of programs run on the client’s or user’s device. Client-side
developers work on the parts of a website with which the user can interact. Front-end development
aims to produce visually appealing websites that are visually appealing and catch the interest of
consumers.
Client-side developers are in charge of a variety of tasks, including:
• Designing website layouts
• Creating user interfaces
• Form validation is being added.
• Including visual aspects such as colours and typefaces

Web designers, UI/UX designers, and full-stack developers are typically in charge of creating
interactive and user-friendly client-side designs. Developers on the client-side are often fluent in
the following programming languages.

• HTML – Hypertext Markup Language, or HTML, is a markup language that is the de

facto standard for creating websites. HTML creates the framework of a website and renders
it in a browser.
• CSS – Developers can add visual design components to an HTML-coded website using
CSS, often called Cascading Style Sheets. To make their websites appear visually
appealing on customers’ devices, developers can employ CSS.
• JavaScript – JavaScript is a scripting language that programmers can use for various
tasks, including creating websites and web apps. Developers can use JavaScript to create
dynamic, interactive web pages.

ANITHA N 10
INTERNET PROGRAMMING

Server-Side Development
Server-side development refers to the programming that takes place on a server. This refers to
databases and other programs that impact the performance and speed of websites. Because web
browsers, or clients, communicate with web servers to retrieve information, server-side
programming is critical.
Server-side developers are responsible for a range of duties, including the following:
• dynamic website coding
• the development of web applications
• connecting databases and websites altogether

Server-side development is generally done by software developers, database administrators, and

web developers. Normally, server-side developers must be skilled in several languages. Server-
side developers are often proficient in the following languages.

• Java – Java is an object-oriented programming language that programmers can use for
several tasks, such as creating software and applications. One of the most widely used
server-side programming languages is Java.
• Python – Python is an object-oriented, all-purpose programming language that
programmers can use for creating operating systems, web applications, and other things.
Data research, finance, computers, and other disciplines all use Python.
• SQL – SQL (Structured Query Language) is the industry-standard language for
interfacing with databases. Developers can use SQL to manipulate data in databases, such
as changing, retrieving, and removing data.

What is the Difference Between the Client Side and Server Side?

1 Client-Side and Server-Side Rendering

Rendering is a web development technique that converts website code into interactive pages
people see when they visit a website. The time it takes to load pages is greatly reduced by
rendering, and users are provided with a neat and fully loaded website before the webpage is fully
loaded.

Client-Side Rendering: Client-Side Rendering (CSR) is a rendering method in which the browser
processes an access request, and only the JavaScript file is used to produce the HTML content.
The server receives the access command data and responds with a straightforward HTML
document, including the JavaScript data necessary to load the full website. CSR greatly shortens
the duration of the page loading. Because it lessens the demand on their servers, it is also the less
expensive choice for the website owner.

Server-Side Rendering: Server-side rendering (SSR) is how a website’s JavaScript is rendered on

the website’s server. When a user visits a website, the information in the request is transmitted
directly to the server, which responds with a file containing the full HTML code. The website
will be fully loaded based on this content. The server generates a page from the HTML code and
the user’s access data who is visiting the site using this way. Because JavaScript is rendered on
the server, search engine bots and humans benefit from a speedier page experience. This avoids
crawl budget difficulties caused by crawl speed.
ANITHA N 11
INTERNET PROGRAMMING

2 Client-Side and Server-Side Scripting

A scripting language is a computer language that is interpreted individually at runtime
rather than requiring the compilation stage. Applications for the web are written in scripting
languages. Both the client-side and the server-side use it. Client-side scripting languages include
JavaScript, AJAX, jQuery, and PHP. Server-side scripting languages include JavaScript, PHP,
Perl, and others.

Client-Side Scripting: Web browsers carry out scripting on the client-side. When browsers
contain full code, it is used. When running directly on browsers, source code is transferred over
the internet from a web server to a user’s machine. Additionally, it is utilised for user event
functionality and validations. Client-side scripting enables increased interaction and typically
performs many tasks without requiring the user’s input.
It cannot, in essence, connect to databases on a web server. These scripts are unable to access the
web browser’s file system. Pages are modified based on the user’s preferences.

Server-Side Scripting: Web servers carry out server-side scripting. They mostly serve to produce
dynamic pages. Additionally, it has access to the web server’s file system. A web server is a
programming language-based server-side environment. Scripts can be developed in any of the
available server-side scripting languages. It retrieves and generates material for dynamic pages.
It is used to require the installation of plugins. Load times are generally faster in this case than in
client-side scripting. When a user or client requests pages, the server sends them.

The Bottom Line

In web development, client-side programming and server-side programming are the basic
languages that every developer should have strong knowledge of. We hope you understood the
differences between client-side and server-side development and the rendering and scripting
differences.

ORIGINS AND EVOLUTION OF HTML AND XHTML

HTML is a markup language, which means it is used to mark parts of documents to indicate
how they should appear, in print or on a display.1 HTML is defined with the meta-markup
language,2 Standard Generalized Markup Language (SGML), which is an International Standards
Organization (ISO) standard notation for describing information-formatting languages.

The original intent of HTML was different from those of other such languages, which dictate all
of the presentation details of text, such as font style, size, and color. Rather, HTML was designed
to specify document structure at a higher and more abstract level, necessary because HTML-
specified documents had to be displayable on a variety of computer systems using different
browsers. The appearance of style sheets that could be used with HTML in the late 1990s
advanced its capabilities closer to those of other information-formatting languages by providing
ways to include the specification of presentation details.

1.1 Versions of HTML and XHTML

The original version of HTML was designed in conjunction with the structure of the Web
and the first browser at Conseil Européen pour la Recherche Nucléaire (CERN), or European

ANITHA N 12
INTERNET PROGRAMMING

Laboratory for Particle Physics. Use of the Web began its meteoric rise in 1993 with the release
of MOSAIC, the first graphical Web browser. Not long after MOSAIC was commercialized and
marketed by Netscape, the company founded by the designers of MOSAIC, Microsoft began
developing its browser, Internet Explorer (IE)

In late 1994, Tim Berners-Lee, who developed the initial version of HTML, started the World
Wide Web Consortium (W3C), whose primary purpose was to develop and distribute standards
for Web technologies, starting with HTML. The first HTML standard, HTML 2.0, was released
in late 1995. It was followed by HTML 3.2 in early 1997. The HTML 4.0 specification was
published in late 1997. The 4.01 version of HTML, which is the latest completed standard version,
was approved by W3C in late 1999. The appearance of style sheets (in 1997) that could be used
with HTML made some features of earlier versions of HTML obsolete. There are two
fundamental problems with HTML 4.01.

First, it specifies loose syntax rules. These permit many variations of document forms which may
be interpreted differently by different browsers. As a result of the lax syntax rules, HTML
documents naturally have been haphazardly written. By some estimates, 99 percent of the HTML
documents served on the Web contain errors. The second problem with HTML is that its
specification does not define how a user agent (an HTML processor, most often a browser) is to
recover when erroneous code is encountered. Consequently, every browser uses its own variation
of error recovery.

XML is an alternative to SGML. It was designed to describe data and it has strict syntax rules.
The XML specification requires that XML processors not accept XML documents with any
errors. XHTML 1.0, which was approved in early 2000, is a redefinition of HTML 4.01 using
XML. XHTML 1.0 is actually three standards: Strict, Transitional, and Frameset.

Strict standard requires all of the syntax rules of XHTML 1.0 be followed. The Transitional
standard allows deprecated features of XHTML 1.0 to be included. The Frameset standard allows
the collection of frame elements and attributes to be included, although they have been
deprecated. The XHTML 1.1 standard was recommended by W3C in May 2001. This standard,
primarily a modularization of XHTML 1.0, drops some of the features of its predecessor—most
notably, frames. The XHTML 1.0 specification addresses one of the problems of HTML 4.01 by
providing complete rules stating what is and what is not syntactically acceptable. Furthermore, it
specifies that XHTML documents must be served with the application/xhmtl+xml MIME type

ANITHA N 13
INTERNET PROGRAMMING

HTML XHTML HTML

HTML or HyperText XHTML (Extensible HyperText
Markup Language is the Markup Language) is a family of
main markup language for XML markup languages that mirror
creating web pages and or extend versions of the widely used
other information that can Hypertext Markup Language
be displayed in a web (HTML), the language in which web
browser. pages are written.
Filename extension .html, .htm .xhtml, .xht, .xml, .html, .htm
text/html application/xhtml+xml

Internet media type

Developed by W3C & WHATWG World Wide Web Consortium
Type of format Document file format Markup language
Extended from SGML XML, HTML
Stands for HyperText Markup Extensible HyperText Markup
Language Language

Application Application of Standard Application of XML

Generalized Markup
Language (SGML).
Function Web pages are written in Extended version of HTML that is
HTML. stricter and XML-based.

Nature Flexible framework Restrictive subset of XML and needs

requiring lenient HTML- to be parsed with standard XML
specific parser. parsers.
Origin Proposed by Tim Berners- World Wide Web Consortium
Lee in 1987. Recommendation in 2000.
Versions HTML 2, HTML 3.2, XHTML 1, XHTML 1.1, XHTML 2,
HTML 4.0, HTML 5. XHTML 5.

Basic Syntax
The fundamental syntactic units of HTML are called tags. In general, tags are used to
specify categories of content. For each kind of tag, a browser has default presentation
specifications for the specified content. The syntax of a tag is the tag’s name surrounded by
angle brackets (< and >). Tag names must be written in all lowercase letters. Most tags appear
in pairs: an opening tag and a closing tag. The name of a closing tag, when one is required, is
the name of its corresponding opening tag with a slash attached to the beginning. For example,
if the tag’s name is p, its closing tag is </p> Whatever appears between a tag and its closing tag
is the content of the tag.

The opening tag and its closing tag together specify a container for the content they enclose.The
container and its content together are called an element. For example, consider the following
element:
ANITHA N 14
INTERNET PROGRAMMING

<p>This is simple stuff.</p>

Comments in programs increase the readability of those programs. Comments in HTML have
the same purpose. They are written in HTML in the following form:
<!—anything which you want to comment-->

Standard HTML Document Structure

The first line of every HTML document is a DOCTYPE command, which specifies the
particular SGML document-type definition (DTD) with which the document complies. For
HTML, this declaration is simply the following:

<!DOCTYPE html>

An HTML document must include the four tags <html>, <head>, <title>, and <body>. The
<html> tag identifies the root element of the document. So, HTML documents always have an
<html> tag following the DOCTYPE command and they always end with the closing html tag,
</html>. The html element includes an attribute, lang, which specifies the language in which
the document is written, as shown in the following element:
<html lang = "en">

In this example, the language is specified as "en", which means English.

An HTML document consists of two parts, named the head and the body. The head element
provides information about the document but does not provide its content. The head element
always contains two simple elements, a title element and a meta element.

The meta element is used to provide additional information about a document. The meta element
has no content; rather, all of the information provided is specified with attributes. At a minimum,
the meta tag specifies the character set used to write the document. The most popular
international character set used for the Web is the 8-bit Unicode Transformation Format (UTF-
8). This character set uses from one to six bytes to represent a character, but is backward
compatible with the ASCII character set. <meta charset = "utf-8" />

The content of the title element is displayed by the browser at the top of its display window,
usually in the browser window’s title bar. The body of a document provides the content of the
document. Following is a skeletal document that illustrates the basic structure:

<!DOCTYPE html><!-- File name and document purpose --><html lang = "en">
<head>
<title> A title for the document </title>
<meta charset = "utf-8" />
...</head>
<body>
...
</body>
</html>

ANITHA N 15
INTERNET PROGRAMMING

HTML ELEMENT
An HTML element is a fundamental component of an HTML document that can contain
data to display on the webpage, such as text, image, link, or sometimes nothing. An HTML
element includes an opening tag, content, and a closing tag, where the opening tag may also
include attributes.
An HTML element includes:
• Opening Tag: An opening tag specifies the beginning of the element and may include
multiple attributes.
• Content: The content part includes the information to be displayed or processed within
an element.
• Closing Tag: A closing tag marks the end of the element (A closing tag may be optional
for some elements).
An HTML document consists of a tree of HTML elements, and they define the content and
layout of a webpage, like how and what content should display in the different sections of a
webpage.
HTML Element Structure
The following image demonstrates the structure of an element, like how an HTML element is
written with the opening and closing tags:

Elements vs. Tags: What's the Real Difference?

This is the most common point of confusion for beginners. Here's a simple way to think about
it:
• An HTML Tag is just the opening <p> or closing </p> part. They are the instructions.
• An HTML Element is the entire thing: the opening tag, the content inside, and the closing
tag.

HTML ATTRIBUTES
HTML attributes are special words that provide additional information to an HTML
element. Attributes are placed inside the element's opening tag, and they are used to configure
or adjust the element's behaviour. All attributes are made up of two parts: a name and a value −

Name: The attribute name is the keyword, also known as the attribute identifier, which defines
a specific characteristic for the element in which it is using.
ANITHA N 16
INTERNET PROGRAMMING

For example, the paragraph <p> element (in the below-given example) has an attribute "align",
which defines the alignment of the paragraph on the page.

Value: The attribute value is the data or information that defines the value to be set for that
attribute. The value is assigned within the double quotes. For example, "left", "center", or "right"
can be assigned to the "align" attribute with the paragraph tag (as shown in the below example).
Below is the syntax of an element HTML having attribute –
<tag_name attribute="Value">...</tag_name>

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you should follow while
using attributes with HTML elements:
• Attributes are optional; you can use them to provide additional information about an
HTML element.
• Attributes have name and value pairs, but some of the attributes do not require any value;
those are known as Boolean attributes.
• An HTML element can have multiple attributes, and they should be separated by spaces.
• Attributes should always be written with the opening tag.
• All HTML elements can have attributes except a few like <head>, <title>, <script>, etc.
• W3C recommends using attributes in lowercase and keeping the value in quotes.

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all)
are −

The id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an element −
• If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
• If you have two elements of the same name within a Web page (or style sheet), you can
use the id attribute to distinguish between elements that have the same name.
We are using the id attribute to distinguish between two paragraph elements −
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
</head>
<body>
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
</body>
</html>

ANITHA N 17
INTERNET PROGRAMMING

The title Attribute

The title attribute gives a suggested title for the element. The syntax for the title attribute is
similar as explained for id attribute − The behavior of this attribute will depend upon the
element that carries it, although it is often displayed as a tooltip when the cursor comes over the
element or while the element is loading.

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
On executing the above example, it will display the heading "Titled Heading Tag Example". If
you bring your cursor over it, you will see that whatever title you used in your code is coming
out as a tooltip of the cursor.

The class Attribute

The class attribute specifies one or more CSS classes for an HTML element. Multiple classes
can be used on a single element with this attribute. The value of this attribute is a space-
separated list of class names if you are specifying multiple classes.

Example
class="className1 className2 className3"

The style Attribute

The style attribute allows you to write inline CSS rules for an element.

Example
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head><body>
<p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p>
</body>
</html>
On executing the above example, it will display the text "Welcome to Tutorialspoint..." in the
"Arial" font and with a red color.

HTML COMMENTS
HTML comments are non-executable lines of code that do not display on the webpage
and are used to add notes or explanations. It is a good practice to add comments into your HTML
code, especially in complex documents, to indicate sections of a document and any other notes

ANITHA N 18
INTERNET PROGRAMMING

to anyone looking at the code. HTML comments are completely ignored by web browsers, so
they don't affect how your page looks or works. HTML comments help you and others
understand your code and increase code readability and are placed in between <!-- ... --> tags.
So, any content placed with <!--... --> tags will be treated as a comment and will be completely
ignored by the browser.

BASIC TEXT MARKUP

This section describes how the text content of an HTML document can be formatted with HTML
tags.
PARAGRAPHS
Text is normally organized into paragraphs in the body of a document. The XHTML
standard does not allow text to be placed directly in a document body. The browser supplies a
line break at the end of each line
<p>
Mary had
a
little lamb, its fleece was white as snow. And
everywhere that
Mary went, the lamb
was sure to go.
</p>
<!DOCTYPE html>
<!-- greet.html A trivial document-->
<html lang = "en">
<head>
<title> Our first document </title>
<meta charset = "utf-8" />
</head>
<body>
<p>
Greetings from your Webmaster!
</p>
</body>
</html>
If a paragraph tag appears at a position other than the beginning of the line, the browser breaks
the current line and inserts a blank line.
<p> Mary had a little lamb, </p> <p> its fleece was white as snow. </p>

Line Breaks: Sometimes text requires an explicit line break without the preceding blank line.
This is exactly what the break tag does. The break tag differs syntactically from the paragraph
tag in that it can have no content and therefore has no closing tag (because a closing tag would
serve no purpose). In XHTML, the break tag is specified with the following:
<br />
The slash indicates that the tag is both an opening and closing tag.
<p>
Mary had a little lamb, <br />

ANITHA N 19
INTERNET PROGRAMMING

its fleece was white as snow. </p>

Preserving White Space: Sometimes it is desirable to preserve the white space in text—that is,
to prevent the browser from eliminating multiple spaces and ignoring embedded line breaks.
This can be specified with the pre tag—for example,
<pre>
Mary
had a
little
lamb
</pre>

HEADINGS
Text is often separated into sections in documents by beginning each section with a
heading. Larger sections sometimes have headings that appear more prominent than headings
for sections nested inside them. In HTML, there are six levels of headings, specified by the tags
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, where <h1> specifies the highest-level heading.
Headings are usually displayed in a boldface font whose default font size depends on the number
in the heading tag. On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than
that of the default size of text, <h4> uses the default size, and <h5> and <h6>use smaller sizes.
<!DOCTYPE html>
<!-- headings.html An example to illustrate headings -->
<html lang = "en">
<head>
<title> Headings </title>
<meta charset = "utf-8" />
</head> <body>
<h1> Aidan's Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We've got them by the hangarful" (h3) </h3>
<h4> We're the guys to see for a good used airplane (h4) </h4>
<h5> We offer great prices on great planes (h5) </h5>
<h6> No returns, no guarantees, no refunds, all sales are final! (h6) </h6> </body>
</html>

Font Styles and Sizes: Early Web designers used a collection of tags to set font styles and sizes.
<i> specified italics and <b> specified bold. There are a few tags for fonts that are still in
widespread use, called content-based style tags. These tags are called content based because
they indicate the particular kind of text that appears in their content. Three of the most
commonly used content-based tags are the emphasis tag, the strong tag, and the code tag.
• The emphasis tag, <em>, specifies that its textual content is special and should be displayed
in some way that indicates this distinctiveness. Most browsers use italics for such content.
• The strong tag, <strong> is like the emphasis tag, but more so. Browsers often set the content
of strong elements in bold.
• The code tag, <code>, is used to specify a monospace font, usually for program code. For
example, consider the following element: <code> cost = quantity * price </code>

ANITHA N 20
INTERNET PROGRAMMING

Subscript and superscript characters can be specified by the <sub> and <sup> tags, respectively.
These are not content-based tags. For example,
X₂³ + y₁²

Tags are categorized as being either block or inline. The content of an inline tag appears on the
current line. So, an inline tag does not implicitly include a line break. One exception is br, which
is an inline tag, but its entire purpose is to insert a line break in the content. A block tag breaks
the current line so that its content appears on a new line. The heading are block tags, whereas
<em> and <strong> are inline tags.

Horizontal Rules: Two parts of a document can be separated from each other by placing a
horizontal line between them, thereby making the document easier to read. Such lines are called
horizontal rules, and the block tag that creates them is <hr />. The <hr /> tag causes a line break
(ending the current line) and places a line across the screen. The browser chooses the thickness,
length, and horizontal placement of the line. Typically, browsers display lines that are three
pixels thick.

IMAGES
The inclusion of images in a document can dramatically enhance its appearance, although
images slow the document-download process. The file in which the image is stored is specified
in a tag. The image is inserted into the display of the document by the browser.

Image Formats: The two most common methods of representing images are the Graphic
Interchange Format (GIF) and the Joint Photographic Experts Group ( JPEG) format. Files in
both formats are compressed to reduce storage needs and allow faster transfer over the Internet.
The GIF format was developed by the CompuServe network service provider for the specific
purpose of transmitting images. It uses 8-bit color representations for pixels, allowing a pixel
to have 256 different colors. Files containing GIF images use the .gif (or .GIF) extension on
their names. GIF images can be made to appear transparent.

The JPEG format uses 24-bit color representations for pixels, which allows JPEG images to
include more than 16 million different colors. Files that store JPEG images use the .jpg (or .JPG
or .jpeg) extension on their names. The compression algorithm used by JPEG is better at
shrinking an image than the one used by GIF.

One disadvantage of JPEG is that it does not support transparency. A third image format is now
gaining popularity: Portable Network Graphics (PNG, pronounced ping). PNG was designed in
1996 as a free replacement for GIF after the patent owner for GIF, PNG is a good replacement
for both GIF and JPEG because it has the best characteristics of each. Multimedia Animation

The Image Element

The image element, whose tag is <img />, is an inline element that specifies an image that is to
appear in a document. In its simplest form, the image tag includes two attributes: src, which
specifies the file containing the image; and alt, which specifies text to be displayed when it is
not possible to display the image. If the file is in the same directory as the HTML file of the

ANITHA N 21
INTERNET PROGRAMMING

document, the value of src is just the image’s file name. In many cases, image files are stored
in a subdirectory of the directory where the HTML files are stored.

For example, the image files might be stored in a subdirectory named images. If the image file’s
name is stars.jpg and the image file is stored in the images subdirectory, the value of src would
be as follows:
"images/stars.jpg"

Two optional attributes of img—width and height—can be included to specify (in pixels) the
size of the rectangle for the image. These attributes can be used to scale the size of the image
(i.e., to make it larger or smaller).
<img src = "c210.jpg" height = "200" width = "200" alt = "Picture of a Cessna 210" />
<!DOCTYPE html>
<!-- image.html An example to illustrate an image --><html lang = "en">
<head> <title> Images </title>
<meta charset = "utf-8" />
</head><body>
<h1> Aidan's Airplanes </h1>
<h2> The best in used airplanes </h2>
<h3> "We've got them by the hangarful" </h3>
<h2> Special of the month </h2>
<p> 1960 Cessna 210 <br />
577 hours since major engine overhaul<br />
1022 hours since prop overhaul <br /><br />
<img src = "c210new.jpg" alt = "Picture of a Cessna 210" /><br />
Buy this fine airplane today at a remarkably low price <br /> Call 999-555-1111 today!
</p> </body></html>

LISTS
HTML provides simple and effective ways to specify lists in documents. The primary list
types supported are those with which most people are already familiar: unordered lists such as
grocery lists and ordered lists such as the assembly instructions for a new desktop computer.
Definition lists can also be defined. The tags used to specify unordered, ordered and definition
lists.
• Unordered Lists: The tag, <ul> which is a block tag, creates an unordered list. Each item
in a list is specified with an <li> tag. Any tags can appear in a list item, including nested
lists. When displayed, each list item is implicitly preceded by a bullet.

<body>
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
</body>

ANITHA N 22
INTERNET PROGRAMMING

• Ordered Lists: Ordered lists are lists in which the order of items is important. This orderedness
of a list is shown in the display of the list by the implicit attachment of a sequential value to the
beginning of each item. The default sequential values are Arabic numerals, beginning with 1.
An ordered list is created within the block tag<ol>. The items are specified and displayed just
as are those in unordered lists, except that the items in an ordered list are preceded by sequential
values instead of bullets.
<body>
<h3> Cessna 210 Engine Starting Instructions </h3>
<ol>
<li> Set mixture to rich </li>
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to "LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5 PSI, push
starter button </li>
</ol>
</body>
• Definition Lists: A definition list is given as the content of a dl element, which is a block
element. Each term to be defined in the definition list is given as the content of a dt element.
The definitions themselves are specified as the content of dd elements. The defined terms of a
definition list are usually displayed in the left margin.

<body>
<h3> Single-Engine Cessna Airplanes </h3>
<dl>
<dt> 152 </dt>
<dd> Two-place trainer </dd>
<dt> 172 </dt>
<dd> Smaller four-place airplane </dd>
<dt> 182 </dt>
<dd> Larger four-place airplane </dd>
<dt> 210 </dt>
<dd> Six-place airplane - high performance </dd>
</dl>
</body>

TABLES
A table is a matrix of cells. The cells in the top row often contain column labels, those in
the leftmost column often contain row labels, and most of the rest of the cells contain the data
of the table. The content of a cell can be almost any document element, including text, a heading,
a horizontal rule, an image, or a nested table.

Basic Table Tags

A displayed table is preceded by a title, given as the content of a caption element, which can
immediately follow the opening <table> tag. The cells of a table are specified one row at a time.
Each row of a table is specified with

ANITHA N 23
INTERNET PROGRAMMING

a row tag, <tr>. Within each row, the row label is specified by the table heading tag, <th>. Each
data cell of a row is specified with a table data tag, <td>. The first row of a table usually has the
table’s column labels.

<body>
<table>
<caption> Fruit Juice Drinks </caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
<tr>
<th> Dinner </th>
<td> 0 </td>
<td> 0 </td>
<td> 1 </td>
</tr>
</table>
</body>

The rowspan and colspan Attributes

The rowspan and colspan are the attributes of <td> tag. These are used to specify the
number of rows or columns a cell should merge. The rowspan attribute is for merging rows and
the colspan attribute is for merging columns of the table in HTML.
<body> <h2>Tables in HTML</h2><table style="width: 100%">
<tr>
<th>First Name </th>
<th>Job role</th>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>

ANITHA N 24
INTERNET PROGRAMMING

</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr></table>
</body>

<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td colspan="2" ></td>
</tr>
<tr>
<td ></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>

FORMS
The most common way for a user to communicate information from a Web browser to
the server is through a form. Modeled on the paper forms that people frequently are required to
fill out, forms can be described in HTML and displayed by the browser.

HTML provides tags to generate the commonly used objects on a screen form. These objects
are called controls or widgets or components. There are controls for single-line and multiple-
line text collection, checkboxes, radio buttons, and menus, among others. All control tags are
inline tags. Most controls are used to gather information from the user in the form of either text
or button selections.

Each control can have a value, usually given through user input. Together, the values of all of
the controls in a form are called the form data. Every form whose data is to be processed on the
server requires a Submit button. When the user clicks the Submit button, the form data is
encoded and sent to the Web server.

ANITHA N 25
INTERNET PROGRAMMING

The method attribute of specifies which technique, get or post, will be used to pass the form
data to the server. The default is get, so if no method attribute is given in the tag, get will be
used. The alternative technique is post.

In both techniques, the form data is coded into a text string when the user clicks the Submit
button. This text string is often called the query string.

• When the get method is used, the browser attaches the query string to the URL of the HTTP
request, so the form data is transmitted to the server together with the URL. The browser inserts
a question mark at the end of the actual URL just before the first character of the query string
so that the server can easily find the beginning of the query string. The get method can also be
used to pass parameters to the server when forms are not involved.

• When the post method is used, the query string is passed by some other method to the form-
processing program. There is no length limitation for the query string with the post method, so,
obviously, it is the better choice when there are more than a few controls in the form

The input Element

Many of the commonly used controls are specified with the inline tag <input>, including those
for text, passwords, checkboxes, radio buttons, and the action buttons reset, submit, image, and
button.
A text control, which we usually refer to as a text box, creates a horizontal box into which the
user can type text. Text boxes usually are used to gather information from the user, such as the
user’s name and address. The default size of a text box is often 20 characters.
<form action = "">
<p>
<input type = "text" name = "theName" size = "25" />
...
</p>
</form>

If the contents of a text box should not be displayed when they are entered by the user,password
control can be used as follows:
<input type = "password" name = "myPassword"
size = "10" maxlength = "10" />
Checkbox and radio controls are used to collect multiple-choice input from the user. A checkbox
control is a single button that is either on or off (checked or not). If a checkbox button is on, the
value associated with the name of the button is the string assigned to its value attribute.
<!DOCTYPE html>
<head> <title> Checkboxes </title>
<meta charset = "utf-8" />
</head> <body>
<p>
Grocery Checklist
</p>
<form action = "">

ANITHA N 26
INTERNET PROGRAMMING

<p>
<label> <input type = "checkbox" name = "groceries"
value = "milk" checked = "checked" /> Milk </label>
<label> <input type = "checkbox" name = "groceries"
value = "bread" /> Bread </label>
<label> <input type = "checkbox" name = "groceries"
value = "eggs" /> Eggs </label>
</p>
</form> </body>
</html>

Radio buttons are closely related to checkbox buttons. The difference between a group of radio
buttons and a group of checkboxes is that only one radio button can be on or pressed at any
time. Every time a radio button is pressed, the button in the group that was previously on is
turned off.
<!DOCTYPE html>
<!-- radio.html
An example to illustrate radio buttons
-->
<html lang = "en">
<head>
<title> Radio </title>
<meta charset = "utf-8" />
</head>
<body>
<p>
Age Category
</p>
<form action = "">
<p>
<label><input type = "radio" name = "age"
value = "under20" checked = "checked" />
0-19 </label>
<label><input type = "radio" name = "age"
value = "20-35" /> 20-35 </label>
<label><input type = "radio" name = "age"
value = "36-50" /> 36-50 </label>
<label><input type = "radio" name = "age"
value = "over50" /> Over 50 </label>
</p>
</form>
</body>
</html>

ANITHA N 27
INTERNET PROGRAMMING

The select Element

Checkboxes and radio buttons are effective methods for collecting multiplechoice data from a
user. However, if the number of choices is large, the form may become too long to display. In
these cases, a menu should be used.

A menu is specified with a <select> tag (rather than with the <input> tag). There are two kinds
of menus: those in which only one menu item can be selected at a time (which are related to
radio buttons) and those in which multiple menu items can be selected at a time.The default
option is the one related to radio buttons. The other option can be specified by adding the
multiple attribute, set to the value "multiple".
The size attribute, specifying the number of menu items that initially are to be displayed for the
user, can be included in the <select> tag. If no size attribute is specified, the value 1 is used.

<body> <p> Grocery Menu - milk, bread, eggs, cheese </p>

<form action = ""> <p>
With size = 1 (the default)
<select name = "groceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</select> </p>
</form></body>

The textarea Element

In some situations, a multiline text area is needed. The textarea element is used to create such a
control. The text typed into the area created by textarea is not limited in length, and there is
implicit scrolling when needed, both vertically and horizontally. The default size of the visible
part of the text in a text area is often quite small, so the rows and cols attributes should usually
be included and set to reasonable sizes. If some default text is to be included in the text area, it
can be included as the content of the text area element.
<body>
<p>
Please provide your employment aspirations
</p>
<form action = "handler">
<p>
<textarea name = "aspirations" rows = "3" cols = "40">
(Be brief and concise)
</textarea>
</p>
</form>
</body>

ANITHA N 28
INTERNET PROGRAMMING

The Action Buttons

The Reset button clears all of the controls in the form to their initial states. The Submit button
has two actions: First, the form data is encoded and sent to the server; second, the server is
requested to execute the server-resident program specified in the action attribute of the <form>
tag. The purpose of such a server-resident program is to process the form data and return some
response to the user. Neither Submit nor Reset buttons require name or id attributes.
<form action = ""> <p>
<input type = "submit" value = "Submit Form" />
<input type = "reset" value = "Reset Form" />
</p>
</form>

FRAMES:
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window is
known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns <!DOCTYPE html>
<html><head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

HTML iframe is an inline frame that allows you to embed another document within the current
HTML document. Whenever you want to display another webpage within the webpage, you can
use an iframe.

Creating iframe (Inline Frame)

In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular
region at a specified place within the HTML document in which the browser can display an
external document such as a map or another web page.

Iframe Syntax: The following is the syntax to create an inline frame (iframe) in HTML:

<iframe src="url" title="description"></iframe>

The src Attribute

The URL or path of the external document is attached using the src attribute of
the <iframe> tag. If the content of the iframe exceeds the specified rectangular region, HTML

ANITHA N 29
INTERNET PROGRAMMING

automatically includes the scrollbars. HTML allows any number of iframes, but it may affect
the performance of the website.

Example:
<!DOCTYPE html>
<html> <head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<iframe src="/html/menu.htm"> Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

HYPERTEXT LINKS
A hypertext link in an HTML document, which we simply call a link here, acts as a pointer
to some particular place in some Web resource. That resource can be an HTML document
anywhere on the Web, or it may be the document currently being displayed. Without links, Web
documents would be boring and tedious to read. There would be no convenient way for the
browser user to get from one document to a logically related document. Most Web sites consist
of many different documents, all logically linked together. Therefore, links are essential to
building an interesting Web site.

A link that points to a different resource specifies the address of that resource. Such an address
might be a file name, a directory path and a file name, or a complete URL. If a link points to a
specific place in any document other than its beginning, that place somehow must be marked.

Links are specified in an attribute of an anchor element, a, which is an inline element. The
anchor element that specifies a link is called the source of that link. The document whose
address is specified in a link is called the target of that link. As is the case with many tags, the
anchor tag can include many different attributes. However, for creating links, only one attribute
is required: href (an acronym for hypertext reference). The value assigned to href specifies the
target of the link. If the target is in another document in the same directory, the target is just the
document’s file name. If the target document is in some other directory, the UNIX path name
conventions are used.
<body>
<h1> Aidan's Airplanes </h1>
<h2> The best in used airplanes </h2>
<h3> "We've got them by the hangarful" </h3>
<h2> Special of the month </h2>
<p>
1960 Cessna 210 <br />
<a href = "C210data.html"> Information on the Cessna 210 </a>
</p></body>
</html>

ANITHA N 30
INTERNET PROGRAMMING

COLOUR
In the past, one had to worry about the range of colours client machine monitors could
display as well as the range of colours browsers could handle. Now there are few colour
limitations with the great majority of client machine monitors and browsers.

Colour groups
There are three groups of predefined colours that were designed for web documents.
• The original group of seventeen named colours which included far too colours to be useful
• A group of 147 named colours that are widely supported by browsers
• Web palette which includes 216 names colours

Colour Properties
The colour property is used to specify the foreground colour of HTML elements.

Example:
<style type=”text/css”>
th.red{color:red;}
th.orange{color:orange;} </style>

The background colour property is used to set the background colour of an element, where the
element could be the whole body of the document.

<style type=”text/css”>
p.standout{font-size:2em; color :blue; background-color:mangenta”;}
</style>

<p class=”standout”>
To really make it stand out</p>

OVERVIEW AND FEATURES OF HTML5

HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on
the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

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

Browser Support : The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and
Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for
some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones,
iPads, and Android phones all have excellent support for HTML5.

ANITHA N 31
INTERNET PROGRAMMING

Features
HTML5 introduces a number of new elements and attributes that can help you in building
modern websites. Here is a set of some of the most prominent features introduced in HTML5.
• New Semantic Elements − These are like <header>, <footer>, and <section>.
• Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced
for <input> tag.
• Persistent Local Storage − To achieve without resorting to third-party plugins.
• WebSocket − A next-generation bidirectional communication technology for web
applications.
• Server-Sent Events − HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
• Canvas − This supports a two-dimensional drawing surface that you can program with
JavaScript.
• Audio & Video − You can embed audio or video on your webpages without resorting to third-
party plugins.
• Geolocation − Now visitors can choose to share their physical location with your web
application.
• Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web
pages with custom semantics.
• Drag and drop − Drag and drop the items from one location to another location on the same
webpage.

Backward Compatibility
HTML5 is designed, as much as possible, to be backward compatible with existing web
browsers. Its new features have been built on existing features and allow you to provide fallback
content for older browsers. It is suggested to detect support for individual HTML5 features
using a few lines of JavaScript.

ANITHA N 32