Full Stack Web

Development
by Dr Piyush Bagla
 Why HTML 5.0 ?

Internet Hypertext SGML HTML WWW W3C WHATWG

ARPANET
HTML 5.0
 - The Internet is a global network of interconnected
computer networks that communicate using
standardized protocols.

- The Internet provides the infrastructure for

transmitting data between devices and networks
worldwide.
Internet
- The WWW operates on top of the Internet,
leveraging its infrastructure to connect web servers
and clients, enabling the exchange of hypertext
documents (web pages) between users and
servers.
History of Internet
ARPANET
 - Hypertext is a concept of organizing and linking
text documents electronically, allowing users to
navigate between related pieces of information
through hyperlinks.

Hypertext - Hypertext enables non-linear navigation, where

users can jump from one document to another by
clicking on hyperlinks embedded within the text.
 - SGML stands for Standard Generalized Markup Language. It's
used for defining the structure and attributes of documents.

- SGML serves as a framework for defining other markup

languages and has been influential in developing various
document formats and standards.

SGML
- SGML allows users to define the hierarchical structure of
documents, specify elements and attributes, and establish
relationships between different parts of the document. SGML-
aware software can then process these documents to extract,
manipulate, or present the information contained within them.
SGML Application Areas

In the publishing industry, SGML has been used to define the structure
of technical documentation, such as user manuals for complex
machinery or equipment.

The aerospace industry has extensively used SGML for creating

structured documentation, such as aircraft maintenance manuals.

In the healthcare industry, SGML could be used to define the structure

of electronic medical records (EMRs)
 - HTML provided a standardized markup language
specifically designed for creating hypertext documents for
the World Wide Web.

- HTML provides a standardized way to structure and format

hypertext documents for the web, using tags to define
elements such as headings, paragraphs, images, and
hyperlinks.
HTML
- HTML tags allow content creators to embed hyperlinks
within web pages, enabling users to navigate between
different documents on the web.
 - The WWW is a system of interlinked hypertext documents
accessed via the Internet.

- The WWW was invented by Tim Berners-Lee in 1989 as a

decentralized system for sharing and accessing hypertext
World Wide documents (web pages) globally.
Web
- Hyperlinks within web pages allow users to navigate
between different documents on the web, creating a
network of interconnected information.
 - Hypertext laid the conceptual groundwork for linking text
documents electronically, enabling non-linear navigation between
related pieces of information.

- HTML provided the language and structure for creating hypertext

documents within the framework of the WWW, allowing content
creators to embed hyperlinks within web pages.
Link Between
Them - The WWW combined hypertext with standardized protocols like
HTTP (Hypertext Transfer Protocol) and URLs (Uniform Resource
Locators) to create a decentralized system for sharing and
accessing hypertext documents (web pages) via the Internet.

- The Internet provides the underlying infrastructure for

transmitting data between devices and networks, enabling the
exchange of hypertext documents between users and servers
worldwide.
 -The consortium formed in 1994 by Tim and it focused on
establishing foundational standards for the web, including
HTML, HTTP, and URLs

-This included specifications for markup languages (HTML,

W3C XML), style sheet languages (CSS), document object
models (DOM), and web accessibility guidelines (WCAG).

- The W3C's work helped establish a common framework

for web development and ensured the compatibility of web
technologies across different platforms and devices.
 Why was WHATWG Created?
Web Hypertext Application Technology Working Group
In the early 2000s, W3C was focusing on XML-based standards
(XHTML) instead of improving HTML. Many developers and browser
vendors (like Mozilla, Apple, and Opera) disagreed with this approach
because:

XHTML was too strict and hard to implement.

WHATWG The web was evolving toward dynamic applications, and W3C wasn’t
keeping up.

Browser vendors wanted to improve HTML in a more practical and

faster way.

To address this, WHATWG was formed in 2004 by engineers from Apple,

Mozilla, and Opera to focus on real-world web development
needs rather than academic theories.
 Real World Analogy

INTERNET = THE HIGHWAY WWW = THE SHOPPING HTML = THE BLUEPRINT OF BROWSER = YOUR CAR
SYSTEM MALL EACH SHOP (HOW YOU ACCESS
(CONNECTS EVERYTHING) (WEBSITES YOU VISIT) (STRUCTURE OF WEB PAGES) WEBSITES)
HTML 5.0 Predecessors
+--------------+--------------------------------+----------------+----------------------------------------+
| HTML Version | Development Body | Year Published
+--------------+--------------------------------+----------------+----------------------------------------+
• | HTML 1.0 | Tim Berners-Lee at CERN | 1991
• | HTML 2.0 | Internet Engineering Task Force | 1995
• | HTML 3.2 | W3C | 1997
• | HTML 4.01 | W3C | 1999
• | XHTML | W3C | 2000
• | HTML5 | W3C (initially) & WHATWG (main) | 2014
• | HTML Living Standard | WHATWG | 2017
• +--------------+--------------------------------+----------------+----------------------------------------+
 Comparison of HTML 5 Elements with previous versions

