Module-1 Reference Material
Uploaded by
Dhruv AggarwalModule-1 Reference Material
Uploaded by
Dhruv AggarwalWEB TECHNOLOGIES
Prepared
By
[Link] KUMAR
Department of AIML
VIT-AP
MODULE NO. 1
Introduction to Web Design
HTML(HYPER TEXT MARKUP LANGUAGE)
HYPERTEXT:hypertext
means simply “text within
text” and hypertext is a way to link two or
more web pages(HTMLdocument) with each other.
Markuplanguage: it is a computer language
which converts text in to different formats
such as image,tables,forms etc.
Html is a language developed by Tim Berners-
Lee in 1991.
Html is used to create web pages(static web
pages)
Html is not a procedural language like c, c+
+,java..etc
It is a markup language which Identifies the
element of the page so that , a browser like
internet explorer or Netscape navigator can
display that page on our computer screen.
A markup language is a set of markup tags.
The tag describes document content.
Html documents are also called web pages.
Web page:- a web page is a page which
contains information about a particular topic
which can be placed and accessed through
internet.
Web site:- it is a collection of web pages
containing information related to a particular
topic is called as web site.
www(world wide web):- it is a place on internet
where websites and web pages are started
and accessed.
INTRODUCTION TO HTML 5
Html5 is a language developed by Ian
Hickson (Google) and David Hyatt (Apple) in
22 January 2008.
Filename extension .html , .htm
Open Source Hyper Text Resources
HTML5 =HTML + CSS+JS
HTML= Next Generation Features for
Modern web Development.
Html5=WHATWG+W3C
It is Web Platform. It will be the new
standard for HTML.
HTML5 is currently under development as
the next major revision of the HTML
standard.
HTML5 is a markup language for
structuring and presenting World Wide Web
The history of HTML5 explained
As far as HTML5 vs HTML goes, unlike the latter, HTML5 has been developed by two
separate groups: the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG). To understand the advancements of
HTML5, it's helpful to have a brief overview of the general HTML timeline:
1991–1999
HTML was created by web legend Tim Berners-Lee in 1991, and HTML versions 1–4 were
developed throughout the 1990s by W3C. In these early days of widespread internet use,
HTML efficiently displays the vast majority of web content, since at this time it largely
consists of static, non-interactive sites.
2000
W3C recommends XHTML 1.0 – an XML-based markup language that mirrors/extends
HTML. Previous versions of HTML are now showing their age, struggling to handle the
latest generation of multimedia, and interactive sites. To get the best results, developers are
resorting to third-party plugins.
2004
Development of HTML is closed by W3C, who instead decide to focus on XHTML.
WHATWG is formed to develop HTML further, with the aim of reflecting the modern
dynamic web, while keeping backwards compatibility with existing HTML code.
2004–2006
WHATWG gains support from major web browser developers. In 2006, W3C also
announced its support for the project.
2008
The first public draft of HTML5 is released by WHATWG.
WHY USE HTML5
It allows you to play a video and audio file.
It allows you to draw on a canvas.
It facilitate you to design better forms and build
web applications that work offline.
It provides you advance features for that you
would normally have to write JavaScript to do.
The most important reason to use HTML 5 is, we
believe it is not going anywhere.
It will be here to serve for a long time
according to W3C recommendation.
SYNTAX
</html> <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration defines that
this document is an HTML5 document
The <html> element is the root element of an
HTML page
The <head> element contains meta information
about the HTML page
The <title> element specifies a title for the
HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's
body, and is a container for all the visible
contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML5-SYNTAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>: This is the very first line and declares the
document type to be HTML5. It's crucial for the browser to
render the page in standards mode. It is case-insensitive.
<html>: The root element of every HTML page. It encloses all
other HTML content. The lang attribute within the <html> tag
specifies the language of the document (e.g., "en" for English).
This is important for accessibility and search engines.
<head>: Contains meta-information about the HTML
document, such as the character set, viewport settings, title,
links to stylesheets, and scripts. This information is not
displayed on the page itself but is crucial for the browser and
other services. <meta charset="UTF-8">: Specifies the
character encoding for the document, typically set to UTF-8 for
broad character support.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">: Configures the viewport for responsive
web design, ensuring the page scales correctly on different
devices.
<title>My Web Page</title>: Sets the title that appears in
the browser tab or window title bar.
<body>: Contains the visible content of the HTML document,
such as text, images, links, and other multimedia.
2. Elements and Tags:
HTML content is structured using elements, which are
defined by tags:
Tags: Keywords enclosed in angle brackets (< and >).
Start Tag: Marks the beginning of an element (e.g., <h1>).
End Tag: Marks the end of an element and has a forward
slash before the element name (e.g., </h1>). Most elements
have both start and end tags.
Empty Elements (Void Elements): Some elements don't
have content and only have a start tag (and sometimes a
self-closing slash, though it's optional in HTML5). Examples
include <br> (line break), <hr> (horizontal rule), and
<img> (image).
Elements: Consist of a start tag, content (if any), and
an end tag (for non-empty elements). For example,
<h1>This is a heading</h1> is an h1 element.
Case-Insensitivity: HTML5 tag names are case-
insensitive (e.g., <h1> and <H1> are the same), but
it's a common best practice to use lowercase for
consistency and readability.
ATTRIBUTES
HTML5 attributes provide additional
information about HTML elements. They
modify the behavior, appearance, or identity
of elements. Attributes are always specified
in the start tag of an element.
Here's a breakdown of key aspects of HTML5
attributes:
1. Syntax:
Attributes follow a specific syntax within the
start tag:
<element attribute-name="attribute-
value">Content</element>
attribute-name: The name of the attribute
(case-insensitive, but lowercase is
recommended).
=: An equals sign separating the attribute
name and its value.
"attribute-value": The value assigned to the
attribute. It's generally recommended to
enclose values in double quotes ("), although
single quotes (') are also allowed. In some
limited cases, quotes can be omitted if the
value doesn't contain spaces or certain special
characters, but this is generally discouraged
for clarity.
Example:
<a href="[Link]
target="_blank">Visit Example</a>
IN THIS EXAMPLE
<a> is the element (anchor tag).
href is an attribute specifying the link's
destination.
"[Link] is the value of
the href attribute.
target is another attribute specifying where
to open the link.
"_blank" is the value of the target attribute,
indicating a new tab or window.
id: A unique identifier for an element within the HTML
2. TYPES OF ATTRIBUTES:
HTML5 ATTRIBUTES CAN BE BROADLY CATEGORIZED :
document.
class: Specifies one or more class names for an element,
used for styling with CSS and manipulation with JavaScript.
style: Allows inline CSS styling of an element (generally
discouraged for maintainability).
title: Provides extra information about an element, often
displayed as a tooltip on hover.
lang: Specifies the language of the element's content.
dir: Specifies the text direction (left-to-right or right-to-left).
tabindex: Specifies the tab order of an element.
draggable: Specifies whether an element is draggable.
hidden: Specifies that an element is not yet, or is no longer,
relevant.
data-*: Custom data attributes that allow you to store
private data specific to the element.
EXAMPLE OF GLOBAL ATTRIBUTES:
<div id="main-content" class="container primary" title="Main
section of the page">
<p lang="en">This is some English text.</p>
</div>
<button onclick="myFunction()" data-user-id="123">Click
Me</button>
Element-Specific Attributes: These attributes are specific to
certain HTML elements and provide functionality relevant to that
element.
Examples of Element-Specific Attributes:
For <a> (anchor): href, target, rel.
For <img> (image): src, alt, width, height.
For <input> (form input): type, name, value, placeholder,
required, min, max.
For <form>: action, method.
For <video> and <audio>: src, controls, autoplay, loop.
For <script>: src, type, async, defer.
3. Boolean Attributes:
Boolean attributes represent a binary state
(true or false). In HTML5, you can simply
include the attribute name to indicate that it is
true. You don't necessarily need to set a value
(although you can if you prefer, e.g.,
checked="checked").
Examples of Boolean Attributes:
HTML
<input type="checkbox" checked> <button
disabled>Click Me</button> <video autoplay
loop muted src="myvideo.mp4"></video>
In these examples, checked, disabled,
autoplay, loop, and muted are boolean
attributes. Their presence means they are
active (true).
4. Custom Data Attributes (data-*):
HTML5 allows you to create your own custom
attributes prefixed with data-. These are useful for
storing extra information within HTML elements that
you can later access and use with JavaScript without
polluting the standard attributes.
Example of Data Attributes:
HTML
<div class="product" data-product-id="456" data-
price="29.99" data-in-stock="true"> Product Name
</div> <script> const productDiv =
[Link]('.product'); const productId
= [Link]; // Accessing data-
product-id const price = [Link]; //
Accessing data-price const inStock =
[Link]; // Accessing data-in-
stock [Link](`Product ID: ${productId}, Price: $
{price}, In Stock: ${inStock}`); </script>
5. Case-Insensitivity (with
Recommendation):
Attribute names are generally case-insensitive
in HTML5 (e.g., ID is the same as id). However,
it is a widely adopted best practice to use
lowercase for attribute names for consistency
and readability, especially when working with
JavaScript and other web technologies where
case sensitivity might be important.
In summary, HTML5 attributes are
essential for extending the functionality
and providing context to HTML elements.
Understanding the different types of
attributes and their proper usage is
crucial for building well-structured and
interactive web pages.
EVENTS
HTML5 events are actions or occurrences that happen in the
browser, such as a user clicking a button, a page finishing
loading, or a video starting to play. These events can be
"listened" for by JavaScript code, which can then execute
specific functions in response. This allows for dynamic and
interactive web pages.
Here's a breakdown of common HTML5 event categories and
some examples:
1. Window Events: These events are triggered on the window
object.
onload: Triggered once the entire page (including all resources
like images and scripts) has finished loading.
onunload: Triggered just before the page is unloaded (e.g., when
the user navigates away or closes the window).
onresize: Triggered when the browser window has been resized.
onscroll: Triggered when the user scrolls the window.
onerror: Triggered when a JavaScript error occurs on the page.
onoffline: Triggered when the browser goes offline.
ononline: Triggered when the browser comes back online.
2. Form Events: These events are related to
HTML forms and their elements.
onsubmit: Triggered when a form is submitted.
onreset: Triggered when a form is reset to its
default values.
onfocus: Triggered when an element (like an
input field) gains focus.
onblur: Triggered when an element loses focus.
onchange: Triggered when the value of an
element (like an input, select, or textarea) has
been changed and the element loses focus.
oninput: Triggered when the value of an input,
textarea, or select element is changed.
onselect: Triggered when the user selects some
text in an input field or textarea.
3. Mouse Events: These events occur due to user
interaction with the mouse.
onclick: Triggered when an element is clicked.
ondblclick: Triggered when an element is double-
clicked.
onmousedown: Triggered when a mouse button is
pressed down over an element.
onmouseup: Triggered when a mouse button is
released over an element.
onmousemove: Triggered when the mouse pointer
moves while it is over an element.
onmouseover: Triggered when the mouse pointer
moves onto an element.
onmouseout: Triggered when the mouse pointer
moves out of an element.
oncontextmenu: Triggered when the user right-clicks
on an element to open a context menu.
onwheel: Triggered when the mouse wheel is rotated
4. Keyboard Events: These events are related to user
interaction with the keyboard.
onkeydown: Triggered when a key is pressed down.
onkeypress: Triggered when a key is pressed and released (for
character-producing keys).
onkeyup: Triggered when a key is released.
5. Media Events: These events are specific to HTML5 <audio>
and <video> elements.
onplay: Triggered when the media starts playing.
onpause: Triggered when the media is paused.
onended: Triggered when the media has reached the end.
onvolumechange: Triggered when the volume of the media
changes.
onseeking: Triggered when the user starts moving to a new
position in the media.
onseeked: Triggered when the seeking operation is complete.
ondurationchange: Triggered when the duration of the media
changes.
ontimeupdate: Triggered when the current playback position of
the media changes.
onloadedmetadata: Triggered when
metadata (like duration) for the media has
been loaded.
onloadeddata: Triggered when the first frame
of the media has been loaded.
onprogress: Triggered while the media is
downloading.
oncanplay: Triggered when the browser can
start playing the media (but might need to
buffer).
oncanplaythrough: Triggered when the
browser estimates it can play the media all
the way through without needing to buffer.
6. Drag and Drop Events: These events are
part of the HTML5 Drag and Drop API.
ondragstart: Triggered when the user starts to
drag an element.
ondrag: Triggered while an element is being
dragged.
ondragenter: Triggered when a dragged element
enters a valid drop target.
ondragleave: Triggered when a dragged element
leaves a valid drop target.
ondragover: Triggered when a dragged element is
being dragged over a valid drop target.
ondrop: Triggered when a dragged element is
dropped on a valid drop target.
ondragend: Triggered when the drag operation is
finished.
[Link] background:
div {
background-image: url("[Link]");
}
Styling SVG
You can style SVG using CSS:
<svg width="100" height="100">
<circle class="my-circle" cx="50" cy="50" r="40" />
</svg>
Benefits of SVG
•Scalable: No loss of quality when
<style> zoomed.
.my-circle { •Lightweight: Often smaller than raster
images.
fill: orange; •Interactive: Can be animated or
stroke: black; scripted.
stroke-width: 3; •Accessible: Works well with screen
readers if properly labeled.
}
</style>
SVG (SCALABLE VECTOR GRAPHICS)
IN HTML5, SVG (SCALABLE VECTOR GRAPHICS) IS USED TO DEFINE VECTOR-BASED
GRAPHICS FOR THE WEB. SVG IS AN XML-BASED MARKUP LANGUAGE THAT CAN BE
EMBEDDED DIRECTLY INTO HTML DOCUMENTS. IT ALLOWS FOR RESOLUTION-
INDEPENDENT, SCALABLE, AND INTERACTIVE GRAPHICS, MAKING IT IDEAL FOR
RESPONSIVE WEB DESIGN, DATA VISUALIZATIONS, ICONS, AND MORE.
Basic Example of SVG in HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Example</title>
</head>
<body>
<h1>My SVG Circle</h1>
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="blue" stroke-width="4"
fill="lightblue" />
</svg>
</body>
Element Description
<svg> The container element
<circle> A circle
<rect> A rectangle
<line> A line
<ellipse> An ellipse
A closed shape with multiple
<polygon>
sides
A complex shape using
<path>
commands
<text> Text inside SVG
Embedding SVG
[Link] SVG (recommended for dynamic or styled content):
<svg>...</svg>
2. Object tag:
<object type="image/svg+xml" data="[Link]"></object>
[Link] tag (no interactivity):
<img src="[Link]" alt="My SVG" />
Web Storage
Web Storage in HTML5 provides a way to store data in the user's
browser, making it possible to save data locally without needing a
server or cookies.
There are two main types:
1. localStorage
•Stores data with no expiration time.
•Data persists even after the browser is closed and reopened.
•Stored per domain
// Store data
[Link]("username", "John");
// Retrieve data
let user = [Link]("username");
[Link](user); // John
// Remove specific item
[Link]("username");
// Clear all localStorage
. sessionStorage
2
•Stores data for the duration of the page session.
•Data is cleared when the page is closed (even if you refresh, it remains).
•Stored per tab.
. sessionStorage
•// Store session data
•[Link]("theme", "dark");
•// Retrieve data
•let theme = [Link]("theme");
•[Link](theme); // dark
localStorag sessionStor
Feature
•// Remove specific item e age
•[Link]("theme"); Until
Lifetime Persistent tab/browse
•// Clear all sessionStorage r is closed
•[Link](); Scope Per domain Per tab
Storage
~5-10MB ~5MB
limit
Accessible
JavaScript JavaScript
from
Introduction to Canvas
Introduction to <canvas> in HTML5
The HTML5 <canvas> element is used to draw graphics on the fly via JavaScript. It's
a powerful feature for rendering shapes, images, animations, games, and data visualizations
—all directly in the browser.
Basic Syntax
<canvas id="myCanvas" width="400" height="200"></canvas>
•The <canvas> tag creates a rectangular drawing area.
•By itself, it’s just a container; all drawing must be done with JavaScript.
JavaScript to Draw on Canvas
<canvas id="myCanvas" width="400" height="200" style="border:1px solid
#000;"></canvas>
<script>
// Get the canvas element
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d"); // 2D rendering context
// Draw a filled rectangle
[Link] = "blue";
[Link](50, 50, 150, 100); // x, y, width, height
</script>
Purpose Method
Draw rectangle fillRect(x, y, w, h)
arc(x, y, radius, startAngle,
Draw circle
endAngle)
moveTo(x, y) + lineTo(x, y) +
Draw line
stroke()
Set color fillStyle, strokeStyle
Clear canvas clearRect(x, y, w, h)
Draw text fillText(text, x, y)
Example: Draw a Circle
[Link]();
[Link](100, 75, 50, 0, 2 * [Link]); // x, y, radius, startAngle,
endAngle
[Link](); When to Use <canvas>
Use canvas when you need:
•Dynamic, pixel-based graphics
•Games
•Graphing/Charting
•Image editing
•Real-time visualizations
Audio & Video
HTML5 introduced native support for audio and video
elements, allowing you to embed and control media
directly in web pages without plugins like Flash.
Basic Syntax
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
•controls: Displays playback controls (play, pause, volume).
•autoplay, loop, muted: Optional attributes to control behavior
<video> Element
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
•ontrols: Shows default playbar.
•width and height: Set dimensions.
•autoplay, loop, muted, poster: Additional optional
attributes.
•poster: Placeholder image shown before playback
starts.
Example with Poster and Multiple Sources
<video controls width="600"
poster="[Link]">
<source src="video.mp4"
type="video/mp4">
<source src="[Link]"
type="video/webm">
Your browser does not support the video tag.
</video>
COMMON MEDIA ATTRIBUTES
Attribute Description
Displays play, pause, and
controls
volume controls
Plays automatically when page
autoplay
loads
loop Repeats playback automatically
Starts playback with audio
muted
muted
(Video only) Image shown
poster
before video plays
Suggests whether to preload
preload
media (auto, metadata, none)
JavaScript Control Example
<video id="myVideo" width="320" height="240" controls>
<source src="clip.mp4" type="video/mp4">
</video>
<button
onclick="[Link]('myVideo').play()">Play</button
>
<button
Geolocation
HTML5 provides a Geolocation API that allows websites to access the user's geographical location (with their permission). It is useful for mapping,
directions, location-based services, and more.
Get Current Position
<button onclick="getLocation()">Get My Location</button>
<p id="output"></p>
<script>
function getLocation() {
if ([Link]) {
[Link](showPosition, showError);
} else {
[Link]("output").innerText = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
const lat = [Link];
const lon = [Link];
[Link]("output").innerText = `Latitude: ${lat}, Longitude: ${lon}`;
}
function showError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case [Link]:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
Geolocation Methods
Description
Method
getCurrentPosition() Gets current position (once)
watchPosition() Tracks position continuously
Stops tracking initiated by
clearWatch()
watchPosition()
WATCH POSITION
LET WATCHID =
[Link](FUNCTION(POSITIO
N) {
[Link]("LAT: " + [Link] +
", LON: " + [Link]);
});
YOU CAN STOP WATCHING LIKE THIS:
[Link](WATCHID);
PRIVACY & PERMISSIONS
BROWSERS ASK FOR USER PERMISSION BEFORE SHARING LOCATION.
WORKS BEST ON HTTPS (MANDATORY IN MOST MODERN BROWSERS).
ACCURACY VARIES: GPS, WIFI, IP, AND OTHER SIGNALS.
Drag & Drop
HTML5 provides built-in drag-and-drop support through JavaScript and the
Drag and Drop API, allowing users to grab elements and move them around
within or across web pages.
The Drag and Drop API consists of:
Step What Happens
dragstart When dragging starts
When dragging over a valid
dragover
drop target
drop When the element is dropped
dragend When the drag operation ends
<!DOCTYPE html>
<html>
<head>
<style>
#dragMe {
width: 100px;
height: 100px;
background: tomato;
margin: 10px;
}
#dropZone {
width: 300px;
height: 150px;
border: 2px dashed #333;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Drag the box into the drop area:</h3>
<div id="dragMe" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>
<script>
const dragMe = [Link]("dragMe");
const dropZone = [Link]("dropZone");
[Link]("dragstart", function(e) {
[Link]("text/plain", "dragMe");
});
[Link]("dragover", function(e) {
[Link](); // Must prevent default to allow drop
});
[Link]("drop", function(e) {
[Link]();
const draggedId = [Link]("text");
const draggedElement = [Link](draggedId);
[Link](draggedElement);
});
</script>
</body>
IMPORTANT ATTRIBUTES &
EVENTS
Attribute/Event Description
draggable="true" Makes an element draggable
Triggered when dragging
dragstart
begins
Must call [Link]() to
dragover
allow drop
drop Handles the drop action
Used to store data associated
dataTransfer
with the drag
•Only elements with draggable="true" can be dragged.
•You can style elements with :dragging pseudo-class via JavaScript.
•For complex behavior (like reordering items or uploading files), use
libraries or combine with other APIs.
WEB WORKERS
WEB WORKERS ARE A FEATURE IN MODERN WEB DEVELOPMENT THAT ALLOWS YOU TO RUN
JAVASCRIPT IN THE BACKGROUND, SEPARATE FROM THE MAIN UI THREAD. THIS PREVENTS THE
WEBPAGE FROM FREEZING DURING HEAVY COMPUTATIONS OR DATA PROCESSING .
What Are Web Workers?
Web Workers enable multithreading in JavaScript.
They allow you to run scripts in the background without blocking the UI.
Especially useful for large calculations, data parsing, or handling API calls.
Why Use Web Workers?
Problem Web Worker Solution
UI freezes during long tasks Moves the task off the main
thread
Slow response to user input Keeps UI responsive and
interactive
Heavy API or file processing Offloads work to background
thread
How Web Workers Work
Main Thread (UI): Handles user interactions, rendering
Worker Thread: Handles time-consuming logic
How Web Workers Work
Main Thread (UI): Handles user interactions, rendering
Worker Thread: Handles time-consuming logic
How to Use a Web Worker
Create a Worker Script ([Link])
// [Link]
[Link] = function(e) {
let result = [Link] * 2;
[Link](result);
};
Use It in Main File ([Link] or [Link])
const worker = new Worker('[Link]');
[Link](10); // Send data to worker
[Link] = function(e) {
[Link]("Result from worker:", [Link]);
};
USE IT IN MAIN FILE ([Link] OR [Link])
const worker = new Worker('[Link]');
[Link](10); // Send data to worker
Limitations
[Link] = function(e) { No access to
[Link]("Result from worker:", [Link]); DOM directly from
}; a worker
Needs to
Real-World Use Cases
communicate with
Image or video processing in the browser
the main thread
Complex mathematical calculations
via messages
Parsing large JSON or CSV files Files must be
Handling offline data syncing served over
HTTP/HTTPS (not
Real-time data visualization and transformation
from local [Link]
WORKING WITH FONTS
FONTS ARE A VITAL PART OF WEB DESIGN THAT AFFECT READABILITY, USER
EXPERIENCE, AND OVERALL AESTHETICS. YOU CAN STYLE AND CUSTOMIZE
FONTS USING HTML AND CSS.
Basic Font Styling with CSS
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
color: #333;
}
CSS FONT PROPERTIES
Property Description Example
font-family: 'Roboto',
font-family Sets the font type
sans-serif;
font-size Sets size of the font font-size: 18px;
Sets thickness (e.g.,
font-weight font-weight: bold;
bold)
font-style Italic or normal font-style: italic;
Vertical spacing
line-height line-height: 1.5;
between lines
Space between
letter-spacing letter-spacing: 1px;
letters
Change case
text-transform:
text-transform (uppercase/lowercase
uppercase;
)
Using Web Fonts (e.g., Google Fonts)
1. Import via <link> (HTML)
<link href="[Link] rel="stylesheet">
2. Use in CSS
body {
font-family: 'Roboto', sans-serif;
}
Font Stack (Fallbacks)
font-family: 'Open Sans', Arial, sans-serif;
Custom Fonts with @font-face
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}
Example in HTML + CSS
<!DOCTYPE html>
<html>
<head>
<link href="[Link]
family=Poppins&display=swap" rel="stylesheet">
<style> Best Practices
h1 { Use web-safe fonts
as fallbacks.
font-family: 'Poppins', sans-serif; Limit the number of
font-size: 36px; fonts to 2–3 max to
color: #4A90E2; maintain performance
and visual harmony.
} Use Google Fonts or
</style> Adobe Fonts for
</head> quality, free font
libraries.
<body>
Check accessibility:
<h1>Custom Font Example</h1> ensure fonts are
</body> readable at different
sizes and screen
</html>
resolutions.
WORKING WITH OTHER GRAPHICS
Types of Graphics in Web Design
Graphic
Description Example Use
Type
Raster files like JPG, PNG, WebP,
Images Backgrounds, photos
etc.
VG
(Scalable XML-based, scalable without Icons, logos,
Vector loss of quality illustrations
Graphics)
HTML element for drawing with Games, graphs,
Canvas
JavaScript animations
3D graphics API using the GPU 3D visualizations,
WebGL
via Canvas simulations
CSS Shapes created using HTML + Buttons, loaders, UI
Graphics CSS elements
Icons
Navigation, UI
(e.g. Font Icon sets as fonts or SVG
controls
Awesome)
IN MODERN WEB DESIGN, GRAPHICS ARE ESSENTIAL FOR ENHANCING VISUAL APPEAL,
USER ENGAGEMENT, AND COMMUNICATION. BESIDES FONTS AND IMAGES, YOU CAN
WORK WITH SVGS, CANVAS, WEBGL, ICONS, AND CSS-BASED GRAPHICS.
Adding Standard Images
<img src="[Link]" alt="Description"
width="300" height="200">
CSS Example:
img {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
2. Working with SVG
<svg width="100" height="100"> <circle
cx="50" cy="50" r="40" stroke="blue"
stroke-width="4" fill="yellow" /></svg>
As an image:
<img src="[Link]" alt="Vector icon">
3. Using <canvas> for Custom Graphics
<canvas id="myCanvas" width="200"
height="100"></canvas>
<script>
const c =
[Link]("myCanvas");
const ctx = [Link]("2d");
[Link] = "red";
[Link](20, 20, 150, 75);
</script>
4. WebGL for 3D Graphics
WebGL works inside the <canvas> element using
JavaScript.
<canvas id="webglCanvas"></canvas>
<!-- You’ll need a library like [Link] for easy use -->
5. CSS Shapes and Animations
<div class="circle"></div>
<style>
.circle {
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50%;
}
</style>
Best Practices
Optimize image sizes for faster load times
(use WebP or compression).
Use SVGs for logos and illustrations for
scalability.
Prefer CSS and vector graphics over heavy
raster images when possible.
Always include alt text for accessibility and
SEO.
Style sheets: Introduction CSS
CSS (Cascading Style Sheets) is the language used to style HTML documents. It
controls the layout, color, font, spacing, and overall visual presentation of web
pages.
Why Use CSS?
Separates content (HTML) from presentation (CSS)
Enables responsive and visually appealing designs
Allows consistent styling across multiple pages
Basic Syntax of CSS
selector {
property: value;
}
Example:
p{
color: blue;
font-size: 16px;
}
3 Ways to Use CSS
1. Inline CSS (inside HTML tag)
<p style="color: red;">This is red text</p>
2. Internal CSS (in <style> block)
<head>
<style>
h1 {
color: green;
}
</style>
</head>
3. External CSS (linked file)
<link rel="stylesheet" href="[Link]">
APPLYING CSS TO HTML
CSS (CASCADING STYLE SHEETS) IS USED TO STYLE AND LAYOUT HTML
ELEMENTS. THERE ARE THREE MAIN WAYS TO APPLY CSS TO HTML:
1. Inline CSS
Style is added directly to an HTML element using the style attribute.
<p style="color: blue; font-size: 18px;">This is blue text with inline CSS.</p>
2 . Internal CSS
Style is added directly to an HTML element using the style attribute.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
p{
font-size: 16px;
color: gray;
}
</style>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>This paragraph uses internal CSS.</p>
</body>
</html>
3. External CSS
body { Best Practice:
Use external CSS for large
background-color: #f0f0f0; projects, internal CSS for
font-family: Arial; small page-specific styling,
} and inline CSS only for
quick testing or dynamic
h2 { changes.
color: navy; Would you like a sample
} styled webpage combining
all 3 methods?
[Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>External CSS Example</h2>
</body>
</html>