Web technology Unit-II Part A

Unit-II
 Hyper Text Markup Language (HTML)
 History of HTML and W3C
 HTML and its Flavors
 HTML Basics
 Elements- Attributes- and Tags
◦ HTML Elements
◦ HTML Tags
◦ Attributes
◦ Basic Structure

Standard Generalised Markup
Language (SGML)
 SGML is a metalanguage which means that it is
used to create other languages – including HTML
and XHTML
 Originally created by IBM
 Standardised in1986 by the International
Organization for Standardisation (ISO)
 Powerful markup language that describes
document information
 Very complex and difficult to learn

Language (SGML):
 Standard Generalized Markup Language
(SGML): A metalanguage used to create other
languages, including XML, HTML and XHTML.
 Metalanguage: A language used for defining other
languages.

Language (SGML):
 SGML requires that you create your own document
language rules.
 This set of rules is called the Document Type
Definition (DTD).
 The DTD is generally specified in a separate file
which you reference, or declare, at the beginning of
each document.
 Once declared, all document elements must
conform to this DTD.

Language (SGML):
Document Type Definition (DTD):
A set of rules contained in a simple text file that
defines the structure, syntax and vocabulary as it
relates to tags and attributes for a corresponding
document.

Language (SGML):
Document Type Declaration (<!DOCTYPE>):
A declaration of document or code type
embedded within an HTML, XHTML, XML or SGML
document. Identifies the version and markup
language used. Denoted by the <!DOCTYPE>
declaration at the beginning of the document.

Document Type Declaration
(<!DOCTYPE>):
 Describes the markup language and version of
your code
 Placed at the top of the document
 If you do not specify a <!DOCTYPE> declaration,
then two problems may arise:
◦ You will not be able to control how your code
renders in the future
◦ You will not be able to use a markup validator
 Each version and flavor of HTML/XHTML has its
own <!DOCTYPE> declaration
 <!DOCTYPE html> is used for HTML5 files

Hypertext Markup Language
(HTML):
 Developed by Tim Berners-Lee at CERN
(European Particle Physics Laboratory) as a
means of distributing non-linear text – called
hypertext to multiple points across the Internet.
 Needed a cross-platform
language that helped format
documents. SGML was too
complex.

(HTML):
 HTML does not allow you to define a DTD
 Also fewer languages elements than SGML
 Easier to use than SGML
 The global set of linked documents across the
existing Internet framework grew into the World
Wide Web.
 HTML became the standard
method of encoding web
documents

(HTML):
 HTML5 is not based on SGML
 Allows the simplification of HTML structure
 The DTD is not required

History of HTML and W3C:
 HyperText Markup Language (HTML).
 It provides simple mechanisms for
formatting text, creating links and lists,
inserting images, embedding audio and
video, etc.
 It also include Cascading Style Sheets
(CSS) to specify the style and layout of
text and other components.

 Scripts written in various languages
such as JS, VBS, PHP etc.
 HTML documents are written using
HTML “tags” embedded in angular
brackets.
 The set of tags we can use to write
HTML documents is defined by World
Wide Web Consortium (W3C).

What is W3C?
 Stands for the World Wide Web Consortium
