Web Designing: Module 1

1. Introduction to HTML 5: What Is HTML? Understanding HTML Tags, Setting Up the

Document Structure: Specifying the Document Type, Creating the HTML, Specifying a Page
Title. Formatting Text by Using Tags: Creating Headings, Applying Bold and Italic Formatting,
Applying Superscript and Subscript Formatting, Using Monospace and Preformatted Text.
Using Lists and Backgrounds: Creating Bulleted and Numbered Lists, Creating Definition
Lists, Inserting Special Characters, Inserting Horizontal Lines, Choosing Background and
Foreground Colors. Creating Hyperlinks and Anchors- Hyperlinking to a Web Page, Creating
Hyperlinking to an E-Mail Address, Hyperlinking to Other Content.

Style Sheets and Graphics: Introduction to Style Sheets: Understanding Styles, Constructing
Style Rules, Creating Styles for Nested Tags, Applying Styles to Hyperlinks, Creating and
Linking to External Style Sheets.
Formatting Text by Using Style Sheets: Specifying a Font Family, Specifying a Font Size and
Color, Applying Bold and Italics, Applying Strikethrough and Underlining, Creating Inline
Spans, Adjusting Spacing Between Letters. Formatting Paragraphs by Using Style Sheets:
Indenting Paragraphs, Applying a Border to a Paragraph, Specifying the Horizontal
Alignment of a Paragraph,

Displaying Graphics
Selecting a Graphics Format, Preparing Graphics for Web Use, Inserting Graphics, Arranging
Elements on the Page, Controlling Image Size and Padding, Hyperlinking from Graphics,
Using Thumbnail Graphics, Including Alternate Text for Graphics, Adding Figure Captions

2. Page Layout and Navigation- Creating Navigational Aids , Creating a Text-Based and
Graphical Navigation Bar, Creating an Image Map, Creating Tables, Specifying the Size of a
Table, Specifying the Width of a Column, Merging Table Cells. Formatting Tables-Applying
Table Borders, Applying Borders by Using Attributes, Applying Borders by Using Styles,
Changing Cell Padding, Spacing, and Alignment. Setting Horizontal and Vertical Alignment

Creating User Forms- Creating a Basic Form- Creating a Text Box, Special Field types for E-
Mail and Web Addresses, Creating a Text Area, Creating a Submit or Clear Button, Creating
Check Boxes and Option Buttons, Additional Input Types in HTML5

Incorporating Sound and Video- What’s New with Audio and Video in HTML5? , Embedding
Video Clips- Introducing the <video> Tag, The <embed> Tag: Your Fallback Plan, Placing a
Video Clip on a Web Page. Incorporating Audio on a Web Page- Playing Audio with the
<audio> Tag, Placing an Audio Clip on a Web Page
What Is HTML?
HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991 as a standard for creating web pages.
It's a markup language used to structure content on the web, defining elements like headings, paragraphs, links, and
images. HTML forms the backbone of web content. In layman's terms, HTML is like the skeleton of a website. It's a
set of instructions that tells a web browser how to display text, images, videos, and other elements on a webpage.
Think of it as the building blocks that create the structure and look of a website, similar to how bricks and cement
are used to build a house.

In a nutshell:

 HTML is the language of the web, used to create websites.

 HTML defines the barebone structure or layout of web pages that we see on the Internet.

 HTML consists of a set of tags contained within an HTML document, and the associated files have a .html
extension.

 There are several versions of HTML, with HTML5 being the most recent version.

Features of HTML

It is platform-independent. For example, Chrome displays the same pages identically across different operating
systems such as Mac, Linux, and Windows.

Images, videos, and audio can be added to a web page (For example - YouTube shows videos on their website).

HTML is a markup language and not a programming language.

It can be integrated with other languages like CSS, JavaScript, etc. to show interactive (or dynamic) web pages.

Why the Term HyperText & Markup Language?

The term 'Hypertext Markup Language' is composed of two main words: 'hypertext' and 'markup language.'
'Hypertext' refers to the linking of text with other documents, while 'markup language' denotes a language that
utilizes a specific set of tags.

Thus, HTML is the practice of displaying text, graphics, audio, video, etc., in a certain way using special tags.

Note: Tags are meaningful texts enclosed in angle braces, like '<...>'. For example, the '' tag. Each tag has a unique
meaning and significance in building an HTML page, and it can influence the web page in various ways.
Analogy to understand HTML, CSS, and JavaScript:

