Scribd
Upload
29 views58 pages

Introduction to HTML5 Basics

This document provides an overview of HTML5, highlighting its new features and structural elements such as <header>, <footer>, <nav>, <article>, and <section>. It explains the basic document structure, essential HTML tags, and the introduction of multimedia elements like <audio>, <video>, and <canvas>. Additionally, it covers the use of metadata and practical examples for implementing these elements in web development.

Uploaded by

hetuchavda2007
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views58 pages

Introduction to HTML5 Basics

This document provides an overview of HTML5, highlighting its new features and structural elements such as <header>, <footer>, <nav>, <article>, and <section>. It explains the basic document structure, essential HTML tags, and the introduction of multimedia elements like <audio>, <video>, and <canvas>. Additionally, it covers the use of metadata and practical examples for implementing these elements in web development.

Uploaded by

hetuchavda2007
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Unit-1

Getting Started with HTML 5

• Introduction to HTML5
• HTML (Hypertext Markup Language) is a markup language used to
create and structure content on the web.
• HTML5 is the latest version of HTML, released in 2014, and
includes new features and improvements over previous versions.
• HTML5 introduces new semantic elements, such as <header>,
<footer>, <nav>, <article>, and <section>, which provide more
meaningful information about the content of a web page.
• The <canvas> element in HTML5 allows for dynamic, scriptable
rendering of graphics and images.
• The <video> and <audio> elements allow for native playback of
video and audio content without the need for plugins.
• HTML5 also includes improvements to forms, such as new input
types (e.g. date, email, range) and new attributes (e.g. required,
autofocus).
• Web developers can use HTML5 to create more dynamic,
interactive web pages and web applications that work seamlessly
across different devices and platforms.
• HTML5 is supported by all major web browsers, including Chrome,
Firefox, Safari, and Edge.

pg. 1 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


• New Structure of HTML5
• HTML5 introduces new structural elements that provide more
meaningful information about the content of a web page.
• <header> and <footer>: Used to define the header and footer of a
web page or section.
• <nav>: Used to define the navigation links for a web page or
section.
• <article>: Used to define a self-contained, independent piece of
content that could be distributed and reused independently.
• <section>: Used to define a section of related content.
• <aside>: Used to define content that is related to the main
content, but not necessarily part of it.
• <main>: Used to define the main content of a web page or
section.
• <figure> and <figcaption>: Used to define images and their
captions.
• <time>: Used to define dates and times.
• These new elements provide more descriptive information about
the content and structure of a web page, making it easier for
search engines, screen readers, and other tools to interpret and
present the content to users.

pg. 2 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● HTML basic Document Structure
• HTML (Hypertext Markup Language) is a markup language used to
create and structure content on the web.
• HTML uses predefined tags and attributes to instruct the browser
on how to display content, including formatting, style, font size,
and images.
• HTML is a case-insensitive language, meaning there is no
distinction between uppercase and lowercase letters.
• There are generally two types of tags in HTML:
• Paired Tags: These tags come in pairs i.e. they have both
opening(< >) and closing(</ >) tags.
• Empty Tags: These tags are self-closing and do not require a
closing tag.”
pg. 3 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya
• An HTML Document is mainly divided into two parts:
• HEAD: This contains the information about the HTML document
including the Title of the page, version of HTML, Meta Data, etc.
• BODY: This contains everything you want to display on the Web
Page.

● Understanding Essential HTML Tags


• DOCTYPE Declaration (<!DOCTYPE HTML>): It specifies the HTML
version; typically indicates HTML5.
• It is also called DTD (Document Type Declaration).
• <html>: The root element that encompasses the entire HTML
document structure. It serves as the parent to both the <head>
and <body> tags.
• <head>: Tag is used for indicating head section of the document.
This tag is a Container for metadata, title, CSS, scripts, etc.

pg. 4 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


• Content (inside the head tag): While not directly displayed on
browser, it serves informational and structural purposes.
• <title>: Defines title of the document. It is required in all HTML
documents. It defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
• <body>: Defines body of a document.
• A body tag is used to enclose all the data which a web page has
from texts to links.
• The <body> tag contains all the contents of an HTML document,
such as headings, images, hyperlinks, tables, lists, paragraphs etc.
• All the content that you see in the browser is contained within
this element.
• There can only be one <body> element in an HTML document.
• Attributes in Body tag:
• There are many attributes in body tag. Below are some examples,
• background: It contains the URL of the background image. It is
used to set the background image.
• bgcolor: It is used to specify the background color of an image.
• text: It specifies the color of the text in a document

pg. 5 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Modifying Background of an HTML webpage:
• Adding background color:
<!DOCTYPE html>
<html>
<head>
<title>Adding background color</title>
</head>
<body style="background-color:blue">
<h1>This is an example of adding background color </h1>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<title>Adding background color</title>
</head>
<body bgcolor=green>
<h1>This is an example of adding background color </h1>
</body>
</html>

• Adding background Image:


• Store the Background image and HTML file in same folder or
space
<!DOCTYPE html>
<html>
<head>
<title>Adding Background Image</title>
</head>
<body background="[Link]">
<h1> This is an example of background image </h1>

pg. 6 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<title>Adding Background Image</title>
<style>
Body{background-image:url([Link]);}
</style>
</head>
<body>
<h1> This is an example of background image </h1>
</body>
</html>