(http://www.w3.org/)
 Created in October1994 by Tim Berners-Lee
 Is organized as a ‘Member Organization’
 Aim is to standardize the Web
 Creates and maintains WWW Standards
 Standards are called W3C Recommendations

How it Started
 The World Wide Web began as a project at the
European Organization for Nuclear Research
(CERN), where Tim Berners-Lee developed a
vision of the World Wide Web.
 Tim Berners-Lee - the inventor of the World Wide
Web - is now the Director of the World Wide Web
Consortium (W3C).

How it Started
 W3C was created in 1994 as a collaboration
between the Massachusetts Institute of Technology
(MIT) and the European Organization for Nuclear
Research (CERN), with support from the U.S.
Defense Advanced Research Project Agency
(DARPA) and the European Commission.

Standardizing the Web
 The W3C mission is to lead the World Wide Web to
its full potential by developing protocols and
guidelines that ensure the long-term growth of the
Web.

Standardizing the Web
 W3C is working to make the Web accessible to all
users (despite differences in hardware, software,
network infrastructure, native language, culture,
education, geographical location, and physical or
mental ability)
 W3C also coordinates its work with many other
standards organizations such as the Internet
Engineering Task Force, the Wireless Application
Protocols (WAP) Forum and the Unicode
Consortium.

W3C Members
 Because the Web is so important (both in scope
and in investment) that no single organization
should have control over its future, W3C functions
as a member organization.
 Some well known members are:
◦ IBM
◦ Microsoft
◦ America Online
◦ Apple

W3C Members
◦ Adobe
◦ Macromedia
◦ Sun Microsystems
 The Full List of Member Organizations includes a
variety of software vendors, content providers,
corporate users, telecommunications companies,
academic institutions, research laboratories,
standards bodies, and governments.

W3C Recommendations
 The most important work done by the W3C is the
development of Web specifications (called
"Recommendations") which describe
communication protocols (like HTML and XML) and
other building blocks of the Web.

W3C HTML Activities
HTML is the universal markup language for the Web.

HTML Versions – HTML 2.0
 HTML 2.0 was developed by the Internet
Engineering Task Force HTML Working Group in
1996.
 HTML 2.0 is an outdated version of HTML.
 For a Web developer there is no need to study the
HTML 2.0 standard.

HTML 3.2 and HTML 4.01
 HTML 3.2 is an older but functional HTML
standard.
 Some web pages and HTML editors still use the
3.2 standard as well as the 4.01 standard.

 HTML 3.2 became a W3C Recommendation 14
January 1997.
 HTML 3.2 added new features such as fonts,
tables, applets, superscripts, subscripts (and more)
to the existing HTML 2.0 standard.

 One of the elements added to the HTML 3.2
standard, was the <font> tag.
 This tag introduced unnecessary complexity to the
important task of separating HTML content (text)
from its presentation (style).
 The <font> tag became deprecated in HTML 4.0.

 HTML 4.0 became a W3C Recommendation 18
December 1997.
 A second release was issued on 24 April 1998 with
only some editorial corrections.
 The most important feature of HTML 4.0 was the
introduction of style sheets (CSS).

 HTML 4.01 became a W3C Recommendation 24.
December 1999.
 HTML 4.01 was a minor update of corrections and
bug-fixes from HTML 4.0.

(HTML)
 HTML 4.01 flavors include:
◦ 4.01 Strict – requires all container tags and does
not allow deprecated tags
◦ 4.01 Transitional – allows deprecated tags, not
as strict
◦ 4.01 Frameset – for use with frames

HTML Versions – XHTML 1.0
 XHTML 1.0 reformulates HTML 4.01 in
XML.
 XHTML 1.0 became a W3C
Recommendation 20 January 2000.

HTML Versions – HTML 5
 On January 22 2008, W3C published a working
draft for HTML 5.
 HTML 5 improves interoperability, and reduces
development costs, by making precise rules on
how to handle all HTML elements, and how to
recover from errors.

 Some of the new features in HTML 5 are functions
for embedding audio, video, graphics, client-side
data storage, and interactive documents.
 HTML 5 also contains new elements like <nav>,
<header>, <footer>, and <figure>.
 The HTML 5 working group includes AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera, and
many hundred other vendors.

 Offline Storage: The ability for Web browsers
and online services to download and access
content and services without being connected
to the Internet.
 Geo-Location: An HTML5 Application
Programming Interface (API) that allows
developers to retrieve the geographical
location information for a client-side device.

W3C CSS Activities
 CSS defines how HTML elements are to be
displayed.

CSS Versions
CSS1
 CSS1 became a W3C Recommendation 17
December 1996.
CSS2
 CSS2 became a W3C Recommendation 11
January 1999.
 CSS2 has added support for media (printers and
aural devices), downloadable fonts, element-
positioning and tables.

CSS Versions
CSS3
 CSS3 is about breaking CSS into smaller modules.

W3C CSS Specifications and
Timeline
Specification Draft/Proposal Recommendation
CSS 1 17. Dec 1996
CSS 1 (Revised) 11. Apr 2008
CSS 2 12. May 1998
CSS 2.1 08. Sep 2009
CSS Mobile Profile 2.0 10. Dec 2008
CSS TV Profile 1.0 14. May 2003
CSS Print Profile 13. Oct 2006

Timeline
Specification Draft/Proposal
CSS 3 23. May 2001
CSS 3 Namespace 23. May 2008
CSS 3 User Interface 11. May 2004
CSS 3 Selectors 10. Mar 2009
CSS3 Fonts 18. Jun 2009
CSS3 Colors 21. Jul 2008
CSS 3 TV 14. May 2003
CSS 3 Backgrounds and
borders
10. Sep 2008

Timeline
CSS 3 Text 06. Mar 2007
CSS 3 Lists 07. Nov 2002
CSS 3 Line 15. May 2002
CSS 3 Box model 09. Aug 2007
CSS3 Multi column 30. Jun 2009
CSS3 Ruby 14. May 2003
CSS 3 Speech 16. Dec 2004

W3C XML Specifications and
Timeline
CSS 3 Paged Media (PM) 10. Oct 2006
CSS 3 Generated PM 04. May 2007
CSS 3 Print 13. Oct 2006
CSS 3 Values 19. Sep 2006
CSS3 Cascade 15. Dec 2005
CSS3 Template Layout 02. Apr 2009
CSS 3 Media Queries 15. Sep 2009

HTML and its Flavors:
Version Introduced Year Tags + added
HTML 1.0 Berners-Lee 1992 20
HTML 2.0 IETF 1995 Forms, Tables, and Image maps are
added.
This version became obsolete in 2000.
HTML 3.2
was 1st
Recommen
d W3C
1997 Math formulae were dropped entirely
HTML 4.0 1997 Strict, Transitional and Frameset are
added.
HTML 4.01
W3C
enhanced
1999 Modified in May 12, 2001

Strict model:
 Deprecated elements are forbidden.
 Whereas they are allowed in the
Transitional model.
Frameset model:
 Frames and related elements are
allowed.

HTML Basics:
Tags:
 An HTML document itself is a text file
that contains text and markups.
Editors:
 Notepad
 Macintosh
 Atom
 Notepad++

 Extension:
 .html or .htm
 GUI editors:
 Microsoft’s Front Page
 Adobe’s Dreamweaver
 The set of HTML tags is fixed and its
standardized by W3C.

Elements, Attributes and
Tags:
 It is a simple text document.
 Basically consists of HTML elements,
tags and attributes.

HTML Elements:
 It is fundamental building blocks of
web page.
 It consists of tags, its attributes and
content may be simple text.
 These elements are organized in a
tree-like structure.
 The root element of an HTML
document is <html>.

HTML Tags:
 A tag is written within angular brackets
(<and>).
 Tags are codes each of which marks
up a certain region in an HTML
document.
 These marked up regions are
displayed on the screen using style as
mentioned by marking tag.

 <tag> - Opening tag
 </tag> - Closing tag
 / - forward slash
 Tag pair - <tag> and </tag>
Element:
 The content can be any simple text or
other tags or even be empty.
 The opening tags, its corresponding
closing tag, and its content together.

Embedded Tag:
 Tag pair <i> and </i> to display its
content in italic style.
Standalone Tags:
 Each embedded tag has opening and
closing tags.
 There are some tags that don’t have
their corresponding closing tags.
Example:
 <hr> closing tag is omitted.
 This tag inserts a horizontal rule on
the screen.

 XHTML (eXtensible HyperText Markup
Language) specification, every tag must
have a closing tag.
 <hr> </hr> which can also be written in
shorthand notation as <hr/>.
 Browsers support – XHTML syntax.
 Advantage:
 HTML tags are case-insensitive.
 Tags that aren’t known to the browser
are ignored altogether.
 Tags must be properly needed.

Attributes:
 Tags may have properties that can
optionally be assigned values to change
the default behavior of these tags.
 They are placed within the starting tag.
 The values of attributes are specified
without any quotation marks.
 Each tag has its own set of predefined
attributes.

 Sometimes it recommended double
quotation because some browser
support without double quotation or
with double quotation.
 XHTML specification also recommends
the same.
 If an attribute is not specified, its value
is given by the browser itself and then
the tag is processed.
 The value specified for a specific
attribute for a specific tag is browser-
specific.

Basic Structure:
 Every HTML document starts with the
<html> tag </html>.
 This tag is an embedded tag.
 <html> doesn’t have any properties.
 Everything within opening <html> and
closing </html> tags is parsed by the
browser.
 Every other tag and all text must be
contained within this <html> tag pair.

Logical Section:
 Head Section
◦ <head> and </head>
 Body Section
◦ <body> and </body>

Head Section:
 It contains meta-information about
HTML page.
 It processed but not display on screen.

Common HTML tags and their
functionality:
Tag Meaning
<html>…</html> Root tag of any web page.
<body>…</body> Represents the body of an HTML.
<head>….</head> Represents the header of a web page contains
information about page header.
<p>….</p> Starts a new paragraph.
<br> Inserts a line break.
<b>….</b> Makes the enclosed text bold.

Body Section:
 It contains text and other tags, which
are rendered on the screen are
specified.

Common HTML tags placed in
head tag:
Tag Meaning
<title>…</title> Makes enclosed text the title of web page.
<style>…</style> Links or inserts a style sheet
<link> Makes a link between an external source and this
HTML file.
<script>….</script> Contains script such as JS and VBS.
<meta> Used to specify document properties.
<base> Specifies base URL of the document.

Common attributes of body tag:
Tag Meaning
bgcolor Specifies background color of document.
alink Represents the color of an active link
vlink Represents the color of a visited link.
text Specifies the color of the enclosed text.

Web technology Unit-II Part A

More Related Content

What's hot (20)

Similar to Web technology Unit-II Part A (20)

More from SSN College of Engineering, Kalavakkam (20)

Recently uploaded (20)

Web technology Unit-II Part A