In building a webpage, think of HTML, CSS, and JavaScript as different parts of a car. HTML is like the car's skeleton,
forming the basic structure and frame. CSS adds the paint and finishing touches, making the car look appealing with
color, style, and design. JavaScript is similar to the engine and mechanical parts, infusing the car with functionality,
movement, and interactive features. Similarly, when developing a website, HTML lays out the structure, CSS
enhances its visual appeal, and JavaScript provides interactivity and dynamic content.

History of HTML:

In 1989, Tim Berners-Lee established the World Wide Web (www), and in 1991, he created the first version of HTML.

From 1995 to 1997, further work was done to develop and refine different versions of HTML.

In 1999, a committee was organized that standardized HTML 4.0, a version still used by many today.

The latest and most stable version of HTML is 5, also known as HTML5.

Understanding HTML Tags

HTML tags are composed of an opening tag, content, and a closing tag. The opening tag marks the beginning of an
element, and the closing tag marks the end. The content is the information or structure that falls between the
opening and closing tags. Here's the basic structure of an HTML tag:

If you want to build a beautiful website, tags are essential elements that help you achieve that.

An HTML tag acts as a container for content or other HTML tags. Tags are words enclosed within < and > angle
brackets.
They serve as keywords that instruct the web browser on how to format and display the content.

1. Paired Tags (Container Tags)

These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag. The content goes
between these two tags.

Opening Tag: The opening tag starts with < and ends with >. For example, <p>.

Closing Tag: The closing tag also starts with < but includes a forward slash / before the tag name, and ends with >.
For example, </p>.

Examples:

 Paragraphs: <p>This is a paragraph.</p>

 Headings: <h1>This is a heading.</h1>

2. Unpaired Tags (Self-Closing Tags or Stand-Alone Tags)

These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a
single tag.

Self-Closing Tag: A self-closing tag starts with < and ends with /> (though the / is optional in HTML5). For example,
<img /> or <br>.

Examples of self-closing tags:

 Line Break: <br/>

 Horizontal Rule: <hr/>
 Image: <img src="[Link]" alt="An example image"/>

Setting Up the Document Structure:

An HTML document is structured using a set of nested tags. Each tag is enclosed within <...> angle brackets and acts
as a container for content or other HTML tags.

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<!-- content -->

</body>

</html>
 1. Specifying the Document Type
Specifying the document type is done using the <!DOCTYPE> declaration at the very beginning of an HTML
document. It tells the browser which version of HTML to expect and ensures consistent rendering across different
browsers

Why It's Important

- Defines HTML version: Helps the browser interpret the markup correctly.

- Improves compatibility: Ensures your page works as intended across platforms.

This is a HTML 4.01 <!DOCTYPE> declaration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[Link]

2. Creating the HTML

HTML Root Element

The <html> tag is the root element that encapsulates all the content on the page.

The </html> tag marks the end of the <html> section.

Head Section

The <head> tag contains metadata and links to external resources like CSS and JavaScript files.
The </head> tag marks the end of the <head> section.

<title>Document</title>

The <title> tag sets the title of the web page, which is displayed in the browser's title bar or tab.

The <body> tag contains the visible content of the web page. This is where text, images, and other elements go.

The </body> tag marks the end of the visible content of the web page.

Every HTML page should include at least these essential elements to define the basic layout.

3. Specifying a Page Title

The page title is defined using the <title> tag inside the <head> section of your HTML document. It sets the text that
appears in the browser tab and is also used by search engines and social media previews.

Key Notes

- The <title> tag should be placed inside the <head> section.

- It should be short, descriptive, and relevant to the page content.

- Only one <title> tag is allowed per page.

Example web page

Common Tags Inside <head>

Formatting Text by Using Tags

Text formatting using tags involves enclosing the desired text within specific opening and closing tags to apply a
particular style or semantic meaning. This is commonly seen in HTML for web pages, but similar concepts apply in
other markup languages

1. Creating Headings
Headings in HTML are used to define the structure and hierarchy of content on a webpage. They range from <h1> to
<h6>, where:

- <h1> is the most important (usually the main title)

- <h6> is the least important

 2. Applying Bold and Italic Formatting
HTML provides simple tags to format text as bold or italic, helping emphasize important content or add stylistic flair

Bold Formatting: Tag: <b> or <strong>