● Specifying metadata about an HTML Web Page


• The <meta> tag defines metadata about an HTML document.
Metadata is data (or information) about data.
• <meta> tags always go inside the < head > element, and are
typically used to specify character set, page description,
keywords, author of the document etc.
• Metadata will not be displayed on the page.
• Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services.
• Attributes in Meta tag:
● Charset: Specifies the character encoding for the HTML
document. Utf-8 is a universal set that includes pretty much any
character from any human language.

pg. 7 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Content: Specifies the value associated with the http-equiv or
name attribute
● http-equiv: Provides an HTTP header for the information/value of
the content attribute i.e. <meta http-equiv="refresh"
content="300">
● name: Specifies a name for the metadata
● scheme: specifies a scheme to interpret the property’s value
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Meta Demo Page">
<meta name="keywords" content="HTML, Demo">
<meta name="author" content="Navgujarat">
</head>
<body>
<p>All meta information goes in the head section. </p>
</body>
</html>

pg. 8 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Introduction to New Elements in HTML5: The Markup elements

Tags
(Elements) Description
Represents an independent piece of content of a document, such as a blog
<article> entry or newspaper article
Represents a piece of content that is only slightly related to the rest of the
<aside > page.
<audio> Defines an audio file.
This is used for rendering dynamic bitmap graphics on the fly, such as
<canvas> graphs or games.
<command
> Represents a command the user can invoke.
Together with a new list attribute for input can be used to make
<datalist> comboboxes
Represents additional information or controls which the user can obtain
<details> on demand
<embed> Defines external interactive content or plugin.
Represents a piece of self-contained flow content, typically referenced as
<figure> a single unit from the main flow of the document.
Represents a footer for a section and can contain information about the
<footer> author, copyright information, etcetera.
<header> Represents a group of introductory or navigational aids.
<hgroup> Represents the header of a section.
<keygen> Represents control for key pair generation.
Represents a run of text in one document marked or highlighted for
<mark> reference purposes, due to its relevance in another context.
<meter> Represents a measurement, such as disk usage.
<nav> Represents a section of the document intended for navigation.
Represents some type of output, such as from a calculation done through
<output> scripting.
Represents a completion of a task, such as downloading or when
<progress> performing a series of expensive operations.

<ruby> Together with <rt> and <rp> allow for marking up ruby annotations.
<section> Represents a generic document or application section
<time> Represents a date and/or time.
<video> Defines a video file.

pg. 9 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Refer practical program Semantic [Link] to understand
practical use of tags like Header, Nav, Section, Article, Aside,
Footer as shared on telegram.
● Use of the <figure> tag and the <figcaption> element
<!DOCTYPE html>
<html>
<head>
<title> Figure and figcaption example </title>
</head>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="[Link]" alt="E-commerce" style="width:20%">
<figcaption>Fig.1 - Example of E-commerce</figcaption>
</figure>
</body>
</html>

● The Media Elements


● Attributes like src,controls, autoplay,mute,loop, preload can be
used with audio and video tags

Tags
(Elements) Description

<audio> Defines an audio file.

<video> Defines a video file.


<source> Define multiple media resources for audio and video

<embed> Defines external interactive content or plugin.


<track> Defines text tracks for video and audio

pg. 10 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● There are the 3 attributes in video elements that are not available
in audio.(Height, Width and Poster).
<!DOCTYPE html>
<html>
<head>
<title> Media Elements </title>
</head>
<body>
<p>Audio Sample</p>
<audio controls autoplay loop mute>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the HTML5 Audio element.
</audio>
<br>
<video width="500" height="300" controls>
<source src="sample_video.mp4" type="video/mp4">
Your browser does not support the HTML5 Video element.
</video>
<br><br>
<iframe width="420" height="315"
src="[Link]
</iframe>
<br><br>
<embed type="text/html" src="[Link]" width="500" height="200">
<br><br>
<embed type="video/webm" src="sample_video.mp4" width="400"
height="300">
</body>
</html>

pg. 11 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● The Canvas Elements
● The HTML <canvas> element is used to draw graphics on a web
page
● The <canvas> element is only a container for graphics. You must
use JavaScript to actually draw the graphics.
● Canvas has several methods for drawing paths, boxes, circles,
text, and adding images.
● A canvas is a rectangular area on an HTML page. By default, a
canvas has no border and no content.
● Always specify an id attribute (to be referred to in a script), and a
width and height attribute to define the size of the canvas. To add
a border, use the style attribute.
● The <script> tag is used to embed a client-side script (JavaScript).
● The <script> element either contains scripting statements, or it
points to an external script file through the src attribute.
● Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
<!DOCTYPE html>
<html>
<head>
<title> Canvas example </title>
</head>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="SimpleCanvas" width="300" height="150" style="border:1px
solid black"></canvas>
<br><br>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
grey;">
Your browser does not support the HTML canvas tag.</canvas>
<!-arc(x, y, radius, startAngle, endAngle)-->

pg. 12 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link]();
[Link](95,50,40,0,2*[Link]);
[Link]();
</script>
</body>
</html>

● Working with Text:

• Adding text in new line


