Module 2
Introduction to HTML
HTML:
HTML stands for HyperText Markup Language — it’s the standard language used to
create and structure web pages. It tells web browsers how to display text, images, links,
videos, and other content on a webpage.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
•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
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Simple Example on HTML Heading:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Result
HTML Paragraphs:
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Result:
This is a paragraph.
This is another paragraph.
HTML Links:
HTML links are defined with the <a> tag:
Example:
<a href="https://www.w3schools.com">This is a link</a>
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
https://www.w3schools.com/html/html_intro.asp
Common HTML Tags
Links and Media:
<a> — Hyperlink.
<img> — Displays an image.
<video> — Embeds a video.
<audio> — Embeds audio content.
Lists:
<ul> — Unordered list.
<ol> — Ordered list.
<li> — List item.
Tables:
<table> — Defines a table.
<tr> — Table row.
<td> — Table data/cell.
<th> — Table header.
Different types of images used in web designing
Raster (Bitmap) Images:
•JPEG (JPG): Great for photos and complex images with many colors. Offers good compression but loses
quality when compressed too much.
•PNG: Supports transparency and is ideal for icons, logos, and images that need a clean background.
•GIF: Best for simple animations and low-color images. Not great for detailed pictures.
•WebP: A modern format providing high-quality images with smaller file sizes. Supported by most
modern browsers.
Vector Images:
•SVG (Scalable Vector Graphics): Perfect for icons, logos, and illustrations. SVGs scale without losing
quality and work well for responsive design.
•EPS: Often used in print but can also work for high-quality vector images in design tools.
Decorative Images:
•Background patterns, abstract shapes, and ornamental elements that enhance aesthetics without
providing specific information.
Hero Images:
• Large, high-impact images usually placed at the top of a webpage to grab attention and set the visual
tone.
Client side and server-side image mapping in html
In HTML, image mapping allows you to define clickable areas on an image — turning
different parts of a single image into separate links. There are two types of image
mapping: client-side image mapping and server-side image mapping.
1. Client-Side Image Mapping
In client-side image mapping, the mapping is handled directly by the browser (the
client). The image and the clickable areas are defined in the HTML code using the
<map> and <area> elements.
How it works:
•The entire map is processed on the client’s side — no need for communication with the
server.
•It’s fast and efficient because the browser already knows which area links to which
URL.
Code: Client-Side Image Mapping
<!DOCTYPE html>
<html>
<body>
<h2>Client-Side Image Map</h2>
<img src="example.jpg" alt="Example Image" usemap="#examplemap" width="500" height="300">
<map name="examplemap">
<area shape="rect" coords="34,44,270,350" href="https://example.com/section1" alt="Section 1">
<area shape="circle" coords="337,300,44" href="https://example.com/section2" alt="Section 2">
<area shape="poly" coords="290,172,333,250,240,250" href="https://example.com/section3"
alt="Section 3">
</map>
</body>
</html>
How this works:
•usemap="#examplemap" connects the image to the map.
•<map> creates the map named "examplemap".
•<area> defines the clickable shapes:
•shape="rect" → rectangle (uses 4 coordinates: x1,y1,x2,y2).
•shape="circle" → circle (uses center x,y and radius).
•shape="poly" → polygon (uses a series of x,y pairs).
Advantages:
• Faster, no server interaction needed.
• Works entirely in the browser.
Disadvantages:
• Not great for dynamically changing content.
• Image and map need to align perfectly.
Server-Side Image Mapping
In server-side image mapping, the server processes the click and decides what action to
take based on where the user clicks on the image.
How it works:
• The entire image is one clickable link.
• When the user clicks anywhere on the image, the x and y coordinates of the click are
sent to the server.
• The server determines the response based on those coordinates.
Code: Server-Side Image Map
<!DOCTYPE html>
<html>
<body>
<h2>Server-Side Image Map</h2>
<form action="/handle-click" method="get">
<input type="image" src="example.jpg" alt="Example Image" width="500"
height="300"> </form>
</body>
</html>
How this works:
<input type="image"> sends the click’s x and y coordinates to the server.
When you click on the image, the browser sends a request like:
/handle-click?x=150&y=100
Advantages:
• Useful when the server needs to decide based on click location.
• Can handle more complex, dynamic behavior.
Disadvantages:
• Slower because each click makes a server request.
• Heavier server load for high-traffic sites.
Lists in HTML:
1. Ordered list <ol>
2. Unordered list <ul>
3. Description list <dl>
4. Nested list <nl>
Ordered List:
An ordered list displays items in a specific sequence — usually with numbers, letters, or
Roman numerals. The order of the items matters here.
Syntax:
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Make coffee</li>
<li>Start working</li>
</ol>
Ordered list attributes:
i.type — Changes the numbering style:
"1" → Numbers (default)
"A" → Uppercase letters
"a" → Lowercase letters
"I" → Uppercase Roman numerals
"i" → Lowercase Roman numerals
Example:
<ol type="A">
<li>Plan</li>
<li>Design</li>
<li>Develop</li>
</ol>
ii start — Specifies the starting number:
<ol start="5">
<li>Task Five</li>
<li>Task Six</li>
</ol>
2. Unordered List (<ul>)
An unordered list displays items where the order doesn’t matter —
often using bullets.
Syntax:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
3. Description List (<dl>)
A description list (also called a definition list) is used to pair terms with their descriptions.
Syntax:
<dl>
<dt>HTML</dt> <!-- Term -->
<dd>HyperText Markup Language</dd> <!-- Description -->
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
•<dl> — Description list container
•<dt> — Describes the term or title
•
<dd> — Describes the definition of the term
4. Nested List:
Lists can also be nested — a list inside another list.
Syntax:
Tables in HTML:
In HTML, a table is used to organize and display data in a grid format — made up of rows and columns.
Tags Explained:
•<table> — The table container.
•<tr> — A table row.
•<th> — A table header cell (usually bold and centered by default).
•<td> — A table data cell.
Embedding Audio:
In HTML, you can embed audio files into a webpage using the <audio> tag. This allows
users to play sounds, music, or voice recordings directly from the browser.
Basic Syntax:
<!DOCTYPE html>
<html>
<body>
<h2>Simple Audio Example</h2>
<audio controls>
<source src="audio-file.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
How this works:
•<audio> → The container for audio playback.
•controls → Adds built-in play, pause, and volume buttons.
•<source> → Specifies the audio file and format.
•Fallback text → Displays a message if the browser doesn’t support the audio tag.
Embedding Video:
In HTML, you can embed video files using the <video> tag, allowing users to
watch videos directly on your webpage without needing external plugins.
Basic Video Embedding syntax:
<!DOCTYPE html>
<html>
<body>
<h2>Simple Video Example</h2>
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Introduction to CSS
CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML
elements as a separate file known as CSS file having .css extension.
What is CSS?
• CSS stands for Cascading Style Sheets, used to describe the presentation and design of a
web pages.
• CSS is used to style and layout HTML elements. While HTML structures content, CSS
makes it look good
• 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.
• CSS can control the layout of multiple web pages all at once.
CSS Syntax
• Syntax of CSS consist of selectors and declaration used to apply styles to HTML
elements.
selector
{
property: value;
}
• The selector targets the HTML element/elements that you want to style.
• The declaration block contains one or more declarations enclosed in curly braces {}.
• Each declaration consists of a property and a value separated by a colon :. Declarations
are separated by semicolons ;.
•Selector: The HTML element you want to style (e.g., p, h1, .class, #id)
•Property: The style you want to apply (e.g., color, font-size)
•Value: The value you want to give that property (e.g., red, 16px)
• CSS Syntax:
selector
{
property: value;
}
• Selector: CSS selectors are used to select the HTML element or groups of elements you
want to style on a web page.
• Property: A CSS property is an aspect or characteristic of an HTML element that can be
styled or modified using CSS, such as color, font-size, or margin.
• Value: Values are assigned to properties. For example, color property can have value like
red, green etc.
Example:
p{
color: blue;
font-size: 16px;
}
Output:
This makes all <p> elements blue with a font size of 16px
Example:
Why Use CSS?
• CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML
pages.
• Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that
tag.
• 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 get a far better look to your HTML page.
• Multiple Device Compatibility: For the same HTML document, different versions of a
website can be presented for different screen widths
• Global Web Standards: Now most of the HTML attributes are being deprecated and it is
being recommended to use CSS.
CSS History and Versions
• Current version of CSS3 and early versions were CSS1 and CSS2. As of now CSS is
continuously evolving and adapting new capabilities that full fills the current website's
requirements.
• Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in
December 1996. This version describes the CSS language as well as a simple visual
formatting model for all the HTML tags.
• CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version
adds support for media-specific style sheets e.g. printers and aural devices,
downloadable fonts, element positioning and tables.
• CSS3 was became a W3C recommendation in June 1999 and builds on older versions
CSS. It has divided into documentations is called as Modules and here each module
having new extension features defined in CSS2.
Multiple Style Rules
If you want to define multiple rules for a single selectors you can specify
those in single block separated by a semicolon (;).
• Syntax
Selector
{
property1: value1;
property2: value2;
property3: value3;
}
Common Properties
Adding CSS (How CSS is added in HTML):
There are 3 ways:
1.Inline: in the tag itself
<p style="color: red;">Hello Everyone</p>
2.Internal: in a <style> tag in HTML head
<style>
p { color: red; }
</style>
3. External: in a .css file
<link ref="stylesheet" href="style.css">
CSS for Background Image
Syntax:
selector
{
background-image: URL("image.jpg");
}
Example
body
{
background-image: URL("background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
• Explanation of Extra Properties:
Example:
div. Hero
{
background-image: url("hero.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
This is often used for Fullscreen hero sections on landing pages.
CSS for Colors
You can apply colors to text, backgrounds, borders, etc.
Example 1:
P
{
color: red; /* or #ff0000, or rgb(255, 0, 0) */
}
Example 2:
div
{
background-color: lightblue;
}
Ways to Set Color
CSS for Text Manipulation
Font Size:
h1
{
font-size: 36px;
}
Font Family:
Body
{
font-family: Arial, sans-serif;
}
sans-serif is a font family in CSS (and typography in general) that refers to fonts without
the little decorative lines or "feet" at the ends of letters. These little lines are called
serifs.
• Font Weight:
strong
{
font-weight: bold; /* or 400, 700, etc. */
}
Text Alignment:
p{
text-align: center; /* left, right, justify */
}
Text Decoration:
a
{ text-decoration: none; /* underline, overline, line-through */
}
Text Transform:
h2
{
text-transform: uppercase; /* capitalize, lowercase */
}
Letter and Word Spacing:
p
{
letter-spacing: 1px;
word-spacing: 5px;
}
Line Height:
p
{
line-height: 1.6;
}
Text Manipulation Example All Together:
p.styled
{
color: #333;
background-color: #f0f0f0;
font-size: 18px;
font-family: 'Helvetica Neue', sans-serif;
text-align: center;
line-height: 1.5;
text-transform: capitalize;
letter-spacing: 0.5px;
}
Cell Padding and Cell Spacing in CSS
CELLPADDING → padding on td, th
To control the space inside a table cell (between the content and the border), use:
td, th
{
padding: 10px;
}
CELLSPACING → border-spacing on table
To control the space between table cells, use:
table
{
border-spacing: 10px;
}
To Remove Space Completely
If you want cells to touch each other with no spacing:
table {
border-collapse: collapse;
}
Introduction to JavaScript
JavaScript is a powerful programming language used to make websites
interactive. While HTML builds the structure and CSS styles it, JavaScript brings
it to life—like handling button clicks, animations, forms, games, etc.
Variables
• Variables store data.
let name = "Alice";
const age = 25;
Functions
• Functions let you group code and run it when needed.
function greet()
{
alert("Hello!");
}greet(); // Runs the function
Conditionals
• Make decisions in your code.
let score = 85;
if (score > 90)
{
console.log("Great job!");
}
else
{
console.log("Keep trying!");
}
Loops
• Run code multiple times.
for (let i = 0; i < 5; i++)
{
console.log("Number " + i);
}
Thank You
