Chapter 1

HTML5 & CSS

1. Introduction to web document
• Introduction
• Web Document Types
• Static Web Documents
• Dynamic Web Documents
• Active Web Documents
Introduction
Internet:
The internet,simply “Net”is a worldwide system
of interconnected networks
WWW :
The World Wide Web ("WWW" or "The Web") is the
part of the Internet that contains websites and webpages.

It was invented in 1989 by Tim Berners-Lee at CERN,

Geneva, [Link] Tim Berners-Lee created a new
markup language called HTML.
Web Page:
webpage is a document, commonly written in HTML, that is viewed in an Internet browser.
A web page can be accessed by entering a URL address into a browser's address bar. A
web page may contain text, graphics, and hyperlinks to other web pages and files
Web Browser:The resourses from www may
be accessed by users via a software application
called web browser.

Web server:Web sites are stored in computers

which are that deliver (serves up) Web pages

Web site:A website is a collection of

web pages and related content
that is identified by a common
domain name and published
on at least one web server.
Web Document Types
Based on the nature of developement and the function they perfom,web pages
can be grouped into 3 Types

● Static
● Dynamic
● Active
Static Web Document
● Static web pages are also known as flat or stationary web page.
● It contain only static information.
● They are loaded to the client browser as exactly stored on the web server
● It is read [Link] do any modification
● It is creates using HTML and CSS
● Static web pages are only used when the information is no more required to be
modified.
Advantages of Static Web Page
● Time-Saving : Quick to develop
● Cost - Effective : Cheap to develop
● Inexpensive Hosting :Cheap to Host
● Easy Indexing :as they are coded in only Html or Css
● Fast Transferring :trasnfers from server to client without much
. processing time
Disadvantages of Static WebPage
● Difficult to Change

Require web develpemnt expert help to update the site

● Not Good for long run

Need to be updates with latest Trends

● Limited Functionality

Only Can add text,image video and hyperlinks in the content

Dynamic Web Page
● A Web page whose content is not fixed
● In this website, the web page changes as per the requirements provided by
the user
● It accesses content from a database or Content Management System (CMS)
● Eg: Blogs,E-commerce sites,social media site ect
● Dynamic website uses client-side scripting or server-side scripting, or both
to generate dynamic content
● Client side scripting generates content at the client computer on the basis of
user input. The web browser downloads the web page from the server and
processes the code within the page to render information to the user.
● In server side scripting, the software runs on the server and processing is
completed in the server then plain pages are sent to the user.
Dynamic Web Page
 Advantages and Disadvantages
Advantages

● Easy to update
● Powerful Features
● Interactive
● Quick to Responsiveness
● Smooth Navigation

Disadvantages

● Higher Cost
● Slow Processing
Difference Between Static and Dynamic Website
Static Dynamic

● In static web pages, Pages will remain same until ● In dynamic web pages, Content of pages are different
someone changes it manually. for different visitors.

● Static Web Pages are simple in terms of complexity. ● Dynamic web pages are complicated.

● In static web pages, Information are change rarely ● In dynamic web page, Information are change
frequently.

● Static Web Page takes less time for loading than ● Dynamic web page takes more time for loading.
dynamic web page.

● In Static Web Pages, database is not used. ● In dynamic web pages, database is used.

● Static web pages are written in languages such as: ● Dynamic web pages are written in languages such as:
HTML, JavaScript, CSS, etc. CGI, AJAX, ASP, [Link], etc.
Active Web Page
● An active web document consists of a computer program that the server sends

to the browser and that the browser must run locally. When it runs,

the active document program can interact with the user and

change the display continuously.

● In Active Web Page ,the browser perform logic instead of server.

● JAva Applet and AJAX are the technologies used to Create Active Web Pages.
● Active documents are sometimes referred to as client-site dynamic documents.
Web Programming
Web programming refers to the writing, markup and coding involved in Web development,
which includes Web content, Web client and server scripting and network security.
 Server - Side Scripting
● Server side scripting means the information needed to create the dynamic page
is done on the web server before being sent to the user

● Html files are produced by server side script

● The user cannot see the script code