● The <br> tag inserts a single line break.
● The <br> tag is useful for writing addresses or poems.
● The <br> tag is an empty tag which means that it has no end tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 br Tag</title>
</head>

<body>
This is the example of
<br>adding text in new line
</body>
</html>

• Adding plain text to an HTML webpage


● Simply add/write the Plain text in the body tag to display all the
text in the document.

pg. 13 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<!DOCTYPE html>
<html>
<head>
<title>
First Web Page
</title>
</head>
<body>
Hello World!
</body>
</html>

● Creating headings on webpage


● HTML headings are defined with the <h1> to <h6> tags.
● <h1> defines the most important heading. <h6> defines the least
important heading.
● Browsers automatically add some white space (a margin) before
and after a heading.
● It is important to use headings to show the document structure.
● Heading structure also plays an important part in Search engine
optimization.
● Search engines use headings for indexing and to understand
content structure.
● Well-organized headings enhance visibility and ranking.

<!DOCTYPE html>
<html>
<title>
Creating Headings
</title>
<body>
<h1>This is heading h1</h1>

pg. 14 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
</body>
</html>

● Creating a paragraph
● The <p> tag defines a paragraph.
● Browsers automatically add a single blank line before and after
each <p> element.
● If a user adds multiple lines, the browser compresses them into a
single line.
● The browser reduces multiple spaces added by users to a single
space.
● The Align attribute indicates the alignment of the paragraph.

<!DOCTYPE html>
<html>
<head>
<title>Creating a Paragraph</title>
</head>
<body>
<h2>HTML p Tag</h2>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p align=left> This is aligned left </p>
<p align=center> This is aligned Center</p>
<p align=right> This is aligned Right</p>
</body>
</html>

pg. 15 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Creating a horizontal rule
● The <hr> tag defines a thematic break in an HTML page (e.g. a
shift of topic).
● The <hr> element is displayed as a horizontal rule or line that is
used to separate content (or define a change) in an HTML page.
● The <hr> tag has no end tag.
● Attributes like align,noshade,size and width can be used with this
tag.
<!DOCTYPE html>
<html>
<head>
<title>Creating Horizontal Rule</title>
</head>
<body>
<p>hr element is displayed below</p>
<hr>
<p>This is an example of hr tag</p>
</body>
</html>

● Creating a subscript and superscript


● The <sub> tag is used to add a subscript text to the HTML
document.
● The <sub> tag defines the subscript text.
● Subscript text appears half a character below the normal line and
is sometimes displayed in a smaller font.
● Subscript text can be used for chemical formulas, like H2O.
● The <sup> tag is used to add a superscript text to the HTML
document.
● The <sup> tag defines the superscript text.

pg. 16 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Superscript text appears half a character above the normal line
and is sometimes displayed in a smaller font.
● Superscript text can be used for footnotes.
<!DOCTYPE html>
<html>
<head>
<title>
Subscript and superscript
</title>
</head>
<body>
<h1>This is the example of<sup>Superscript</sup></h1>
<br>
X<sup>2</sup>+Y<sup>2</sup>=?
<br>
<h1>This is the example of<sub>Subscript</sub></h1>
<br>
H<sub>2</sub>O
</body>
</html>

● Aligning the text


● The text-align property is used to set the horizontal alignment of a
text.
● A text can be left or right aligned, centered, or justified.
● when the text-align property is set to "justify", each line is
stretched so that every line has equal width, and the left and right
margins are straight (like in magazines and newspapers).
<!DOCTYPE html>
<html>
<head>
<title>Text alignment</title>
</head>

pg. 17 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<body>
<h1 align=center>Centered Alignment</h1>
<p align=center>Centered Alignment</p>
<br>
<h1 align=right>Right Alignment</h1>
<p align=right>Right Alignment</p>
</body>
</html>

● Formatting the text


● HTML text formatting tags enhance web content’s visual
presentation and semantic meaning
● Formatting elements were designed to display special types of
text:
● <b> - defines bold text
● <strong> - This element defines text with strong importance. The
content inside is typically displayed in [Link] is a logical tag. It
conveys meaning without directly affecting the visual appearance.
● <i> - defines Italic [Link] <i> tag is often used to indicate a
technical term, a phrase from another language, a thought, a ship
name, etc.
● <em> - defines emphasized text. The content inside is typically
displayed in italic. A screen reader will pronounce the words in
<em> with an emphasis, using verbal stress.
● <mark> - defines text that should be marked or highlighted
● <small> - defines smaller text
● <del> - defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text
● <ins> - defines a text that has been inserted into a document.
Browsers will usually underline inserted text

pg. 18 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● <sub> - Subscript text
● <sup> - Superscript text
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<p>
Bold:
<b>This text is bold</b>
</p>
<p>
Italic:
<i>This text is italic.</i>
</p>
<p>
Strong:
<strong>This text is important</strong>
</p>
<p>
Emphasized:
<em>This text is emphasized</em>
</p>
<p>
Marked:
<mark>This text is highlighted</mark>
</p>
<p>
Small:
<small>This text is smaller</small>
</p>
<p>
Delete:
<del>This text is deleted</del>

pg. 19 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</p>
<p>
Insert:
<ins>This text is inserted</ins>
</p>
<p>
Subscript:
This text is<sub> subscript</sub>
</p>
<p>
Superscript:
This text is<sup> superscript</sup>
</p>
</body>
</html>

