UNIT-I

Fundamentals of Web:
Internet, WWW, Web Browsers, and Web
Servers, URLs, MIME, HTTP, Security, The Web
Programmers Toolbox. XHTML: Origins and
evolution of HTML and XHTML, Basic syntax,
Standard XHTML document structure, Basic text
markup, Images, Hypertext Links, Lists, Tables.
 Internet
• Robert E. Kahn and Vint Cerf-Inventors

• A global computer network providing a variety of information

and communication facilities, consisting of interconnected
networks using standardized communication protocols.
• The Internet is a global wide area network that connects
computer systems across the world. ... The Internet provides
different online services. Some examples include: Web – a
collection of billions of webpages that you can view with a web
browser
• The Internet is a collection of computers that share
information. Home users commonly use a phone modem,
cable modem, or DSL connection to connect to the Internet
 WWW
• The World Wide Web (WWW), commonly
known as the Web, is an information system
where documents and other web resources are
identified by Uniform Resource Locators (URLs,
such as https://example.com/ ), which may be
interlinked by hypertext, and are accessible
over the Internet.
• The World Wide Web is a system for displaying
text, graphics, and audio retrieved over...
 Web Browsers
• A web browser is a software application for accessing information
on the World Wide Web. When a user requests a web page from a
particular website, the web browser retrieves the necessary content
from a web server and then displays the page on the user's device.
The List of web browsers are
• Google chrome
• Firefox
• Microsoft edge
• IE
• Opera
• safari
Web browsers
 Web Servers
• A web server is server software, or hardware dedicated to running
this software, that can satisfy client requests on the 
World Wide Web.
• A web server can, in general, contain one or more websites.
• A web server processes incoming network requests over HTTP and
several other related protocols.
• The primary function of a web server is to store, process and deliver 
web pages to clients.
•  The communication between client and server takes place using
the Hypertext Transfer Protocol (HTTP).
• Pages delivered are most frequently HTML documents, which may
include images, style sheets and scripts in addition to the text
content.
 web servers 
• There are a number of common web
servers available, some including:
• Apache HTTP Server. ...
• Microsoft Internet Information Services (IIS). ..
• Nginx. ...
• Lighttpd. ...
• Sun Java System Web Server.
 URLs

• URL stands for Uniform Resource Locator, and is used to

specify addresses on the World Wide Web.
• A URL is the fundamental network identification for any
resource connected to the web (e.g., hypertext pages,
images, and sound files). 
• A hypertext document with its corresponding text and
hyperlinks is written in HyperText Markup Language (HTML)
and is assigned an online address called a Uniform Resource
Locator (URL).
• URLs have the following format:
protocol://hostname/other_information.
•  An example of a URL is https://www.computerhope.com
• which is the URL for the Computer Hope website.
 MIME
• Multipurpose Internet Mail Extensions (MIME) is an 
Internet standard that extends the format of email messages
to support text in character sets other than ASCII, as well as
attachments of audio, video, images, and application
programs.
• Message bodies may consist of multiple parts, and header
information may be specified in non-ASCII character sets.
• Email messages with MIME formatting are typically
transmitted with standard protocols, such as the 
Simple Mail Transfer Protocol (SMTP), the Post Office Protocol
 (POP), and the Internet Message Access Protocol (IMAP).
 HTTP
• Hypertext Transfer Protocol (HTTP) is an application-
layer protocol for transmitting hypermedia
documents, such as HTML.
• It was designed for communication between web
browsers and web servers, but it can also be used for
other purposes.
• As a request-response protocol, HTTP gives users a
way to interact with web resources such as HTML
files by transmitting hypertext messages between
clients and servers. 
• HTTP clients generally use Transmission Control
Protocol (TCP) connections to communicate with
servers.
 EXAMPLE OF HTTP

• Stands for "Hypertext Transfer

Protocol." HTTP is the protocol used to
transfer data over the web. ... HTTP uses a
server-client model. A client, for example, may
be a home computer, laptop, or mobile
device. The HTTP server is typically a web host
running web server software, such as Apache
or IIS.
 Security
• Web security also known as “Cyber security” involves
protecting website or web application by detecting,
preventing and responding to attacks.
• Web security is important to keeping hackers and cyber-
thieves from accessing sensitive information.
• Without a proactive security strategy, businesses risk the
spread and escalation of malware, attacks on other websites,
networks, and other IT infrastructures.
• There are three primary areas or classifications
of security controls.
• These include management security, operational security,
and physical security controls.
 The Web Programmers Toolbox
• Document languages and programming languages that are the
building blocks of the web and web programming
• XHTML
• XML
• Javascript
• Perl,
• PHP
• CSS
• HTML (Hypertext Markup Language) is the language used to create
and design the user interface of web pages and web applications.
• CSS (Cascading Style Sheets) is a styling language that web designers
use to design the appearance of web pages that are written in HTML.
 Cont..
XHTML
• To describe the general form and layout of documents  An XHTML
document is a mix of content and controls
XML
• A meta-markup language
• Used to create a new markup language for a particular purpose or
area
• Because the tags are designed for a specific area, they can be
meaningful
JavaScript
• A client-side HTML-embedded scripting language .Only related to
Java through syntax .
 Cont..
Perl
• Provides server-side computation for HTML documents,
through CGI. Perl is good for CGI programming because:
– Direct access to operating systems functions
– Powerful character string pattern-matching operations Access to
database systems
– Perl is highly platform independent, and has been ported to all
common platforms
PHP
• A server-side scripting language .An alternative to CGI .Similar to
JavaScript .Great for form processing and database access
through the Web.
 Origins and evolution of HTML

• HTML (Hypertext Markup Language) is the standard markup language

for displaying documents in a web browser. It describes the basic
structure of every web page or application.
• The origin of HTML dates back to 1980, when the physicist Tim
Berners-Lee, a worker at CERN (European Organization for Nuclear
Research) proposed a new "hypertext" system for sharing documents.
• the "hypertext" allowed users to access information related to the
electronic documents they were viewing.
• Evolution of The first formal document with the description of HTML
was published in 1991 under the name HTML Tags (HTML tags) and
can still be consulted online today as a computer relic
 Evolution of HTML
• The first official proposal to convert HTML into a standard was made
in 1993 by the IETF (Internet Engineering Task Force).
• In 1995, the IETF organizes a working group of HTML and manages to
publish, on September 22 of that same year, the HTML 2.0 standard.
Despite its name, HTML 2.0 is the first official HTML standard.
• As of 1996, the HTML standards are published by another standard
organization called W3C (World Wide Web Consortium).
• The HTML 3.2 version was published on January 14, 1997 and is the
first HTML recommendation published by the W3C.
• HTML 4.0 was published on April 24, 1998 (being a corrected version
of the original publication of December 18, 1997) and is a great leap
from previous versions. Among its most noteworthy novelties are the
CSS stylesheets, the possibility of including small programs or scripts
in the websites, improving the accessibility of the designed pages,
complex tables and improvements in the forms.
 Cont..
• The last official HTML specification was published on December 24, 1999
and is called HTML 4.01. It is a revision and update of the HTML 4.0 version,
so it does not include significant news.
• Since the publication of HTML 4.01, the standardization activity of HTML
stopped and the W3C focused on the development of the XHTML standard.
• The current activity of the WHATWG(Web Hypertext Application Technology
Working Group). is focused on the future HTML5 standard, whose first
official draft was published on January 22, 2008.
• Due to the strength of the companies that make up the WHATWG group and
the publication of the HTML 5.0 drafts, in March In 2007 the W3C decided to
resume the standardizing activity of HTML.
• Parallel to its activity with HTML, W3C has continued with the
standardization of XHTML, an advanced version of HTML and based on XML.
 Origins and evolution of XHTML
• XHTML stands for EXtensible HyperText Markup Language.
• It is the next step to evolution of internet. The XHTML was
developed by World Wide Web Consortium (W3C).
• It helps web developers to make the transition from HTML
to XML.
• The XHTML 1.0 is the first document type in the XHTML
family and it is Recommended by W3C in 26 January 2000.
• The XHTML 1.1 is Recommended by W3c in 31 May 2001.
• The XHTML5 is a standard and is used to develop an XML
adaptation of the HTML5 specification.
 Origins and evolution of XHTML
• XHTML stands for EXtensible HyperText
Markup Language. It is the next step in
the evolution of the internet.
• The XHTML 1.0 is the first document type in
the XHTML family. ... XHTML was developed
by World Wide Web Consortium (W3C) to
help web developers make the transition from
HTML to XML.
 Evolution of XHTML
• The first version of XHTML is called XHTML 1.0 and was
published on January 26, 2000 (and subsequently
revised on August 1, 2002).
• XHTML 1.0 is an adaptation of HTML 4.01 to the XML
language, so it maintains almost all its tags and
features, but adds some restrictions and elements of
XML.
• The XHTML 1.1 version has already been published in
draft form and aims to modularize XHTML.
• It has also been published the draft of XHTML 2.0,
which will be a very important change from previous
versions of XHTML.
 Cont..
• The XHTML5 is a standard and is used to develop an XML adaptation of the
HTML5 specification.
The XHTML documents contains three parts, which are :
• DOCTYPE: It is used to declare a DTD
• head: The head section is used to declare the title and other attributes.
• body: The body tag contains the content of web pages. It consists many
tags.
• Creating a XHTML web page, it is necessary to include DTD (Document
Type Definition) declaration.
• There are three types of DTD which are discussed below:
• Transitional DTD
• Strict DTD
• Frameset DTD
 Basic syntax
• Transitional DTD: It is supported by the older
browsers which does not have inbuilt cascading style
sheets supports. There are several attributes
enclosing the body tag which are not allowed in
strict DTD.
Syntax:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
 Example
• <?xml version="1.0" encoding="UTF-8"?>
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "DTD/xhtml1-transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
•     <head>
•         <title>Transitional DTD XHTML</title>
•     </head>
•     <body bgcolor="#dae1ed">
•         <div style="color:#090;font-size:40px;
•                 font-weight:bold;text-align:center;
•                 margin-bottom:-25px;">GeeksforGeeks</div>
•         <p style="text-align:center;font-size:20px;">
•                 A computer science portal</p>
•         <p style="text-align:center;font-size:20px;">
•         Option to choose month:
•         <select name="month">
•             <option selected="selected">January</option>
•             <option>February</option>
•             <option>March</option>
•             <option>April</option>
•             <option>May</option>
•             <option>June</option>
•             <option>July</option>
•             <option>Augusy</option>
•             <option>September</option>
 Cont..
• <option>October</option>
•             <option>November</option>
•             <option>December</option>
•         </select>
•         </p>
•     </body>
• </html>
• Output
• file:///C:/Users/ps/Desktop/sample.html
 Cont..
• Strict DTD: Strict DTD is used when XHTML page contains only markup
language. Strict DTD is used together with cascading style sheets,
because this attribute does not allow CSS property in body tag.
Syntax:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
• Frameset DTD: The frameset DTD is used when XHTML page contains
frames.
Syntax:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 Standard XHTML document structure
• The Structure Module defines the major structural elements
for XHTML.
• These elements effectively act as the basis for the content
model of many XHTML family document types. The elements
and attributes included in this module are − body, head, html,
and title.
• XHTML documents are validated with standard XML tools.
• It is easily to maintain, convert, edit document in the long run.
• It is used to define the quality standard of web pages.
• XHTML is an official standard of the W3C, your website
becomes more compatible and accurate with many browsers.
 Benefits of XHTML:

• All XHTML tags must have closing tags and are nested correctly.
This generates cleaner code.
• XHTML documents are lean which means they use less bandwidth.
This reduces cost particularly if your web site has 1000s of pages.
• XHTML documents are well formated well–formed and can easily
be transported to wireless devices, Braille readers and other
specialized web environments.
• All new developments will be in XML (of which XHTML is an
application).
• XHTML works in association with CSS to create web pages that can
easily be updated.
 Difference Between HTML and XHTML:
HTML or HyperText Markup
Language is the main markup
language for creating web pages
Flexible framework requiring
lenient HTML specific parser
Proposed by Tim Berners-Lee in
1987
Application of Standard
Generalized Markup Language
(SGML).
Extended from SGML.
XHTML (Extensible HyperText
Markup Language) is a family of
XML markup languages that
mirror or extend versions of the
widely used Hypertext Markup
Language (HTML)
Restrictive subset of XML which
needs to be parsed with standard
XML parsers
World Wide Web Consortium
Recommendation in 2000.
Application of XML
Extended from XML, HTML
Standard XHTML document structure
• Document Structure Elements
• Every XHTML document has three major
components: the XHTML declaration, the
head, and the body. The document structure
elements are those that define each
component.
• <title> XHTML Tutorial </title>
 Basic text markup
• HTML is the standard markup language for Web pages.
• With HTML you can create your own Website
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
• S2 programe
 HTML Elements
Tag Description

<!--...--> Defines a comment

<!DOCTYPE>  Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Not supported in HTML5. Use <embed> or <object> instead.

Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page content

<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document
 HTML Elements
<bdi> Isolates a part of text that might be formatted in a different direction
from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.

Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.

Defines centered text
 HTML Elements
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a
<colgroup> element 

<colgroup> Specifies a group of one or more columns in a table for

formatting

<data> Adds a machine-readable translation of a given content

<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Specifies a term that is going to be defined within the content

<dialog> Defines a dialog box or window

 HTML Elements
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text 

<embed> Defines a container for an external application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text
 HTML Elements
<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.

Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

 HTML Elements

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
 HTML Elements
<link> Defines the relationship between a document and an external
resource (most used to link to style sheets)

<main> Specifies the main content of a document

<map> Defines an image map
<mark> Defines marked/highlighted text
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support
frames
 HTML Elements
<noscript> Defines an alternate content for users that do not support
client-side scripts

<object> Defines a container for an external application

<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<picture> Defines a container for multiple image resources
 HTML Elements
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby
annotations
<rt> Defines an explanation/pronunciation of characters (for East
Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
 HTML Elements
<small> Defines smaller text
<source> Defines multiple media resources for media elements
(<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<svg> Defines a container for SVG graphics
<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should be hidden when the
page loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines some text that is unarticulated and styled differently

from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

 Images
• HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
• The <img> tag is empty, it contains attributes only, and does not have
a closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• Syntax
• <img src="url" alt="alternatetext">
 Program

• <!DOCTYPE html>
• <html>
• <body>

• <h2>HTML Image</h2>

• <img src="Tulips.jpg" alt="Trulli" width="500" height="333">

• </body>
• </html>
 Hypertext Links
• The <a> tag defines a hyperlink, which is used to link
from one page to another.
• The most important attribute of the <a> element is
the href attribute, which indicates the link's
destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Attribute Value Description
download filename Specifies that the target will be downloaded when a user
clicks on the hyperlink
href URL Specifies the URL of the page the link goes to
hreflang language_code Specifies the language of the linked document
media media_query Specifies what media/device the linked document is
optimized for
ping list_of_URLs Specifies a space-separated list of URLs to which, when the
link is followed, post requests with the body ping will be
sent by the browser (in the background). Typically used for
tracking.
referrerpolicy no-referrer Specifies which referrer to send
no-referrer-when-
downgrade
origin
origin-when-cross-
origin
unsafe-url

rel alternate Specifies the relationship between the current document

author and the linked document
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
target _blank Specifies where to open the linked document
_parent
_self
_top
type media_type Specifies the media type of the linked document
 Program
• <!DOCTYPE html>
• <html>
• <body>

• <p>
• An image as a link: <a href="https://www.w3schools.com">
• <img border="0" alt="W3Schools" src="Jellyfish.jpg."
width="100" height="100">
• </a>
• </p>

• </body>
• </html>
 Lists
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>),
unordered lists (<ul>), and in menu lists (
<menu>).
• In <ul> and <menu>, the list items will usually
be displayed with bullet points.
• In <ol>, the list items will usually be displayed
with numbers or letters.
 Cont..
Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list
item. The following list items will increment from that
number

Attributes
 Program

• <!DOCTYPE html>
• <html>
• <body>

• <h1>The li value attribute</h1>

• <ol>
• <li value="100">Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• <li>Water</li>
• <li>Juice</li>
• <li>Beer</li>
• </ol>

• </body>
• </html>
 Program

• <!DOCTYPE html>
• <html>
• <body>

• <h1>A list inside another list</h1>

• <ul>
• <li>Coffee</li>
• <li>Tea
• <ul>
• <li>Black tea</li>
• <li>Green tea</li>
• </ul>
• </li>
• <li>Milk</li>
• </ul>

• </body>
• </html>
 Tables.

• Definition and Usage

• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or
more <tr>, <th>, and <td> elements.
• The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table
cell.
• An HTML table may also include <caption>, <colgroup>, <
thead>, <tfoot>, and <tbody> elements.
 Program
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• table, th, td {
• border: 1px solid black;
• }
• </style>
• </head>
• <body>
• <h1>The table element</h1>
• <table>
• <tr>
• <th>Month</th>
• <th>Savings</th>
• </tr>
• <tr>
• <td>January</td>
• <td>$100</td>
• </tr>
• <tr>
• <td>February</td>
• <td>$80</td>
• </tr>
• </table>
• </body>
• </html>