HTML Version Elements Added

HTML 1.0 It was the initial version that laid the groundwork for subsequent versions to
build upon.
HTML 2.0 <img>, <form>, <input>, <textarea>, <select>, <button>, <ol>, <ul>, <li>,
<table>, <tr>, <td>, <th>
HTML 3.2 <embed>, <iframe>, <font>
HTML 4.01 <meta>, <link>, <script>, <div>, <span>
XHTML 1.0 Same elements as HTML 4.01 but reformulated in XML syntax
HTML5 <header>, <nav>, <section>, <article>, <aside>, <footer>, <audio>, <video>,
<canvas>, <svg>, <details>, <summary>, <progress>, <meter>, <datalist>,
<output>, <time>, <mark>, <meter>, <progress>, <ruby>, <rt>, <rp>, and many
more
Feature HTML (Previous Versions) HTML5
Various doctypes for HTML 4.01, XHTML 1.0,
Doctype Declaration etc. Simplified to <!DOCTYPE html> for HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML>
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Limited semantic elements (<div>, <span>, Rich set of semantic elements (<header>,
Structural Elements
<table>, etc.) <nav>, <section>, <footer>, etc.)

Rely on third-party plugins like Flash or

Multimedia Support Native <audio> and <video> elements
Silverlight

Canvas Not available <canvas> element for dynamic graphics

New input types (email, url, date, number,

Limited input types and attributes, rely on
Forms Enhancements etc.) and form validation attributes
JavaScript for validation
(required, pattern, etc.)
Feature HTML (Previous Versions) HTML5

Geolocation Not available Geolocation API for retrieving user's location

Native Drag and Drop API for dragging and

Drag and Drop Not available
dropping elements

Rely on JavaScript cookies localStorage and sessionStorage APIs for client-

Local Storage
(eg. Lang of webpage) side storage

Web Workers API for running scripts in

Web Workers Not available
background threads (eg. Image processing)
Feature HTML (Previous Versions) HTML5

Limited semantic markup for Extensive use of semantic elements for

Semantic Markup
accessibility and SEO improved accessibility and SEO

Rely on third-party plugins like Flash or Native support for embedding video and
Video and Audio
Silverlight audio content

Improved support for mobile devices and

Mobile Support Limited support for mobile devices
responsive design

Improved cross-browser compatibility and

Compatibility Varies across browsers and platforms
standardized features
Semantics in HTML

• A semantic element clearly describes its meaning to both the browser and the
developer.
• They are also called structural elements.
• In HTML, there are some semantic elements that can be used to define different
parts of a web page.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly define its
content.
<section> is used for grouping related content, while <article> is used for stand-alone, independent content
items that can be syndicated or shared separately.
 Semantic Elements in HTML

• Many websites contain HTML code like <div

id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer.
• In HTML, some semantic elements can be
used to define different parts of a web page:

• <footer> • <article> • <section>

• <header> • <aside> • <summary>
• <main> • <details> • <time>
• <mark> • <figcaption>
• <nav> • <figure>
HTML Links

• Use the <a> element to define a link

• Use the href attribute to define the link
address
• Use the target attribute to define where to
open the linked document
• Use the <img> element (inside <a>) to use an
image as a link
• Use the mailto: scheme inside
the href attribute to create a link that opens the
user's email program
HTML Links
Bookmarks

• <p><a href="#C4">Jump to Chapter 4</a></p>

.
.
.
.
.

• <h2 id="C4">Chapter 4</h2>

• <p>This chapter explains ba bla bla</p>
HTML Links
Absolute vs Relative URL
There are two ways to specify the URL in the src attribute:

• 1. Absolute URL - Links to an external image that is hosted on another website.

Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in
violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or
changed.

• 2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the
domain name.
• If the URL begins without a slash, it will be relative to the current page.
• Example: src="img_girl.jpg".
• If the URL begins with a slash, it will be relative to the domain.
• Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change the domain.
•
HTML Images and Icon

Image
• Basic tag and attributes
• Image Map
• The Picture Element

Icon
Step 1 – Copy the style link from any website (which provides this functionality) inside the head section
Example - Font Awesome CDN