● Fonts of text can be formatted using <font> tag but it is


deprecated in HTML5 so use CSS style property instead.
<!DOCTYPE html>
<html>
<head>
<title>
Changing color, style and size of Text
</title>
</head>
<body>
<font size="4" face="verdana" color="green">
Example of Font tag, Which is deprecated in HTML5
</font>
<br>
<h4> Use CSS Style property as following: </h4>
<p> This is normal paragraph </p>
<p style="color:red">This is a paragraph with different font color</p>
<p style="color:#A020F0">This is a paragraph with different font
color</p>

pg. 20 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<p style="font-family:Courier New">This is a paragraph with different
font style</p>
<p style="font-family:Arial black">This is a paragraph with different font
style</p>
<p style="font-size:40px">This is a paragraph with different font size</p>
<p style="font-size:10px">This is a paragraph with different font size</p>
</body>
</html>

● Grouping the text


● The <fieldset> tag is used to group related elements.
● The <fieldset> tag draws a box around the related elements.
● The <legend> tag defines a caption for the <fieldset> element.
● These tags are mostly used with Forms.
● Attributes of fieldset
● disabled: When set as a Boolean attribute within the <fieldset>, it
disables all descendant form controls, making them uneditable
and unsubmitted in the form, ensuring they do not respond to
browsing events, typically displayed as grayed out.
● form:It is used to specify the one or more forms that the
<fieldset> element belongs to.
● name: It is used to specify the name for the Fieldset element.
● autocomplete:It is used to specify that the field set has
autocomplete on or off value.
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with Fieldset</title>
</head>
<body>
<fieldset>
<legend> First Group </legend>
pg. 21 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya
<h1 align=center>Centered Alignment</h1>
<p align=center>Centered Alignment</p>
</fieldset>
<br>
<fieldset>
<legend> Second Group </legend>
<h1 align=right>Right Alignment</h1>
<p align=right>Right Alignment</p>
</fieldset>
</body>
</html>

● Indenting quotations
● There are two special elements for marking text quoted from a
source.
● The <q> tag defines a short quotation.
● The <blockquote> tag can be used to indicate that a section of
text is a quotation from another source, and it's usually rendered
visually by indenting the text.
● This tag makes long quotes look special
● Attribute cite: It contains the value i.e URL which specifies the
source URL of the Quote.
<html>
<body>
<p>
Example of q Tag:
<br>
<q>Good Morning</q>
<p>Example of Blockquote. Quote belongs to National Geographic:

</p>

pg. 22 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<blockquote
cite:"[Link]
warming/">
…..Content of blockquote….
</blockquote>
</p>
</body>
</html>

● Working with character entities


● Some characters are reserved in HTML.
● If you use the less than (<) or greater than (>) signs in your HTML
text, the browser might mix them with tags.
● Entity names or entity numbers can be used to display reserved
HTML characters.

pg. 23 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<!DOCTYPE html>
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<h4>
<p>Showing ampersand &amp;</p>
<p>Showing euro &euro;</p>
<p>Showing cent &cent;</p>
<p>Showing Copyright &copy;</p>
<p>Showing BLACK DIAMOND SUIT &diams;</p>
<p>Showing TRADEMARK &trade;</p>
</h4>
</body>
</html>

● Commenting the text


● The comment tag is used to insert comments in the source code.
Comments are not displayed in the browsers.
● You can use comments to explain your code, which can help you
when you edit the source code at a later date. This is especially
useful if you have a lot of code.
● comments are enclosed within <!– and -->
<!DOCTYPE html>
<html>
<head>
<!--This is title Tag-->
<title>Comments</title>
</head>
<body>
<!--This is example of comment-->
<h2>This is an example of <!--example--> comment</h2>
</body></html>

pg. 24 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Working with Hyperlink:
● Creating hyperlinks
● HTML links are hyperlinks.
● You can click on a link and jump to another document.
● When you move the mouse over a link, the mouse arrow will turn
into a little hand.
● A link does not have to be text. A link can be an image or any
other HTML element!
● The HTML <a> tag defines a hyperlink.
● The href attribute, which indicates the link's destination.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<p>Click on the following link</p>
<a href="[Link]
Mycollege
</a>
<br>
<a href="[Link]">
Local link
</a>

</body>
</html>

● The example above is using an absolute URL (a full web address)


in the href attribute and a local link.