Italic Formatting: Tag: <i> or <em>

 3. Applying Superscript and Subscript Formatting
Superscript: ^content

- Raises text slightly above the baseline.

- Commonly used for powers, footnotes, and ordinal indicators.

Subscript: _content

- Raises text slightly below the baseline.

- Commonly used for chemical formulas and mathematics.

Note: Area of square will be above glucose in output screen

4. Using Monospace and Preformatted Text

Monospace: <code>content</code>

- A monospace font displays each character with equal width.

- Commonly used for inline code, commands, or technical terms.

Preformatted Text: <pre>content<pre>

- The <pre> tag preserves all whitespace, tabs, and line breaks.

- Automatically uses a monospace font.

- Ideal for blocks of code, ASCII art, or structured text.

Using Lists and Backgrounds:
5. Creating Bulleted and Numbered Lists
Bulleted List (Unordered)

- Use the <ul> tag for unordered lists and <li> for each item.

Numbered List (Ordered)

- Use the <ol> tag for ordered lists and <li> for each item.

6. Creating Definition Lists

A description list is a list of terms, with a description of each term.

Basic Structure of a Definition List

HTML uses three tags:

- <dl> → Definition List container

- <dt> → Definition Term (the word or label)

- <dd> → Definition Description (the explanation or value

 7. Inserting Special Characters
Special Characters are also called entities.

HTML entities start with & and end with;. They represent characters that might otherwise be interpreted as code.

Char Number Entity Description

© &#169; &copy; COPYRIGHT

® &#174; &reg; REGISTERED TRADEMARK

€ &#8364; &euro; EURO SIGN

™ &#8482; &trade; TRADEMARK

← &#8592; &larr; LEFT ARROW

↑ &#8593; &uarr; UP ARROW

→ &#8594; &rarr; RIGHT ARROW

↓ &#8595; &darr; DOWN ARROW

 ♠ &#9824; &spades; SPADE

♣ &#9827; &clubs; CLUB

♥ &#9829; &hearts; HEART

♦ &#9830; &diams; DIAMOND

8. Inserting Horizontal Lines

Inserting horizontal lines in HTML is a simple way to visually separate content. You use the <hr> tag, which stands for
horizontal rule.

9. Choosing Background and Foreground Colors

When designing a webpage, selecting the right background and foreground (text) colors is crucial for readability,
aesthetics, and accessibility.

- Background color: The color behind your content.

In style use background-colour:{colorname};

- Foreground color: Typically refers to text color or any content layered above the background.

In style use colour:{colorname};

You can use both in the same tag and in nested tags too. The precedence will be of the nearest to the content.

These are some colours you can use in your webpage

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow, orange,
LightSalmon, Coral, Tomato, OrangeRed, DarkOrange, DodgerBlue, MediumSeaGreen, SlateBlue, Violet, LightGray,
DarkSlateGray, DimGray
You can visit [Link] to get all 140 names of the colours and their codes

The <br> tag in HTML stands for "break" and is used to insert a line break in text. It’s an empty tag, meaning it
doesn’t have a closing tag.

Creating Hyperlinks and Anchors

10. Hyperlinking to a Web Page
Use the <a> (anchor) tag:

<a href="[Link] Example</a>

- href specifies the URL.

- The text between the tags is what users click.

- Use descriptive link text (e.g., “Read our privacy policy” instead of “Click here”).

- Test the link to ensure it works.

- Avoid overly long URLs in visible text.

11. Creating Hyperlinking to an E-Mail Address

In HTML, Use the mailto: protocol inside an anchor tag:

<a href="[Link] Us</a>

- Clicking this link opens the user's default email client with a new message to that address.
 12. Hyperlinking to Other Content.

Linking can be done to:

- PDF, Word document

- Image
- Audio
- Video
- Cloud Content (Google Drive, OneDrive, etc.)

To auto redirect to another page, add a meta tag in head and include following attributes

<meta http-equiv="refresh" content="3;url=[Link]">

Introduction to Style Sheets

1. Understanding Styles
CSS stands for Cascading Style Sheets

 It’s not a programming or markup language — it’s a style sheet language used to describe the presentation
of HTML documents

 CSS allows you to control:

o Fonts, colors, and text styles

o Layouts and positioning
o Spacing (margins, padding)
o Backgrounds and borders
  Used for Responsive design for different devices

CSS Syntax Basics

A CSS rule consists of:

selector { property: value; }

 Selector: Targets the HTML element (e.g., p, h1, .class, #id)

 Property: The style you want to apply (e.g., color, font-size)

 Value: The setting for that property (e.g., blue, 16px)

Example:

body { background-color: lightgray; font-family: Arial, sans-serif; }

Types of CSS

 Inline CSS: Applied directly within an HTML tag using the style attribute

 Internal CSS: Written inside a tag in the HTML

 External CSS: Linked via a .css file using tag — best for large projects

The “Cascading” Concept

 Styles cascade from top to bottom, and from general to specific

 If multiple rules apply to an element, the most specific one wins

 Inheritance allows child elements to inherit styles from parent elements unless overridden

Common CSS Concepts

 Box Model: Every HTML element is a box with content, padding, border, and margin

 Selectors: Target elements by tag, class (.class), ID (#id), attribute, or pseudo-classes (:hover, :first-child)

 Responsive Design: Use media queries to adapt layout for different screen sizes

2. Constructing Style Rules

1. Selector

 Specifies which HTML element(s) the rule applies to.

 Examples:

 p targets all elements.

 .highlight targets all elements with class highlight.

 #main targets the element with ID main.

2. Declaration Block

 Enclosed in {} and contains one or more declarations.

 Each declaration has a property and a value, separated by a colon and ending with a semicolon.

Universal Selects all elements on the pages. *{property:value;}

 Selects all HTML tag/element of given
Type p {property:value;}
type in your document.

Selects an element based on the value

Id #id {property:value;}
of its unique id attribute

Selects all elements in the document

Class .class {property:value;}
that have the given class attribute.

Complex selectors consisting of more selector1 selector2/ selector

Combinato
than one selectors having some 1+selector2 / selector 1> selector 2
rs
relationship between them. {property: value;}

Define the special state of an element selector: pseudo-class{

Pseudo to add an effect to an existing element property: value;
based on its states. }
 3. Creating Styles for Nested Tags
CSS Selectors for Nested Tags

You can style nested tags using descendant, child, or grouping selectors.

1. Descendant Selector

Targets any element inside another, regardless of depth.

h1 p {

color: blue;

This styles all <span> elements inside any <div>.

2. Child Selector (>)

Targets only direct children.

h2 > p {

font-weight: bold;
}

This styles <p> elements that are direct children of <div>.

3. Multiple Nesting

You can go deeper:

section article p em {

color: green;

This targets <em> inside <p> inside <article> inside <section>.

 4. Applying Styles to Hyperlinks
CSS provides pseudo-classes to style links based on their state:
 5. Creating and Linking to External Style Sheets.
Create a new file and save it with a .css extension, like [Link]

Add CSS code in the format:

selector {

property: value;

Add link tag in head tag of HTML, set rel to stylesheet and href to [Link](or other css file name)
Formatting Text by Using Style Sheets
1. Specifying a Font Family
Specifying a font family in CSS allows you to control the typography of your webpage by choosing which fonts are
used for text.

selector {

font-family: font1, font2, generic-family;

Example:

body {

font-family: "Helvetica", "Arial", sans-serif;

- Tries to use Helvetica first.

- Falls back to Arial if Helvetica isn't available.

- Uses a sans-serif font as a last resort.

These are some common fonts to use:

Calibri, Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Lucida Console,
Comic Sans MS.

2. Specifying a Font Size and Color

Specifying font size and color in CSS lets you control how text appears on your webpage.
 selector {

font-size: value;

color: value;

Example:

p{

font-size: 18px;

color: #333333;

em and rem:

Both are relative units used for font size, spacing, and layout. They scale based on other font sizes, making your
design more flexible

em — Relative to Parent Element

- 1em equals the font size of the parent element.

- It cascades, meaning nested elements multiply the size.

If p tag is inside body tag

body {

font-size: 16px;

p{

font-size: 1.5em; /* 24px */

rem — Relative to Root (html) Element

- 1rem equals the font size of the root (html) element.

- It does not cascade, so it's more predictable.

If h1 is inside any element hierarchy, html will be root, always.

 html {

font-size: 16px;

h1 {

font-size: 2rem; /* 32px */

You can create font color examples using CSS properties like color in a variety of ways:

i. by using a color name (red)

ii. a hex code (#ff0000) [#RRGGBB],
iii. three hex code (#fff), or an
iv. RGB value (rgb(255 0 0))

3. Applying Bold and Italics

selector {

font-weight: bold;

font-style: italic;

Example:

p{

font-weight: bold;

font-style: italic;

Font weight values can be:

Font style values:

4. Applying Strikethrough and Underlining

selector {
 text-decoration: underline line-through;

Example:

p{

text-decoration: underline line-through;

Text-decoration values:

5. Creating Inline Spans

Creating inline spans in HTML involves using the <span> tag. The <span> tag is an inline-level element, meaning it
does not create a new line and occupies only the necessary width, flowing with the surrounding content. It is a
generic container used primarily for applying styles or targeting specific parts of text with JavaScript.

<p>This is a normal paragraph, but <span style="color: blue;">this text is blue</span> and part of the same
line.</p>

You can apply inline styles directly using the style attribute, or more commonly, by assigning a class or id attribute
and then defining styles in a separate CSS stylesheet.

6. Adjusting Spacing Between Letters.

selector {

letter-spacing: value;
 line-height: value;

Example:

p{

letter-spacing: 2px;

line-height: 1.5px;

Formatting Paragraphs by Using Style Sheets

1. Indenting Paragraphs
To indent paragraphs in CSS, you typically use the text-indent property. This property specifies the amount of
horizontal space that should be left before the beginning of the first line of a block of text. The indentation helps
visually separate tags and improve readability.

selector {

text-indent: 2em;

Example:

p{

text-indent: 30px;

2. Applying a Border to a Paragraph

selector {

border: {size of border} {type} {color};

Example:

p{

border: 2px solid black;

}
Border radius property define the curvature of the corners of the tag

selector {
 border-radius: value;

Example:

p{

border-radius: 5px;

- Single value: Applies to all four corners.

- Two values: First for top-left & bottom-right, second for top-right & bottom-left.

- Four values: Top-left, top-right, bottom-right, bottom-left (clockwise).

3. Specifying the Horizontal Alignment of a Paragraph

To specify the horizontal alignment of a paragraph in CSS, you use the text-align property. This controls how the
inline content (like text) is aligned within its block container.

Box model in CSS

The CSS Box Model is a fundamental concept in web development that describes how HTML elements are rendered
and how their dimensions are calculated within a web page. Every HTML element is treated as a rectangular box,
composed of four distinct layers:

 Content:
This is the innermost area of the box, where the actual content of the element resides (e.g., text, images, videos). Its
size is determined by the width and height properties.

 Padding:

This is the transparent space that surrounds the content area, acting as a buffer between the content and the
element's border. Padding is controlled by the padding property.

 Border:

This is a visible line that encloses the content and padding areas, providing a visual boundary for the
element. The border properties control its appearance and thickness.

 Margin:

This is the transparent space outside the border, separating the element from other elements on the page. Margins
are controlled by the margin property.

Displaying Graphics
1. Selecting a Graphics Format
Selecting the right graphics format depends on your goals—whether you're optimizing for quality, file size,
transparency, animation, or scalability. Here's a breakdown of the most common formats:
 2. Preparing Graphics for Web Use
1. Choose the Right Format

- JPEG: Best for photos and complex images.

- PNG: Ideal for images needing transparency or sharp edges.

- SVG: Perfect for logos, icons, and scalable vector graphics.’

2. Resize and Scale Appropriately

- Match image dimensions to how they’ll be displayed on the site.

- Avoid uploading oversized images and scaling them down with CSS—this wastes bandwidth.

3. Proper file name

Use lowercase letters, hyphens, and descriptive keywords in file names (e.g., [Link]). Avoid spaces,
special characters, and vague names like IMG_1234.jpg for better SEO and compatibility.

3. Inserting Graphics
Use img tag to insert images into the web page:

<img src="[Link]" alt="Description of image" width="300" height="200">

 4. Controlling Image Size and Padding
You can directly put the width height attribute in img tag to control the size of graphic

<img src="[Link]" alt="Description of image" width="300" height="200">

OR use CSS property of width and height

img {

width: 300px;

height: 200px;

Use padding, margin and border properties to set the respective values.

img {

width: 300px;

height: 200px;

padding: 10px;

margin: 20px;

border: 2px solid lime;

5. Hyperlinking from Graphics

Use <a> tag to create hyperlink for an img tag

<a href=”[Link]

<img src="[Link]" alt="Description of image" width="300" height="200">

</a>

6. Using Thumbnail Graphics

A thumbnail is a small image that represents a larger image (when clicked on):

Here img tag has small sized image and anchor tag opens the same image into the browser

<a href=” [Link]”>

<img src="[Link]" alt="Description of image" width="100">

</a>

7. Including Alternate Text for Graphics

If an image fails to load (due to a broken link, slow connection, or user settings), the alt text is displayed in its place.
This provides a textual description of what the image would have conveyed.

8. Adding Figure Captions

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the
photo:

<figure>

<img src="pictures/[Link]" alt="city" style="width:100%">

<figcaption>Fig.1 - This is a photo of bridge.</figcaption>

</figure>

This will add a section in the web page where graphic and its caption will be together.

9. Arranging Elements on the Page

Arranging elements on a web page can be done using various techniques. The display property in CSS allows
developer to specify the display behaviour of an element.

There are four main values that display can take:

block:

Elements with display: block always start on a new line.

They take up the full available width of their parent container.

You can set width, height, margin, and padding properties for block-level elements.

Examples: div, h1, p, form.

inline:

Elements with display: inline do not start on a new line.

They only take up as much width as their content requires.

You cannot set width, height, margin-top, or margin-bottom for inline elements (though horizontal margin
and padding are applied).

Examples: span, a, img.

flex:

Transforms an element into a block-level flex container.

This enables the use of Flexbox properties for powerful and flexible one-dimensional layout control of its
direct children.

grid:
 Transforms an element into a block-level grid container.

This enables the use of CSS Grid properties for robust two-dimensional layout control, arranging items into
rows and columns.

For using Flexbox we use multiple properties related to it:

 flex-direction - Sets the display-direction of flex items

o The flex-direction property specifies the display-direction of flex items in the flex container.
o This property can have one of the following values:
 row (default)
 column
 row-reverse
 column-reverse
 flex-wrap - Specifies whether the flex items should wrap or not
o The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough
room for them on one flex line.
o This property can have one of the following values:
 nowrap (default)
 wrap
 wrap-reverse
 justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
o The justify-content property is used to align the flex items when they do not use all available space
on the main-axis (horizontally).
o This property can have one of the following values:
 center
 flex-start (default)
 flex-end
 space-around
 space-between
 space-evenly
 align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically)
o The align-items property is used to align the flex items when they do not use all available space on
the cross-axis (vertically).
o This property can have one of the following values:
 normal (default)
 center
 flex-start
 flex-end
 stretch
 baseline
Page Layout and Navigation
1. Creating Navigational Aids
Having an easy-to-use navigation is important for any website!

CSS navigation bars are an important component of web design. Navigation bars helps users to easily navigate
between different sections of a website.

Navigation bars are typically built with HTML list elements ( <ul> and <li>), and then styled with CSS to get a great
look.

Navigation bars are typically located at the top or at the side of a webpage.

2. Creating a Text-Based and Graphical Navigation Bar

For graphical navigation bars, we add icons or images inside the anchor tag to get a beatified version of the navbar.
 3. Creating an Image Map
An image map allows different areas of a single image to act as separate clickable links using the <map> and <area>
tags.

Steps to Create an Image Map

 Insert an image using <img>

 Use the usemap attribute in <img>
 Define clickable areas using <map> and <area>

Syntax:
Explanation

 usemap="#computermap" links the image to the map

 <map> defines the image map

 <area> defines clickable regions

 coords specify the clickable area dimensions

 href define the hyperlink, where the page redirected to on click

Shapes Used

 rect → rectangle (x1,y1,x2,y2), x1,y1 is the top left corner and x2,y2 is bottom right corner of the rectangle.

 circle → circle (x,y,radius)

 poly → polygon (multiple x,y points)

 default → It makes the entire image clickable except the areas already defined by other <area> tags. It
doesn’t take coords attribute.

Example:

4. Creating Tables
An HTML table is used to organize data in rows and columns, making information easy to read and understand.

Table Tags and Their Use

<table>
  Defines the table container.

<tr> (Table Row)

 Creates a row in the table.

<th> (Table Header)

 Creates header cells.

 Text is bold and centered by default.

<td> (Table Data)

 Creates standard data cells.

Table Attributes

border

 Adds border to the table.

cellpadding

 Space inside cells.

cellspacing

 Space between cells.

<table border="1" cellpadding="5" cellspacing="0">

Rowspan and Colspan

colspan

 Merges columns.

<td colspan="2">Total</td>

rowspan

 Merges rows.

<td rowspan="2">Total</td>
 5. Specifying the Size of a Table
The size of an HTML table can be specified by setting its width and height using HTML attributes or CSS properties.

Or use CSS to apply style. We can use inline, internal or external CSS

th and td tags also take width and height attribute to specify fixed size of the cell.
 6. Merging Table Cells
colspan: Merges columns.

<td colspan="2">Total</td>

rowspan: Merges rows.

<td rowspan="2">Total</td>

7. Applying Borders by Using Attributes

It applies border to all elements including table, th and td.

8. Applying Borders by Using Styles

Applies border to only that element in which style has been specified. In following example border is applied to table
only
border-collapse: separate(default) | collapse; is used to merge the borders of individual cells into single border.
Collapsed border result

9. Changing Cell Padding, Spacing, and Alignment

[Link] Horizontal and Vertical Alignment

Creating a Basic Form

1. Creating a Text Box
A text box in HTML is created using the <input> tag with the attribute type="text". It is used to accept single-line text
input from the user, such as name, username, or city.
<input type="text">

Attributes of input tag

 <input> → Creates an input field

 type="text" → Specifies a text box

 id → Specifies the id for identification

 name → Identifies the input field

 placeholder → Displays hint text inside the box

 size → Width of text box

 maxlength → Maximum characters allowed

 required → Makes input mandatory

2. Special Field types for E-Mail

email field will accept “something@something” format
 3. Creating a Text Area
rows and cols decide number of default lines vertically and default number of characters allowed in a line
respectfully.

4. Creating a Submit or Clear Button

Value is the name that will be displayed on button and onClick is the event, when triggered will run Javascript alert
command popping window from above. Reset button will clear out all form elements.

5. Creating Check Boxes and Option Buttons

6. Additional Input Types in HTML5
Incorporating Sound and Video
1. What’s New with Audio and Video in HTML5?
HTML5 introduced native support for audio and video playback directly in the browser, eliminating the need for
external plugins such as Flash or Silverlight. This was a major improvement over earlier HTML versions.

With HTML5, the new <audio> and <video> tags allow developers to easily embed multimedia content into web
pages. These elements provide built-in controls like play, pause, volume, seek, fullscreen, and mute, giving users a
better and more consistent media experience across browsers.

HTML5 supports multiple media formats such as MP3, WAV, OGG for audio and MP4, WebM, OGG for video. The
<source> tag allows developers to specify multiple formats so the browser can choose the best supported one.

Another important feature is JavaScript API support, which enables developers to control media playback
programmatically—such as playing, pausing, adjusting volume, or tracking playback progress. HTML5 also allows
captioning and subtitles using the <track> tag, improving accessibility.

Additionally, HTML5 media elements support attributes like autoplay, loop, muted, and poster, making media
behavior customizable. Overall, HTML5 made audio and video integration simpler, faster, plugin-free, and more
accessible for modern web applications.

2. The <audio> Tag

The <audio> tag is used in HTML to embed sound or audio content on a web page, such as music, voice recordings,
or sound effects. It allows the browser to play audio files without using external plugins.

Key Attributes

 controls – Displays play, pause, and volume controls

 autoplay – Automatically plays the audio

 loop – Repeats the audio

  muted – Starts the audio muted

Supported Formats

 MP3

 WAV

 OGG

Syntax:

<audio controls>

<source src="song.mp3" type="audio/mpeg">

</audio>

3. The <video> Tag

The <video> tag is used to embed video content on a web page, such as movies, tutorials, or lectures. Like the audio
tag, it works without external plugins.

Key Attributes

 controls – Shows video controls

 width, height – Set video size

 autoplay – Auto-plays video

 loop – Replays video

 poster – Displays an image before play

Supported Formats

 MP4

 WebM

 OGG

Syntax:

<video width="400" controls>

<source src="video.mp4" type="video/mp4">

</video>
 4. The <embed> Tag
The <embed> tag is used to embed external content such as videos, audio, PDFs, or Flash files into a web page. It is a
self-closing tag and does not require a closing tag.

Common Uses

 Embedding PDFs

 Embedding audio or video

 Embedding external multimedia content

Syntax:

<embed src="[Link]" width="500" height="400">