Step 2 – Copy the desired icon link inside the body section
<i class="fa fa-home"></i>
Example – Font Awesome Icon
 HTML Images and Icon
Image Map
An image map is an image with clickable areas.

<img src="workplace.jpg" alt="Workplace" usemap="

#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="
Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt
="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="C
offee" href="coffee.htm">
</map>

credit w3schools
 The coordinates 34,44 is located 34 pixels The coordinates 270,350 is located 270
from the left margin and 44 pixels from the pixels from the left margin and 350 pixels
top from the top

credit w3schools
 The coordinates 34,44 is located 34 pixels The coordinates 270,350 is located 270
from the left margin and 44 pixels from the pixels from the left margin and 350 pixels
top from the top

credit w3schools
HTML Images and Icon

Image Map

An image map is an image with

clickable areas.
HTML Images and Icon
The Picture Element
The HTML <picture> element allows you to display different pictures for different devices or screen
sizes.

<picture>
<source media="(min-width:
650px)" srcset="img_food.jpg">
<source media="(min-width:
465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
 HTML List
• Unordered
• type
• circle Unordered Ordered Description
• Square
• Disc
• none
• Ordered
• type
• 1,2,3
• a,b,c
• A,B, C
• i, ii, iii
• I, II, III,
• Description
• Nested List
HTML Table
HTML Table
HTML Table
iFrame in HTML
HTML element used to embed another document within the current HTML document. It allows you to display
content from another source, such as a web page, PDF document, video, or interactive application, within the
context of your own web page.
 • A block-level element always starts on a
new line, and the browsers automatically
add some space (a margin) before and
after the element.
• A block-level element always takes up
the full width available (stretches out to
the left and right as far as it can)
Block level and
Inline elements
Eg. <p>, <div>, <ul>, <form> etc

Note: The <div> element is often used as

a container for other HTML elements.

• An inline element does not start on a new

line.
• An inline element only takes up as much
width as necessary.
Eg. <span>, <img>, <a> etc
HTML Form
Get vs POST

GET:
•Appends the form data to the URL in name/value pairs
•NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
•The length of a URL is limited (2048 characters)
•Useful for form submissions where a user wants to bookmark the result
•GET is good for non-secure data, like query strings in Google
POST:
•Appends the form data inside the body of the HTTP request (the submitted form data is not
shown in the URL)
•POST has no size limitations and can be used to send large amounts of data.
•Form submissions with POST cannot be bookmarked.
Accessibility in HTML5

Accessibility in HTML5 refers to the practice of designing and coding web content in a way
that ensures it is accessible (a good way to navigate and interact) to all users, including those
with disabilities.

• Semantic HTML Elements

• Alternative Text
• Keyboard Navigation
• Create Good Link Text
• Form attributes
etc
The W3C Markup Validation Service

A valid Web page is not necessarily a good web page, but an invalid Web
page has little chance of being a good web page.

https://validator.w3.org
The W3C CSS Validation Service

Note: If you want to validate your CSS style sheet embedded in an (X)HTML document,
you should first check that the (X)HTML you use is valid.

https://jigsaw.w3.org/css-validator/
HTML | CSS | Javascript

1. HTML to define the basic structure of web pages.

2. CSS to specify the layout of web pages.

3. JavaScript to program the behavior of web pages

CSS (Cascading Style Sheets)

p
{
color: blue;
}
Types of CSS or Ways to Insert CSS

•External CSS

•Internal CSS

•Inline CSS
Inline CSS
Internal CSS
External CSS
HTML and CSS Comments

HTML
<!-- These paragraphs will be red -->

CSS
/*These paragraphs will be red */
CSS Selectors

CSS selectors are used to select the HTML elements you want to style.

CSS selectors are divided into five categories:

•Simple selectors (select elements based on name, id, class, universal)

•Combinator selectors (select elements based on a specific relationship between them)
•Pseudo-class selectors (select elements based on a certain state)
•Pseudo-elements selectors (select and style a part of an element)
•Attribute selectors (select elements based on an attribute or attribute value)
1. Simple selectors (tag name)

p { p,h1 {
text-align: center; text-align: center;
color: red; color: red;
} }

Single Selector Group Selector

ID selector

•The id attribute is used to specify a unique id for an HTML element

•The value of the id attribute must be unique within the HTML document
•The id attribute is used by CSS and JavaScript to style/select a specific element
•The value of the id attribute is case-sensitive
•The id attribute is also used to create HTML bookmarks
•JavaScript can access an element with a specific id with
the getElementById() method
Class selector

