Web Technologies

1
 MODULE-1
Web browsers, web servers, MIME, URL, HTTP Introduction to XHTML5 tags, Basic syntax and
structure, text markups, images, lists, tables, progress, Media tags-audio and video ,forms, frames.

MODULE-2
Introduction to CSS, Levels of CSS, Selectors, Font, color and Text Properties, BOX Model, Span and
Div tags. Introduction to Java script, controls statements, Arrays and functions, pattern matching,
Element Access, Event Handling.

MODULE-3

Introduction to Bootstrap, First example, containers, Bootstrap elements: colors, tables, images,
buttons, button groups, progress bars, Forms, utilities, Classes, alerts, custom forms, Grid System.

2
MODULE-4

Introduction to JQuery, Syntax, selectors, events, JQuery HTML, JQuery Effects, JQuery CSS.

MODULE 5

Introduction to Angular JS, Directives, Expressions, Directives, Controllers, Filters, Services,

Events, Forms, Validations, Examples.

Course Code 2MCA24 CIE Marks 50

Teaching Hours/Week (L:P:SDA) 3:2:0 SEE Marks 50

Total Hours of Pedagogy 40 hours Theory + 10 hours Lab Total Marks 100
Credits 04 Exam Hours 03
Course objectives:
 Creating the small web page using xhtml5.
 Use different tags of html to create web page.
 Use of CSS and JavaScript.
 Developing the dynamic document using JavaScript

PRACTICAL COMPONENT OF IPCC (May cover all / major modules)

CIE for the theory component of IPCC

1. Two Tests each of 20 Marks
2. Two assignments each of 10 Marks/One Skill Development Activity of 20 marks
3. Total Marks of two tests and two assignments/one Skill Development Activity added will be CIE
for 60 marks, marks scored will be proportionally scaled down to 30 marks.
Chapter 1
Introduction to Web Technologies
 A Brief Intro to the Internet
 Origins
 In 1960s the US Department Of Defense (DoD) interested in
developing large scale computer network.
 The purpose of network were communication, program sharing, and
remote computer access for researchers working on defense related
only.
 One fundamental requirement was that network should be strong so
that network node were lost due to sabotage(destroy property or
hinder normal operations), war etc.
 The DoD’s first such network was (ARPA) Advance Research
Project Agency
6
 Advance Research Project Agency(ARPA)
 Origins
 ARPAnet - late 1960s and early 1970s.
 Network reliability.
 For ARPA-funded research organizations.
 Arpanet was simple text based communication through email.
 Problem scenario
 ARPA net was available only to laboratories and universities that was
not connected with educational institutions were not connected
 As a result various other network was developed like BITNET and
CSNET
o BITNET (Because It’s Time Network) in New York
o CSNET (Computer Science Network)
7
 BITnet, CSnet developed in late 1970s & early 1980s
 email and file transfer for other institutions.

 NSFnet - 1986 (National Science Foundation)

 Originally for non-DOD funded places.
 Initially connected five supercomputer centers.
 By 1990, it had replaced ARPAnet for non-military uses.
 Soon became the network for all (by the early 1990s).

 NSFnet eventually became known as the Internet

8
 What the Internet is:
 The Internet is a global network of networks connecting millions of users
worldwide via many computer networks using a simple standard common
addressing system and basic communications protocol called TCP/IP

(Transmission Control Protocol/Internet Protocol).

 This allows messages sent over the Internet to be broken into small pieces,
called packets, which travel over many different routes between source and
destination computers.
 An Intranet may extend across the Internet. This is usually done using a
Virtual Private Network (VPN).
 A world-wide network of computer networks.
 At the lowest level, since 1982, all connections use TCP/IP.
 TCP/IP hides the differences among devices connected to the Internet.
9
 Internet Protocol (IP) Addresses

Public address for private use

192.168.[0-255].x

•Every node has a unique numeric address.

•Form: 32-bit binary number or four 8 bit numbers with periods.
•New standard, IPv6, has 128 bits (1998).
•Organizations are assigned groups of IPs for their computers.
Internet Protocols:
• Domain names
The Internet Protocol (IP) is the method or protocol by which data is sent from one
computer to another on the Internet. Each computer (known as a host) on the
Internet has at least one IP address that uniquely identifies it from all other
computers on the Internet.

• Server-name portion of the URL is resolved into an IP address using the global,
distributed Internet DB known as the domain name system, or DNS

• First domain is the smallest; last domain is the largest.

• The second domain name gives the domain of which the first domain is a part.
• Last domain specifies the type of organization.

11
 Eg: vtu.ac.in