● Eg:PHP,ASP,R,JSP etc.
Functionalities provided by Server side scripts
● Dynamic add and edit
● Response to user queries
● Access any Data or database
● Customize web page for individual users
● Provide security as server code cannot view on web browser
Advantages of server side scripting
● Reduces load on user’s computer
● Can create data driven application
● Dynamic website can easily be developed
● Server side scripting does not depends on browser processing as all
processing performs on server side
● As scripting is done on the server, it is not sent back to the browser,which
prevent it from being cloned,copied, or scrutinized for hacking vulnerabilities
● Loading time of web page is often reduced which helps to improve site
google ranking
Disadvantages
● Scripting puts increased demands on a website’s server. Websites using large
applications and with heavy traffic may need to utilize more powerful hosting
methods such as dedicated servers or cloud hosting to cope with demand.
● Server-side scripting requires pages to be refreshed in order to show the
dynamic content
● It requires a database to store the dynamic data
● It requires corresponding language interpreter be installed on the server
Client side Scripting
Client-side scripting is source code that is executed on the client's browser
instead of the web-server, and allows for the creation of faster and more
responsive web applications

Eg: HTML,CSS,
Javascript,VB script etc
Advantages and Disadvantages
Advantage:
● Since, there is no processing of data, so faster response is received.
Response time is way less than that of server side.
● It is the best way to make any alterations on the page without disturbing the
database settings.
Disadvantage:
● More development time and effort might be required
● Not all browsers support scripts, therefore, users might experience errors if no
alternatives have been provided.
Difference Between Client and server side scripting
BASIS FOR
COMPARISON SERVER-SIDE SCRIPTING CLIENT-SIDE SCRIPTING

Basic Works in the back end which could not be visible at Works at the front end and script are visible
the client end. among the users.

Execution Executed in the web server Executed in the Client side or web browser

Data base Connect to database Cannot be used to

commection Connect the database
On the web server

Processing Requires server interaction. Does not need interaction with the server.

Languages involved PHP, [Link], Ruby on Rails, ColdFusion, Python, HTML, CSS, JavaScript, etc.
etc

Affect Could effectively customize the web pages and Can reduce the load to the server.
provide dynamic websites.

Security Relatively secure. Insecure

HTML 5
❖ HTML 5 is the fifth and current major version of HTML standard
❖ It is the standard for structuring and presenting content on WWW
❖ It currently exists two standardized forms *HTML 5.2 and *WHATWG
❖ First released on 22 jan 2008
❖ Major goals are
#support for the latest multimedia and
other features
#To keep language both easily readable
by human and consistently
understood by computers
#To remain backward compatibity with
older software versions
HTML 5 Benefits
● Built in Audio/video play back
● Offline Caching
● Clean coding
● Cross-Browser compatibility
● Mobile optimization
HTML Elements and Attributes
• An HTML elements are building block of an HTML document.

• An HTML element provides instruction to the browser,specifying how to display the HTML
document

For example, the <title> element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag <>)
and an end tag (or closing tag </>), with content in between.

Elements can also contain attributes that defines its additional properties.
For example, a paragraph, which is represented by the p element, would be written as
 <!DOCTYPE html>
HTML5 page structure <html>
An HTML document composed of <head>
Three sections <meta charset="UTF-8">
1. A line containing HTML document Type <title>Title of the
!DOCTYPE declaration:type and version document</title>
</head>
<html> ..Root element
2. A declarative header element <body>
3. A body, documents content <header>….</header>
<h1>……</h1>
<nav>….</nav>
<article>
<section>
….
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

