HTML5
What is HTML5?
HTML5
is the latest version of HTML (HyperText Markup
Language).
Introduced by W3C and WHATWG.
Standard for structuring and presenting content on
the web.
Designed to support modern multimedia while
keeping code simple.
Key Features of HTML5
New semantic elements: <header>, <footer>,
<section>, <article>, and <nav>
Native multimedia support: <audio>, <video>
Enhanced form controls
Offline capabilities with local storage and session
storage
Better support for mobile and responsive design
Basic Structure of an HTML Document
<!DOCTYPE html>: Declares the document type
(HTML5).
<html>: Root of the document.
<head>: Contains metadata (not visible on the
page).
<title>: Title shown in browser tab.
<body>: Main content visible to users.
Semantic elements
What is Semantic HTML?
HTML that clearly describes its meaning to both the browser and the developer.
Why Semantic Elements?
Improve code readability
Enhance SEO
Better accessibility for screen readers
Easier to maintain and style
What Are Semantic Elements?
Elements that describe their purpose in a human- and machine-readable way
Examples: <header>, <footer>, <article>, <section>, <nav>, etc.
Replace generic <div> and <span> when possible
Common Semantic Elements in HTML5
Element Purpose
<header> Defines the header of a page/section
<nav> Defines navigation links
<main> Main content of the document
<article> Self-contained content or post
<section> Thematic grouping of content
<aside> Sidebar or related content
<footer> Footer for a page or section
What are Headings in HTML?
There are six levels of headings:
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
src Attribute
Commonly used with:
<img> – images
<iframe> – embedded webpages or videos
<audio> and <video>
<script> – external JavaScript files
Example 1:
<img src="[Link]" alt="A cute dog">
List
A list is a way to organize related items vertically on a webpage.
Lists are used to group related pieces of information for better
readability and structure.
In HTML, lists help structure content. They can be used for menus,
instructions, features, or any group of related items.
Types
Ordered List (<ol>)
Unordered List (<ul>)
Description List (<dl>)
HTML Tags Used in Lists
Tag Description
Defines an unordered list
<ul>
(bulleted list).
Defines an ordered list
<ol>
(numbered list).
Defines a list item inside both
<li>
<ul> and <ol>.
Defines a description list (a list
<dl>
of terms and descriptions).
Defines a term/name in a
<dt>
description list (<dl>).
Defines the description/details
<dd>
for the term in <dt>.
Image
The <img> tag is used to embed images in a webpage.
It is self-closing (does not need a closing tag).
Key attributes:
src — specifies the path or URL of the image file.
alt — alternative text for the image (important for accessibility).
width and height — define the size of the image (optional).
title — provides additional info (tooltip on hover).
Basic Syntax:
<img src="[Link]" alt="Description of image" width="300" height="200">
Table
The <table> tag in HTML is used to create a table, which is a
structured set of data made up of rows and columns. Here's a
breakdown of how the table structure works and the common
tags used inside it:
Used to display data in rows and columns
Basic tags:
<table>, <tr>, <td>, <th>
Can be styled and structured using attributes
AUDIO VIDEO CONTROL ELEMENTS
Drag and Drop in HTML
Drag and Drop lets users click on an element, drag it, and drop it somewhere
else on a webpage.
It's often used in interactive UIs like file uploads, rearranging lists, games, etc.
HTML5 provides native drag-and-drop API with special events.
draggable="true": Makes an element draggable.
Important events:
dragstart: When you start dragging an element.
dragover: When a draggable element is over a drop target (must prevent
default to allow drop).
drop: When the dragged element is dropped.
CASCADING STYLE SHEETS (CSS)
CSS (Cascading Style Sheets) is a language designed to simplify the
process of making web pages presentable.
It allows you to apply styles to HTML documents by prescribing colors,
fonts, spacing, and positioning.
The main advantages are the separation of content (in HTML) and
styling (in CSS) and the same CSS rules can be used across all pages
and not have to be rewritten.
HTML uses tags, and CSS uses rule sets.
CSS styles are applied to the HTML element using selectors.
CASCADING STYLE SHEETS (CSS)
Cascading in CSS refers to how styles are applied to elements based
on priority rules. When multiple CSS rules target the same element,
the browser decides which style to apply by following the cascading
order: inline styles, internal styles, and external stylesheets.
The specificity of selectors, the order of CSS rules, and the use of
important tags further determine which styles take precedence.
This allows developers to layer styles and create more complex
designs without overriding other rules unnecessarily. Understanding
this behavior is essential for efficient and effective styling.
WHY CSS?
Saves Time: Write CSS once and reuse it across multiple HTML pages.
Easy Maintenance: Change the style globally with a single
modification.
Search Engine Friendly: Clean coding technique that improves
readability for search engines.
Superior Styles: Offers a wider array of attributes compared to HTML.
Offline Browsing: CSS can store web applications locally using an
offline cache, allowing offline viewing.
CSS TYPES
Inline CSS: Applied directly within an HTML element's
style attribute, affecting only that specific element.
Internal CSS: Defined within a <style> tag in the
<head> section of an HTML document, influencing
the entire page.
External CSS: Contained in a separate .css file linked
to the HTML document, allowing for consistent styling
across multiple pages.
CSS TYPES: 1. INLINE CSS
It is used for quick and simple styling changes to specific elements, without creating a
separate CSS file.
The style attribute is used directly within HTML tags (<h2> and <p>) to apply CSS properties like
color and font-size to the elements.
CSS TYPES: 2. INTERNAL CSS
It adding CSS rules directly within the <style> element in the <head> section of an
HTML document. It allows styling specific to that document.
CSS TYPES: 3. EXTERNAL CSS
External CSS is used to place CSS code in a separate file and link to
the HTML document. To use external CSS, create a separate file with
the .css file extension that contains your CSS rules.
Keeps styles separate from HTML, improving code readability and
maintainability.
Ideal for large projects to keep CSS centralized and reusable
across multiple pages.
Allows consistent styling across the website by referencing a single
CSS file.
CSS TYPES: 3. EXTERNAL CSS
[Link] [Link]
1. Selector
The selector tells the browser which HTML element to style.
Example:
p { color: red; }
p is the selector — it targets all <p> (paragraph) elements.
2. Property
The property defines what aspect of the element you want to change (like color, font, size, etc.).
Example:
color: red;
color is the property — it changes the text color.
3. Value
The value is the setting you want to apply to the property.
Example:
color: red;
red is the value — it's the color being applied.
CSS Selectors
CSS Selectors are used to target HTML elements on your pages,
allowing you to apply styles based on their ID, class, type attributes,
and more.
Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling
needs.
Combinators: Ideal for styling elements based on their DOM relationships (e.g., parent-child or sibling
relationships).
Group Selectors: These are used to apply the same styles to multiple unrelated elements simultaneously.
Attribute Selectors: Perfect for styling elements based on specific attributes or values, such as form inputs
or links with certain prefixes or states.
Pseudo-Classes: Best for styling elements dynamically or interactively, like: hover for user interaction,
or:nth-child() for structural styling.
CSS Selectors
1. Basic Selectors
Universal Selector (*):
Selects all elements on the page and applies the same style
universally.
CSS Selectors
1. Basic Selectors
Element Selector:
Targets all elements of a specific type, such as paragraphs or headers. For
example, setting a common font size for all paragraphs
CSS Selectors
1. Basic Selectors
Class Selector(.):
Applies styles to elements with a specific class attribute. For instance,
making all buttons have a blue background.
CSS Selectors
1. Basic Selectors
ID Selector(#):
Styles a single element identified by its unique id. For example,
changing the background color of a header.
CSS Selectors
[Link] Selectors
Descendant Selectors:
Targets an element inside another, such as paragraphs inside div .For
example, styling paragraphs inside a div.
CSS Selectors
[Link] Selectors
Child Selectors(>):
They only affects the direct child elements of a parent. For example,
styling direct children paragraphs of a div.
CSS Selectors
[Link] Selectors
Adjacent Sibling Selectors(+):
Styles an element immediately following another
CSS Selectors
[Link] Selectors
General Sibling Selectors(~):
Styles all siblings that follow a specific element.
CSS Selectors
[Link] Selectors
Group Selectors(,):
Styles all elements included as a group.
CSS Selectors
[Link] Selectors
Presence Selectors:
Target elements based on the presence or value of their
attributes.
CSS Selectors
[Link] Selectors
Attribute value Selectors:
It targets elements with a particular attribute value
CSS Selectors
[Link] Selectors
Substring matching Selectors(^=):
It matches elements where the attribute contains a
substring. <a href=[Link]
CSS Selectors
[Link] Selectors
Wildcard Selectors(*=):
Matches elements where the attribute value contains a specific
string. <a href=[Link]
CSS Selectors
[Link] Classes
:Hover:
Styles elements when the user hovers over them.
<a href=[Link]
CSS Selectors
[Link] Classes
:focus:
Styles the elements when the user focus on any particular element.
CSS Selectors
[Link] Classes
:first-child:
Styles the element which is the first child of it's parent.
CSS Selectors
[Link] Classes
:last-child:
Styles the element which is the last child of it's parent.
CSS Selectors
[Link] Classes
:last-child:
Styles the element which is the last child of it's parent.
CSS COMMENTS
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Rule cascading
“Cascading” in Cascading Style Sheets (CSS) means that
when multiple rules apply to the same element, the browser
decides which one wins using specific rules — called the
cascade.
CSS Rule consist of selector, property and value
Style Rule in CSS
A CSS style rule is a set of instructions that tells the browser how to style
HTML elements.
INHERITANCE
What is Inheritance in CSS?
Inheritance in CSS means that some CSS properties are automatically
passed from a parent element to its child elements.
The inherited value of a property on an element is the computed value of
the property on the element’s parent element.
For the root element, which has no parent element, the inherited value is
the initial value of the property.
General syntax
selector {
property: inherit;
}
BACKGROUND
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Component properties not set in the background shorthand property value declaration are set to their default values.
SYNTAX
/* Using a <background-color> */
background: green;
/* Using a <bg-image> and <repeat-style> */
background: url("[Link]") repeat-y;
/* Using a <visual-box> and <'background-color'> */
background: border-box red;
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/[Link]");
BACKGROUND
BACKGROUND BLEND MODE
The background-blend-mode property defines the blending mode of each background layer
(color and/or image).
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|colododge|saturation|color|luminosity;
normal This is default. Sets the blending mode to normal
multiply Sets the blending mode to multiply
screen Sets the blending mode to screen
overlay Sets the blending mode to overlay
darken Sets the blending mode to darken
lighten Sets the blending mode to lighten
color-dodge Sets the blending mode to color-dodge
saturation Sets the blending mode to saturation
color Sets the blending mode to color
luminosity Sets the blending mode to luminosity
BACKGROUND BLEND MODE
BACKGROUND BLEND MODE
BACKGROUND CLIP
CSS COLORS
RGBA color values are an extension of
RGB color values with an alpha
channel - which specifies the opacity
for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha). The
alpha parameter is a number between
0.0 (fully transparent) and 1.0 (fully
opaque).
CSS COLORS
HSL stands for Hue, Saturation and Lightness.
An HSL color value is specified with: hsl(hue,
saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360):
0 (or 360) is red
120 is green
240 is blue
Saturation is a percentage value: 100% is the full
color.
Lightness is also a percentage; 0% is dark (black)
and 100% is white.
BACKGROUND COLOR
Thebackground-color property sets the background color of
an element.
Thebackground of an element is the total size of the element,
including padding and border (but not the margin).
BACKGROUND COLOR VALUES
Value Description
color Specifies the background color. Look at CSS Color
Values for a complete list of possible color values.
transparent Specifies that the background color should be transparent.
This is default
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read
about inherit
BACKGROUND COLOR VALUES
BACKGROUND ORIGIN
The background-origin property specifies the origin
position (the background positioning area) of a
background image.
BACKGROUND ORIGIN
BACKGROUND ORIGIN
BACKGROUND ORIGIN
BACKGROUND POSITION
The background-position property sets the starting position of a
background image.
BACKGROUND POSITION
BACKGROUND POSITION
BACKGROUND POSITION
BACKGROUND POSITION-x
BACKGROUND POSITION-y
BACKGROUND POSITION-x
BACKGROUND POSITION-y
BACKGROUND REPEAT-Y
BACKGROUND REPEAT-X
BACKGROUND SIZE
BACKGROUND SIZE
BACKGROUND SIZE
BLOCK SIZE
The block-size property specifies the size of an element in the
block direction.
SYNTAX
div {
block-size: 200px;
}
BLOCK SIZE
BLOCK SIZE
BORDER
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
BLOCK SIZE
BORDER WIDTH
The border-width property specifies the width of
the four borders.
The width can be set as a specific size (in px, pt,
cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
BORDER WIDTH
BORDER COLOR
The border-color property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
BORDER COLOR
BORDER SIDES
If the border-style property has four values:
border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
BORDER COLOR
BORDER SIDES
If the border-style property has three values:
border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
BORDER COLOR
BORDER SIDES
If the border-style property has two values:
border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
BORDER SIDES
If the border-style property has one value:
border-style: dotted;
all four borders are dotted
BORDER IMAGES
The CSS border-image property allows you to specify an image to
be used instead of the normal border around an element.
The property has three parts:
The image to use as the border
Where to slice the image
Define whether the middle sections should be repeated or
stretched
[Link]
BORDER IMAGES
BORDER IMAGES
CSS SHADOWS
There are two types of shadows
Text Shadow
Box Shadow
The CSS text-shadow property applies shadow to text.
h1 {
text-shadow: 2px 2px;
}
CSS SHADOWS
TEXT SHADOWS
CSS SHADOWS
CSS SHADOWS
CSS SHADOWS
CSS SHADOWS
BOX SHADOWS
CSS SHADOWS
CSS TEXT EFFECTS
There are four text effects
text-overflow
word-wrap
word-break
writing-mode
CSS TEXT EFFECTS
Text Overflow
The CSS text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user.
CSS TEXT EFFECTS
CSS TEXT EFFECTS
CSS TEXT EFFECTS
Word Wrap
The CSS word-wrap property allows long words to be able to be
broken and wrap onto the next line.
If a word is too long to fit within an area, it expands outside:
CSS TEXT EFFECTS
CSS TEXT EFFECTS
CSS TEXT EFFECTS
CSS TEXT EFFECTS
WRITING MODE
The CSS writing-mode property specifies whether lines of text are
laid out horizontally or vertically.
CSS TEXT EFFECTS
CSS TEXT EFFECTS
CSS TEXT EFFECTS
CSS Transformations-2D
CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 2D transformation functions:
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
CSS Transformations-2D
The translate() Function
The translate() function moves an element from its current position (according
to the parameters given for the X-axis and the Y-axis).
CSS Transformations-2D
CSS Transformations-2D
CSS Transformations-2D
The rotate() Function
The rotate() function rotates an element clockwise or counter-clockwise
according to a given degree.
CSS Transformations-2D
CSS Transformations-2D
TRANSLATE AND ROTATE TOGETHER
transform: translate(100px,100px) rotate(20deg);
CSS Transformations-2D
CSS Transformations-2D
CSS Transformations-2D
TRANSLATE-X
The CSS translateX() function allows you to re-position an element along the
x-axis (horizontally).
The translateX() function is used within the transform property.
SYNTAX
transform: translateX(50px)
transform: translateX(50%)
CSS Transformations-2D
TRANSLATE-X
CSS Transformations-2D
TRANSLATE-Y
The CSS translateY() function allows you to re-position an element along the y-
axis (vertically).
The translateY() function is used within the transform property.
SYNTAX
transform: translateY(50px)
transform: translateY(50%)
CSS Transformations-2D
TRANSLATE-X
CSS Transformations-2D
The scale() Function
The CSS scale() function is used to scale an element (both width and height).
The scale() function defines values for how much an element is scaled in x-
and y-directions.
Syntax:
scale(sx, sy)
CSS Transformations-2D
TRANSLATE-X
CSS Transformations-2D
The scale() Function
The CSS scale() function is used to scale an element (both width and height).
The scale() function defines values for how much an element is scaled in x-
and y-directions.
Syntax:
scale(sx, sy)
CSS Transformations-2D
CSS Transformations-2D
SKEW
The CSS skew() function is used to skew an element along the x- and y-axis
by the given angles.
Syntax:
skew(ax, ay)
CSS Transformations-2D
CSS Transformations-2D
Matrix
The CSS matrix() function defines a 2D transformation, using a matrix of six
values.
The matrix() function takes six parameters, which allows you to rotate, scale,
move, and skew elements.
The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(),
translateX(), translateY()).
Syntax:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
CSS Transformations-2D
CSS 3D transforms are used to manipulate HTML
elements in three dimensions by rotating them along
the x-axis, y-axis, and z-axis. There are three main
types of transformation which are listed below:
rotateX(): Rotates an element around its X-axis.
rotateY(): Causes rotation around the Y-axis.
rotateZ(): Enables rotation along the Z-axis.
CSS Transitions
CSStransitions allows you to change property values
smoothly, over a given duration.
Properties
transition
transition-delay
transition-duration
transition-property
transition-timing-function
CSS Transitions
CSS Transitions
CSS Animations
Using CSS we can perform animations without a use of javascript.
We will learn following properties in animation
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
CSS Animations
Element gradually change from one style to another using
animation.
To use CSS animation, you must first specify some keyframes for
the animation.
Keyframes hold what styles the element will have at certain
times.
The animation-duration property defines how long an
animation should take to complete. If the animation-duration
property is not specified, no animation will occur, because the
default value is 0s (0 seconds).
CSS Animations
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
CSS Animations
CSS Animations
CSS Animations
animation-direction
The animation-direction property specifies whether an animation should be
played forwards, backwards or in alternate cycles.
normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards
CSS Animations
CSS Animations
animation-fill-mode
CSS animations do not affect an element before the first
keyframe is played or after the last keyframe is played. The
animation-fill-mode property can override this behavior.
The animation-fill-mode property specifies a style for the target
element when the animation is not playing (before it starts, after
it ends, or both).
CSS Animations
animation-fill-mode
none - Default value. Animation will not apply any styles to the element
before or after it is executing
forwards - The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-iteration-
count)
backwards - The element will get the style values that is set by the first
keyframe (depends on animation-direction), and retain this during the
animation-delay period
both - The animation will follow the rules for both forwards and
backwards, extending the animation properties in both directions
CSS Animations
CSS Animations
animation-timing-function
The animation-timing-function property specifies the speed
curve of the animation.
ease - Specifies an animation with a slow start, then fast, then
end slowly (this is default)
linear - Specifies an animation with the same speed from start
to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
Bootstrap
Bootstrap
is a front end framework used to create
modern websites and web apps.
Bootstrap is open source and free to use.
Also supports JavaScript extensions
Bootstrap is popular for developing responsive websites.
Responsive means websites which automatically adjust
themselves to look good on all devices from small
phones to large desktops.
Bootstrap
There are two ways to use bootstrap
1. Include bootstrap from CDN(Content delivery Networks)
2. Download bootstrap from [Link]
Bootstrap
CDN is a highly distributed platform of servers that helps
minimize delays in loading web page content by
reducing the physical distance between the server and
the user.
CDN helps to distribute bandwidth across multiple
servers, instead of allowing one server to handle all
traffic.
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Using CDN Link
<link
href=[Link]
ss/[Link]>
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
