Wta CDP L1

contents
• Introduction to HTML
• What is HTML and Where did it come from?
• HTML Syntax
• Semantic Markup
• Structure of HTML Documents
• Quick Tour of HTML Elements
• HTML5 Semantic Structure Elements
• Introduction to CSS
• What is CSS
• CSS Syntax
• Location of Styles
• Selectors
• The Cascade: How Styles Interact
• The Box Model
• CSS Text Styling
06/01/2023 Ms karthiga G 18CS63 1
What is HTML and Where did it come from?
A Brief History
• Advanced Research Projects Agency Network (ARPANET)
Circuit Switching Packet Switching
06/01/2023 Ms karthiga G 18CS63 2

• INTERNET
– Implementation of TCP/IP protocols to create the
network of networks.
• World Wide Web(WWW)

– Essential elements of web:
• Uniform resource locator(URL) – to uniquely identify a source
in the web.
• Hyper Text Transfer Protocol(HTTP) – protocol that describes
how request and response operate on web.
• Browser – to make a HTTP request for a resource on the web.
• Web Server – to respond to the request for resource.
• HTML – a language to publish documents on the web.
06/01/2023 Ms karthiga G 18CS63 3
• HTML was first proposed in 1991 by Tim Berners-Lee.
• Codification of HTML happened in 1997 by W3C(World Wide Web

Consortium).
• In the mid-90s, developers working for Netscape Navigator and

Microsoft Internet Explorer ignored the standards defined by W3C
for HTML.
• They introduced features like CSS, JavaScript, new tags(<table>).
• These features proved to be essential for the increase in popularity

of06/01/2023
the web. Ms karthiga G 18CS63 4
• Acknowledging the importance of these features,
W3C froze HTML specification at version 4.01.
• The specification states,

“To publish information for global distribution, one needs a
universally understood language, a kind of publishing
mother tongue that all computers may potentially
understand. The publishing language used by the World
Wide Web is HTML(from Hyper Text Markup Language).”
06/01/2023 Ms karthiga G 18CS63 5

What is HTML?
• Stands for Hyper Text Markup Language.
• Hyper Text is a text that has links to other text.
06/01/2023 Ms karthiga G 18CS63 6

What is HTML and Where did it come
from?
• Markup Language is one where the contents of a document can be
annotated.
• Annotation means adding a description to the contents of the

document.
• However, when the document is displayed, only the contents of the

document appear on the display. The annotation becomes invisible.
• Markup languages allow users to control how text and visual

elements will be laid out and displayed.
• HTML, XML,XHTML are some examples of markup languages.

06/01/2023 Ms karthiga G 18CS63 7
06/01/2023 Ms karthiga G 18CS63 8

• In simple words,
“Markup is a way to indicate information about the
content that is distinct from the content.”
• In HTML, the concept of markup is implemented using

TAGS.
• A HTML tag has the following representation,

<Tag name>
06/01/2023 Ms karthiga G 18CS63 9

XHTML
 Stands for EXtensible HyperText Markup Language.
 Developed by W3C.
 This is a cleaner and stricter version of HTML 4.01.
 XHTML is nothing but HTML that uses XML(Extensible Markup Language)

syntax rules that are strict.
 XHTML was developed by W3C because HTML 4.01 was not purely created by
them.
06/01/2023 Ms karthiga G 18CS63 10

 Main reason for creation of XHTML was the lenient nature of web browsers
towards HTML.
 Browsers could handle sloppy HTML.
 However, different browsers handled sloppy HTML pages in different ways.
 To handle this inconsistency, XHTML was created.
 XHTML standard forced the web developers to create web pages without
syntax errors.
06/01/2023 Ms karthiga G 18CS63 11
 In order to make the transition from HTML to XHTML easier for web
developers, 2 versions of XHTML were created. They were,
• XHTML 1.0 Transitional
• XHTML 1.0 Strict
 XHTML 1.0 Strict specifications had to be followed by web developers to

build their websites.
 HTML validators were used to test and certify that a website follows XHTML
standards.
06/01/2023 Ms karthiga G 18CS63 12

06/01/2023 Ms karthiga G 18CS63 13

In mid 2000s, a draft for XHTML 2.0 was presented by W3C.
This standard made the browsers less forgiving to sloppy markups.
Popular HTML tags like <img>, <a>, <br> were eliminated.
This imposition of XHTML 2.0 created discomfort among the web

development community as they had to make changes to all the existing web
pages.
All these actions hinted suppression of HTML by W3C.
06/01/2023 Ms karthiga G 18CS63 14

HTML 5
As the specifications for XHTML 2.0 was being developed, a group within
W3C was formed.
This group was named WHATWG (Web Hypertext Application Technology

Working Group).
The members of this group were developers from Opera and Mozilla.
The main reason for the formation of WHATWG was the dissatisfaction with
strict XHTML 2.0 specifications and its imposition on web developers.
06/01/2023 Ms karthiga G 18CS63 15

WHATWG announced
“The Web Hypertext Applications Technology working group therefore intends
to address the need for one coherent development environment for Web
applications, through the creation of technical specifications that are intended to
be implemented in mass-market Web browsers.”
The WHATWG standard had 3 main objectives

 Specifications about how browsers should deal with invalid markup.
 Provide an open, non-proprietary programming framework (via JavaScript)

for creating rich web applications.
 Be backwards compatible with the existing web.
06/01/2023 Ms karthiga G 18CS63 16

This proposal from WHATWG was welcomed by the web development

community.
This forced W3C to stop work on XHTML 2.0 and adopt the WHATWG
standard.
This standard was named HTML 5.
HTML 5 has been embraced by major browser manufacturers.
06/01/2023 Ms karthiga G 18CS63 17

Browser usage and HTML support
06/01/2023 Ms karthiga G 18CS63 18

HTML SYNTAX
Elements and Attributes

Every HTML document is composed of:
• Textual content
• HTML elements
HTML elements are the Tags.
A tag is use to annotate the content of a HTML document.
Every tag has an element name enclosed within angular brackets, i.e.,
<element_name>
06/01/2023 Ms karthiga G 18CS63 19

HTML SYNTAX
There are two tags associated with each element name:

• Start tag/Beginning tag – acts like an ON switch
• Closing tag – acts like an OFF switch
For example,
<element_name> content </element_name>
<p> Welcome</p>
HTML elements can also have Attributes.
A HTML Attribute provides more information about the element it is