</html>
The document's HEAD(HTML <head> Tag)
● The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information
about the web page that is not displayed to the user. Metadata provides browsers and search engines with
technical information about the web page.
The <head> includes the following elements:
● The <title> tag defines the title of a web page.
● The <style> tag contains CSS code that defines how HTML elements should be rendered in a browser.
● The <base> tag defines an absolute (base) URL for all relative URLs.
● The <link> tag defines the relationship between the current HTML document and the resource to which it
refers, or contains a link to an external style sheet. It can have two attributes: rel="stylesheet" and "href".
● The <meta> tag provides additional information (metadata) about HTML document. The <head> of a page
can include different kinds of <meta> elements that may contain "name" and "content" attributes(this helps
google search engine hit).
● The <script> tag contains a script (generally JavaScript), or reference to an external file with [Link]
element may not be included in <head>. Sometimes, it is better to put it at the bottom of <body>. T
● The <noscript> tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or
scripts are disabled by the user
The document’s Body
HTML5 introduces new structural tags, which are also called semantic tags because they
add more meaning to HTML code by better identifying each type of content they format.
Here are the new structural tags introduced in HTML5:
● <header> — Defines the header of any section or page. The header tag is the ideal
place for the name of the site.
● <nav> — Defines the main navigation links in a page or section. The main navigation
links are typically placed just after the header and then repeated at the bottom of the
page.
● <article> and <section> — Use these tags to define any article or a distinct section of a
page.
● <footer> — Defines the footer for any section or page. You can use the <footer> tag
within a section or article tag, but it’s most commonly used at the very bottom of a page.
Usually the footer has a lot of legal text in it.
The document’s Body(cont…)
● <aside> — Newly introduced in HTML [Link] allows to create a section that is
used display the information about the content of other elemnts,time and
date, weather report, current news etc
● <address> — The <address> tag defines the contact information for the
author/owner of a document or an article.
● The contact information can be an email address, URL, physical address,
phone number, social media handle, etc.
● The text in the <address> element usually renders in italic. Most browsers will
add a line break before and after the address element.
Types of HTML 5 Elements
● Structural Elements
● Metadata Elements
● Form Elements
● Formatting Elements
● List Elements
● Table Elements
● Scripting Elements
● Embedded Content Elements
Structural /semantic Elements
Group of elements that are used to organize page content to give the documents
more structure
Some examples are:
<header> — Defines the header of any section or page
<nav> — Defines the main navigation links
in a page or section
<footer> — Defines the footer for any section or page
<article> and <section> —define any article
or a distinct section of a page.
<aside>
<body>,<h1>…<h6>, <br>,<hr>
<div> division in document
<a> — Defines Hyperlink
<p> — defines paragraph
<body>,<head>
Metadata Elements
● Metadata is data (information ) about data.
● It provide additional information about the document.
● It is not displayed on the page
● Metadata elements are typically used to specify page
description,keywords,author of document, last modified etc.
● Example:
<base>
<link>
<meta>
<title>
<style>
Form Elements
● HTML form elements are used to capture user input.
● datalist, output, keygen, progress, and meter are new
form elements in HTML 5
● text box, check box, drop down, submit button
check box,radiobutton are commonly used form elements
Formatting Elements
● Elements used to format the text in HTML Page
List Elements
HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list
elements. Lists may contain −
<ul> −An unordered list. This will list items using plain
bullets.
<ol> −An ordered list. This will use different schemes of
numbers to list your items.
<dl> −A definition list. This arranges your items in the
same way as they are arranged in a dictionary.
Table Elements
The table element represents a table. These allow authors to represent tabular data in a document. In
the code, a table basically consists of a group of rows that contain, each, a group of cells.
● A table element acts only as a container where other elements can be declared. These elements
are:
● caption: provides a title for the table.
● colgroup: groups columns thematically.
● col: applies common attributes and styles to one or more columns.
It can only be declared as child of colgroup.
● tbody: represents the body section of a table.
● thead: represents the header section of a table.
● tfoot: represents the footer section of a table.
● tr: represents a row. It can be declared as child of tbody, thead, tfoot or table.
● td: represents a data cell. It can only be declared as child of tr.
● th: represents a header cell. It can only be declared as child of tr.
Scripting Elements
● It is used to add or reference executable code ,typically javascript
● The <script> tag is used to define a client-side script (JavaScript).
● The <script> element either contains scripting statements, or it points to an
external script file through the src attribute.
● The <noscript> tag defines an alternate content for users that have disabled
scripts in their browser or have a browser that doesn't support script
Embedded content Elements
● The embedded content element can be used to embed external application,
typically multimedia content like audio or video into an HTML document
● Eg: <img>,<iframe>,<canvas>,<map><source>,<figure>
● New Media Elements added in HTML5
HTML 5 Attributes Types
HTML Tag Attributes are modifiers for the HTML tags and they provide additional
information. In most cases they are defined in name="value" pairs and they are always
declared in the opening tag.
Eg: <img src="[Link]" width="200" height="200" />
HTML attributes are generally categorised as
● Required attributes or Optional attributes
● Standard or global attributes
● Event attributes
Required/Optional Attributes
They are the element specific attributes that defines additional properties of an
element
Attribute Belongs to Description
Eg: - href <a>,<area> Specifies the URL of the page the link goes to
,<base>,<link>
src <img>,<iframe>, Specifies the URL of the media file
<input>,<script>
<video>,<audio>
colspan <td>,<th> Specifies the number of columns a table cell should
span
rowspan <td>,<th> Specifies the number of rows a table cell should span

form <button>,<input>... Specifies the name of the form the element belongs to
controls <video>,<audio> Specifies that audio/video controls
muted <video>,<audio> Audio output shoud be muted
 Standard/Global Attributes