• The HTML class attribute specifies one or more class names for an element
• Classes are used by CSS and JavaScript to select and access specific elements
• The class attribute can be used on any HTML element
• The class name is case-sensitive
• Different HTML elements can point to the same class name
• JavaScript can access elements with a specific class name with
the getElementsByClassName() method
Universal selector

Select all HTML elements on the page.

* {
text-align: center;
color: blue;
}
2. Combinator selectors

There are four different combinators in CSS:

•Descendant Combinator(space)

•Child Combinator(>)

•Next Sibling Combinator(+)

•Subsequent-sibling Combinator(~)
3. Pseudo-class selectors

A pseudo-class is used to define a special state of an element.

/* unvisited link */
Syntax a:link { div:hover p {
color: #FF0000; display: block;
selector:pseudo-class { } }
property: value;
} /* visited link */
a:visited {
color: #00FF00;
}
4. Pseudo-element selectors

A CSS pseudo-element is used to style specified parts of an element.

Syntax p::first-line { p::first-letter {

color: #ff0000; color: #ff0000;
selector::pseudo-element { font-variant: small- font-variant: small-
property: value; caps; caps;
} } }
5. Attribute selectors

It is possible to style HTML elements that have specific attributes or attribute values.

a[target] { a[target="_blank"] {
background-color: yellow; background-color: yellow;
} }
CSS Colors
There are four common ways to apply colors
1. Direct Color Name
<h1 style="color:Red;">Hello World</h1>

2. RGB (Red, Green, Blue)

rgb(255,255,255)

3. HEX
#RRGGBB, #ff6678

4. HSL (hue, saturation, and lightness) hsl(0, 100%, 50%)

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white
CSS Box Model
 CSS Box Model

All HTML elements can be considered as boxes.

Width and Height of an Element

Note: When you set the width and height properties of an element with CSS, you just set the
width and height of the content area.

• To calculate the total width and height of an element, you must also include the padding
and borders.

Note: The margin property also affects the total space that the box will take up on the page,
but the margin is not included in the actual size of the box. The box's total width and height
stops at the border.
CSS Fonts

The shorthand font property, combines several font-related properties into one. The order of
the values in the shorthand font property is as follows:

1.font-style: Specifies the font style (e.g., italic).

2.font-variant: Specifies the font variant (e.g., small-caps).
3.font-weight: Specifies the font weight (e.g., bold).
4.font-size/line-height: Specifies the font size and optional line height (e.g., 12px/30px).
5.font-family: Specifies the font family (e.g., Georgia, serif).

Note: The font-size and font-family values are required. If one of the other values is
missing, their default value are used.
Bootstrap

• Bootstrap is a free front-end framework for faster and easier web development.

• Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins.

• Bootstrap also gives you the ability to easily create responsive designs.
Bootstrap Versions

• Bootstrap 5 (released 2021) is the newest version with new components, faster
stylesheet and more responsiveness. However, Internet Explorer 11 and down is not
supported.

• Previous versions are Bootstrap 3 & 4.

• Bootstrap 5 has switched to vanilla JavaScript instead of jQuery.

Where to Get Bootstrap 5?

There are two ways to start using Bootstrap 5 on your own website.

• Include Bootstrap 5 from a CDN.

• Download Bootstrap 5 from www.getbootstrap.com

Advantage of Bootstrap 5 from CDN

• Many users already have downloaded Bootstrap 5 from jsDelivr when visiting another
site. As a result, it will be loaded from cache when they visit your site, which leads to
faster loading time.

• Also, most CDN's will make sure that once a user requests a file from it, it will be
served from the server closest to them, which also leads to faster loading time.
Bootstrap 5 Containers

Containers are used to pad the content inside of them, and there are two container
classes available:

1. The .container class provides a responsive fixed-width container.

2. The .container-fluid class provides a full-width container, spanning the entire

width of the viewport.
 Grid System
It consists of a series of rows and columns organized into a grid, which provides a structured way to arrange
content on a web page.

Here are the key components of the grid system in Bootstrap:

• Container: The outermost element that wraps all the rows and columns. It provides a fixed-width container for
your content. Bootstrap offers two types of containers: .container for fixed-width containers and .container-
fluid for full-width containers.
• Row:
• Column: Columns are the building blocks of the grid system. They are placed inside rows and are used to divide
the horizontal space within a row. Bootstrap provides a set of predefined column classes, such as .col-, .col-sm-,
.col-md-, .col-lg-, and .col-xl-, which define the width of the column at different breakpoints.
Grid System