associated with.
An attribute is a name = value pair.
06/01/2023 Ms karthiga G 18CS63 20

HTML SYNTAX
Attribute values must be enclosed in double quotes in XHTML. This is however

optional in HTML 5.
Example
Opening tag Closing tag
<a href=“http://www.centralpark.com”>Central Park</a>
Element name Attribute Content
 HTML elements can also be empty.
 An empty element will not have any textual content.
06/01/2023 Ms karthiga G 18CS63 21

HTML SYNTAX
 An empty element instructs the browser to do some task.
 Empty elements in XHTML must be terminated by trailing

slash. This is optional in HTML5.
Example
<img src=“file.gif” />
Element name Trailing slash
Empty HTML Element
06/01/2023 Ms karthiga G 18CS63 22

STRUCTURE OF HTML DOCUMENTS
 The <head> and <body> elements are used to represent the head and body
sections.
Head Section:
 The Head sections contains elements that describe the HTML document.
 The <head> element is a container for metadata (data about data).
 Metadata is data that does not get displayed.
06/01/2023 Ms karthiga G 18CS63 23

 We will now have a look at all the elements that are present within the
<head> in our example.
<head lang=“en”>
<meta charset=“utf-8” />
<title>Share your travels - - New York - - Central Park</title>
<link rel=“stylesheet” href=“css/main.css” />
<script src=“js/html5shiv.js”></script>
</head>
lang
It is an attribute that tells the browser what natural language is being used
for the textual content in the HTML document.
In our example, the language used is English.
06/01/2023 Ms karthiga G 18CS63 24

<meta charset=“utf-8” />

The <meta> element is typically used to specify the character set, page
description, keywords, author of the document.
In this example, we have mentioned the character set used. It is UTF-8.
It is an encoding scheme that follows Unicode standards.
<link rel=“stylesheet” href=“css/main.css” />
The <link> element defines the relationship between the current document
and an external resource.
This tag is most often used to link to external style sheets.
Style sheets define the visual look of various elements in a HTML document.
06/01/2023 Ms karthiga G 18CS63 25

<script src=“js/html5shiv.js”></script>
The <script> element is used to refer to a JavaScript file.
JavaScript makes a HTML document more interactive.
It is called a client-side script.
The <script> element can either contain a JavaScript or it points to an external

JavaScript using the src attribute.
Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.
06/01/2023 Ms karthiga G 18CS63 26
Body Section:
This section contains contents that will be displayed by the browser.
The body can contain both HTML elements and regular text.
<body>
<h1> Main Heading goes here</h1>
…………………………
…………………………
</body>
06/01/2023 Ms karthiga G 18CS63 27

QUICK TOUR OF HTML ELEMENTS
06/01/2023 Ms karthiga G 18CS63 28

Headings
There are 6 levels of headings in HTML(h1, h2, …, h6).
Higher the heading number, lesser is the importance of the heading.
Headings are used to represent the structure of a document.
Browsers use heading to create a Document Outline of a page.
Document outline is a metadata and is not displayed on the browser window.
06/01/2023 Ms karthiga G 18CS63 29

A Document Outline is a structure of a document.
It is like a skeleton of a document.
Created using form headings, form titles, table

titles.
Outlines are used to create table of contents.
Outlines are also used by search engines to

improve search results.
06/01/2023 Ms karthiga G 18CS63 30
HTML Heading example:
The outline of a HTML document can be viewed using several tools.
One such tool is available in

http://gsnedders.html5.org/outliner/
06/01/2023 Ms karthiga G 18CS63 31

Paragraphs and Divisions

A paragraph is the most basic unit of text in a HTML document.
A paragraph is created using the <p> tag.
A paragraph is a Container.
It can contain other HTML and inline HTML elements.
Inline HTML elements are those that do not cause a paragraph break.
06/01/2023 Ms karthiga G 18CS63 32

They are part of the regular flow of text in the paragraph.
The inline elements used in this document are <a> and <strong>.
Contents of a paragraph are displayed continuously on the browser even if we

have given extra spaces between words or we have written text in multiple lines.
In order to give extra space between words, we use &nbsp (non breaking
space) between the words.
To display text in multiple lines, we use the <br> line break tag.
06/01/2023 Ms karthiga G 18CS63 33

Another alternative to achieve this is using the <pre> Preformatted text element.
Simple Paragraph Example
It is also possible to create divisions or sections in a HTML document using the
<div> element.
The <div> tag is also a container that contains text and also other container
elements like <p>.
This tag has no visual effect on the text by its own. It’ll have its effect when used
in combination with CSS.
Simple Division example
06/01/2023 Ms karthiga G 18CS63 34

Links
 Links are an essential feature of all web pages.
 Links are created using the <a> (anchor element).
Every link has 2 main parts:

• Destination
• Label
06/01/2023 Ms karthiga G 18CS63 35

• The Destination of the link is specified using the href attribute.
• The URL of the page the link goes to, is specified as the value to href.
• The Label of a link is the text representing the link that appears on the
browser window.
• The label can also be an image.
Simple Link example.
06/01/2023 Ms karthiga G 18CS63 36

The anchor element can be used to create a wide range of links:

Links to external sites.
Links to other pages or resources within the current site.
Links to other places within the current page.
Links that are instructions to the browser to start the user’s email program.
Links that are instructions to the browser to execute a JavaScript function.
06/01/2023 Ms karthiga G 18CS63 37

• Link to external site

<a href="http://www.centralpark.com">Central Park</a>
• Link to resource on external site

<a href="http://www.centralpark.com/logo.gif">Central Park</a>
• Link to another page on same site as this page

<a href="index.html">Home</a>
• Link to another place on the same page

<a href="#top">Go to Top of Document</a>
• Link to email
<a href="mailto:person@somewhere.com">Someone</a>
• Link to JavaScript function

<a href="javascript:OpenAnnoyingPopup();">See This</a>
06/01/2023 Ms karthiga G 18CS63 38

URL Relative Referencing

 Creating a link in our document, including an image, a JavaScript module or a
CSS file in the document are all part of referencing.
 However, referencing approach varies based on the location of the resource

that we are trying to access.
There are two types of referencing:

• A bsolute referencing
• Relative referencing
06/01/2023 Ms karthiga G 18CS63 39