These are the common to all element (<base>,< tilte>,< script> are exceptions)
Eg: -
Attribute Value Description
class Classname Specifies the class name of the element

id name Specifies a unique identifier for the element which

must be unique in the whole document

style style Specifies inline style information for an element

title text Provide advisory information related to the element

like tooltip
tabindex number Specifies the tabbing order of the element
translate Yes, no Specifies whether the text content of the element
should be translate or not
Event Attributes
Events are the actions that are performed as a result of user action.
HTML has the ability to let events trigger actions in a browser, like starting a
JavaScript when a user clicks on an element.
Types of event attributes are:
● Window Event
● Form Events
● Mouse Events
● Keyboard Events
● Clipboard Events
● Media Events
HTML Data Types
In HTML ,data types is explained as the type of data that is used in the content of
an element or in the value of an attribute
HTML has different data types classified under the following different
specifications:
● Basic html data types
● Data types defined by RFC and IANA documentation
● Data types defined by W3C
HTML Data Types
Basic Data Types Data Types W3C
● Character ● Date Time
● Text ● RGB Triplet
● Name ● Color names
● Number ● Link Types
● Media Types
Data Types by RFC & IANA
● URI
● Content Type
● Language Code
● Character set
HTML 5 Form Elements
Basic HTML form elements
● <form>
● <input>
● <button>
● <select>
● <textarea>
● <label>
● <fieldset>
● <legend>
New HTML5 Form Elements
<datalist > - Specifies a list of predefined option for <input> element
- provides an autocomplete feature on <input >element
-Use the <input> element list attribute to bind together with a
, datalist element
<keygen> - Generates an encryption key for passing encrypted data to server
<output> -Result of a calculation
<progress> -Represents the completion process of a task
-Often marked as percentage from 0 to 100%
<meter> -defines a scalar measurements within a known range
-also known as guage
File Uploading using forms
● <input> element with type=“file”used to choose one or more file from device
storage
● To select multiple file uses “multiple “ attribute
● A file input’s value attribute contains a DOMstring that represents the path to
the selected file
Frameset and Frames
● It is used to display one or more than one
HTML document in the same browser window
● Each HTML document is called frame and
each frame is independent of other
● A collection of frames in the browser
window is known as frameset
● Instead of using <body> tag,
<frameset> tag is used to divide the browser window
● <frameset> contains <frame> for each frame of the attribute
● This Tag are not used in HTML5
Frameset and Frames
Example scripts
<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="..[Link]">
<frame src="frme4..html">
</frameset>
</html>

<frameset rows="*,*" cols="*,*">

<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
Frameset and Frames

Attributes of <frameset> and <frame> elements are

Cascading Style Sheets (CSS)
● Cascading Style Sheets(CSS) is a simple design language intended to simplify the process of
making web pages presentable.

● CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text,
the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other effects.

● CSS is easy to learn and understand and it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML

● CSS was intoduced in 1993 by WWW

● CSS3 is the latest version of CSS specifications
Advantages of Using CSS
● CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.
● Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
● Easy maintenance - To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
● Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give
a far better look to your HTML page in comparison to HTML attributes.
● Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
● Global web standards - Now HTML attributes are being deprecated and it is being recommended
to use CSS. So it is a good idea to start using CSS in all the HTML pages to make them compatible
to future browsers.
CSS Syntax
A style sheet consist of list of [Link] rule has two main parts: A
selector, one or more declarations

Selector −A selector is an HTML tag at which a style will be applied. Eg: h1,p etc

Each declaration consists of a property and value

Property −A property is a type of attribute of HTML tag. Eg: color, border etc.

Value −Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
Applying CSS to HTML
There are three ways to inserting a style sheet
● Inline style
Affects only the element where applied

● Internal style sheet

Affects only the element in a single file

● External style sheet

Linked to unlimited number of files
Inline Style
● An inline style may be used to apply a unique style for a single element

● Use it when you need to format just a single section in a web page

● Syntax:

<h1 style="color: blue; margin-left:30px;">This is a heading.</h1>

Internal style
● An internal style sheet may be used if one single page has a unique style
● Use it when you need to modify all instances of particular element (e.g., h1) in a wb
page
● Syntax:
<head>
<style>
body {
background-color: black;
}
h1 {
color: red;
}
</style>
</head>
External Style sheet
• An external style sheet is a text file containing the style definition (declaration)

• Use it when you need to control the style for an entire web site

• Syntax:

<head>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>
CSS Selectors
● CSS selectors are used to "find" (or select) the HTML elements you want to style.

Types of selectors

* Universal Selector
* Element selectors
* Class Selectors
* ID Selectors
* Grouping Selectors
Universal selector
● The universal selector (*) selects all HTML elements on the page.

● Example
The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: red;
}
Element Type Selector
● The element selector selects HTML elements based on the element name.

● Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

<p>CSS stands Cascading Style sheet</p>

p{
text-align: center;
color: red;
}
Id Selector
● The id selector uses the id attribute of an HTML element to select a specific element.
● The id of an element is unique within a page, so the id selector is used to select one
unique element!
● To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
● Example
The CSS rule below will be applied to the HTML h1 element with id="para1":
<h1 id="para1">This is heading</h1> #para1 {
text-align: center;
color: red;
}
Class Selector
● The class selector selects HTML elements with a specific class attribute.
● To select elements with a specific class, write a period (.) character, followed
by the class name.
● Example
In this example all HTML elements with class="center" will be red and
center-aligned:

<h1 class=”center”>MTM college</h1> .center {

text-align: center;
<p class=”center”>arts and science college</p>
color: red;
}
Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
h1 {
text-align: center;
color: red;
}
h1, h2, p {
h2 {
text-align: center; text-align: center;
color: red; color: red;
}
}
p{
text-align: center;
color: red;
}
Styling lists with CSS
There are three different types of list in HTML:
● Unordered lists —items are marked with bullets.
● Ordered lists —items are marked with numbers.
● Definition list — A list of items, with a description
of each item.

CSS provides the several properties for styling and formatting the most commonly used unordered and
ordered lists. These CSS list properties typically allow you to:
● Control the shape or appearance of the marker.
● Specify an image for the marker rather than a bullet point or number.
● Set the distance between a marker and the text in the list.
● Specify whether the marker would appear inside or outside of the box containing the list items.
Styling lists with CSS
Five CSS properties to control list are:

Property Description Example

list-style Sets all the properties for a list in ul {

one declaration list-style: square inside
url("[Link]");
}

list-style-image Specifies an image as the list-item ul{

list-style-image: url('[Link]');}
marker

list-style-position Specifies the position of the list-item ul.a {

list-style-position: outside;
markers (bullet points)
}

list-style-type Specifies the type of list-item ul {list-style-type: circle;}

marker
Styling tables with CSS
● Tables are typically used to display tabular data
● CSS provides several properties that allow you to control the layout and presentation of the table
elements

CSS Tags Description

background-image table, th, td Specifies the background image.

background-color all Specifies the background color.

Specifies the width of

width table, th, td
the table, th, or td.
Specifies the height of
height table, tr, th, td
the table, th, or td.
text-align tr, th, td Aligns the text.

vertical-align tr, th, td Aligns vertically

Styling tables with CSS
CSS Tags Description

Specifies the space between adjacent

border-spacing table borders and the content surrounding the
table.

Used to indicate whether adjacent borders

border-collapse table should be merged (collapse) or not
(separate).

When applied to table cells

padding table (e.g., th and td), creates a buffer between
their content and the cell borders.

Allows you to control the borders of each

border table side of the table and each side of each cell
independently using the border properties.
 Styling Link with CSS
● Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
● In addition, links can be styled differently depending on what state they are in.
/* mouse over link */
The four links states are: /* unvisited link */ a:hover {
● a:link - a normal, unvisited link a:link { color: hot pink;
color: red Background-color: red ;
● a:visited - a link the user has visited text-decoration: none;
● a:hover - a link when the user mouses }
/* visited link */
over it a:visited { /* selected link */
● a:active - a link the moment it is clicked color: green; a:active {
text-decoration: underline color: blue;
} }
CSS Image Gallery
● <img> tag is used to insert image on HTML document
●It is an empty tag contain attributes only
Syntax:
<img src="[Link]" alt="Smiley face" height="42" width="42”>
Image
Opacity
• property for image transparency is called opacity.
• Opacity value contain b/w 0 to 1.
• Syntax:
img {
opacity:0.4;
}
QUESTIONS
*Static dynamic and active web [Link]'s differences
** Client side and server side scripts and its differences
*HTML basic data types
*HTML page structure,tags used to create a page
*Use of script ,font tags in html
*Html table ,list ,form elements And file uploading with example
*Frames and frameset
*What is HTML n CSS
**Inline,internal and external style sheet
*CSS selectors
*CSS list
*What is Image opacity and create image gallery