• vtu is hostname, which is a part of ac (academic) domain, which is a part of .in

(India) domain.
• All document requests from browsers are routed to the nearest name server.
• Fully qualified domain names must be unique

Hostname:
The hostname is the name of the server computer that stores the document.

Note: URL’s can never have embedded spaces.

Eg: If San Jose is a domain name, it must be typed as San%20Jose.

Domain names
 Form: host-name.domain-names
 First domain is the smallest; last is the largest
 Last domain specifies the type of organization
 Fully qualified domain name - the host name and all of the domain names
 DNS servers - convert fully qualified domain names to IPs

 Few domains are:

 Edu –Extension for Educational institutions
 Com – Specifies a Company o Gov – Specifies government
 Org – Other kind of organization

 Even Domain specifies the country name

*in – India * au – Australia
* us – United states * pk – Pakistan

13
Domain Name Conversion

IP addresses are the address used internally by the Internet, the fully qualified domain
name of the destination for a message, which is given browser, must be converted to
an IP address before the message can be transmitted on the internet to the
destination. These conversions are done by system software called Name Servers.
14
 Name Servers server 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 documents requested from the browsers are routed to the nearest name server. If the
name server can convert the fully qualified domain name to an IP address. If it cannot , the name
server sends the fully qualified domain name to another name server for conversion.

The previous figure shows, 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 the website by using telnet. If we want to know the IP address of www.google.co.in,
go to Dos prompt and type telnet www.google.co.in

15
 PROTOCOLS

By the mid – 1980s, a collection of different protocols that run on top of TCP/IP had been developed
to support a variety of Internet users. Among those the most common were telnet, ftp, usenet, mailto.

Uses:

• telnet – which was developed to allow a user on one computer on the Internet to log
on to and use another computer on the Internet.[Remote Login]
• ftp[file transfer protocol] - which was developed to transfer file among computers
on the Internet.
• usenet – Which was developed to serve as an electronic bulletin board.
• mailto – which was developed to allow messages to be sent from the user of one
computer on the Internet to other users on other computer on the Internet.
16
Client and Server
 Clients and Servers are programs that communicate with each other over the
Internet.
 A Server runs continuously, waiting to be contacted by a Client,
• Each Server provides certain services.
• Services include providing web pages.
 A Client will send a message to a Server requesting the service provided by that
server,
• The client will usually provide some information, parameters, with the request.

17
 The World-Wide Web(WWW)
 The World Wide Web, abbreviated as WWW and commonly known as the Web,
is a system of interlinked hypertext documents accessed via the Internet.
 Origins
 Tim Berners-Lee at European lab proposed the Web in 1989.
 Purpose: to allow scientists to have access to many databases of scientific work
through their own computers.
 Document form: hypertext (text with embedded link).
 It consist of Pages, Documents, Resources.
We’ll call them documents.
 Hypermedia – more than just text – images, sound, etc.
 Web or Internet?
 The Web uses one of the protocols, http, that runs on the Internet--there are
several others(telnet, mailto, etc.) 18
 Client-Server:
Client/server describes the relationship between two computer
programs in which one program,
The client, makes a service request from another program, the
server, which fulfills the request.
Although the client/server idea can be used by programs within a
single computer, it is a more important idea in a network.
In a network, the client/server model provides a convenient way
to interconnect programs that are distributed efficiently across
different locations.
• A Server runs continuously, waiting to be contacted by a Client.
• Each Server provides certain services.
• Services include providing web pages.
• A Client will send a message to a Server requesting the service provided by that
server.
• The client will usually provide some information, parameters, with the request.

Web-based systems:
• Server
• Web server
• E.g., Apache or IIS
• Client
• Web browser
• E.g., IE, FireFox, …
 Web Browsers
A web browser is a software application for retrieving, presenting, and
traversing information resources on the World Wide Web.
An information resource is identified by a Uniform Resource
Identifier (URI) and may be a web page, image, video, or other piece
of content. Hyperlinks present in resources enable users to easily
navigate their browsers to related resources.

21
Browsers are clients - always initiate, servers react (although sometimes
servers require responses)

 Mosaic –by NCSA (National Center for Supercomputer Application) by

late 1993
 First to use a GUI, led to explosion of Web use

 Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993

 Most requests are for existing documents, using HyperText Transfer

Protocol (HTTP)

 But some requests are for program execution, with the output being
returned as a document. 22
Web Structure
• End User

o You as a person.
o Read the contents.
o Provides the inputs.
o Forms, clicks.
o Response time expectation.

• Browser

o Renders the contents.

o Acts as interface between you and server.

• Server