pg. 25 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● A local link (a link to a page within the same website) can be
specified with a relative URL (without the "[Link] part)
● By default, the linked page will be displayed in the current
browser window. To change this, you must specify another target
for the link.
● The target attribute specifies where to open the linked document.
● The target attribute can have one of the following values:
● _self - Default. Opens the document in the same window/tab as it
was clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window

<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="[Link]
target="_blank">
Google
</a>
</body>
</html>

pg. 26 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Setting hyperlink color
● By default, links will appear as follows in all browsers:
o An unvisited link is underlined and blue
o A visited link is underlined and purple
o An active link is underlined and red
● You can change the link state colors, by using following attributes:
● alink: It is used to specify the color of the active link.
● link: It is used to specify the color of visited links.
● text: It specifies the color of the text in a document
● vlink: It specifies the color of visited links.
<!DOCTYPE html>
<html>
<head>
<title>link attributes</title>
</head>
<body link="orange" alink="green" vlink="pink">
<center><h1><a
href="[Link]
</body>
</html>

● You can also change the link state colors, using CSS:
<!DOCTYPE html>
<html>
<head>
<style>
a:visited {
color: yellow;
}
a:hover {
color: red; }

pg. 27 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


a:active {
color: Green;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="[Link] target="_blank">Google</a>
</body>
</html>

● Linking Different sections of page


● Hyperlinks are utilized by a web browser to move from one page
to another.
● However, you can also move to a different area on the same page.
● href="#top"(or href="#") is an HTML attribute value used within
an <a> (anchor) tag to create a link that navigates the user to the
top of the current web page.
● Links can also be created using ID and name attributes.
Example:
<a href="#bottom">Link to the bottom of the page</a>
.
<a name="bottom">This is the anchor text</a>
● Name and href attribute should have the same value to create a
link.
● This example shows the user how to create a link that takes user
to the top of a page
<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>

pg. 28 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<body>
“Entire Page Content”
<a href="#top">
take me to the top of the page
</a>
</body>
</html>

● Working with Lists:


● Creating an Unordered list
● The HTML <ul> tag defines an unordered list.
● The <ul> tag requires both opening and closing tags.
● Each list item starts with the <li> tag.
● The list items will be marked with bullets (small black circles) by
default
● The attribute style or CSS list-style-type property is used to define
the style of the list item marker

<!DOCTYPE html>
<html>
<head>
<title>
Unordered list
</title>
</head>
<body>
<h2>Unordered list </h2>
<ul style="list-style-type: disc">

pg. 29 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<li>HTML</li>
<li>CSS</li>
<li type=square>C Programming</li>
<li type="circle">Office Applications</li>
</ul>
</body>
</html>

● Creating an Ordered list


● The HTML <ol> tag defines an ordered list.
● An ordered list can be numerical or alphabetical.
● Each list item starts with the <li> tag.
● The list items will be marked with numbers by default.
● The type attribute of the <ol> tag, defines the type of the list item
marker

● By default, an ordered list will start counting from 1. If you want


to start counting from a specified number, you can use the start
attribute. This is called Control list counting.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List </title>
</head>
<body>
<h2>Ordered List with Numbers</h2>
<ol>

pg. 30 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Uppercase Letters Ordered List</h2>
<ol type="A">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Lowercase Letters Ordered List</h2>
<ol type="a">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Uppercase Roman numbers Ordered List</h2>
<ol type="I">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Lowercase Roman numbers Ordered List</h2>
<ol type="i">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<h2>Control List Counting</h2>
<ol start="10">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
</body>
</html>

pg. 31 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Creating an Definition list
● HTML definition lists is used to defines a description list
● A description list or a definition list provides a systematic
arrangement of a term and its definition.
● The following tags are used for a definition list:
● <DL>: This is used to define the description list.
● <DT>: It is used to define data..
● <DD>: It is used for Definition or Description. It holds the
definition for a given term.
<!DOCTYPE html>
<html>
<head>
<title>Definition List </title>
</head>
<body>
<h1>Definition List</h1>
<dl>
<dt>
Machine Learning
</dt>
<dd>Development of a system that is able to learn and adapt
without it given any specific instructions.
</dd>
<dt>
Artificial Intelligence
</dt>
<dd>Artificial intelligence refers to the simulation of intelligence
that resembles human logic in machines.
</dd>
<dd>AI is the future of machines that
need to perform human tasks.
</dd>
</dl> </body> </html>

pg. 32 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Nested lists
● List can be nested (Lists inside lists)
● Steps to create nested list:
1. Create outer list first(ordered or unordered)
2. Add items to the outer list
3. Validate before adding the next list level
4. Add first inner list
5. Repeat until finished
6. Validate frequently
● The proper way to make a nested HTML list is to use the <ul> or
<ol> element with the <li> elements.
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h4>Courses list:</h4>
<ol>
<li>DSA
<ul>
<li>Array</li>
<li>Linked List</li>
<li>Stack</li>
<li>Queue</li>
</ul>
</li>
<li>Web Technologies
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

pg. 33 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</li>
<li>C++</li>
<li>.Net</li>
</ol>
</body>
</html>

● Working with Tables:


● Creating a Table
● An HTML Table is an arrangement of data in rows and columns in
tabular format.
● Tables are useful for various tasks, such as presenting text
information and numerical data.
● A table is a useful tool for quickly and easily finding connections
between different types of data.
● A table in HTML consists of table cells inside rows and columns.
● An HTML table is defined with the <table> tag.
● It defines the structure for organizing data in rows and columns
within a web page.
● <tr>:Represents a row within an HTML table, containing individual
cells.
● <td>:Represents a standard data cell, holding content or data.

● Specifying a caption to a table


● <caption>:Provides a title or description for the entire table.
● Only one caption can be specified for one table.
● It is by default aligned to the center
● It is placed immediately after the <table> tag

pg. 34 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● The CSS properties text-align and caption-side can be used to
align and place the caption.

● Adding a table heading


● The Table Headers can be used to add the heading to the Table.
● <th>:Shows a table header cell that typically holds titles or
headings.
● By default, the text in <th> elements are bold and centered, but
you can change that with CSS.

pg. 35 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Setting the table border
● If you do not specify a border for the table, it will be displayed
without borders.
● A border is set using the CSS border property.
● HTML border Attribute is used to specify the border of a table but
it is not supported by HTML5.

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<!- style="text-align: left" or style="caption-side:bottom" -->
<caption>Book Details</caption>
<tr>
<th>Book Name</th>

pg. 36 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>
</html>

● Aligning a table and cell content


● The HTML align Attribute is used to specify the alignment of the
table and its content.
● Instead of the align attribute, CSS properties like margin and text-
align are preferred for table alignment.
● Attribute of property values can be left, right or center
● For aligning content within table rows or cells, use the align
attribute within <tr> or <td> or apply CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>
pg. 37 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya
HTML table align Attribute
</title>
</head>
<body>
<h2>HTML table align Attribute</h2>
<table border="10" align="center">
<caption>Author Details</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td align="right">22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td style="text-align:right">21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>

● Changing the background color of a table


● The HTML <table> bgcolor Attribute is used to specify the
background color of a table.
● The <table> bgcolor Attribute is not supported by HTML 5. Instead
of using this we can use CSS background-color property.
● You can set the background color of the entire table or a
particular row, column or particular cell.

pg. 38 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Use style=”background-color:colorname” with <table>, <th>,<tr>
or <td> tags respectively.
<!DOCTYPE html>
<html>
<head>
<title>Table background color Example</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="background-color:yellow">
<caption>Book Details</caption>
<tr style="background-color:blue">
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td style="background-color:red">The Silent Patient</td>
<td> Alex Michaelides</td>

pg. 39 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<td>Psychological Fiction</td>
</tr>
</table>
</body>
</html>

● Setting a cell padding and cell spacing


● Cell Padding
● Cell padding is the space between the cell edges and the cell
content.
● By default the padding is set to 0.
● To add padding on table cells, use attribute cellpadding or the CSS
padding property
● Cell Spacing
● Cell spacing is the space between each cell.
● By default the space is set to 2 pixels.
● To change the space between table cells, use the attribute
cellspacing or CSS border-spacing property on the table element
● Value of attributes should be given in the number of Pixels.
<!DOCTYPE html>
<html>
<head>
<title>
HTML table spacing and padding
</title>
</head>
<body>
<h2>HTML table with cell padding</h2>
<!--style="padding: 5px"-->
<table border="1" cellpadding="15">
<caption>
Student Details

pg. 40 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>

<h2>HTML table with cell spacing</h2>


<!--style="border-spacing: 15px"-->
<table border="1" cellspacing="15">
<caption>
Student Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>

pg. 41 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<td>21</td>
<td>ECE</td>
</tr>
</table>

<h2>HTML table with cell padding and spacing</h2>


<table border="1" cellspacing="15" cellpadding="15">
<caption>
Student Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>

pg. 42 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Nesting tables
● Table can be nested (Table inside table)
● To create a nested table, we need to create a table using the
<table> tag. This table is known as the outer table.
● The second table that will be the nested table is called the inner
table.
● This table is also created using the <table> tag.
● Note: The inner table always has to be placed between the <td>
….. </td> of the outer table.
<!DOCTYPE html>
<html>
<head>
<title>Nested Tables</title>
<style>
table table {
border: 2px solid blue;
}
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Example of Nested Table</h1>
<table border="2">
<tr>
<td>Name</td>
<td> Marks
<table border="2">
<tr>
<td>Subjects</td>
<td>Elective</td>

pg. 43 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</tr>
<tr>
<td>350</td>
<td>150</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Rahul</td>
<td>500</td>
</tr>
</table>
</body>
</html>

● Working with Frames:


● Before CSS, the HTML frameset and frame elements were used to
create page layouts in which certain content remained visible
while other content was scrollable.
● websites offer multiple views which change based on the size of
the device viewport. While frames can be manipulated to provide
a certain degree of responsiveness, they are not very useful in
creating responsive websites.
● Screen readers and other assistive technologies have a very hard
time understanding and communicating websites that use frames.

● Creating a frame
● Use the frameset element in place of the body element in an
HTML document.
● Use the frame element to create frames for the content of the
web page.
pg. 44 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya
● Use the src attribute to identify the resource that should be
loaded inside each frame.
● Create a different file with the contents for each frame.
● To create a set of vertical columns, we need to use the frameset
element with the cols attribute.
● Rows of frames can be created by using the rows attribute
<!DOCTYPE html>
<html>
<!-- <frameset rows="*,*"> -->
<frameset cols="*,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
● Columns and rows of frames can both appear on the same
webpage by nesting one frameset inside of another.
● To do this, we first create a frameset and then nest a child
frameset within the parent element.
<!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>

pg. 45 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Defining new element-specific attributes
● There are a few things you can do to affect the presentation of a
frameset beyond styling the documents themselves.
o The size of each frame can be specified and locked.(using
attribute noresize)
o The margin between frames can be changed.(using
attributes marginheight and marginwidth)
o The border around frames can be formatted.(using attribute
frameborder or CSS property style="border:none;")
● We can increase or decrease the margin between the frames and
also remove the border between the frames
<!DOCTYPE html>
<html>
<head>
<title> Formatting frame borders and margins </title>
</head>
<frameset cols="250px,*,250px">
<frame noresize src="[Link]" marginheight="105"
marginwidth="25" >
<frameset rows="20%,*,20%">
<frame src="[Link]" frameborder="4">
<frame src="[Link]" frameborder="0">
<frame src="[Link]" frameborder="0">
</frameset>
<frame noresize src="[Link]">
</frameset>
</html>

pg. 46 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Specifying width and height of a frame
● Frames can be sized either in pixels or percentages, or they can be
set to automatically adjust in size based on the available space.
● By default, unless the attribute noresize is added to a frame,
website visitors can use their mouse to drag the border between
two frames to resize the frames.
<!DOCTYPE html>
<html>
<head>
<title> frames height and width </title>
</head>
<frameset cols="250px,*,*">
<frame noresize src="[Link]">
<frameset rows="20%,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frame noresize src="[Link]">
</frameset>
</html>
● The <iframe> tag specifies an inline frame.
● An inline frame is used to display a web page within a web page
● Attributes height and width can be used to specify height and
width of the frame.
<!DOCTYPE html>
<html>
<body>
<h1>The iframe height width attributes</h1>
<iframe src="[Link]" width="200" height="200">
</iframe>
</body></html>

pg. 47 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Applying hyperlink target to a frame
● An iframe can be used as the target frame for a link.
● The target attribute of the link must refer to the name attribute
of the iframe
● Lets understand this with following example
● Step 1: Create a web page with Frame or iframe and set its name
attribute.
<!DOCTYPE html>
<html>
<head>
<title> frames with links </title>
</head>
<frameset rows="25%,*">
<frame src="[Link]">
<frame src="[Link]" name="Dest_col">
</frameset>
</html>

● Step 2: Create web pages which will be displayed in frames. Here


create [Link] as below
<!DOCTYPE html>
<html>
<head>
<title> Frame </title>
</head>
<body>
<h1>Destination frame</h1>
<p>Contents will be displayed here</p>
</body>
</html>

pg. 48 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● Step 3: Make a web page with Hyperlinks and set target attribute
of this link same as the frame’s name attribute. Here create a web
page as [Link]
<!DOCTYPE html>
<html>
<head>
<title> Hyperlink target to a frame </title>
</head>
<body>
<p>Click on link to open the webpage in the frame below</p>
<ul>
<li>
<a href="Text [Link]" target="Dest_col">Load Text
[Link]</a>
</li>
<li>
<a href="BR [Link]" target="Dest_col">Load BR [Link]</a>
</li>
<li>
<a href="[Link]" target="Dest_col">[Link]</a>
</li>
</ul>
</body>
</html>
● Same can be done with iFrame
<!DOCTYPE html>
<html>
<head>
<title> Frame and Link</title>
</head>
<body>
<h2>Hyperlink in iFrame</h2>

pg. 49 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


<iframe src="[Link]" name="iframe_a"
height="300px" width="50%">
</iframe>
<p>
<a href="text [Link]" target="iframe_a">Load text
[Link]</a><br>
<a href="BR [Link]" target="iframe_a">Load BR [Link]</a><br>
<a href="[Link]" target="iframe_a">Load [Link]</a>
</p>
<p>When the target attribute of a link matches the name of an
iframe, the link will open in the iframe.</p>
</body>
</html>

● Working with Images:


● Images are important in enhancing the visual appeal of a website
and improving user engagement.
● Inserting an image on web page and Display alternate text for an
image
● The HTML <img> tag is used to embed an image in a web page.
● Images are not technically inserted into a web page; images are
linked to web pages.
● The <img> tag creates a holding space for the referenced image.
● The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
● The <img> tag has two required attributes:
o src - Specifies the path to the image
o alt - Specifies an alternate text for the image
● The src attribute specifies the path (URL) to the image.

pg. 50 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● If the image is not present at the given URL or path then you will
get a broken link icon.
● The alt attribute provides an alternate text for an image, if the
user for some reason cannot view it (because of slow connection,
an error in the src attribute, or if the user uses a screen reader).
● The broken link icon and the alt text are shown if the browser
cannot find the image.
● You can use the style attribute to specify the width and height of
an image(i.e. style="width:500px;height:600px;">) or you can use
the width and height attributes.
<!DOCTYPE html>
<html>
<head>
<title> Image Example </title>
</head>
<body>
<h2>Image</h2>
<p>Here we specify the Image with alternate text and width &
height attributes:</p>
<img src="[Link]" alt="Missing Poster" width="400"
height="500">
</body>
</html>

● Adding border to an image


● Use border attribute or CSS property border to specify border
around image.
● border attribute is not supported in HTML 5.
● Some web sites point to an image on another server.

pg. 51 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● If you want to insert an image from another folder or other
website, you must then include the folder name or URL in the src
attribute.
<!DOCTYPE html>
<html>
<head>
<title> Image Example </title>
</head>
<body>
<h2>Image</h2>
<p>Here we specify the Image with border and Image from
another folder or from another web site </p>
<img src="C:\Users\Lenovo\Downloads\statue_of_unity.jpg"
alt="Sub folder Image" width="400" height="600" border="5">
&nbsp; &nbsp;
<img
src="[Link]
[Link]" alt="Sun temple" width="900" height="600"
style="border:5px solid Blue">

</body>
</html>

● Align an image
● Image alignment is used to position images at various locations
(top, bottom, right, left, middle) on your web pages.
● The <img> tag’s align attribute is used to align images
● Attribute Values
o left: Aligns the image to the left.
o right: Aligns the image to the right.
o middle: Aligns the image to the middle.

pg. 52 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


o top: Aligns the image to the top.
o bottom: Aligns the image to the bottom.
● Use of this attribute is not supported in HTML5 so use CSS
instead.
<!DOCTYPE html>
<html>
<head>
<title>Alignment of Image</title>
</head>
<body>
<h4>Top Alignment of Image using align</h4>
<p> This is world's Tallest Statue <img align="top" src="[Link]"
alt="Tallest statue" width="50" height="50"> Statue of Unity </p>

<h4>Middle Alignment of Image using vertical-align</h4>


<p> This is world's Tallest Statue <img style="vertical-align:middle"
src="[Link]" alt="Tallest statue" width="50" height="50"> Statue of
Unity </p>

<h4>Bottom alignment of Image using vertical-align</h4>


<p> This is world's Tallest Statue <img src="[Link]" alt="SOU"
width="50" height="50" style="vertical-align:bottom"> Statue of
Unity</p>

<h4>left alignment of Image using align</h4>


<p> This is world's Tallest Statue <img src="[Link]" alt="SOU"
width="50" height="50" align="left"> Statue of Unity</p>
<br>
<h4>Right alignment of Image using align</h4>
<p> This is world's Tallest Statue <img src="[Link]" alt="SOU"
width="50" height="50" align="right"> Statue of Unity</p>
</body>
</html>
pg. 53 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya
● Using image as links
● To make an image clickable in HTML, wrap the <img> tag inside a
<a> tag with an href attribute.
● This makes the image a hyperlink, allowing users to navigate to
the specified URL when they click the image.
<!DOCTYPE html>
<html>
<head>
<title>Image as a link</title>
</head>
<body>
<h3>
The image below is a link. Click on it.
</h3>
<a href="image_alignment.html" target="_blank">
<img src="[Link]" alt="SOU" width="350" height="350" >
</a>
</body>
</html>

● Creating image maps


● The HTML <map> tag defines an image map.
● An image map is an image with clickable areas. The areas are
defined with one or more <area> tags.
● The <map> element is used to create an image map, and is linked
to the image by using the required name attribute.
● The image is inserted using the <img> tag. The only difference
from other images is that you must add a usemap attribute

pg. 54 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


● The usemap value starts with a hash tag # followed by the name
of the image map, and is used to create a relationship between
the image and the image map.
● The name attribute in the map must have the same value as the
image’s usemap attribute.
● You must define the shape of the clickable area, and you can
choose one of these values:
o rect - defines a rectangular region
o circle - defines a circular region
o poly - defines a polygonal region
o default - defines the entire region
● You must also define some coordinates to be able to place the
clickable area onto the image.
<!DOCTYPE html>
<html>
<head>
<title> ImageMap </title>
</head>
<body>
<p>Click on the different continents of the map to know about
them.</p>

<img src="world-map-151576_960_720.png" width="960"


height="492"
alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="184, 36, 272, 158" alt="north america"
href="[Link]

<area shape="rect" coords="282, 215, 354, 367" alt="south america"

pg. 55 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


href="[Link]

<area shape="rect" coords="506, 151, 570, 333" alt="africa"


href="[Link]

<area shape="rect" coords="618, 42, 791, 162" alt="asia"


href="[Link]

<area shape="rect" coords="509, 44, 593, 110" alt="europe"


href="[Link]
``
<area shape="rect" coords="786, 288, 862, 341" alt="australia"
href="[Link]

<area shape="rect" coords="249, 463, 760, 488" alt="antartica"


href="[Link]
</map>
</body>
</html>

● The <div> Element


● The <div> element is used as a container for other HTML
elements.
● The <div> element is by default a block element, meaning that it
takes all available width, and comes with line breaks before and
after.
● Example:
<!DOCTYPE html>
<html>
<head>
<title>The DIV Element</title>

pg. 56 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


</head>
<body>
<h1>HTML DIV Example</h1>
<div style="background-color:pink" >
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div style="background-color:yellow">
<h2>New Delhi</h2>
<p>New Delhi is the capital city of India.</p>
</div>
</body>
</html>

● The <marquee> Tag


● The <marquee> tag is used to create a scrolling effect for text or
images. This tag can make content move left, right, up, or down,
adding an interactive element to your web page.
● This tag has been deprecated in the new version of HTML, i.e.,
HTML 5.

pg. 57 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya


• Example:
<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee bgcolor="lightblue" behavior="alternate"
scrollamount="15" direction="right" style="color:Maroon; border:10px
dashed blue">
<h1> Example of Marquee tag.</h1>
</marquee>
<marquee behavior="alternate" scrollamount="5" direction="up">
<font color="navy"><h1><center>Enjoy!!!!!!!!</center></h1></font>
</marquee>

</body>
</html>

pg. 58 Introduction to Web Technologies(DSC-M-BCA-113 T) Prepared by: Miss Jhanvi Pandya

You might also like