Absolute referencing is needed when the resource is from an external site.
An Absolute reference is a complete URL that includes:

 Protocol(typically, http://)
 Domain name
 any paths
 finally the file name
On the other hand, Relative referencing is used when the resource is in the
same server as our HTML document.
06/01/2023 Ms karthiga G 18CS63 40

 The URL will not have “http://” if the resource is in the same server as the html
document.
 Hence, this is an indication for the browser to request the resource from the
current server.
 Also if all resources for the site are placed in the same directory, then the
resources can be accessed by just specifying the file name.
 But in most cases, all resources are not stuffed in one location.
06/01/2023 Ms karthiga G 18CS63 41

They are organized across different folders/directories.
In such cases, a Relative Pathname is needed to locate the resources.
Such a pathname follows Unix conventions.

 “/” is used to separate directory names from each other.
“..” is used to reference a directory above the current one in the hierarchy.
A sample directory tree is presented next.
06/01/2023 Ms karthiga G 18CS63 42

1. Same Directory
To link to a file within the same folder, simply
use the file name.
<a href="example.html">
2. Child Directory
To link to a file within a subdirectory, use the
name of the subdirectory and a slash before the
file name.
<a href="images/logo.gif">
3. Grandchild/Descendant Directory
To link to a file that is multiple subdirectories
below the current one, construct the full path by
including each subdirectory name (separated by
slashes) before the file name.
<a href="css/images/background.gif">
06/01/2023 Ms karthiga G 18CS63 43

4. Parent/Ancestor Directory
Use “../” to reference a folder above the
current one. If trying to reference a file
several levels above the current one,
simply string together multiple “../”.
<a href="../about.html“>
5. Sibling Directory
Use “../” to move up to the appropriate
level, and then use the same technique as
for child or grandchild directories.
<a href="../images/logo.gif">
06/01/2023 Ms karthiga G 18CS63 44

6. Root Reference
An alternative approach for ancestor and
sibling references is to use the so-called
root reference approach. In this approach,
begin the reference with the root reference
(the “/”) and then use the same technique
as for child or grandchild directories.
<a href="/about.html">
7. Default Document
Web servers allow references to directory
names without file names. In such a case,
the web server will serve the default
document, which is usually a file called
index.html (Apache) or default.html
(IIS).
<a href="members">
06/01/2023 Ms karthiga G 18CS63 45

Quick Tour of HTML Elements
Inline Text Elements
As already seen, inline elements are those that do not disrupt the flow of the text in the
document.
Some of the commonly used inline elements are tabulated below.
Inline Text Element Description

<a> Anchor used for hyperlinks
<abbr> An abbreviation. When we place the cursor on the abbreviation, its expansion
appears
<br> Line break

<cite> Citation (i.e., a reference to another work).
<code> Used for displaying code, such as markup or programming code.
<mark> For displaying highlighted text.
06/01/2023 Ms karthiga G 18CS63 46

Inline Text Element Description

<small> For displaying the fine-print, i.e., “non-vital” text, such as
copyright or legal notices.
<strong> For content that is strongly important
<time> For displaying time and date data. This element does not have
any significant visual effect on the browser display
Inline Text Elements Example
Images
Images are included in a HTML document using the <img> tag.
This tag is the oldest method for displaying an image.
06/01/2023 Ms karthiga G 18CS63 47

The syntax for displaying an image using the <img> is,
<img src="images/central-park.jpg" alt="Central Park" title="Central Park"

width="80" height="40" />
Where
src – URL of the image.
alt – an alternative text that appears if the image does not get displayed
due to problems like poor connection.
title – this string appears when we place the cursor on the image.
width and height – dimensions of the image in pixels.
06/01/2023 Ms karthiga G 18CS63 48

Character Entities
 Some characters cannot be typed straightway using the keyboard like the
copyright symbol, trademark symbol etc.
 There are also characters whose meaning is reserved in HTML like ‘<’, ‘>’.
 If we use the less than (<) or greater than (>) signs in our text, the browser
might mix them with tags.
 Character entities are used to include characters belonging to the above

mentioned categories, normally into a HTML document.
 Every character entity has an Entity name and Entity number.
06/01/2023 Ms karthiga G 18CS63 49

Some commonly used character entities are tabulated below
06/01/2023 Ms karthiga G 18CS63 50

Lists
HTML provides three types of lists:
 Unordered lists
 This list is a collection of items that are not in order.
 By default, these items are displayed as bulleted items.
 Ordered lists
 This list is a collection of items that are in order.
 By default, these items are displayed as numbered items.
 Definition lists
 Collection of name and definition pairs
06/01/2023 Ms karthiga G 18CS63 51

The tags associated with various list elements is tabulated below.
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
06/01/2023 Ms karthiga G 18CS63 52

HTML5 Semantic Structure Elements
06/01/2023 Ms karthiga G 18CS63 53

Semantic Structure elements are supported by HTML5.
These elements are referred to as block structuring elements.
These elements reduced the complexity that was involved with the
extensive use of <div> element.
These are cleaner and more self-explanatory HTML5 elements.
These elements do not have any visual impact on the contents of the
HTML document.
06/01/2023 Ms karthiga G 18CS63 54

Header and Footer elements
A Header typically contains the site logo and title.
In addition there could be some navigation links.
A header basically contains some introductory information.
A Footer typically contains copyright notices, information about the site’s

privacy policy.
The header and footer sections are created in a HTML document using the
<header> and <footer> tags respectively.
06/01/2023 Ms karthiga G 18CS63 55

A <header> element typically contains:

One or more heading elements (<h1> - <h6>)
Logo or icon.
Authorship information.
Several <header> elements can exist in one HTML document.
A <header> cannot be placed within a <footer> or another <header> element.
A <footer> element typically contains:

Authorship information
Copyright information
Contact information
Sitemap
06/01/2023 Ms karthiga G 18CS63 56

< header> and <footer> example

<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Structure Elements</h2>
<p> By <em>Randy Connolly</em> </p>
<p><time>September 30, 2015</time></p>
</header>
...
<footer>
<p><small>Author: Randy Conolly, Ricardo Hoar</small></p>
<p><a href="mailto:conolly@example.com">Contact Mail</a></p>
</footer>
</article>
06/01/2023 Ms karthiga G 18CS63 57
Heading Groups
It is possible for a header to have multiple headings.
All headings within a header can be grouped together using the <hgroup> element.
The <hgroup> can contain only <h1>,…,<h6> elements.
<header>
<hgroup>
<h1>Chapter Two: HTML 1</h1>
<h2>An Introduction</h2>
</hgroup>
</header>
06/01/2023 Ms karthiga G 18CS63 58

Navigation
The <nav> tag defines a set of navigation links.
These links could be links to other pages or to other parts within the same page.
It is not necessary that all links of a document should be inside a <nav> element.
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
06/01/2023 Ms karthiga G 18CS63 59

Articles and Sections
• Sections in a HTML document are created using the <section> tag.
• Sections are nothing but logical partitions in a document.
• These are similar to chapters in a text book, sections in a newspaper etc.
• The contents of a section must be logically connected to each other. All

contents within a section are related to a single theme.
• This is the point of difference between <div> and <section>.
06/01/2023 Ms karthiga G 18CS63 60

• Sections can be nested.
• Several subsections can exist within a section block.
• The font size of subsection is smaller then section.
<section>
<h3> Chennai Super Kings </h3>
<p> The Chennai Super Kings (CSK) are a franchise cricket team based in Chennai, Tamil
Nadu, which plays in the Indian Premier League (IPL). Founded in 2008, the team plays its
home matches at the M. A. Chidambaram Stadium in Chennai. </p>
</section>
<section>
<h3>Royal Challengers Bengaluru </h3>
<p><The Royal Challengers Bangalore (often abbreviated as RCB) are a franchise cricket
team based in Bangalore, Karnataka, that plays in the Indian Premier League (IPL). It was
founded in 2008 by United Spirits . </p>
</section>
06/01/2023 Ms karthiga G 18CS63 61

 The HTML <article> tag is used to represent an article.
 This means, if there are contents in a HTML document that are referred
from other source, then such contents are enclosed in the <article> tag.
 Potential source for Article Element are :

A magazine/newspaper article
A blog entry
A forum post
A user submitted comment
 Articles represent Syndication.
06/01/2023 Ms karthiga G 18CS63 62

Figure and Figure Captions

<figure> tag is a new element in HTML5.
It is used to specify self-contained/self explanatory contents like diagrams, photos,

code listings.
The label for the content of <figure> tag is given using the <figcaption> tag.
<p>This photo was taken on October 22, 2011 with a Canon EOS
30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
<figcaption>Conservatory Pond in Central Park</figcaption>
</figure>
06/01/2023 Ms karthiga G 18CS63 63

Aside
<aside> element is used to represent content that is related to the content that
surrounds this element.
Such contents are usually represented in sidebars of a document.
A popular example is the related videos for a YouTube video that gets
displayed on the right side of the browser window.
We need to keep in mind that, just by wrapping contents within the aside tag,
the contents do not get to the side of the window.
Such positioning can be done with the support of CSS. <aside> is just a
semantic structural element.
06/01/2023 Ms karthiga G 18CS63 64

INTRODUCTION TO CSS
CSS stands for Cascading Style Sheets.
CSS is a W3C standard for describing the appearance of HTML

elements.
The presentation details of HTML elements are defined by CSS.
Using CSS, we can add

 Font properties
 Colours
 Sizes
 Borders
 Background images
06/01/2023 Ms karthiga G 18CS63 65

INTRODUCTION TO CSS
 CSS can be added to HTML elements in 2 ways:

• Using the <style> element in the HTML document.
• A separate file is created that has only CSS.
 Benefits of CSS
Improved control over formatting
Improved site maintainability
Improved accessibility
Improved page download speed
Improved output flexibility(Responsive Design)
06/01/2023 Ms karthiga G 18CS63 66

INTRODUCTION TO CSS
CSS Versions
Several style sheet standards were proposed in the early 90s.
JavaScript style sheets proposed by Netscape in 1996.
This standard required JavaScript programming knowledge as a

prerequisite. This was a problem.
By end of 1996, CSS Level 1 was published by W3C.
A year later, CSS2 was published.
An improved version of CSS2 was proposed(CSS2.1), but it was not

adopted by W3C until 2011.
06/01/2023 Ms karthiga G 18CS63 67

INTRODUCTION TO CSS
As work was going on with CSS 2.1, another group in W3C were
working on CSS3 in parallel.
Out of the various modules of CSS3, only the following have been
officially adopted by W3C:
• CSS Selectors
• CSS Namespaces
• CSS Media Queries
• CSS Color.
06/01/2023 Ms karthiga G 18CS63 68

CSS SYNTAX
Every CSS document consists of one or more Style Rules.
Each rule starts with a Selector.
The Selector represents the HTML element or elements that will be

affected by the defined presentation.
The selector is followed by a series of property:value pairs enclosed in

flower brackets.
Each property:value pair is referred to as a Declaration.
A series of declaration is referred to as a Declaration Block.
06/01/2023 Ms karthiga G 18CS63 69

CSS SYNTAX
 Every declaration must be terminated with a semicolon.
 The declarations within a block can be mentioned in a single line or spread across
multiple lines.
Declaration
selector { property1: value1; property2: value2; } Rule Syntax
Declaration Block
p{
em { color: red; } margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
06/01/2023 Ms karthiga G 18CS63 70

CSS SYNTAX
Selectors
Every CSS rule begins with a selector.
Selectors are a pattern that is used by the browser to select the HTML
elements that will receive the style.
Selectors can be written in different ways.
CSS element Selector

For a specified selector, all the HTML elements that correspond to that
selector will receive the style defined.
CSS element selector example.
06/01/2023 Ms karthiga G 18CS63 71

CSS SYNTAX
CSS ID Selector
• Every HTML element is associated with an attribute id.
• This attribute is used to uniquely identify the element in the document.
• If we want to apply a style to a specific element in the document, we do so

using the id of the element.
• To select an element with a specific id, we write a hash (#) character,

followed by the id of the element as the selector.
• CSS ID selector example.
06/01/2023 Ms karthiga G 18CS63 72

CSS SYNTAX
CSS Class Selectors:
A HTML element is also associated with a class attribute.
The purpose of this attribute is to select a group of HTML elements.
If we want to apply a design to a specific group of elements in a document,

we give the same class name to all these elements and use the class name to
identify all these elements.
To select elements belonging to a class, we write a Dot (.) character,

followed by the class name as the selector.
CSS Class selector example.
06/01/2023 Ms karthiga G 18CS63 73

CSS SYNTAX
CSS Universal Selectors

The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
CSS Grouping Selectors

The grouping selector selects all the HTML elements with the same
style definitions.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
06/01/2023 Ms karthiga G 18CS63 74
CSS SYNTAX
CSS Attribute Selector
Selectors can also be defined for elements with specific attributes.
For this we make use of the [attribute] selector.
[attribute] {
declaration 1;
declaration 2; }
All the elements having the specified attribute will get

affected by the defined design.
There are several ways of defining rules using the

[attribute] selector.
06/01/2023 Ms karthiga G 18CS63 75

CSS SYNTAX
Attribute Selectors
Selecto Matches Example

r
[title]
[] A specific attribute.
Matches any element with a title attribute
[title = "posts from this country"]
A specific attribute with a specific
[=] value.
Matches any element whose title attribute is
exactly "posts from this country"
A specific attribute whose value
[title ~= "Countries"]
matches at least one of the words
[~=] in a space-delimited
Matches any title attribute that contains the
word "Countries"
list of words.
a[href ^= "mailto"]
[^=] A specific attribute whose value
Matches any <a> element whose href attribute
begins with a specified value.
begins with "mailto"
img[src*="flag"]
[*=] A specific attribute whose value
Matches any <img> element whose src attribute
contains a substring.
contains somewhere within it the text "flag"
06/01/2023 Ms karthiga G 18CS63 76

CSS SYNTAX
Selector Matches Example

[$=] A specific attribute whose value a[href $= ".pdf"]
ends Matches any <a> element whose href
with a specified value. attribute ends with the text ".pdf"
Attribute Selectors example
Pseudo-Element and Pseudo-Class Selectors:
A Pseudo element selector selects something that is not an element in the

HTML document.
A CSS pseudo-element is used to style specified parts of an element.
06/01/2023 Ms karthiga G 18CS63 77

CSS SYNTAX
 Pseudo elements can be used to:

• Style the first letter, or line, of an element.
• Insert content before, or after, the content of an element.
 A Pseudo Class is used to define a special state of an element.
 It can be used to:

• Style an element when a user mouse moves over it.
• Style visited and unvisited links differently.
• Style an element when it gets focus.
 The syntax for writing a Pseudo selector is
:selector_name { declaration block}
No space is allowed between : and the

selector name.
06/01/2023 Ms karthiga G 18CS63 78
CSS SYNTAX
Some pseudo selectors are listed below. Pseudo element selector example
Selector Type Description

a:link pseudo-class Selects links that have not been visited
a:visited pseudo-class Selects links that have been visited
Selects elements that the mouse pointer is currently
:hover pseudo-class above.
Selects an element that is being activated by the user. A
:active pseudo-class typical example is a link that is being clicked.
Selects elements (such as text boxes or list boxes) that
:focus pseudo-class have the input focus.
Selects a form element that is currently checked. A
:checked pseudo-class typical example might be a radio button or a check box.
:first-letter pseudo-element Selects the first letter of an element.

:first-line pseudo-element Selects the first line of an element.
:first-child pseudo-class Selects an element that is the first child of its parent.
06/01/2023 Ms karthiga G 18CS63 79
CSS SYNTAX
• Contextual Selectors
These selectors are also called as Combinators.
• Such selectors allows us to select elements based on their ancestors,

descendants, or siblings.

Descendant A specified element that div p
is contained somewhere Selects all <p> elements that are contained
within another specified somewhere within a <div> element. That is,
element. the <p> can be any descendant.
06/01/2023 Ms karthiga G 18CS63 80

CSS SYNTAX

Child A specified element that div > h2
is a direct child of the Selects a <h2> element that is a child of a
specified element. <div> element.
Adjacent A specified element that
sibling is the next sibling (i.e., h3 + p
comes directly after) of Selects the first <p> after any <h3>.
the specified element.
General A specified element that h3 ~ p
sibling shares the same parent as Selects all the <p> elements after <h3> that
the specified element. share the same parent as the <h3>.
Contextual Selectors example
06/01/2023 Ms karthiga G 18CS63 81

CSS SYNTAX
<body>
<nav><ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">United States</a></li>
ul a:link { color: blue; } </ul></nav>
#main time { color: red; } <div id="main">Comments as of <time>November 15,

2015</time>
<div>
<p>By Ricardo on <time>September 15,
#main>time { color: 2015</time></p>
purple; } <p>Easy on the HDR buddy.</p>
</div>
#main div p:first-child { <div>
<p>By Susan on <time>October 1,
color: green;}
2015</time></p>
<p>I love Central Park.</p>
</div>
</div>
<footer><ul>
<li><a href="#">Home</a> </li>
<li><a href="#">Browse</a> </li>
</ul></footer>
</body>
06/01/2023 Ms karthiga G 18CS63 82

CSS SYNTAX
Properties
Each CSS declaration block is made up of several property-value pairs.
Properties can be considered as attributes that correspond to specific details about

an element.
Hundreds of properties are available in the CSS standard.
All property names are predefined.
Some examples of property types are Fonts, Borders, Color etc.
06/01/2023 Ms karthiga G 18CS63 83

CSS SYNTAX
Fonts
Fonts is a property type. It contains several properties as listed below:
Property Description Possible Values
Family-name - times, arial
font-family Specifies the font for an element. Generic-family - serif, sans-
serif
font-size Sets the size of a font. small, 20px, 150%
font-style Specifies the font style for a text. normal, italic, oblique
font-weight Sets how thick or thin characters bold, light, 100, 400, 700, 900
in text should be displayed.
Font is another property that belongs to the Fonts property type. It is a shorthand that
represents all the above properties.
Fonts example
06/01/2023 Ms karthiga G 18CS63 84

CSS SYNTAX
Text Text example

Increases or decreases the Normal, 0px, 3px, -4px, 1cm
letter-spacing space between characters in a
text.
line-height Defines the spacing between Normal, 1.5, 2, 25px, 120%
lines
Specifies the horizontal Left, right, center, justify
text-align alignment of text in an
element.
text-decoration Specifies the decoration added underline, overline, line-
to text. through
Specifies the indentation of the 10px, 1cm, 50%
text-indent
first line in a text-block.
06/01/2023 Ms karthiga G 18CS63 85

CSS SYNTAX
Color and Background

red, #000000, rgb(0,0,0),
background-color Sets the background color of an element. transparent
url(“logo.jpg”), linear-
gradient(red, yellow,
Sets one or more background images for blue), radial-gradient(red,
background-image
an element. green, blue).
background- Sets the starting position of a background left, right top, 50% 50%,
position image. 100px 100px
repeat, no-repeat, repeat-
background- Sets if/how a background image will be
x, repeat-y, space, round
repeat repeated.
red, #000000,
color Specifies the color of text. rgb(0,255,0),
06/01/2023 Ms karthiga G 18CS63 86
CSS SYNTAX
Borders
red, #000000,
border-color Used to set the color of the four borders. rgb(0,0,0)
border-width Specifies the width of the four borders. thick, medium, 5px
dotted, dashed, solid,
border-style Specifies what kind of border to display. double
Sets all the top border properties in one { border-top: 4px dotted
border-top blue; }
declaration.
border-top- red, #000000,
Sets the color of an element's top border. rgb(0,0,0)
color
border-top-
Sets the width of an element's top border. thick, medium, 5px
width
Many such properties exist for the Borders type.
06/01/2023 Ms karthiga G 18CS63 87

CSS SYNTAX
Spacing and Sizing
padding-bottom sets the bottom padding (space) of an element. 0, 10px, 25%
padding-left sets the left padding (space) of an element. 0, 10px, 25%
padding-right sets the right padding (space) of an element. 0, 10px, 25%
padding-top sets the top padding (space) of an element. 0, 10px, 25%
margin-bottom sets the bottom margin of an element. 0, 10px, 25%
margin-left sets the left margin of an element. 0, 10px, 25%

margin-right sets the right margin of an element. 0, 10px, 25%
margin-top sets the top margin of an element. 0, 10px, 25%
height sets the height of an element. 0, 10px, 25%
width sets the width of an element. 0, 10px, 25%
max height Defines the maximum height of an element. 0, 10px, 25%
min height Defines the minimum height of an element. 0, 10px, 25%
max width Defines the maximum width of an element. 0, 10px, 25%
06/01/2023 Ms karthiga G 18CS63 88

CSS SYNTAX
Layout

position static, absolute, fixed,
Specifies the type of positioning method used for an element relative
bottom, left, right, Affects the vertical and horizontal position of a positioned top=10px, right=25px
top element.
Specifies the display behaviour (the type of rendering box) of block, inline, content
display
an element.
float Specifies how an element should float. none, left ,right
Specifies on which sides of an element floating elements are left, right, both
clear
not allowed to float.
Specifies what should happen if content overflows an visible, hidden, scroll,

overflow
element's box. auto
visibility Specifies whether or not an element is visible. visible, hidden
z-index Specifies the stack order of an element. auto, 1, 2, -1
06/01/2023 Ms karthiga G 18CS63 89

CSS SYNTAX
Lists
Replaces the list-item marker with an url(“smiley.gif”

list-style- image. This means the normal bullets of a )
image list will be replaced by the value that we
specify.
specifies the type of list-item marker in a disc, circle,
list-style-type list. This means, we can specify what type square
of bullets can appear for a list.
06/01/2023 Ms karthiga G 18CS63 90

CSS SYNTAX
Values
Every property is associated with a value.
Some values are predefined list of keywords.
Others are values such as length measurements, percentages, numbers

without units, color values, and URLs.
Also, a property can take different types of values.
For instance, the color property can have a name(red, blue), RGB
combo(rgb(255,0,0)), hex values(#FF0000), RGBa
combo(rgb(255,0,0,0.5)), HSL combo(hsl(0,50%,100%)).
06/01/2023 Ms karthiga G 18CS63 91

CSS SYNTAX
Some commonly used units are tabulated below.

Unit Description Type and Example
Relative (CSS2)
px Pixel. Absolute (CSS3)
Defined the size as number of times * the size of the Relative
em 2em, 0.5em
parent element.
Relative
% Defined the size as x% of the size of the parent element. 10%
Defines the size of an element with respect to width of Relative

ch 3ch
the zero (“0”) character.
Stands for root em. Defined the size as number of times Relative
rem 3rem
* the size of the root element(browser font size).
in Inches Absolute
cm Centimetres Absolute
mm Millimetres Absolute
06/01/2023 Ms karthiga G 18CS63 92
LOCATION OF STYLES
LOCATION OF STYLES:
Inline styles
These are style rules that are placed within a HTML element using the style attribute.
Such a style only affects the element within which it is defined in.
This kind of styling does not need any selectors.
This styling is not advisable as it is a deviation from the concept of HTML being a
semantic markup.
<h1>Share Your Travels</h1>

<h2 style="font-size: 24pt;“>Description</h2>
...
<h2 style="font-size: 24pt; font-weight: bold;">Reviews</h2>
06/01/2023 Ms karthiga G 18CS63 93

LOCATION OF STYLES
Embedded Style Sheet
These are also called as Internal Styles.
Here, the style declaration is placed within the <style> element in the <head> section
of the HTML document.
Like inline styles, this approach is also discouraged as it violates the semantic markup
philosophy of a HTML document.
<head lang="en"><style>
h1 { font-size: 24pt; }
h2 { font-size: 18pt; font-weight: bold; }
</style></head>
<body>
<h1>Share Your Travels</h1>
<h2>New York - Central Park</h2>
06/01/2023 Ms karthiga G 18CS63 94

LOCATION OF STYLES
External Style Sheet
Here the style rules are placed within an external text file with the .css extension.
To reference an external style sheet, we must use a <link> element within the <head>
element.
Several style sheets can be linked to a HTML document.
Each linked style sheet will require its own <link> element.
<head lang="en">
<title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="styles.css" />
</head>
06/01/2023 Ms karthiga G 18CS63 95

THE CASCADE: HOW STYLES INTERACT
It is possible that multiple style rules are defined for the same HTML
element.
Hence, there must be provisions that can handle such rule conflicts.
Cascade in CSS refers to how conflicting rules are handled.
Cascade is the mechanism that controls which rule applies when there is
such a conflict.
06/01/2023 Ms karthiga G 18CS63 96

 In Cascade Style Sheets the order of CSS rules matter.
 When two rules apply to the same element, the one that comes last
in the CSS is the one that will be used.
 Simple Cascade demo
 There are 3 cascade principles that CSS uses to deal with conflicts:
• Inheritance
• Specificity
• Location
06/01/2023 Ms karthiga G 18CS63 97

Inheritance
 There are several CSS properties that not only affect the element on
which they are applied, but also the descendants of the element.
 Properties like Font, color, text properties are inheritable while layout,
sizing, border, background and spacing properties are not.
 Simple Inheritance Example1
 There are also provisions by which inheritance can be controlled in

CSS.
06/01/2023 Ms karthiga G 18CS63 98

Three special universal property values are provided by CSS for controlling
inheritance. They are:
Inherit
Sets the property value applied to a selected element to be the same as that of
its parent element.
Initial
Sets the property value applied to a selected element to the initial/default
value of that property defined by the browser.
Unset
Resets the property to its natural value, which means that if the property is
naturally inherited it acts like inherit, otherwise it acts like initial.
06/01/2023 Ms karthiga G 18CS63 99

Inheritance Example
06/01/2023 Ms karthiga G 18CS63 100
Inheritance Example
06/01/2023 Ms karthiga G 18CS63 101

Inheritance Example
06/01/2023 Ms karthiga G 18CS63 102

Specificity
Specificity decides which style rule takes precedence when multiple
rules are applied to the same element.
The more specific the selector, the higher is its precedence.
One way by which the browser accomplishes this is, it assigns weights
to the style rules.
When multiple rules clash on one element, the rule with the highest
weight gets the priority and is applied.
Specificity Example
06/01/2023 Ms karthiga G 18CS63 103

Specificity algorithm
06/01/2023 Ms karthiga G 18CS63 104

Location
If style precedence cannot be determined based on inheritance and

specificity, location will be used.
If there are multiple rules that have the same specificity, then the latest
rule will be given more weightage.
An inline style will override an embedded style sheet.
An embedded style will override an equally specific rule defined in an

external author style sheet if it appears after the external sheet’s <link>
element.
06/01/2023 Ms karthiga G 18CS63 105

06/01/2023 Ms karthiga G 18CS63 106

It is possible that multiple style rules are defined for the same HTML
element.
Hence, there must be provisions that can handle such rule conflicts.
Cascade in CSS refers to how conflicting rules are handled.
Cascade is the mechanism that controls which rule applies when there is
such a conflict.
06/01/2023 Ms karthiga G 18CS63 107

 In Cascade Style Sheets the order of CSS rules matter.
 When two rules apply to the same element, the one that comes last
in the CSS is the one that will be used.
 Simple Cascade demo
 There are 3 cascade principles that CSS uses to deal with conflicts:
• Inheritance
• Specificity
• Location
06/01/2023 Ms karthiga G 18CS63 108

Inheritance
 There are several CSS properties that not only affect the element on
which they are applied, but also the descendants of the element.
 Properties like Font, color, text properties are inheritable while layout,
sizing, border, background and spacing properties are not.
 There are also provisions by which inheritance can be controlled in

CSS.
06/01/2023 Ms karthiga G 18CS63 109

Three special universal property values are provided by CSS for controlling
inheritance. They are:
Inherit
Sets the property value applied to a selected element to be the same as that of
its parent element.
Initial
Sets the property value applied to a selected element to the initial/default
value of that property defined by the browser.
Unset
Resets the property to its natural value, which means that if the property is
naturally inherited it acts like inherit, otherwise it acts like initial.
06/01/2023 Ms karthiga G 18CS63 110

Inheritance Example
06/01/2023 Ms karthiga G 18CS63 111
Inheritance Example
06/01/2023 Ms karthiga G 18CS63 112

Inheritance Example
06/01/2023 Ms karthiga G 18CS63 113

Specificity
Specificity decides which style rule takes precedence when multiple
rules are applied to the same element.
The more specific the selector, the higher is its precedence.
One way by which the browser accomplishes this is, it assigns weights
to the style rules.
When multiple rules clash on one element, the rule with the highest
weight gets the priority and is applied.
Specificity Example
06/01/2023 Ms karthiga G 18CS63 114

Specificity algorithm
06/01/2023 Ms karthiga G 18CS63 115

Location
If style precedence cannot be determined based on inheritance and

specificity, location will be used.
If there are multiple rules that have the same specificity, then the latest
rule will be given more weightage.
An inline style will override an embedded style sheet.
An embedded style will override an equally specific rule defined in an

external author style sheet if it appears after the external sheet’s <link>
element.
06/01/2023 Ms karthiga G 18CS63 116

06/01/2023 Ms karthiga G 18CS63 117

THE BOX MODEL
The box model

• All HTML elements can be considered as boxes.
• The CSS box model wraps around every HTML element.
• It consists of margins, borders, padding, and the actual content.
06/01/2023 Ms karthiga G 18CS63 118

THE BOX MODEL
CSS Box Model
06/01/2023 Ms karthiga G 18CS63 119

THE BOX MODEL
Background
Common Background Properties
06/01/2023 Ms karthiga G 18CS63 120

THE BOX MODEL
Background Repeat
Background Position
06/01/2023 Ms karthiga G 18CS63 121

THE BOX MODEL
Borders
Borders provide a way to visually separate elements.
06/01/2023 Ms karthiga G 18CS63 122

THE BOX MODEL
Margins and Padding

Margins and padding are essential properties for adding white
space to a web page, which can help differentiate one element
from another.
Margins add spacing around an element’s content, while

Padding adds spacing within elements.
Borders divide the margin area from the padding area.
We now have a look at the roles played by margins and

padding for a HTML element.
06/01/2023 Ms karthiga G 18CS63 123

THE BOX MODEL
06/01/2023 Ms karthiga G 18CS63 124

THE BOX MODEL
HTML elements with Margins and Padding
06/01/2023 Ms karthiga G 18CS63 125

THE BOX MODEL
Collapsing vertical margins

Consider the following example
06/01/2023 Ms karthiga G 18CS63 126

THE BOX MODEL
The W3C specification defines this behaviour as Collapsing

Margins.
 “In CSS, the adjoining margins of two or more boxes (which

might or might not be siblings) can combine to form a single
margin. Margins that combine this way are said to collapse, and the
resulting combined margin is called a collapsed margin.”
When the vertical margins of two elements touch, only the largest
margin value of the elements will be displayed.
The smaller margin value will be collapsed to zero.
Horizontal margins, on the other hand, never collapse.

06/01/2023 Ms karthiga G 18CS63 127
THE BOX MODEL
Vertical Margin Collapse
06/01/2023 Ms karthiga G 18CS63 128

THE BOX MODEL
Box Dimensions
In this section, we find out how to determine the actual size of a HTML element.
For any given element, its height and width correspond to the size of the content in that
element.
For instance, size of a textual element is determined by the font size and font face of
the text in it.
For images, the width and height of the actual image in pixels is the size of the element.
However, this is not how the actual size of an element is determined.
06/01/2023 Ms karthiga G 18CS63 129

THE BOX MODEL
An element could also have padding, borders and margins defined.
Since these additions are also part of an element, the size of an element
should also take into account the margins and paddings.
Hence, the total size of an element is equal to the size of its content area
plus the sum of its padding, borders, and margins.
There are two ways of defining the size of a HTML element.

• Content-Box sizing
• Border-Box sizing
The property Box-Sizing is used to indicate if sizing for an element is

Content-Box or Border-Box.
06/01/2023 Ms karthiga G 18CS63 130

THE BOX MODEL
Content Box Sizing

Content-box gives us the default CSS box-sizing behaviour.
The width and height properties defined for an element that follows content box

sizing, includes only the content.
It does not include the padding, border, or margin.
06/01/2023 Ms karthiga G 18CS63 131

THE BOX MODEL
Border Box Sizing

Border-box tells the browser to account for any border and padding in the
values that we specify for an element's width and height.
Here, the width and height properties include the content, padding, and

border, but do not include the margin.
06/01/2023 Ms karthiga G 18CS63 132

THE BOX MODEL
Content Box vs Border Box Example

Content Overflow
Sometimes it is possible that the dimensions that we define for a box is not sufficient
to hold the contents in it.
For instance, we may define the height of a <p> as 100px while the contents of the
paragraph might require 200px height to be accommodated.
In such cases, the extra contents of the box are said to overflow the box.
The overflow property is used to control things when contents cannot be

accommodated in a box.
06/01/2023 Ms karthiga G 18CS63 133

THE BOX MODEL
Box Overflow
06/01/2023 Ms karthiga G 18CS63 134

CSS TEXT STYLING
CSS provides two types of properties that affect text

Font properties
Paragraph properties
Font Properties
06/01/2023 Ms karthiga G 18CS63 135

CSS TEXT STYLING
Font Family
There is a possibility that a font used for some text in the HTML document is not
available at the console of all the users accessing the document.
Hence it is always a good practice to provide a Web Font Stack to the Font
Family property.
Web Font Stack is a series of alternate fonts to use, in case the original font
choice is not on the user’s computer.
06/01/2023 Ms karthiga G 18CS63 136

CSS TEXT STYLING
There is no real limit to the number of fonts that one can specify with the
font-family property.
The values for the property follow this order: ideal, alternative, common
and then generic.
The font-family property supports five different generic families.
Generic Font Families
06/01/2023 Ms karthiga G 18CS63 137

CSS TEXT STYLING
Font Sizes
In this section we will see how relative units like em and percentages will work
on font sizes.
Relative Font Size
06/01/2023 Ms karthiga G 18CS63 138

CSS TEXT STYLING
One complication that can occur with relative font size values is, if nested elements
have relative font sizes.
This is demonstrated below.
06/01/2023 Ms karthiga G 18CS63 139

CSS TEXT STYLING
Now consider the case presented below.
06/01/2023 Ms karthiga G 18CS63 140

CSS TEXT STYLING
Another relative font size unit is presented here. The unit is rem.
06/01/2023 Ms karthiga G 18CS63 141

CSS TEXT STYLING
Paragraph Properties
06/01/2023 Ms karthiga G 18CS63 142

CSS TEXT STYLING
06/01/2023 Ms karthiga G 18CS63 143

END OF MODULE 1
06/01/2023 Ms karthiga G 18CS63 144

Wta CDP L1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wta CDP L1

Uploaded by

Copyright:

Available Formats

contents

Circuit Switching Packet Switching

06/01/2023 Ms karthiga G 18CS63 2

• World Wide Web(WWW)

• Codification of HTML happened in 1997 by W3C(World Wide Web

• In the mid-90s, developers working for Netscape Navigator and

• They introduced features like CSS, JavaScript, new tags(<table>).

• These features proved to be essential for the increase in popularity

• The specification states,

06/01/2023 Ms karthiga G 18CS63 5

06/01/2023 Ms karthiga G 18CS63 6

• Annotation means adding a description to the contents of the

• However, when the document is displayed, only the contents of the

• Markup languages allow users to control how text and visual

• HTML, XML,XHTML are some examples of markup languages.

06/01/2023 Ms karthiga G 18CS63 8

• In HTML, the concept of markup is implemented using

• A HTML tag has the following representation,

06/01/2023 Ms karthiga G 18CS63 9

 This is a cleaner and stricter version of HTML 4.01.

 XHTML is nothing but HTML that uses XML(Extensible Markup Language)

06/01/2023 Ms karthiga G 18CS63 10

 Browsers could handle sloppy HTML.

 However, different browsers handled sloppy HTML pages in different ways.

 To handle this inconsistency, XHTML was created.

 XHTML 1.0 Strict specifications had to be followed by web developers to

06/01/2023 Ms karthiga G 18CS63 12

06/01/2023 Ms karthiga G 18CS63 13

This standard made the browsers less forgiving to sloppy markups.

Popular HTML tags like <img>, <a>, <br> were eliminated.

This imposition of XHTML 2.0 created discomfort among the web

All these actions hinted suppression of HTML by W3C.

06/01/2023 Ms karthiga G 18CS63 14

This group was named WHATWG (Web Hypertext Application Technology

06/01/2023 Ms karthiga G 18CS63 15

The WHATWG standard had 3 main objectives

 Provide an open, non-proprietary programming framework (via JavaScript)

 Be backwards compatible with the existing web.

06/01/2023 Ms karthiga G 18CS63 16

This proposal from WHATWG was welcomed by the web development

This standard was named HTML 5.

HTML 5 has been embraced by major browser manufacturers.

06/01/2023 Ms karthiga G 18CS63 17

Browser usage and HTML support

06/01/2023 Ms karthiga G 18CS63 18

Elements and Attributes

HTML elements are the Tags.

A tag is use to annotate the content of a HTML document.

06/01/2023 Ms karthiga G 18CS63 19

There are two tags associated with each element name:

HTML elements can also have Attributes.

A HTML Attribute provides more information about the element it is

An attribute is a name = value pair.

06/01/2023 Ms karthiga G 18CS63 20

Attribute values must be enclosed in double quotes in XHTML. This is however

<a href=“http://www.centralpark.com”>Central Park</a>

Element name Attribute Content

 HTML elements can also be empty.

 An empty element will not have any textual content.

06/01/2023 Ms karthiga G 18CS63 21

 An empty element instructs the browser to do some task.

 Empty elements in XHTML must be terminated by trailing