o Serves the contents.

o Receives and processes inputs.
Web Servers
Web server can refer to either the hardware (the computer) or the
software (the computer application) that helps to deliver Web
content that can be accessed through the Internet

The most common use of web servers is to host websites, but there
are other uses such as gaming, data storage or running enterprise
applications.
A web server is a computer program that delivers (serves) content, such as
web pages, using the Hypertext Transfer Protocol (HTTP), over the World
Wide Web. The term web server can also refer to the computer or virtual
machine running the program. In large commercial deployments, a server
computer running a web server can be rack-mounted with other servers to
operate a web farm. 24
Operation:
• Web servers run as background processes in the operating system.

– Monitor a communications port on the host, accepting HTTP messages

when they appear

Note: Default port is 80

• Web servers have two main directories:

1. Document root (servable documents)

2. Server root (server system software)
• Document root is accessed indirectly by clients
– Its actual location is set by the server configuration file.

• Web servers now support other Internet protocols

25
• Apache SERVER.
•Apache is the most widely used Web server.
•The primary reasons are as follows: Apache is an excellent server because it is
both fast and reliable.
•It is open-source software, which means that it is free and is managed by a large
team of volunteers, a process that efficiently and effectively maintains the system.
•It is one of the best available servers for Unix-based systems, which are the most
popular for Web servers.
• Some servers can serve documents that are in the document root of other
machines called as PROXY SERVER.

• IIS - Internet Information Server:

Microsoft IIS server is supplied as part of Windows—and because it is a

reasonably good server—most Windows-based Web servers use IIS.
- Operation is maintained through a program with a GUI interface.
 URI, URL, URN
Uniform Resource Identifier (URI) is a string of characters used to identify a name or a resource
on the Internet

An URI identifies a resource either by location, or a name, or both.

A URI has two specializations known as URL and URN.

An Uniform Resource Locator (URL) is a subset of the Uniform Resource Identifier (URI) that
specifies where an identified resource is available and the mechanism for retrieving it.
URL defines how the resource can be obtained. It does not have to be HTTP URL
(http://), a URL can also be (ftp://) or (smb://)
• URLs cannot include spaces or any of a collection of other special
characters (semicolons, colons, ...)

• The doc path may be abbreviated as a partial path

• The rest is furnished by the server configuration
• If the doc path ends with a slash, it means it is a directory

source: http://www.w3.org/TR/webarch/
29
 Multipurpose Internet Mail Extensions (MIME)
Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format of
email to support:

•Text in character sets other than ASCII

•Non-text attachments
•Message bodies with multiple parts
•Header information in non-ASCII character sets

• Originally developed for email

• Used to specify to the browser the form of a file returned by the server (attached by the server
to the beginning of the document)

• The format of MIME is: type/subtype

•Example: text/html , text/doc , image/jpeg , video/mpeg
 • MIME was developed to allow different kinds of documents to be sent using internet mail.
• Server gets type from the requested file name’s suffix (.html implies text/html)
• Browser gets the type explicitly from the server.
• Type/subtype. A list of MIME specifications is stored in the configuration files of every web
server.

MIME Features
MIME offers many features that are considered essential for modern email usage. These features are
listed here.
Support for character sets other than ASCII, required for sending email in languages other than
English.

A content type labeling system, which allows multimedia content to be handled intelligently by
computer programs.

Support for content in email messages that is not text, which allows email to contain multimedia
content, including images, audio, office documents, and more.

Support for compound documents, which allows a single email message to contain multiple parts
31
(multiple images, file attachments, and so on).
  document type includes both type and subtype
 Subtype begins with x-
 e.g., video/x-msvideo
The following table lists some of the commonly used file name extensions and a description of the content the files contain:

File Extension MIME Type Description

.txt text/plain Plain text
.htm text/html Styled text in HTML format
.jpg image/jpeg Picture in JPEG format
.gif image/gif Picture in GIF format
.wav audio/x-wave Sound in WAVE format
.mp3 audio/mpeg Music in MP3 format
.zip application/zip Compressed file in PK-ZIP format
32
The Hyper Text Transfer Protocol(http)
 The protocol used by All Web communications
 Current Version : HTTP 1.1
 HTTP is formally defined as RFC 2616, approved in 1999
 RFC (Request for comment) is available at World Wide Web Consortium
(W3C)
 http://www.w3.org gives brief introduction
 HTTP has two phases
 Request Phase
 Response Phase
 Each http communication between browser and Web Server
consist two part
 a header (Contains information about communication)
33
 a body (Contains data of communication)
Request Phase
 Form:
 HTTP method Domain part of URL HTTP version.
 Header fields
 blank line
 Message body
 An example of the first line of a request:
 GET/cs.uccp.edu/degrees.html HTTP/1.1
 Most commonly used methods:
 GET - Fetch a document
 POST - Execute the document, using the data in body
 HEAD - Fetch just the header of the document
 PUT - Store a new document on the server
 DELETE - Remove a document from the server 34
 Four categories of header fields:
 General: For general information such as date
 Request: Included in request header
 Response: For response header
 Entity: used in both request and response header

 Common request fields: MIME formats more than one

 Accept: text/plain
 Accept: text/html
 Accept: img/gif
 Accept: text/* (wildcard character)

35
Response Phase
 Form:
 Status line
 Response header fields
 blank line
 Response body
 Status line format:
 HTTP version status code textual -explanation
 Example: HTTP/1.1 200 OK
 Common status code:
 404: Not found
 200: request handled without error
 500: Server encountered a problem and was not able to fulfill the request
36
 Status code is a three-digit number; first digit specifies
the general status
 1 => Informational
 2 => Success
 3 => Redirection
 4 => Client error
 5 => Server error

37
 The header field, Content-type, is required
 An example of a complete response header:
HTTP/1.1 200 OK
Date: Tues, 18 May 2004 16:45:13 GMT
Server: Apache (Red-Hat/Linux)
Last-modified: Tues, 18 May 2004 16:38:38 GMT
Etag: "841fb-4b-3d1a0179"
Accept-ranges: bytes
Content-length: 364
Connection: close
Content-type: text/html, charset =ISO-8859-1
 Both request headers and response headers must be followed by a
blank line .
38
World Wide Web(WWW)
The World Wide Web(WWW) is an information sharing model that allows accessing information
over the medium of the Internet. It is the collection of electronic documents that are linked
together. These electronic documents are known as `Web Pages'. A collection of related
WebPages is known as a `Web Site.

The URL looks like

Protocol://ServerDomainName/Path

Examples
http://www.google.com

Protocol Resource

http://192.168.10.1/download

Protocol IP address of the Resource

39
 2.1 Origins and Evolution of HTML
 HTML was defined with SGML
 Original intent of HTML: General layout of documents that could
be displayed by a wide variety of computers
 Recent versions:
 HTML 4.0 – 1997
 Introduced many new features and deprecated many older features
 HTML 4.01 - 1999 - A cleanup of 4.0
 XHTML 1.0 - 2000
 Just 4.01 defined using XML, instead of SGML
 XHTML 1.1 – 2001
 Modularized 1.0, and drops frames
 We’ll stick to 1.1, except for frames
 2.1 Origins and Evolution of HTML (continued)
 Reasons to use XHTML, rather than HTML:
1. HTML has lax syntax rules, leading to sloppy and sometime ambiguous documents
– XHTML syntax is much more strict, leading to clean and clear documents in a standard form

2. HTML processors do not even enforce the few syntax rule that do exist in HTML

3. The syntactic correctness of XHTML documents can be validated

2.2 Basic Syntax

 Elements are defined by tags (markers)
 Tag format:

 Opening tag: <name>

 Closing tag: </name>

 The opening tag and its closing tag together specify a container for the content they enclose
 2.2 Basic Syntax (continued)
 Not all tags have content
 If a tag has no content, its form is <name />

 The container and its content together are called an element

 If a tag has attributes, they appear between its name and the
right bracket of the opening tag
 Comment form: <!-- … -->
 Browsers ignore comments, unrecognizable tags, line breaks,
multiple spaces, and tabs
 Tags are suggestions to the browser, even if they are recognized
by the browser
XHTML – EXtensible HyperText Markup Language
XHTML Basics
3 Parts to an XHTML or HTML document
 DOCTYPE

 What DTD are you using

 Head
 Meta information
 Only <title> is required
 Body
 Text to render

43
XHTML Document Structure

44
Overlap versus Nesting

45
 2.3 HTML Document Structure
 Every XHTML document must begin with:
<?xml version = ″1.0″?>
<!DOCTYPE html PUBLIC ″-//w3c//DTD XHTML 1.1//EN″
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
 <html>, <head>, <title>, and <body> are required in every document
 The whole document must have <html> as its root
 html must have the xmlns attribute:
<html xmlns = ″http://www.w3.org/1999/xhtml″
 A document consists of a head and a body
 The <title> tag is used to give the document a title, which is normally
displayed in the browser’s window title bar (at the top of the display)
 Prior to XHTML 1.1, a document could have either a body or a frameset
 2.4 Basic Text Markup
 Text is normally placed in paragraph elements
 Paragraph Elements
 The <p> tag breaks the current line and inserts a blank line - the new line gets the beginning of
the content of the paragraph
 The browser puts as many words of the paragraph’s content as will fit in each line
<?xml version = ″1.0″?>
<!DOCTYPE html PUBLIC ″-//w3c//DTD XHTML 1.1//EN″
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<!-- greet.hmtl
A trivial document
-->
<html xmlns = ″http://www.w3.org/1999/xhtml″>
<head> <title> Our first document </title>
</head>
<body>
<p>
Greetings from your Webmaster!
</p>
</body>
</html>
 BASIC TEXT MARKUP

We will have a look at a complete XHTML document:

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html A document which must be followed throughout the notes -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> My first program </title>
</head>
<body>
<p> My Dear VTU Friends, All The Best..!! Have a Happy Reading of my notes..!! </p>
</body>
</html>
 Paragraphs:

It begins with <p> and ends with </p>. Multiple paragraphs may appear in a single document.
<html>
<head>
<title> Paragraph </title>
</head>
<body>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
</body>
</html>
 Most Important Differences
 XHTML elements must be properly nested
 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents can utilize in applications like:
 e.g. Scripts and Applets
 Basic Text Markup
 Text is normally placed in paragraph elements
 Paragraph Elements
 The <p> tag breaks the current line and inserts a blank line -
the new line gets the beginning of the content of the
paragraph
 The browser puts as many words of the paragraph’s content
as will fit in each line
 <P> Tag
<?xml version = ″1.0″?> <html xmlns =
<!DOCTYPE html PUBLIC ″- ″http://www.w3.org/1999/xh
//w3c//DTD XHTML 1.1//EN″ tml″>
http://www.w3.org/TR/xhtml <head> <title> Our first
11/DTD/xhtml11.dtd> document </title>
<!-- greet.hmtl </head>
A trivial document <body>
--> <p>
Greetings from your
Webmaster!
</p>
</body>
</html>
Line breaks
- The effect of the <br /> tag is the same as that of <p>,
except for the blank line
- No closing tag!
- Example of paragraphs and line breaks
- On the plains of hesitation <p> bleach the
bones of countless millions </p> <br />
who, at the dawn of victory <br /> sat down
to wait, and waiting, died.
Output  Typical display of this text:
On the plains of hesitation bleach the
bones of countless millions
who, at the dawn of victory
sat down to wait, and waiting, died.
 Headings
 Six sizes, 1 - 6, specified with <h1> to <h6>
 1, 2, and 3 use font sizes that are larger than the default
font size
 4 uses the default size
 5 and 6 use smaller font sizes
 Headings
<!-- headings.html <h1> Aidan’s Airplanes (h1)
An example to </h1>
illustrate headings <h2> The best in used
--> airplanes (h2) </h2>
<html xmlns = <h3> "We’ve got them by
″http://www.w3.org/1999/ the hangarful" (h3)
xhtml″> </h3>
<head> <title> Headings <h4> We’re the guys to
</title> see for a good used
</head> airplane (h4)
<body> </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>
 Blockquotes
 Content of <blockquote>
 To set a block of text off from the normal flow and
appearance of text
 Browsers often indent, and sometimes italicize
 Font Styles and Sizes (can be nested)
 Boldface - <b>
 Italics - <i>
 Larger - <big>
 Smaller - <small>
 Monospace - <tt>
 Basic Text Markup (continued)
The <big> sleet <big> in <big> <i> Crete
</i><br /> lies </big> completely </big>
in </big> the street

The sleet in Crete

lies completely in the street
 These tags are not affected if they appear in the content of a <blockquote>, unless there
is a conflict (e.g., italics)
 Superscripts and subscripts
 Subscripts with <sub>
 Superscripts with <sup>
Example: x₂³
Display: x23
 Inline versus block elements
 Block elements CANNOT be nested in inline elements
 Character Entities
Char. Entity Meaning
& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
" &quot; Double quote
' &apos; Single quote
¼ &frac14; One quarter
½ &frac12; One half
¾ &frac34; Three quarters
 &deg; Degree
(space) &nbsp; Non-breaking space
Horizontal rules
 <hr /> draws a line across the display, after a line break
The meta element
 The meta element (for search engines)
 Used to provide additional information about a document,
with attributes, not content
<meta name = “keywords” content = “binary trees, linked list,
stacks” />
 XHTML Syntax Rules
 Attribute names must be in lowercase
 type="text/css"
 Attribute values must be quoted
 The id attribute replaces the name attribute
 The id selector is used to specify a style for a single, unique element
 The id selector uses the id attribute of the HTML element, and is
defined with a "#".
#para1
{
text-align:center; color:red;
}
 Tags
 <!--...--> - Defines a comment
 <html> - Defines an html document
 <head> - Defines information about the document
 <title> - Defines the document title
 <body> - Defines the body element
 <p> - Defines a paragraph
 <h1>..<h6> - Defines header 1 to header 6
 <font> - Defines text font, size, alien and color
 <a> - Defines an anchor
 Basic Tags
 <b> - Defines bold text
 <i> - Defines italic text
 <u> - Defines underlined text
 <big> - Defines big text <small> : Defines small text
 <strong> - Defines strong text
 <br /> - Inserts a single line break
 <div> - Defines a section in a document
 <hr /> - Defines a horizontal rule
 <img> - Defines an image
 <form> : Defines a form element in web page
 <sub> : Defines a subscript text
 <sup>: Defines a superscript text
 <input> : used to select user information
 <select> : create a select list (drop-down list).
 <option> : select element define the available options in the
list.
 <link> :defines the relationship between a document and
an external resource
 <center> : used to center text.
 <frameset>: defines a frameset.
 <iframe> tag defines an inline frame that contains
another document.
 <del> tag defines text that has been deleted from a
document.
 <menu>: Defines create a list of menu choices
 <script> : Defines a client-side script, such as a JavaScript
 <textarea>: Defines a multi-line text input control.
 Tags
 <input> - Defines an input field
 <center> : Defines centered content
 <font> and <basefont> : Defines HTML fonts
 <s> and <strike> : Defines strikethrough text
 <u> : Defines underlined text Attributes
 Attributes
 align : Defines the alignment of text
 bgcolor: Defines the background color
 color Defines the text color
 Tags
 <ol> - Defines an ordered list
 <ul> - Defines an unordered list
 <li> - Defines a list item
 <dl> - Defines a definition List
 <span> - Defines a section in a document
 <table> - Defines a table
 <th> - Defines a table header
 <tr> - Defines a table row
 <td> - Defines a table cell
 <col> : attribute values for one or more columns in a table
 Images
 GIF (Graphic Interchange Format)
 8-bit color (256 different colors)
 JPEG (Joint Photographic Experts Group) – jay-peg
 24-bit color (16 million different colors)
 Both use compression, but JPEG compression is better
 Images are inserted into a document with the <img /> tag
with the src attribute
 The alt attribute is required by XHTML
 Purposes:
1. Non-graphical browsers
2. Browsers with images turned off
 <img src = "comets.jpg“ alt= "Picture of comets” />
 The <img> tag has 30 different attributes, including width
and height (in pixels)

Inline CSS :
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1>element to blue:
Example :
<h1 style="color:blue;">This is a Blue Heading</h1>
 Hypertext Links
Links:
• Hyperlinks are the mechanism which allows the navigation from one page to
another.
• The term “hyper” means beyond and “link” means connection.
• Whichever text helps in navigation is called hypertext.
• Hyperlinks cam be created using (anchor tag).
• The attribute that should be used for is href.
Hypertext Links (continued)
 Lists

 Unordered lists
 The list is the content of the <ul> tag
 List elements are the content of the <li> tag

 Example
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
 Ordered lists
 The list is the content of the <ol> tag
 Each item in the display is preceded by a sequence value
<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>
 Nested lists
 Any type list can be nested inside any type list
 The nested list must be in a list item
 Definition lists (for glossaries, etc.)
 List is the content of the <dl> tag

 Terms being defined are the content of the <dt> tag

 The definitions themselves are the content of the <dd> tag

 Definition List
 <dl> : Definition List
 <dt> : Definition term
 <dd> : Data description

<dl>
<dt>Coffee</dt>
<dd>- black color hot drink</dd>

<dt>Milk</dt>
<dd>- white color cold /hot drink</dd>
</dl>
<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>
 Tables
 A table is a matrix of cells, each possibly having content
 The cells can include almost any element
 Some cells have row or column labels and some have data
 A table is specified as the content of a <table> tag
 A border attribute in the <table> tag specifies a border
between the cells
 If border is set to "border", the browser’s default width
border is used
 The border attribute can be set to a number, which will be the
border width without the border attribute, the table will have
no lines!
 caption
 Tables are given titles with the <caption> tag, which can
immediately follow <table>
 Each row of a table is specified as the content of a <tr>
tag
 The row headings are specified as the content of a <th>
tag
 The contents of a data cell is specified as the content of a
<td> tag
 <tr>
<th> Breakfast </th>
<table border = "border"> <td> 0 </td>
<caption> Fruit Juice Drinks <td> 1 </td>
</caption> <td> 0 </td>
</tr>
<tr>
<tr>
<th> </th> <th> Lunch </th>
<th> Apple </th> <td> 1 </td>
<th> Orange </th> <td> 0 </td>
<td> 0 </td>
<th> Screwdriver</th>
</tr>
</tr>
</table>
 rowspan & colspan
 A table can have two levels of column labels
 If so, the colspan attribute must be set in the <th> tag to
specify that the label must span some number of
columns
<tr>
<th colspan = "3"> Fruit Juice Drinks </th>
</tr>
<tr>
<th> Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>
 If the rows have labels and there is a spanning column label, the upper left
corner must be made larger, using rowspan
<table border = "border">
<tr>
<td rowspan = "2"> </td>
<th colspan = "3"> Fruit Juice Drinks</th> </tr>
<tr>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
…/</table>
</tr>
 align
 The align attribute controls the horizontal placement of
the contents in a table cell
 Values are left, right, and center (default)
 align is an attribute of <tr>, <th>, and <td> elements
 The valign attribute controls the vertical placement of
the contents of a table cell
 Values are top, bottom, and center (default)
 valign is an attribute of <th> and <td> elements
  SHOW cell_align.html and display it
 The cellspacing attribute of <table> is used to specify the distance
between cells in a table
 The cellpadding attribute of <table> is used to specify the spacing
between the content of a cell and the inner walls of the cell
<table cellspacing = "50">
<tr>
<td> Colorado is a state of …
</td>
<td> South Dakota is somewhat…
</td>
</tr>
</table>
 FORMS
 A form is the usual way information is gotten from a browser to a server
 HTML has tags to create a collection of objects that implement this
information gathering
 The objects are called or widgets (e.g., radio buttons and checkboxes)
 When the Submit button of a form is clicked, the form’s values are sent
to the server
 All of the widgets, or components of a form are defined in the content
of a <form> tag
 The only required attribute of <form> is action, which specifies the URL of the application
that is to be called when the Submit button is clicked
 action = http://www.cs.ucp.edu/cgi-bin/survey.pl

 If the form has no action, the value of action is the empty string
 The method attribute of <form> specifies one of the two possible techniques of
transferring the form data to the server, get and post
 Many are created with the <input> tag
 The type attribute of <input> specifies the kind of widget
being created
1. Text
<input type = "text" name = "Phone“ size = "12" >
 Creates a horizontal box for text input
 Default size is 20; it can be changed with the size attribute
 If more characters are entered than will fit, the box is scrolled
(shifted) left
 If you don’t want to allow the user to type more characters than will
fit, set maxlength, which causes excess input to be ignored.
2. Checkboxes - to collect multiple choice input
 Every checkbox requires a value attribute, which is the widget’s
value in the form data when the checkbox is ‘checked’
 A checkbox that is not ‘checked’ contributes no value to the
form data
 By default, no checkbox is initially ‘checked’
 To initialize a checkbox to ‘checked’, the checked attribute must
be set to "checked“
 Example
Grocery Checklist
<form action = "">
<p>
<input type = "checkbox" name ="groceries"
value = "milk" checked = "checked">
Milk
<input type = "checkbox" name ="groceries"
value = "bread">
Bread
<input type = "checkbox" name = "groceries"
value= "eggs">
Eggs
</p>
</form>
3. Radio Buttons - collections of checkboxes in which only
one button can be ‘checked’ at a time
Every button in a radio button group MUST have the
same name
 If no button in a radio button group is ‘pressed’, the
browser often ‘presses’ the first one
Age Category
<form action = "">
<p>
<input type = "radio" name = "age"
value = "under20" checked = "checked"> 0-19
 Example
<input type = "radio" name = "age"
value = "20-35"> 20-35
<input type = "radio" name = "age"
value = "36-50"> 36-50
<input type = "radio" name = "age"
value = "over50"> Over 50
</p>
</form>
4. Menus - created with <select> tags
 There are two kinds of menus, those that behave like checkboxes and
those that behave like radio buttons (the default)
 Menus that behave like checkboxes are specified by including the
multiple attribute, which must be set to "multiple“
 The name attribute of <select> is required
 The size attribute of <select> can be included to specify the number
of menu items to be displayed (the default is 1)
 If size is set to > 1 or if multiple is specified, the menu is displayed

as a pop-up menu
 Each item of a menu is specified with an <option> tag, whose pure

text content (no tags) is the value of the item

 An <option> tag can include the selected attribute, which when

assigned "selected“ specifies that the item is preselected

Grocery Menu - milk, bread, eggs, cheese
<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>
After clicking the menu:

After changing size to 2:

5. Text areas - created with <textarea>
 Usually include the rows and cols attributes to specify the size of the
text area
 Default text can be included as the content of <textarea>
 Scrolling is implicit if the area is overfilled
Please provide your employment aspirations
<form action = "“> <p>
<textarea name = "aspirations" rows = "3” cols =
"40“> (Be brief and concise)
</textarea>
</p>
</form>
6. Reset and Submit buttons
 Both are created with <input>
 <input type = "reset" value = "Reset Form">
 <input type = "submit” value = "Submit Form">

 Submit has two actions:

1. Encode the data of the form
2. Request that the server execute the server-resident
program specified as the value of the action attribute of
<form>
 A Submit button is required in every form
 Frames
 Frames allow independent navigation and content to two (or more)
locations on a single browser screen
 Frames allow multiple "windows" in a single browser page.
 Frames are rectangular sections of the display window, each of
which can display a different document
 The <frameset> tag specifies the number of frames and their
layout in the window
 <frameset> takes the place of <body>
 Cannot have both!
 <frameset> must have either a rows attribute or a cols attribute,
or both (usually the case)
 Default is 1.
 The possible values for rows and cols are numbers, percentages, and
asterisks
 A number value specifies the row height in pixels - Not terribly useful!
 A percentage specifies the percentage of total window height for the
row - Very useful!
 An asterisk after some other specification gives the remainder of the
height of the window

 Examples:
<frameset rows = "25%, 50%, 25%">

<frameset rows = "50%, 20%, *" >

<frameset rows = "50%, 25%, 25%” cols = "40%, *“>

 The <frame> tag specifies the content of a frame
 The first <frame> tag in a <frameset> specifies the content of the first
frame, etc.
 Row-major order is used
 Frame content is specified with the src attribute
 Without a src attribute, the frame will be empty (such a frame CANNOT
be filled later)
 If <frameset> has fewer <frame> tags than frames, the extra frames are
empty

Each <frame> in a <frameset> can have different attributes, such as

border, scrolling, the ability to resize, etc.
 Columns Example
 This frameset was created by the following code:
 <frameset cols="35%,65%">
 </frameset>
 Rows Example
 This frameset was created by the following code: <frameset
rows="180,*"> </frameset>
 HTML <frame> noresize Attribute
The noresize attribute specifies that a <frame> element cannot be resized by the user.
By default, each <frame> in a <frameset> can be resized by dragging the border between the
frames. However, this attribute locks the size of a frame.

Syntax
<frame noresize="noresize">
Exampl

<frameset cols="50%,50%">
<frame src="frame_a.htm" noresize="noresize">
<frame src="frame_b.htm">
</frameset>
Exampl

<!DOCTYPE html>
<html>

<frameset cols="50%,*,25%">
<frame src="frame_a.htm" noresize="noresize">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

</html>
To Demonstrate Horizontal Frames using rows Attribute <html>
<head>
<title>Frameset Rows</title> </head>
<frameset rows = "*,*">
<frame src = "FrameRow1.html"/>
<frame src = "FrameRow2.html"/>
</frameset>
</html>
To Demonstrate Vertical Frames using cols Attribute
<html>
<head>
<title>Frameset Cols</title> </head>
<frameset cols = "25%,25%,25%,25%">
<frame src = "FrameCol1.html"/>
<frame src = "FrameCol2.html"/>
<frame src = "FrameCol3.html"/>
<frame src = "FrameCol4.html"/>
</frameset>
</html>
1 : Here, the programs FrameRow1.html, FrameRow2.html, FrameCol1.html, FrameCol2.html, FrameCol3.html,
FrameCol4.html are programs to display images. They must be coded separately.
<html> <head> <title>Frameset Rows and cols</title> </head> <frameset rows =
"50,50" cols = "*,*,*">
<frame src = "FrameCol1.html"/>
<frame src = "FrameCol2.html"/>
<frame src = "FrameCol3.html"/>
<frame src = "FrameCol4.html"/>
<frame src = "FrameRow1.html"/>
<frame src = "FrameRow2.html"/>
</frameset>
</html>
2. Create two frames vertically on the browser window: the first frame should occupy 20% and the next frame should occupy 80%. In the
first frame, display a document which consists of hyperlinks. When the hyperlinks are clicked, Image should be displayed on the second
frame

106
107
108
SYNTACTIC DIFFERENCES BETWEEN HTML AND XHTML
THE END

110