HTML Basics for Web Development
Uploaded by
seenubommisetty549HTML Basics for Web Development
Uploaded by
seenubommisetty549Web Programming BCA – V Sem Sri Srinivasa Degree College
UNIT-1
HTML Introduction:
HTML stands for Hyper Text Markup Language. It is the standard language
used to create and structure content on the web.
HTML is a markup language, not a programming language, meaning it
annotates text to define how it is structured and displayed by web
browsers.
It forms the building blocks of all websites and is complemented by CSS for
style and JavaScript for interactivity.
Here are 4 common reasons to learn HTML:
1. Build Websites: HTML is the basic building block for creating any website.
Learning HTML can help you pursue a career in web development.
2. Customize Content: Allows you to edit or tweak web pages, emails, or
templates to fit your needs.
3. Understand how the web works: Helps you grasp how the internet works
and how web pages are structured.
[Link] Easily: HTML is beginner-friendly, making it a great first step into the
world of coding and technology
HTML tags:
HTML tags are the fundamental building blocks of web development,
providing the structure and organization necessary for creating web pages.
They include tags for headings, paragraphs, links, images, and more.
Commonly used tags like <html>, <head>, and <body> are essential for
creating a well-structured web document.
These tags provide the framework for building user-friendly and accessible
web pages.
Document structure tag
The <html> tag is essential, encapsulating the entire HTML document and
serving as the root element for content organization.
Structure
Tag Syntax Description
<html>
The root of the HTML document
<html> Statements...
specifies it as HTML.
</html>
0
Web Programming BCA – V Sem Sri Srinivasa Degree College
Structure
Tag Syntax Description
<head>
Contains head elements such as title,
<head> Statements...
style, and meta tags in the HTML file.
</head>
<title>
<title> Statements... Defines the title of an HTML document.
</title>
<body> Defines the body of an HTML document,
<body> Statements... containing content like images, tables,
</body> and lists.
HTML elements:
An HTML element is defined by a start tag, some content, and an end tag:
Syntax:<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.
1
Web Programming BCA – V Sem Sri Srinivasa Degree College
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Ex:<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:
HTML attributes:
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
2
Web Programming BCA – V Sem Sri Srinivasa Degree College
Attributes usually come in name/value pairs like: name="value"
Syntax: Attribute = ”value”
Ex: align=”center”
Color=”red”.
The align attribute:
The align attribute specifies the alignment of the text in a web
[Link] contains three values they are left,center and right. The
general form is as follows:
Syntax: align=”left/center/right
Ex: <h1 align=”center”>….</h1>
Ex: <html>
<head>
<title> Sample html page</title>
</head>
<body>
<h1 align=”center”> HTML heading tags</h1>
</body></html>
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size,
and more.
Example
<p style="color:red;">This is a red paragraph.</p>
Ex: <html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as
color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body></html>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search
engines and browsers.
3
Web Programming BCA – V Sem Sri Srinivasa Degree College
The following example specifies English as the language:
EX:<html lang="en">
<body>
langattribute
</body>
</html>
Country codes can also be added to the language code in
the lang attribute. So, the first two characters define the language of the
HTML page, and the last two characters define the country.
The following example specifies English as the language and United
States as the countryname.
ex:<html lang="en-US">
<body>
...........
</body>
</html>
HTML - History and Evolution
Hyper Text Markup Language (HTML) was initially developed by Sir Tim
Berners-Lee in late 1991. It was designed as a standard language for creating
and formatting documents on the World Wide Web. All the web pages on the
internet are made from HTML.
From 1990 to 1995, HTML underwent changes and extensions, initially at CERN
and then at the IETF. The World Wide Web Consortium (W3C) became the new
home for HTML development.
History and Evolution
Here you will see the evolution of HTML over the past couple of decades. The
major upgrade was done in HTML5 in 2012.
Year Progress
199 Tim Berners-Lee created HyperText Markup Language but it was not
1 officially released.
4
Web Programming BCA – V Sem Sri Srinivasa Degree College
199 Tim Berners-Lee created the first version of HTML that was published and
3 available to the public.
199 HTML 2.0 was released with a few additional features along with the
5 existing features.
199 There was an attempt to extend HTML with HTML 3.0, but it was
7 replaced by the more practical HTML 3.2.
199 The W3C (World Wide Web Consortium) decided to shift focus to an
8 XML-based HTML equivalent called XHTML.
199 HTML 4.01, which became an official standard in December 1999, was
9 the most widely used version in the early 2000s.
200
XHTML 1.0, completed in 2000, was a combination of HTML4 in XML.
0
The introduction of XForms reignited interest in evolving HTML itself
200 rather than replacing it with new technologies. This new theory
3 recognized that XML was better suited for new technologies like RSS and
Atom, while HTML remained the cornerstone of the web.
A W3C workshop took place to explore reopening HTML's evolution.
200
Mozilla and Opera jointly presented the principles that later influenced
4
HTML5.
The W3C expressed interest in HTML5 development and formed a
200 working group to collaborate with the WHATWG. The W3C aimed to
6 publish a "finished" HTML5 version, whereas the WHATWG focused on a
Living Standard, continuously evolving HTML.
5
Web Programming BCA – V Sem Sri Srinivasa Degree College
201 HTML5 can be seen as an extended version of HTML 4.01, which was
2 officially published in 2012.
Difference between HTML and HTML5
HTML HTML5
It didn’t support audio and video It supports audio and video controls
without the use of flash player with the use of <audio> and <video>
support. tags.
It uses SQL databases and
It uses cookies to store temporary
application cache to store offline
data.
data.
Allows JavaScript to run in the
Does not allow JavaScript to run in
background. This is possible due to
the browser.
JS Web worker API in HTML5.
Vector graphics are possible in HTML Vector graphics are additionally an
with the help of various technologies integral part of HTML5 like SVG and
such as VML, Silver-light, Flash, etc. Canvas.
It does not allow drag and drop
It allows drag and drop effects.
effects.
Not possible to draw shapes like HTML5 allows to draw shapes like
circle, rectangle, triangle etc. circle, rectangle, triangle etc.
It supported by all new browser like
It works with all old browsers.
Firefox, Mozilla, Chrome, Safari, etc.
<HTML>,<Body> , and <Head> tags
These tags can be omitted while
are mandatory while writing a HTML
writing HTML code.
code.
6
Web Programming BCA – V Sem Sri Srinivasa Degree College
HTML HTML5
Older version of HTML are less HTML5 language is more mobile-
mobile-friendly. friendly.
Doctype declaration is too long and Doctype declaration is quite simple
complicated. and easy.
Elements like nav, header were not New element for web structure like
present. nav, header, footer etc.
Character encoding is long and Character encoding is simple and
complicated. easy.
It is almost impossible to get true One can track the GeoLocation of a
GeoLocation of user with the help of user easily by using JS GeoLocation
browser. API.
It is capable of handling inaccurate
It can not handle inaccurate syntax.
syntax.
Being an older version , it is not fast ,
It is efficient, flexible and more fast
flexible , and efficient as compared to
in comparison to HTML.
HTML5.
Attributes like charset, async and Attributes of charset, async and ping
ping are absent in HTML. are a part of HTML 5.
Features of HTML:
It allows the creation of hyperlinks with the <a> tag, connecting different
web pages.
Uses tags to mark elements and content, such as headings (<h1> to <h6>).
It supports embedding images (<img>), videos (<video>), and audio
(<audio>) for multimedia content.
It provides form elements like <form>, <input>, and <button> for user
input and data submission.
Semantic tags like <article>, <section>, and <nav> for better document
structure and accessibility.
7
Web Programming BCA – V Sem Sri Srinivasa Degree College
Features of HTML5:
Introduced new semantic elements like <header>, <footer>, <section>,
and <article> for improved structure.
Enhances multimedia capabilities with native support for audio and video
elements.
Provides the localStorage API, allowing web applications to store data
locally on the user’s device.
Enables websites to access a user’s geographical location.
Uses SQL database to store data offline.
8
Web Programming BCA – V Sem Sri Srinivasa Degree College
UNIT-2
CODING STANDARDS AND BLOCK ELEMENTS
1. HTML coding conventions:
Web developers are often uncertain about the coding technique and syntax to
use in HTML as the HTML version changed from HTML to XHTML and finally
HTML5. Although, HTML5 is far more flexible but sloppy in terms of code
validation, the code itself is easier to understand. Since it supports bad coding,
it is always a smart move to write HTML codes close to XHTML so that you do
not need to rewrite the entire code in case new browsers or the newer
versions of the existing ones stopped supporting bad coding standards.
Here are a few HTML coding conventions you might want to follow to maintain
proper coding stardard.
1. Declaration of document type in HTML
It is essential to mention the type of document that should be displayed by the
browser. This allows the browser to know what type of document it should
render and thus use its resources.
The correct document type for HTML5 is-
<!DOCTYPE Html>
Not mentioning the document type is considered as a bad practice.
2. Use of lowercase element names in HTML
However, HTML allows the use of lowercase or uppercase element names; we
recommend you to opt for lowercase names as it looks clean and is easier to
write. Correct-
<body>
<p>Welcome to DataFlair</p>
</body>
Incorrect-
<BODY>
<P>Welcome to DataFlair!</P>
</BODY>
3. Close all elements in HTML
HTML does not impose on closing all the elements, but it is better to do so.
Correct-
<body>
<p>Welcome to DataFlair.</p>
</body>
Incorrect-
9
Web Programming BCA – V Sem Sri Srinivasa Degree College
<body>
<p>Welcome to DataFlair.
</body>
4. Use Lowercase Attribute Names in HTML
Like elements, there is no clear distinction provided by HTML in using upper or
lower case names for attributes. However, it is good practice to use lowercase
letters for attribute names. Correct-
<a href="[Link] to DataFlair</a>
Incorrect-
<a HREF="[Link] to DataFlair</a>
5. Quote Attribute Values in HTML
Developers usually don’t quote the attribute values, but it is a better approach
to do so since it improves the readability of the code. One must also ensure
not to use spaces. Correct-
1. <table class= “bordered”>
Incorrect-
<table class= bordered>
Does not work-
<table class= table striped>
This does not work because of the spaces.
6. Specification of alt, width and height attributes of the image in HTML
It is an excellent practice to always specify the ‘alt’ attribute since it is the
alternative text that appears if the browser is unable to display the image.
Similarly, the height and width attributes reserve the space for an image
before loading and thus prevent flickering. Correct-
<img src="[Link]" alt="Tree" height="500px" width="500px">
Incorrect-
<img src="[Link]">
7. Spaces between equal signs in HTML
Though it is allowed to use spaces within equal signs, it is highly recommended
not to do so since it disrupts the readability of the code. Correct-
<a href="[Link] to DataFlair</a>
Incorrect-
<a href = "[Link] to DataFlair</a>
8. HTML Long Code Lines
It is advisable not to use too long lines of code and break them instead. This
prevents unnecessary scrolling from left to right.
10
Web Programming BCA – V Sem Sri Srinivasa Degree College
9. HTML Indentation and Blank lines
It is not recommended to use blank lines and indentation unnecessarily in an
HTML
document. It is a better approach to add blank lines to separate blocks of code,
and indentation should be limited to two spaces rather than the tab key.
10. HTML <title> element
One should always use the <title> element in an HTML document since it plays
a significant role in search engine optimization(SEO). Here, the name of a web-
page is used by the search engine algorithms to decide its order, when it lists
related searched query pages as per the search results. We should name the
web-page accurately, and it should have a meaningful name.
<title>Name of the web-page</title>.
11, HTML Lang attribute
We should always specify the lang attribute to define the language of the web-
page to the browsers and the search engines.
Ex: <!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
</head>
<body>
<h1>Hi</h1>
<p>Welcome</p>
</body>
</html>
12. HTML Meta Data
The <meta> tag contains additional information related to the document such
as page description, keywords, author, character set, etc. The web browsers
use the metadata to display content, and keywords are used by search engines
and other web-services.
Character Set-
<meta charset="UTF-8">
It is a good practice to define the meta charset at the earliest in an HTML
document.
2. HTML Comments:
HTML comments are not displayed in the browser, but they can help
document your HTML source code.
11
Web Programming BCA – V Sem Sri Srinivasa Degree College
With comments you can place notifications and reminders in your HTML
code
Comments can be used to hide content.
This can be helpful if you hide content temporarily
You can also hide more than one line. Everything between the <!-- and the --
> will be hidden from the display.
Comments can be used to hide parts in the middle of the HTML code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:
Syntax:<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the
end tag.
Ex:1: <html>
<body>
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
</body>
</html>
Ex2:<html>
<body>
<p>This <!-- great text --> is a paragraph.</p>
</body>
</html>
3. Content model categories:
Each element defined in this specification has a content model: a description of
the element's expected contents. An HTML element must have contents that
match the requirements described in the element's content model.
Each element in HTML falls into zero or more categories that group elements
with similar characteristics together. The following broad categories are used
in this specification:
METADATA CONTENT
Metadata content is content that sets up the presentation or behavior of the
rest of the content, or that sets up the relationship of the document with other
documents, or that conveys other "out of band" information.
meta, noscript,script,style,title etc.
12
Web Programming BCA – V Sem Sri Srinivasa Degree College
Elements from other namespaces whose semantics are primarily metadata
FLOW CONTENT
Most elements that are used in the body of documents and applications are
categorized as flow content.
a, abbr ,address, article, aside, h1, h2, h3. Form, button etc
As a general rule, elements whose content model allows any flow content
should have either at least one descendant text node that is not inter-element
whitespace, or at least one descendant element node that is embedded
content. For the purposes of this requirement, del elements and their
descendants must not be counted as contributing to the ancestors of the del
element.
SECTIONING CONTENT
Sectioning content is content that defines the scope of headings and footers.
article, aside, nav ,section
Each sectioning content element potentially has a heading and an outline. See
the section on headings and sections for further details. There are also certain
elements that are sectioning roots. These are distinct from sectioning content,
but they can also have an outline.
HEADING CONTENT
Heading content defines the header of a section (whether explicitly marked up
using sectioning content elements, or implied by the heading content itself).
h1,h2,h3,h4, h5,[Link].
PHRASING CONTENT
Phrasing content is the text of the document, as well as elements that mark up
that text at the intra-paragraph level. Runs of phrasing content form
paragraphs.
As a general rule, elements whose content model allows any phrasing content
should have either at least one descendant text node that is not inter-element
whitespace, or at least one descendant element node that is embedded
content. For the purposes of this requirement, nodes that are descendants of
del elements must not be counted as contributing to the ancestors of the del
element.
Most elements that are categorized as phrasing content can only contain
elements that are themselves categorized as phrasing content, not any flow
content. Text, in the context of content models, means text nodes. Text is
sometimes used as a content model on its own, but is also phrasing content,
13
Web Programming BCA – V Sem Sri Srinivasa Degree College
and can be inter-element whitespace (if the text nodes are empty or contain
just space characters).
EMBEDDED CONTENT
Embedded content is content that imports another resource into the
document, or content from another vocabulary that is inserted into the
document.
audio, video, math, img etc
Elements that are from namespaces other than the HTML namespace and that
convey content but not metadata, are embedded content for the purposes of
the content models defined in this specification. (For example, MathML, or
SVG.)
Some embedded content elements can have fallback content: content that is
to be used when the external resource cannot be used (e.g. because it is of an
unsupported format). The element definitions state what the fallback is, if any.
INTERACTIVE CONTENT
Interactive content is content that is specifically intended for user interaction.
a,details,frame,input,select etc
Certain elements in HTML have an activation behavior, which means that the
user can activate them. This triggers a sequence of events dependent on the
activation mechanism,
and normally culminating in a click event, as described below.
The user agent should allow the user to manually trigger elements that have
an activation behavior, for instance using keyboard or voice input, or through
mouse clicks. When the user triggers an element with a defined activation
behavior in a manner other than clicking it, the default action of the
interaction event must be to run synthetic click activation steps on the
element.
4. Block elements:
Every HTML element has a default display value, depending on what type of
element it [Link] two most common display values are block and inline.
A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to
the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
14
Web Programming BCA – V Sem Sri Srinivasa Degree College
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
Ex: <html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always
start
on a new line and take up the full width available (stretches out to the left and
right as far as it can).</p>
</body>
</html>
Output:
Hello World
Hello World
The P and the DIV elements are both block elements, and they will always start
on a new line and take up the full width available (stretches out to the left and
right as far as it can).
Some of the the block-level elements in HTML:
<address>,<article>,<aside>,<blockquote>,<canvas>,<div> ,<dt>,<fieldset>
<figcaption>,<figure>,<footer>,<form>,<h1><h6>,<header>,<hr>,<li>,<main>,
<nav>,<noscript>,<ol>,<p>.
5. Block quote Element:
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements (look at example below to see
how to remove the indentation).
Ex: <html>
<body>
<h1>The blockquote element</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
For 50 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally.
</blockquote>
15
Web Programming BCA – V Sem Sri Srinivasa Degree College
</body>
</html>
Output:
The blockquote element
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally.
The <blockquote> tag also supports the Global Attributes in HTML.
The global attributes are attributes that can be used with all HTML elements.
Attribute Description
accesskey Specifies a shortcut key to
activate/focus an element
class Specifies one or more classnames for
an element (refers to a class in a style
sheet)
contenteditable Specifies whether the content of an
element is editable or not
dir Specifies the text direction for the
content in an element
enterkeyhint Specifies the text of the enter-key on a
virtual keybord
hidden Specifies that an element is not yet, or
is no longer, relevant
id Specifies a unique id for an element
6. White spacing collapsing:
White space refers to empty or blank values in the code which the browser
reads and renders. Html has a special feature of collapsing these white spaces.
If you put extra/consecutive white spaces or newlines in the code it will regard
it as one white space this is known as collapsing of white spaces. In this article,
we will discuss the advantages of collapsing white space in HTML.
Advantages of collapsing white spaces :
While you are writing the HTML for your web page you want the code to be
more understandable/readable to the users.
16
Web Programming BCA – V Sem Sri Srinivasa Degree College
Collapsing white spaces decreases the transmission time between the server
and the client because collapsing features remove unnecessary bytes that are
occupied by the white spaces.
By mistake, if you leave extra white space, the browser will ignore it and
display the UI perfectly.
Example 1: The following example shows the basic example for collapsing
white space. The h1 tag contains a lot of space between the short form and the
full form. If you run this code in the browser you will see the following output.
All the white space in between the two has been converted into a single white
space.
Ex: <html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome to GFG. GeeksforGeeks.</h1>
</body>
</html>
7. Pre element:
The <pre> tag defines preformatted text. Text in a <pre> element is displayed
in a fixed-width font, and the text preserves both spaces and line breaks. The
text will be displayed exactly as written in the HTML source code. The <pre>
tag also supports the Global Attributes in HTML. The <pre> tag also supports
the Event Attributes in HTML.
Ex: <html>
<body>
<h1>The pre element</h1>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre></body></html>
Output:
The pre element
Text in a pre element
is displayed in a fixed-width
17
Web Programming BCA – V Sem Sri Srinivasa Degree College
font, and it preserves
both spaces and
line breaks
8. HTML phrase elements:
HTML phrase tags have been designed for specific purposes, though they are
displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>.
Here we will take you through all the important phrase tags; so let's start
seeing them one by one. Following is the list of phrase tags.
HTML Phrase Tags List
Emphasized Text - HTML em Tag
Marked Text - HTML mark Tag
Strong Text - HTML strong Tag
Abbreviation Text - HTML abbr Tag
Directed Text - HTML bdo Tag
Short Quoting Text - HTML q tag
Citations Text - HTML cite Text
Address Text - HTMl address Tag
Emphasized text:
Content that is enclosed within the <em>...</em> element is displayed as
emphasized text. The <em> element typically renders text in italics, indicating
emphasis.
Ex:
<html>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p> </body>
</html>
Marked text:
Anything that is enclosed within the <mark>...</mark> element is displayed as
marked with yellow ink.
<html>
<body>
<p>The following word has been <mark>marked</mark> with yellow.</p>
18
Web Programming BCA – V Sem Sri Srinivasa Degree College
</body>
</html>
Strong text:
Content that is enclosed within the <strong>...</strong> element is displayed
as important text. The <strong> element displays text in a bold font, indicating
strong importance.
<html>
<body>
<p>The following word uses a <strong>strong</strong> typeface. </p>
</body>
</html>
Abbrevation text:
You can abbreviate a text by putting it inside opening <abbr> and closing
</abbr> tags. If present, the title attribute must contain this full description
and nothing else.
Ex: <html>
<body>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.
</p> </body> </html>
Output:
My best friend's name is Abhy.
Directed Text:
The <bdo>...</bdo> element stands for Bi-Directional Override, and it is used
to override the current text direction.
<html>
<body>
<p>This text will go left to right.</p> <p> <bdo dir="rtl">This text will go right
to left.</bdo>
</p>
</body>
</html>
Short quoting text:
19
Web Programming BCA – V Sem Sri Srinivasa Degree College
The <q>...</q> element is used when you want to add a double quote within a
sentence. By using <q>...</q>, you ensure that the enclosed text is presented
as a direct quotation, enhancing readability and maintaining proper
punctuation in your HTML document.
Ex: <html>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.
</p>
</body>
</html>
Output:
Amit is in Spain, “I think I am wrong”.
Text Citations
If you are quoting a text, you can indicate the source by placing it between an
opening <cite>tag and closing </cite> [Link] you would expect in a print
publication, the content of the <cite> element is rendered in italicized text by
default.
Ex:
<html>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.
</p>
</body>
</html>
Address Text
The <address>...</address> element is used to contain any address.
<html> <body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address> </body>
</html>
9. Editing elements in HTML
The Edit HTML code enables you to edit the HTML code of the selected
element for more advanced changes.
To Edit an Element,
Click On the element you want to edit on your web page
Select Edit HTML code. This will navigate you to the HTML code window of
that particular element, where you can edit it in HTML.
20
Web Programming BCA – V Sem Sri Srinivasa Degree College
Bootstrap Studio is a visual editor, and as such HTML can't be edited directly.
The application generates HTML code from the components that you add to
your page and the options that you choose for them.
You can do nearly everything from the visual tools which Bootstrap Studio
gives you, but for the rare cases where you need HTML editing, you can
achieve it with the Custom Code component
10. q and cite Elements:
The HTML <q> cite attribute specifies the source of a short inline quotation. It
contains a URL pointing to the original document or reference, though it is not
displayed to users. It helps in citing the source of a quote.
Syntax
<q cite="URL">
Attribute Values
It contains a single value URL which is used to specify the URL of the quotation.
The possible value of the URL is:
Absolute URL: It is used to point out other websites (like cite
=”[Link]
Relative URL: It is used to point out the page within the website. (like
cite=”[Link]”).
Example: In this example we creates a webpage with centered text, displaying
a heading “GeeksForGeeks”, a subheading about the <q> cite attribute, and a
paragraph quoting “GeeksforGeeks” with a citation link.
<html>
<head>
<title>HTML q cite Attribute</title>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<h2> HTML <q>cite Attribute </h2>
<p>
<q cite="[Link]
GeeksforGeeks
</q>
A computer science portal for geeks
</p></body></html>
21
Web Programming BCA – V Sem Sri Srinivasa Degree College
11. Html Time element:
The <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used translate the time into a
machine-readable format so that browsers can offer to add date reminders
through the user's calendar, and search engines can produce smarter search
results.
The <time> tag also supports the Global Attributes in HTML.
The <time> tag also supports the Event Attributes in HTML.
Example: <html>
<body>
<h1>The time element</h1>
<p>Open from <time>10:00</time> to <time>21:00</time> every
weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines
day</time>.</p>
<p><b>Note:</b> The time element does not render as anything special in any
of the major browsers.</p>
</body>
</html>
Output:
The time element
Open from 10:00 to 21:00 every weekday.
I have a date on Valentines day.
Note: The time element does not render as anything special in any of the
major browsers.
12. Code related elements in HTML:
HTML contains several elements for defining user input and computer code.
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content inside
is displayed in the browser's default monospace font.
Example:<html>
<body>
<h2>The kbd Element</h2>
<p>The kbd element is used to define keyboard input:</p>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
</body>
</html>
Output:
22
Web Programming BCA – V Sem Sri Srinivasa Degree College
The kbd Element
The kbd element is used to define keyboard input:
Save the document by pressing Ctrl + S
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer
program. The content inside is displayed in the browser's default monospace
font.
Example:<html>
<body>
<h2>The samp Element</h2>
<p>The samp element is used to define sample output from a computer
program.</p>
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
</body>
</html>
Output:
The samp Element
The samp element is used to define sample output from a computer program.
Message from my computer:
Filenotfound. Press F1 to continue
HTML <code> For Computer Code
The HTML <code> element is used to define a piece of computer code. The
content inside is displayed in the browser's default monospace font.
Example:<html>
<body>
<h2>The code Element</h2>
<p>Programming code example:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
Output:
The code Element
Programming code example:
x = 5; y = 6; z = x + y;
23
Web Programming BCA – V Sem Sri Srinivasa Degree College
HTML <var> For Variables
The HTML <var> element is used to define a variable in programming or in a
mathematical expression. The content inside is typically displayed in italic.
Example:<html>
<body>
<h2>The var Element</h2>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where
<var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
Output:
The var Element
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical
height.
13. br and wbr Elements:
In HTML, <br> inserts a single line break, while <wbr> provides a line break
opportunity, allowing the browser to break a long word or text if necessary to
fit within the available space.
<br> (Line Break):
Purpose: Forces a single line break, moving the subsequent text to a new
line.
Usage: Commonly used for line breaks in addresses, poems, or when you
want to explicitly control line breaks.
Example:
Code
<p>This is the first line.<br>This is the second line.</p>
This will result in two separate lines in the browser.
Note: The <br> tag is an empty tag (it has no end tag), meaning it should be
used as <br> or <br/>.
<wbr> (Word Break Opportunity):
Purpose: Specifies a potential break point for a word or long text string,
allowing the browser to break the text if it overflows the container.
Usage: Useful for very long words or text where you want the browser to
have the flexibility to break it at a logical point without forcing a break.
Example:
24
Web Programming BCA – V Sem Sri Srinivasa Degree College
Code
<p>This is a very long word: antidisestablishmentarianism<wbr>ism</p>
If the text "antidisestablishmentarianism" is too long for the available space,
the browser may choose to break it at the <wbr> tag.
Note: The <wbr> tag is also an empty tag (it has no end tag).
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2><wbr> Tag</h2>
<!-- It is mostly used when the used word is too long and
there are chances that the browser may break lines at
the wrong place -->
<p>GFGstandsforGeeksforGeeksanditis<wbr>acomputerscienceportalforgeeks.
</p>
</body>
</html>
14. Text elements in HTML:
HTML contains several elements for defining text with a special meaning. The
tag is applied to an individual character is known as “ character tags”. There
are two types of character tags in HTML. They are:
Logical character tags
Physical character tags.
Logical character tags:
This tag describes how the text is being used not necessarily, how it is
formatted. Some of the logical character tags are:
Citation tag: This tag is used to make the text in italic face. It is represented
as <cite> . It is a container tag.
<cite>...............</cite>---Italic
Delete tag: This tag is used to display the text with a line through it> It is
represented as <del>. It is a container tag.
<del>...............</del>.---------strike
Insert tag: This tag is used to display the text with underline. It is
represented as <ins>. It is a container tag.
25
Web Programming BCA – V Sem Sri Srinivasa Degree College
<ins>...........</ins>------------underlined
Emphasize tag: This tag is used to display the in italic face. It is represented
as <em>. It is a container tag.
<em>.........</em>------------Italic
Strong tag: This tag is used to make the text in strong face. It s represented
as <strong> . It is a container tag.
<strong>............</strong>------Bold.
Physical character tags:
This tag controls how the characters are formatted. some of the physical
character tags are:
Bold tag: This tag is used to make the text in Bold face. It is represented as
<b>. It is a container tag.
Bold tag--<b>--------------</b>.
Italic tag: This tag is used to make the text in Italic face. It is represented as
<i>. It is a container tag.
Italic tag--<i>---------------</i>
Underline tag: This tag is used to set underline to the text. It is represented
as <u>. it is a container tag.
Underline tag<u>-------------</u>
Subscript tag: This tag is used to set the text as subscript.(base/suffix).It is
represented as <sub>. It is a container tag.
Subscript tag-<sub>----------</sub>
Superscript tag: this tag is used to set the text as superscript.(power/prefix).
It is represented as <sup>. It is a container tag.
Superscript tag-<sup>----------</sup>
Big tag: This tag is used to make the text in bold face. It is represented as
<big>. It is a container tag.
Big tag<big>...............</big>
26
Web Programming BCA – V Sem Sri Srinivasa Degree College
Strike tag: This tag is used to display the text with a line through it. It is
represented as <s>. it is a container tag.
Strike tag-><s>.................</s>
15. Character references in HTML:
The reserved characters must be replaced with character entities. The
characters that are not present as HTML elements use entities. The advantage
of using an entity name is easy to remember. The disadvantage of using an
entity name is browsers may not support all entity names, but the support
browsers number is good.
Some of the HTML entities are:
ENTITY NAME DESCRIPTION RESULT
< Less than <
> Greater than >
& Ampersand &
" Double quotations “
' Single quotation ‘
  Non breakable Empty space
space
¢ cent ₵
¥ yen ¥
© copy ©
® Registered trade ®
mark
16. Span elements:
In HTML, the <span> tag is an inline container used for grouping and styling
parts of text or elements without creating a new line. It's a generic element,
meaning its name doesn't directly imply its purpose. <span> is often used in
conjunction with CSS or JavaScript to apply styles or manipulate specific
portions of text.
Key characteristics of the <span> tag:
Inline element:
Unlike <div>, which is a block-level element, <span> is an inline element,
meaning it flows within the surrounding text.
27
Web Programming BCA – V Sem Sri Srinivasa Degree College
Generic container:
It doesn't have a specific meaning like other semantic HTML elements (e.g.,
<p> for paragraphs).
Used for styling:
It's commonly used to apply styles (like color, font, etc.) to specific parts of text
or elements.
Used for JavaScript manipulation:
It can be targeted by JavaScript to modify its content or behavior.
Example:
Code
<p>This text has a <span style="color: red;">red</span> part.</p>
In this example, the <span> tag wraps the word "red," allowing you to apply a
red color style only to that specific word.
Ex: <html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body>
</html>
Output:
The span element
My mother has blue eyes and my father has dark green eyes.
28
Web Programming BCA – V Sem Sri Srinivasa Degree College
UNIT-3
CASCADING STYLE SHEETS
1. CSS overview & CSS rules & CSS Syntax:
CSS overview:
CSS stands for Cascading Style Sheets, used to describe the presentation and
design of a web [Link] 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 Properties
A CSS property styles an aspect of an HTML element. Here are a few
examples:
<div style="border: 1px solid black;
font-size: 18px; "> Style This </div>
In this example two CSS properties are applied to the div element: The border
and the font-size properties.
A CSS property declaration consists of a property name and a property value.
The property name comes first, then a colon, and then the value. Here is the
general pattern a CSS property declaration follows:
property-name : property-value
If you specify more than one CSS property, the each name - value pair is
separated by a semicolon, like this:
property1 : property-value1;
property2 : property-value2;
The last property declaration does not have to end with a semicolon, but it
makes it easier to add more CSS properties without forgetting to put in that
extra semicolon.
There are many CSS properties you can specify for different HTML elements.
These CSS properties are covered in their own texts.
CSS Rules
A CSS rule is a grouping of one or more CSS properties which are to be
applied to one or more target HTML elements.
29
Web Programming BCA – V Sem Sri Srinivasa Degree College
A CSS rule consists of a CSS selector and a set of CSS properties. The CSS
selector determines what HTML elements to target with the CSS rule. The CSS
properties specifies what to style of the targeted HTML elements
Here is a CSS rule example:
div {
border : 1px solid black;
font-size : 18px;
}
This example creates a CSS rule that targets all div elements, and the set the
CSS properties border and font-size for the targeted elements.
The CSS selector part a CSS rule is the part before the first {. In the example
above it is the div part of the CSS rule. The CSS properties are listed inside the {
... } block.
CSS rules have to be specified inside either a style element or inside an
external CSS file.
CSS Benefits:
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 Syntax:
A style sheet can be simply a set of instructions, that can be applied a piece of
text. There are three mechanisms by which we can apply own styles to our
HTML document.
The style can be defined with in basic HTML.
Styles can be defined in head section and can be applied to entire document.
30
Web Programming BCA – V Sem Sri Srinivasa Degree College
Styles can be defined in external files called “Linking style sheets”. Which can
be used in any document by including the style sheet through a “URL”.
CSS syntax has two parts namely SELECTOR and DECLARATION.
Syntax: selector {declaration; declaration ;......................}
HTML element {poperty1:value1; property2:value2:...............}
EX: h1 { text-align: center; color : red;..................}
In above syntax, selector consists of HTML element. Declaration consists of
property and value. In css two or more declarations, they are separated by
semicolon(;).
Property and values are separated by colon (:) symbol.
CSS History and Versions
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.
2. CSS Selectors:
CSS selectors are patterns used to select and style HTML elements. They allow
developers to target specific elements or groups of elements based on various
criteria, such as element type, class, ID, attributes, and hierarchy within the
document structure.
Categories of Selector
Selectors can be divided into different categories based on their specificity and
how they target elements within the HTML document. Here are the main
categories:
Simple Selector
Select elements based on name, id, and class.
Element Selector
Selects elements based on their tag name (e.g., p, div, h1). Example
<html>
<head>
<!-- Element Selector-->
31
Web Programming BCA – V Sem Sri Srinivasa Degree College
<style>
div {
text-align: center;
color: red;
}
</style>
</head>
<body>
<div>Welcome to Geekster</div>
</body>
</html>
Universal Selector
Selects all elements on the page using the asterisk `*`.
<html>
<head>
<!-- Universal Selector-->
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to Geekster</p>
</body>
</html>
CSS Id Selector
Selects a single element with a specific ID. The id of an element is unique
within a page, so the id selector is used to select one unique element , To
select an element with a specific id, write a hash (#) character, followed by the
id of the element.
#my-id {
text-align: center;
color: red;
}
<html>
<head>
<style>
32
Web Programming BCA – V Sem Sri Srinivasa Degree College
#my-id{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="my-id">Welcome to Geekster</p>
</body>
</html>
CSS Class Selector
Selects elements with a specific class. To select elements with a specific class,
write a period (.) character, followed by the class name.
.center {
text-align: center;
color: red;
}
<h1 class="center">Welcome to Geekster</h1>
CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions. Look at the following CSS code (the h1, h2, and p elements have
the same style definitions):
h1 {
text-align: center;
color: red;
}
div {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group
selectors, separate each selector with a comma.
h1, div, p {
33
Web Programming BCA – V Sem Sri Srinivasa Degree College
text-align: center;
color: red;
}
Attribute Selector
Selecting Elements with a Specific Attribute:
/* Select all anchor elements with a "href" attribute */
a[href] {
color: blue;
}
Selecting Elements with a Specific Attribute Value:
/* Select all input elements with a type attribute set to "checkbox" */
input[type="checkbox"] {
margin-right: 5px;
}
Selecting Elements with Attribute Values Containing a Specified Word:
/* Select all elements with a "class" attribute containing the word "active" */
[class~="active"] {
font-weight: bold;
}
Selecting Elements with Attribute Values Starting with a Specified Value:
/* Select all elements with a "href" attribute starting with "[Link] */
[href^="[Link] {
color: green;
}
Pseudo-classes and Pseudo-elements
Pseudo-classes: Select elements based on their state or position in the
document (e.g., :hover, :first-child, :nth-child()).
Pseudo-elements: Select and style a part of an element (e.g., ::before,
::after).
Combinator Selectors
Descendant Selector (Whitespace): Selects an element that is a descendant
of another element.
34
Web Programming BCA – V Sem Sri Srinivasa Degree College
Child Selector (>): Selects direct children of an element.
Adjacent Sibling Selector (+): Selects an element that is immediately
preceded by a sibling element.
General Sibling Selector (~): Selects siblings of an element that share the
same parent.
Logical Combinators
:is() or :matches() function: Allows grouping of multiple selectors.
:not() function: Selects elements that do not match a specified selector.
3. CSS Span and Div Elements:
In CSS, the <div> and <span> tags are used for structuring and styling content.
<div> creates block-level containers for grouping elements, while <span>
creates inline containers for styling specific portions of text or elements within
a block-level container.
Syntax:
<div> A Computer Science Portal for Geeks <span>GeeksforGeeks</span>
</div>
CSS div tag
The div tag is known as the Division tag. The HTML <div> tag is a block-level
element used for grouping and structuring content. It provides a container to
organize and style sections of a webpage, facilitating layout design and CSS
styling.
Note: Div tag has both opening(<div>) and closing (</div>) tags and it is
mandatory to close the tag.
Example: In this example we uses <div> tags styled with CSS to create colored,
block-level containers. Each div displays text “div tag” with white text on a
green background, differentiated by margins and font size.
<!DOCTYPE html>
<html>
<head>
<title>Div tag</title>
<style>
div {
color: white;
margin: 2px;
font-size: 25px;
}
.div1 {
35
Web Programming BCA – V Sem Sri Srinivasa Degree College
background-color: rgb(142, 142, 245);
}
.div2 {
background-color: #9af19a;
}
.div3 {
background-color: rgb(232, 232, 137)
}
.div0 {
background-color: #009900;
}
</style>
</head>
<body>
<div class="div1"> div tag </div>
<div class="div2"> div tag </div>
<div class="div3"> div tag </div>
</body>
</html>
CSS span Tag
The CSS span element is a generic inline container for inline elements and
content. It used to group elements for styling purposes (by using the class or id
attributes). A better way to use it when no other semantic element is available.
Example: In this example the <span> tag’s use for inline styling. It highlights
“GeeksforGeeks” with a light green background, and “Publish” with blue color,
emphasizing text within a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<p>
<span style="background-color:lightgreen">
GeeksforGeeks
</span>
is A Computer Science Portal where you can
<span style="color:blue;">
Publish
36
Web Programming BCA – V Sem Sri Srinivasa Degree College
</span> your own
<span style="background-color:lightblue">
articles
</span>
and share your knowledge with the world!!
</p>
</body>
</html>
Differences between <div> and <span> Tags
<div> <span>
The <div> tag is a block level element. The <span> tag is an inline element.
It is best to attach it to a section of a It is best to attach a CSS to a small
web page. section of a
line in a web page.
It accepts align attribute. It does not accept align attribute.
This tag should be used to wrap a This tag should be used to wrap any
section, for highlighting that section. specific word that you want to
highlight in your
4. CSS Style container:
The w3-container class adds a 16px left and right padding to any HTML
element.
The w3-container class is the perfect class to use for all HTML container
elements like:<div>, <article>, <section>, <header>, <footer>, <form>, and
more.
Containers Provides Equality
The w3-container provides equality for all HTML container elements:
Common margins
Common paddings
Common alignments
Common fonts
Common colors
To use a container, just add a w3-container class to any element:
Ex:
37
Web Programming BCA – V Sem Sri Srinivasa Degree College
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<body>
<div>
<h2>Without a Container</h2>
<p>The w3-container class is one of the most important [Link] classes.</p>
<p>It provides correct margins, padding, alignments, and more, to most HTML
elements.</p>
</div>
<div class="w3-container">
<h2>With a Container</h2>
<p>The w3-container class is one of the most important [Link] classes.</p>
<p>It provides correct margins, padding, alignments, and more, to most HTML
elements.</p>
</div>
</body>
</html>
To add a color, just add a w3-color class:
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<body>
<div class="w3-container">
<h2>Displaying Colors</h2>
<p>The w3-color classes can be used to add colors to any HTML element.</p>
</div>
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
</body>
</html>
Displaying Colors
The w3-color classes can be used to add colors to any HTML element.
London is the capital city of England.
Headers and Footers
38
Web Programming BCA – V Sem Sri Srinivasa Degree College
The w3-container class can be used to style headers:
<html>
<title>[Link]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<body>
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>The w3-container class can be used to display headers.</p>
</div>
</body>
</html>
5. CSS Properties:
CSS means “cascading style sheet”. Generally HTML is used for designing the
WebPages. But it is a poor page formatting. We use CSS it is used to improve
the page formatting.
In CSS there are number of properties and values which are used to format the
webpage. Those are:
Properties related to font.
Properties related to text.
Properties related to colors.
Properties related to boxes/borders.
PROPERTIES RELATED TO FONTS:
The properties which are used for the fonts are given below:
Font-family: This property is used to change the different types of fonts , to
the text. The general form is:
Syntax: font-family: family name
Ex: font-family: times new roman
Font-style : This property is used to change the style of the font. The general
form is:
Syntax: font-style: normal/italic
Ex: font-style: italic
39
Web Programming BCA – V Sem Sri Srinivasa Degree College
Font-weight : This property is used to set font weight to the text. The general
form is:
Syntax: font-weight: bold/lighter/normal
Ex: font-weight: bold
Font-size : This property is used to set size of the font. The general form is:
Syntax: font-size: small/medium/large
Ex: font-size: medium
PROPERTIES RELATED TO TEXT:
The properties which are used for the Text are given below.
Text-decoration: This property is used to decorate the text. The general form
is:
Syntax: text-decoration: underlined/overlined
Ex: text-decoration: underlined
Text-align: This property is used to alignment of the text. The general form
is:
Syntax: text-align: left/center/right
Ex: text-align:right
Text-transform: This property is used to transform the text in to lower and
upper cases. The general form is:
Syntax: text-transform: lowercase/uppercase
Ex: text-transform:uppercase
PROPERTIES RELATED TO COLORS:
The properties which are used for the COLORS are given below
Color: This property is used to set colors to the text. The general form is:
Syntax: color: color name/ hexadecimal coding
Ex: color :red (or) #dd6644
Background- color: This property is used to set background-color to the text.
The general form is:
Syntax: background-color: color name/coding
Ex: background-color: green or #aa88ff
40
Web Programming BCA – V Sem Sri Srinivasa Degree College
Background-image: This property is used to set background-image for the
whole document. The general form is:
Syntax: background-image:url
Ex: background-image: [Link]
PROPERTIES RELATED TO BOXES/BORDERS:
The properties which are used for the boxes/borders are given below.
Border-style: This property is used to set the border style to the text: The
general form is:
Syntax: border-style : dotted/doubled/solid/none
Ex: border-style: dotted
Border-color : This property is used to set border-color to the text. The
general form is:
Syntax: border-color: color name/ coding
Ex: border-color: pink
Border-width : This property is used to set border-width to the text. The
general form is:
Syntax : border-width : thin/thick/medium.
Ex: border-width: thick
6. Different types CSS styles in HTML or CSS external file:
CSS means “cascading style sheet” . Generally HTML is used for designing the
WebPages. But it is a poor page formatting. We use CSS it is used to improve
the page formatting.
There are three types of CSS styles in HTML. They are:
Inline style sheets.
Embedded style sheets.
External linking style sheets.
1. INLINE STYLE SHEETS:
These are the styles which are applied to a specific line of the tag or individual
element of an HTML document.
In inline style sheet using “ style” as a attribute that can be applied to an
individual element of HTML like <p>,<h1>,<table>etc.
Syntax:
<htmltag style=“property1:value1;
41
Web Programming BCA – V Sem Sri Srinivasa Degree College
property2:value2; property3:value3:...................” >
Ex: <h1 style=”text-align:center;color:red”>
Ex: <html>
<head>
<h1 align=”center”>
Inline Style Sheets</h1>
</head> <body>
<h1 style="font-family:Bahnschrift SemiBold;font-style:italic;
font-weight:bold;font-size:large;text-align:center;
color:magenta;background-color:yellow">
Web Technologies</h1>
<h1 style="text-align:center;text-transform:uppercase;
text-decoration:underline;border-style:dotted;
border-color:violet">
[Link]/BCA students</h1>
<h1 style="color:red;background-color:pink">
cascading style sheets</h1>
<h1 style="border-color:blue;border-style:dotted;
border-width:thick;text-align:center">
Advanced HTML</h1>
</body></html>
2. EMBEDDED STYLE SHEETS:
Embedded means combined . These are the styles which can be applied to
entire document. Here we use “STYLE: as a tag and it is placed in HEAD section
of the HTML document.
Syntax:
selector { declaration ; declaration ;......................}
HTML element { poperty1:value1; property2:value2:...............}
EX: h1 { text-align:center; color : red;..................}
Program:
<html>
<head>
<style>
h1{text-align:center;color:red;font-weight:bold}
h2{text-decoration:underline;text-transform:uppercase;background-
color:#44dd77}
p{border-style:dotted;border-color:#77dd33}
</style>
</head>
42
Web Programming BCA – V Sem Sri Srinivasa Degree College
<body>
<h1> Embedded Stylesheet</h1>
<h2>second style sheet</h2>
<p> CSS types in DHTML</p>
<h1>web technologies</h1>
<p> Degree College </p>
<h2>Create smart people</h2>
</body>
</html>
3. EXTERNAL LINKING STYLE SHEET:
Styles can also be defined in multiple documents, required properties in an
external file with extension .CSS . The stylesheets can be accessed by linking to
the desired HTML file using link tag with “rel(relation)” attribute.
The general form of external linking style sheet is as follows:
Syntax:
<link rel=“stylesheet” href=“url”>
The above syntax is placed in HEAD section only.
Ex: Save as [Link]
ul ul{color:red;background-color:pink}
em{border-style:dotted;border-color:blue}
li em{color:green; background-color:#ffaa77}
h1{text-align:center;text-transform:uppercase}
Save as [Link]:
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>
shopping list for <em>Monday</em>
</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White Bread</li>
<li>Wheat Bread</li>
</ul>
43
Web Programming BCA – V Sem Sri Srinivasa Degree College
</li>
<li>Rice</li>
<li>Potatoes with <em>Mushrooms</em></li>
</ul>
</body>
</html>
7. CSS Colors:
Colors are specified using predefined color names, or RGB, HEX, HSL, values.
HSL(Hue-Saturation-Lightness):
Hue Hue is represented as an angle of the color circle (i.e. the rainbow
represented in a circle). This angle is so typically measured in degrees that the
unit is implicit in CSS; syntactically, only a <number> is given. By definition
red=0=360, and the other colors are spread around the circle, so green=120,
blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and
480=120.
Saturation Saturation is represented as percentages. 100% is full saturation,
and 0% is a shade of gray.
Lightness Lightness is represented as percentages. 0% lightness is black,
100% lightness is white, and 50% lightness is “normal”.
CSS Color Names:
In CSS, a color can be specified by using a predefined color name:
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
CSS Background Color:
You can set the background color for HTML elements:
<html>
<body>
44
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
CSS Text Color:
You can set the color of text:
Ex: <html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</p>
</body>
</html>
CSS Border Color:
You can set the color of borders:
<html><body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body></html>
8. CSS Borders:
The CSS border properties allow you to specify the style, width, and color of an
element's border.
CSS Border Style:
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
45
Web Programming BCA – V Sem Sri Srinivasa Degree College
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-
color value
ridge - Defines a 3D ridged border. The effect depends on the border-color
value
inset - Defines a 3D inset border. The effect depends on the border-color
value
outset - Defines a 3D outset border. The effect depends on the border-color
value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
<html>
<head>
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
</style></head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
</body></html>
46
Web Programming BCA – V Sem Sri Srinivasa Degree College
9. CSS Margins:
Margins are used to create space around elements, outside of any defined
borders. The CSS margin properties are used to create space around elements,
outside of any defined [Link] CSS, you have full control over the
margins. There are properties for setting the margin for each side of an
element (top, right, bottom, and left).
All CSS Margin Properties Property Description
margin A shorthand property for setting all the
margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent
element
Ex: <html>
<head>
<style>
h1{
border: 1px solid black;
margin: 25px 50px 75px 100px;
47
Web Programming BCA – V Sem Sri Srinivasa Degree College
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<h1>This div element has a top margin of 25px, a right margin of 50px, a
bottom
margin of 75px, and a left margin of 100px.</h1>
</body>
</html>
The auto Value:
You can set the margin property to auto to horizontally center the element
within its container.
The element will then take up the specified width, and the remaining space will
be split equally between the left and right margins.
Ex: <html>
<head>
<style>
h3{
width: 300px; margin: auto;border: 1px solid red;
}
</style></head><body>
<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element
within its container. The element will then take up the specified width, and the
remaining space will be split equally between the left and right margins:</p>
<h3>
This div will be horizontally centered because it has margin: auto;
</h3></body></html>
10.. CSS Padding:
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders. With CSS, you have full control over the
padding. There are properties for setting the padding for each side of an
element (top, right, bottom, and left).
Properties:
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
48
Web Programming BCA – V Sem Sri Srinivasa Degree College
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent
element
Ex: <html>
<head>
<style>
h1 {border: 1px solid black; padding: 25px 50px 75px 100px; background-color:
lightblue; }
</style></head><body>
<h2>The padding shorthand property - 4 values</h2>
<h1>This div element has a top padding of 25px, a right padding of 50px, a
bottom
padding of 75px, and a left padding of 100px.</h1>
</body></html>
Padding and Element Width:
The CSS width property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an
element (the box model).So, if an element has a specified width, the padding
added to that element will be added to the total width of the element. This is
often an undesirable result.
Ex: <html>
<head>
<style>
.ex1 {width: 300px; background-color: yellow;}
.ex2 {width: 300px; padding: 25px; background-color: lightblue;}
</style></head>
<body>
<h2>Padding and element width</h2>
<h1 class="ex1">This div is 300px wide.</h1>
<h2 class="ex2">The width of this div is 350px, even though it is defined as
300px in the
CSS.</h2
</body></html>
11. CSS TEXT:
CSS has a lot of properties for formatting text.
49
Web Programming BCA – V Sem Sri Srinivasa Degree College
Text Color:
The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Text Alignment:
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.
Text Decoration:
The properties of text decoration are:
text-decoration-line: The text-decoration-line property is used to add a
decoration line to [Link] values are: overline,line-through,underline and
overline underline.
text-decoration-color: The text-decoration-color property is used to set the
color of the decoration line.
text-decoration-style: The text-decoration-style property is used to set the
style of the decoration line.
text-decoration-thickness: The text-decoration-thickness property is used to
set the thickness of the decoration line.
Text Transformation:
The text-transform property is used to specify uppercase and lowercase letters
in a [Link] can be used to turn everything into uppercase or lowercase letters,
or capitalize the first letter of each word:
Ex: <html>
<head>
<style>
p { color: blue}
h1 {color: green;text-align: center;text-transform: uppercase}
h2{text-align: right; text-decoration-line:overline;text-decoration-color: red}
</style></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is an ordinary paragraph..</p>
</body></html>
Text Shadow:
The text-shadow property adds shadow to text and add a color to the shadow..
Ex: In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px):
50
Web Programming BCA – V Sem Sri Srinivasa Degree College
Ex: <html><head>
<style>
h1 { text-shadow: 2px 2px red;}
</style></head><body>
<h1>Text-shadow effect!</h1></body>
</HTML>
12.. CSS FONTS:
Choosing the right font has a huge impact on how the readers experience a
website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your
text. It is also important to choose the correct color and text size for the font.
font-family Property:
In CSS, we use the font-family property to specify the font of a text.
Font Style Property:
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
Font Weight Property:
The font-weight property specifies the weight of a font: The values are normal
and bold.
Font Size Property:
The font-size property sets the size of the text. Being able to manage the text
size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
[Link] font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
51
Web Programming BCA – V Sem Sri Srinivasa Degree College
Allows a user to change the text size in browsers
Ex:
<html>
<head>
<style>
.p1 { font-family:Times New Roman; font-style: normal; font-size: 40px}
.p2 {font-family:Arial; font-style: italic; font-size: 40px}
.p3 {font-family:Lucida Console; font-style: oblique; font-size: 40px}
</style></head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body></html>
13. CSS Line-height property:
The line-height property specifies the height of a line.
Note: Negative values are not allowed.
CSS Syntax
line-height: normal|number|length|initial|inherit;
Ex: <html>
<head>
<style>
div.a {
line-height: 10px;
}
div.b {
line-height: 30px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
</style>
</head>
<body>
<h1>The line-height Property</h1>
52
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h2>line-height: 10px:</h2>
<div class="a">This is a paragraph with a specified line-height.<br>
The line height is here set to 10 pixels.</div>
<h2>line-height: 30px:</h2>
<div class="b">This is a paragraph with a specified line-height.<br>
The line height is here set to 30 pixels.</div>
<h2>line-height: 0.5cm:</h2>
<div class="c">This is a paragraph with a specified line-height.<br>
The line height is here set to 0.5 centimeter.</div>
<h2>line-height: 1cm:</h2>
<div class="d">This is a paragraph with a specified line-height.<br>
The line height is here set to 1 centimeter.</div>
</body>
</html>
14. CSS Box Model
In CSS, the term "box model" is used when talking about design and [Link]
CSS box model is essentially a box that wraps around every HTML element. It
consists of: content, padding, borders and margins. The image below illustrates
the box model:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements.
EX: <html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
53
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers,
you need to know how the box model works.
<html>
<head>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also
350px. The total height of this element is 80px.</div>
</body>
</html>
Calculate the total width:
54
Web Programming BCA – V Sem Sri Srinivasa Degree College
The picture above is 350px wide. The total width of this element is also 350px.
The total height of this element is 80px.
55
Web Programming BCA – V Sem Sri Srinivasa Degree College
UNIT-4
1. CSS LISTS:
In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Different List Item Markers:
The list-style-type property specifies the type of list item marker.
An Image as The List Item Marker:
The list-style-image property specifies an image as the list item marker:
Position The List Item Markers:
The list-style-position property specifies the position of the list-item markers
(bullet points).
"list-style-position: outside;" means that the bullet points will be outside the
list item. The start of each line of a list item will be aligned vertically. This is
default:
Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola
"list-style-position: inside;" means that the bullet points will be inside the list
item. As it is part of the list item, it will be part of the text and push the text at
the start:
Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola
Styling List With Colors:
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:
Ex:
56
Web Programming BCA – V Sem Sri Srinivasa Degree College
<html>
<head><style>
ul.a { list-style-type: circle; background: #aa4422;
padding: 20px;}
ul.b { list-style-type: square; background: #3399ff;
padding: 20px;}
ol.c { list-style-type: upper-roman;background: #eedd44;
padding: 20px;}
ol.d { list-style-type: lower-alpha;background: #ff9999;
padding: 20px;}
</style>
</head><body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body></html>
57
Web Programming BCA – V Sem Sri Srinivasa Degree College
2. CSS COMBINATORS:
A combinator is something that explains the relationship between the
selectors.A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector:
The descendant selector matches all elements that are descendants of a
specified [Link] following example selects all <p> elements inside <div>
elements:
EX:<html>
<head>
<style>
div p {background-color: yellow}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a
specified
element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
58
Web Programming BCA – V Sem Sri Srinivasa Degree College
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body></html>
Child Selector (>):
The child selector selects all elements that are the children of a specified
element.
Adjacent Sibling Selector (+):
The adjacent sibling selector is used to select an element that is directly after
another specific [Link] elements must have the same parent
element, and "adjacent" means "immediately following".
General Sibling Selector (~):
The general sibling selector selects all elements that are next siblings of a
specified element. The following example selects all <p> elements that are
next siblings of <div> elements.
3. CSS Figure with picture and caption:
In the world of semantic HTML, few elements are as misunderstood - or as
powerful - as the <figure> and <figcaption> duo. These tags do much more
than just wrap images; they create meaningful relationships between visual
content and their contextual descriptions, boosting both accessibility and
SEO. The <figcaption> HTML element represents a caption or legend describing
the rest of the contents of its parent <figure> element, providing the <figure>
an accessible description. The <figcaption> tag defines a caption for a <figure>
[Link] <figcaption> element can be placed as the first or last child of the
<figure> element.
Ex: <html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
59
Web Programming BCA – V Sem Sri Srinivasa Degree College
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<h1>The figure and figcaption elements + CSS</h1>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure></body></html>
Output:
4. CSS organizational elements:
Generally, we’ve organized web page content using lists and figures. Those
organizational structures are pretty straightforward because they have physical
manifestations—list items in an outline and a caption above or below a figure.
The rest of this elements covers organizational elements that don’t have
obvious physical manifestations. Their purpose is to group web page content
into sections so that you can use CSS and JavaScript to manipulate their
content more effectively. Here are the organizational elements you’ll be
introduced to:
section
article
aside
60
Web Programming BCA – V Sem Sri Srinivasa Degree College
nav
header
footer
1. <section>:
Represents a thematic grouping of content, often with a heading.
Can be used for chapters in a book, sections on a webpage (introduction,
content, contact), etc.
It's a generic sectioning element, meaning it should be used when no more
specific element is available.
2. <article>:
Represents a self-contained composition, like a blog post, newspaper article,
or a comment.
Can be syndicated or shared independently.
Can contain multiple <section> elements within it.
3. <aside>:
Represents content tangentially related to the main content.
Examples include pull quotes, author bios, background information, related
links, or supplementary content.
Often displayed as a sidebar.
4. <nav>:
Defines a section containing navigation links.
Used for primary navigation bars, breadcrumbs, or other navigation
elements.
Not intended for all links in a document, only major navigation blocks.
Ex: <nav>
<h1>Navigation Menu</h1>
<ul>
<li><a href="[Link]">page1</a></li>
<li><a href="[Link]">page2</a></li>
<li><a href="[Link]">page3</a></li>
</ul>
</nav>
5. Header and Footer:
61
Web Programming BCA – V Sem Sri Srinivasa Degree College
Let’s instead consider a page with several articles inside , for example a posts
page in a Blog. Each article could have it’s own header and footer. The header
could contain the title and author of the article, the footer could contain links
related to the article, contact info for the author, or something else. In this
case, the header would be the header of the parent article element rather than
the header of the whole page.
Ex: <html> <head> <title>Example Web Page</title> </head> <body> <header>
<h1>My Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li>
</ul> </nav> </header>
<main> <!-- Main content of the page --> <section id="home"> <h2>Welcome!
</h2> <p>This is the main content area.</p> </section> </main> <footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer> </body> </html>
EX: <html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<nav>..navigation menu links here…</nav>
</header>
<article>
<section>…</section>
<section>…</section>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
</html>
5. CSS Tables :
The look of an HTML table can be greatly improved with CSS.
62
Web Programming BCA – V Sem Sri Srinivasa Degree College
Table is a collection of rows and columns. Using tables we can present the data
in row wise and column wise. Using tables to provide information in an
organised way.
The following tags are used to create tables in an HTML document.
Table tag
Table row tag
Table data tag
Table heading tag
In CSS use different properties to create tables. Some of them are, table
borders,height and width, Table alignment, padding and colors.
Table Borders:
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td>
elements:
Table Width and Height:
The width and height of a table are defined by the width and height properties.
CSS Table Alignment:
Horizontal Alignment:
The text-align property sets the horizontal alignment (like left, right, or center)
of the content in <th> or <td>.By default, the content of <th> elements are
center-aligned and the content of <td> elements are left-aligned. To center-
align the content of <td> elements as well, use text-align: center:
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both
<th> and <td> elements).
Table Padding:
To control the space between the border and the content in a table, use the
padding property on <td> and <th> elements:
Table Color:
The example below specifies the background color and text color of <th>
elements:
Ex:
<html><head>
<style>
table,th,td {border: 1px solid;width: 50%;height: 50px;text-align: center;
vertical-align: bottom; padding: 15px;background-color: #04AA6D;
63
Web Programming BCA – V Sem Sri Srinivasa Degree College
color: pink}
</style></head>
<body><h2>Add a border ,height and width,alignment, padding and color to a
table:</h2>
<table> <tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body></html>
6. CSS table –layout :
The table-layout property defines the algorithm used to lay out table cells,
rows, and columns.
Tip: The main benefit of table-layout: fixed; is that the table renders much
faster. On large tables, users will not see any part of the table until the browser
has rendered the whole table. So, if you use table-layout: fixed, users will see
the top of the table while the browser loads and renders rest of the table.
Syntax :
table-layout: auto|fixed|initial|inherit;
Value Description
auto Browsers use an automatic table layout
algorithm. The column width is set by
the widest unbreakable content in the
cells. The content will dictate the layout
fixed Sets a fixed table layout algorithm. The
table and column widths are set by the
widths of table and col or by the width
of the first row of cells. Cells in other
rows do not affect column widths. If no
64
Web Programming BCA – V Sem Sri Srinivasa Degree College
widths are present on the first row, the
column widths are divided equally
across the table, regardless of content
inside the cells
initial Sets this property to its default value.
inherit Inherits this property from its parent
element.
Ex: <html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout: fixed;
width: 180px;
}
table.c {
table-layout: auto;
width: 100%;
}
table.d {
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<h1>The table-layout Property</h1>
<table class="a">
<tr>
65
Web Programming BCA – V Sem Sri Srinivasa Degree College
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>table-layout: fixed; width: 180px:</h2>
<table class="b">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
66
Web Programming BCA – V Sem Sri Srinivasa Degree College
<td>Italy</td>
</tr>
</table>
<h2>table-layout: auto; width: 100%:</h2>
<table class="c">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>table-layout: fixed; width: 100%:</h2>
<table class="d">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
67
Web Programming BCA – V Sem Sri Srinivasa Degree College
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
LINKS AND IMAGES
1. Implement a link with the a element:
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Ex: <html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
68
Web Programming BCA – V Sem Sri Srinivasa Degree College
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
order to be effective.</p>
</body>
</html>
Output:
Styling a link depending on state
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be
effective.
2. Different types of href attribute values:
The HTML <a> href attribute is used to specify the URL of the page that the link
points to. When the href attribute is not present in the <a> element, it will not
function as a hyperlink. This attribute is essential for creating links to any
address and is used in conjunction with the <a> tag.
Syntax
<a href="URL"> Link text </a>
Attribute Values
Absolute URL: It points to another website.
Relative URL: It points to a file within a website.
Anchor URL: It points to an anchor within a page.
Ex: <html>
<head>
<title>HTML a href Attribute</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
69
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h2>HTML a href Attribute</h2>
<a href="[Link]
Click Here to Open in Same Tab
</a>
<br>
<a href="[Link]
target="_blank">
Click Here to Open in a New Tab
</a>
</body>
</html>
3. Implement a link that jumps to a particular location within a webpage:
To implement a link that jumps to a specific location within a webpage (also
called an anchor link), you can use the id attribute on the target element and
the href attribute on the link.
Creating links that allow users to jump to different sections of a webpage can
significantly improve navigation. This is especially helpful for long pages with a
lot of content, as it helps users save time and find the information they need
more quickly.
Syntax
<a href="#section1">Section 1</a>
<a>: The anchor tag is used to define a hyperlink.
href="#section1": The href attribute specifies the target of the link. In this
case, it points to a section id="section1" on the same page.
Section 1: The clickable text that appears for the user. When clicked, it will
scroll to the section with id="section1".
Approach
Use the Anchor Tag <a>: In HTML, use the <a> tag to create links within the
same page.
Assign Unique IDs: Assign unique IDs to different sections of the webpage
using the id attribute.
Set the href Attribute: Set the href attribute of the anchor tag to “#section1”
(replace “section1” with the desired ID) to link to a specific section.
Avoid Using Class Names in href: Class names are not unique identifiers and
should not be used in the href attribute for internal linking.
Example:
<html>
70
Web Programming BCA – V Sem Sri Srinivasa Degree College
<head>
<title>Anchor Link Example</title>
</head>
<body>
<!-- Link to jump to the section -->
<a href="#section2">Go to Section 2</a>
<p>Scroll down to see the section...</p>
<!-- Some space to make scrolling necessary -->
<div style="height: 1000px;"></div>
<!-- Target section with an id -->
<h2 id="section2">Section 2</h2>
<p>This is the content of Section 2.</p>
</body></html>
4. Understand the concepts behind GIF, JPEG and PNG bitmap image formats:
1. GIF (Graphics Interchange Format)
Key Features:
Supports animation: GIF is the only one among these formats that natively
supports simple animations.
Lossless compression: Maintains image quality without loss during
compression.
Supports transparency: But only binary transparency (fully transparent or
fully opaque — no partial transparency).
Color limitation: Limited to 256 colors, which makes it less suitable for
detailed photos but okay for simple graphics, logos, or icons.
When to use in CSS:
background-image: url("[Link]");
Use when:
You need simple animations.
You’re displaying low-color graphics like icons or line art.
You want basic transparency.
2. JPEG (Joint Photographic Experts Group)
Key Features:
Lossy compression: Reduces file size but can reduce image quality.
Does not support transparency or animation.
Supports millions of colors: Ideal for rich images like photographs.
When to use in CSS:
71
Web Programming BCA – V Sem Sri Srinivasa Degree College
background-image: url("[Link]");
Use when:
You’re displaying photographs or detailed images.
File size is a concern and some quality loss is acceptable.
Transparency or animation is not required.
3. PNG (Portable Network Graphics)
Key Features:
Lossless compression: High-quality images without data loss.
Supports full transparency: Including alpha transparency (partial opacity).
Supports millions of colors.
Does not support animation (though APNG is an extension that does).
When to use in CSS:
background-image: url("[Link]");
Use when:
You need transparent or semi-transparent images (e.g., overlays, logos).
You want high-quality graphics with no color loss.
File size is less of a concern than visual quality.
5. Implement a bitmap image elements within a webpage:
Bit Map Image file is developed by Microsoft for windows. It is same as TIFF
due to lossless, no compression property. Due to BMP being a proprietary
format, it is generally recommended to use TIFF files. Tagged Image File
Format(TIFF) this format store image data without losing any data. It does not
perform any compression on images, and a high-quality image is obtained but
the size of the image is also large, which is good for printing, and professional
printing.
To implement a bitmap image (usually in .bmp format) within a webpage, you
can use the standard HTML <img> tag. While .bmp files are not commonly used
on the web due to their large file sizes and lack of compression, they are still
supported by most modern browsers.
✅ Example: Embedding a Bitmap Image in a Webpage
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Bitmap Image Example</title>
</head>
<body>
<h1>Displaying a Bitmap Image</h1>
72
Web Programming BCA – V Sem Sri Srinivasa Degree College
<img src="images/[Link]" alt="Bitmap Image" width="400">
</body>
</html>
📌 Key Points:
src: The path to your bitmap file (e.g., "images/[Link]").
alt: Descriptive text for screen readers or if the image fails to load.
width / height: Optional attributes to resize the image.
📌 Notes:
Ensure the .bmp file is correctly referenced and accessible from the server.
Consider converting .bmp to more web-friendly formats like .jpg, .png,
or .webp to improve performance and compatibility.
6. Implement a SVG image elements with in a web page:
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines graphics in XML format
Each element and attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, rectangles, circles, polygons,
text, and much more.
SVG Circle
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
SVG Rectangle
<html>
<body>
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6"
fill="blue" />
73
Web Programming BCA – V Sem Sri Srinivasa Degree College
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Using CSS background-image
You can reference an SVG as a background image in CSS:
Ex:html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG as Background</title>
<style>
.svg-background {
width: 100px;
height: 100px;
background-image: url('[Link]');
background-size: cover;
}
</style>
</head>
<body>
<h1>SVG as CSS Background</h1>
<div class="svg-background"></div>
</body>
</html>
SVG Star
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
74
Web Programming BCA – V Sem Sri Srinivasa Degree College
UNIT-5
Image manipulations, Audio and Video
1. position an image:
To change the position of an image in CSS, properties like object position and
float are used to control the placement of an image within its container.
1. Using object-position Property
The object-position property in CSS is used to set the position of an image
within its container when using the object-fit property. It allows you to adjust
how the image is displayed inside the box by specifying the alignment in terms
of x and y coordinates.
Syntax
object-position: <x-position> <y-position>;
Property Values
x-position: The horizontal alignment (distance from the left of the content
box).
y-position: The vertical alignment (distance from the top of the content box).
Ex:<h4>object-position Property</h4>
<img
src="[Link]
[Link]"
style="width: 500px; height: 200px;
object-fit: none; object-position: center top;
border: 2px solid black;" />
<img
src="[Link]
[Link]"
style="width: 500px; height: 200px;
object-fit: none; object-position: 50px 30px;
border: 2px solid black;" />
[Link] float Property
The float property in CSS is used to position an image to the left or right of its
container. It allows text and other content to wrap around the image, creating
a flowing layout.
Note: Elements are floated only horizontally i.e. left or right
Syntax
float: none | left | right | inherit | initial;
EX:<h4>Float Property</h4>
<div style="height: 400px; width: 800px; border: 2px solid green;">
75
Web Programming BCA – V Sem Sri Srinivasa Degree College
<img
src=[Link]
.png
style="width: 300px; height: 200px; float: right;" />
</div>
2. How to display a shortcut icon in a browser’s tab area:
To display a shortcut icon (also known as a favicon) in a browser tab, you need
to add a special <link> tag in the <head> section of your HTML document.
Here’s how to do it:
✅ Step-by-Step Instructions:
1. Prepare your favicon file:
o The standard file name is [Link].
o Modern browsers support other formats too, like .png, .svg, etc.
o Typical sizes: 16x16, 32x32, or 48x48 pixels.
2. Place the favicon file in your root directory (or wherever you'd like, just
make sure the path is correct).
3. Add the following tag in the <head> section of your HTML:
Syntax:
<!-- For ICO format (traditional) -->
<link rel="icon" href="/[Link]" type="image/x-icon" />
<!-- For PNG format -->
<link rel="icon" href="/[Link]" type="image/png" />
<!-- For SVG (modern browsers) -->
<link rel="icon" href="/[Link]" type="image/svg+xml" />
✅ Example:
<html> <head> <title>My Website</title> <link rel="icon"
href="images/[Link]" type="image/x-icon"> <link rel="shortcut icon"
href="images/[Link]" type="image/x-icon"> </head> <body> <!-- Your
website content --> </body> </html>
[Link]:
An <iframe> (short for inline frame) is an HTML element used to embed
another HTML page within the current page. It's often used for embedding
videos, maps, or other web content like forms or external websites.
Syntax:
76
Web Programming BCA – V Sem Sri Srinivasa Degree College
<iframe src="[Link] width="600" height="400" title="Example
Site"></iframe>
Common Attributes:
src: URL of the page to display.
width and height: Size of the iframe.
title: Describes the content for accessibility.
frameborder: (obsolete) Controls border display (use CSS instead).
allowfullscreen: Allows the iframe to go fullscreen (useful for videos).
sandbox: Restricts the iframe’s abilities for security.
allow: Gives permissions (e.g., camera, microphone, fullscreen).
loading: Can be set to "lazy" for performance optimization.
Ex: <html>
<body>
<h1>The iframe element + CSS</h1>
<p>An iframe with default borders:</p>
<iframe src="/[Link]" width="100%" height="300">
</iframe>
<p>An iframe with a thin black border:</p>
<iframe src="/[Link]" width="100%" height="300" style="border:1px solid
black;">
</iframe>
<p>An iframe with no borders:</p>
<iframe src="/[Link]" width="100%" height="300" style="border:none;">
</iframe>
</body>
</html>
Output:
he iframe element + CSS
An iframe with default borders:
An iframe with a thin black border:
4. Create an image sprite file:
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates
multiple server requests.
Using image sprites will reduce the number of server requests and save
bandwidth.
77
Web Programming BCA – V Sem Sri Srinivasa Degree College
An image sprite in CSS is a technique where multiple images are combined into
a single image file, and then parts of that image are displayed using CSS
background-position. This reduces the number of HTTP requests, improving
performance.
Ex:<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
Example explained:
<img id="home" src="img_trans.gif"> - Only defines a small transparent
image because the src attribute cannot be empty. The displayed image will be
the background image we specify in CSS
width: 46px; height: 44px; - Defines the portion of the image we want to use
background: url(img_navsprites.gif) 0 0; - Defines the background image and
its position (left 0px, top 0px)
5. Implement an audio player using the audio element:
The HTML <audio> element is used to play an audio file on a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
78
Web Programming BCA – V Sem Sri Srinivasa Degree College
Ex: <html>
<body>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
To start an audio file automatically, use the autoplay attribute:
EX:<html>
<body>
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Add muted after autoplay to let your audio file start playing automatically
(but muted):
Ex:<html>
<body>
<audio controls autoplay muted>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
6. Handle different audio file formats:
Audio format defines the quality and loss of audio data. Based on application
different type of audio format are used. Audio formats are broadly divided into
three parts:
79
Web Programming BCA – V Sem Sri Srinivasa Degree College
1. Uncompressed Format
2. Lossy Compressed format
3. Lossless Compressed Format
1. Uncompressed Audio Format:
PCM - It stands for Pulse-Code Modulation. It represents raw analog audio
signals in digital form. To convert analog signal into digital signal it has to be
recorded at a particular interval. Hence it has sampling rate and bit rate (bits
used to represent each sample). It a exact representation of the analog sound
and do not involve compression. It is the most common audio format used in
CDs and DVDs
WAV - It stands for Waveform Audio File Format, it was developed by
Microsoft and IBM in 1991. It is just a Windows container for audio formats.
That means that a WAV file can contain compressed audio. Most WAV files
contain uncompressed audio in PCM format. It is just a wrapper. It is
compatible with both Windows and Mac.
AIFF - It stands for Audio Interchange File Format. It was developed by Apple
for Mac systems in 1988. Like WAV files, AIFF files can contain multiple kinds of
audio. It contain uncompressed audio in PCM format. It is just a wrapper for
the PCM encoding. It is compatible with both Windows and Mac.
2. Lossy Compressed Format: It is a form of compression that loses data during
the compression process. But difference in quality no noticeable to hear.
MP3 - It stands for MPEG-1 Audio Layer 3. It was released in 1993 and
became popular. It is most popular audio format for music files. Main aim of
MP3 is to remove all those sounds which not hearable or less noticeable by
humans ears. Hence making size of music file small. MP3 is like universal
format which is compatible almost every device.
AAC - It stands for Advanced Audio Coding. It was developed in 1997 after
[Link] compression algorithm used by AAC is much more complex and
advanced than MP3, so when compared a particular audio file in MP3 and AAC
formats at the same bitrate, the AAC one will generally have better sound
quality. It is the standard audio compression method used by YouTube,
Android, iOS, iTunes, and PlayStations.
WMA - It stands for Windows Media Audio. It was released in [Link] was
designed to remove some of the flaws of MP3 compression method. In terms
of quality it is better than MP3. But is not widely used.
3. Lossless compression: This method reduces file size without any loss in
quality. But is not as good as lossy compression as the size of file compressed
to lossy compression is 2 and 3 times more.
80
Web Programming BCA – V Sem Sri Srinivasa Degree College
FLAC - It stands for Free Lossless Audio Codec. It can compress a source file
by up to 50% without losing data. It is most popular in its category and is open-
source.
ALAC - It stands for Apple Lossless Audio Codec. It was launched in 2004 and
became free after 2011. It was developed by Apple.
7. web fonts:
Web fonts allow Web designers to use fonts that are not installed on the
user's computer.
When you have found/bought the font you wish to use, just include the font
file on your web server, and it will be automatically downloaded to the user
when needed.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and
Microsoft. TrueType is the most common font format for both the Mac OS and
Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of Microsoft. OpenType fonts are used
commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType with
compression and additional metadata. The goal is to support font distribution
from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-face
rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
81
Web Programming BCA – V Sem Sri Srinivasa Degree College
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use
as embedded fonts on web pages
NOTE: Your "own" fonts are defined within the CSS @font-face rule.
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
*{
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
</html>
Output:
The @font-face Rule
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
8. Implement a video player using the video element:
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
Ex:
<html>
<body>
82
Web Programming BCA – V Sem Sri Srinivasa Degree College
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
To start a video automatically, use the autoplay attribute:
Ex:<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Add muted after autoplay to let your video start playing automatically (but
muted):
Ex: <html>
<body>
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Video - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <video>
element.
This allows you to load, play, and pause videos, as well as setting duration
and volume.
There are also DOM events that can notify you when a video begins to play,
is paused, etc.
9. Cover a web page’s background with a color gradient:
83
Web Programming BCA – V Sem Sri Srinivasa Degree College
CSS gradients let you display smooth transitions between two or more
specified colors.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the gradient
effect.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Ex: <html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the
bottom:</p>
<div id="grad1"></div>
</body>
</html>
CSS Radial Gradients
A radial gradient is defined by its center. To create a radial gradient you must
also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-
color);
Ex: <html>
<head>
<style>
84
Web Programming BCA – V Sem Sri Srinivasa Degree College
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
CSS Conic Gradients
A conic gradient is a gradient with color transitions rotated around a center
point.
To create a conic gradient you must define at least two colors.
Syntax
background-image: conic-gradient([from angle] [at position,] color [degree],
color [degree], ...);
Ex:<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Conic Gradient - Three Colors</h1>
<div id="grad1"></div>
</body>
</html>
JAVA SCRIPT
1. Introduction:
85
Web Programming BCA – V Sem Sri Srinivasa Degree College
JavaScript scripting language, which facilitates a disciplined approach to
designing computer programs that enhance the functionality and appearance
of web pages. JavaScript serves two purposes- it introduces client-side
scripting, which makes web pages more dynamic and interactive, and it
provides the programming foundation for the more complex server side
developments.
JavaScript contains a standard library of objects, like Array, Date, and Math,
and a core set of language elements like operators, control structures, and
statements.
Client-side: It supplies objects to control a browser and its Document Object
Model (DOM). Like if client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse clicks,
form input, and page navigation.
Server-side: It supplies objects relevant to running JavaScript on a server.
Like if the server-side extensions allow an application to communicate with a
database, and provide continuity of information from one invocation to
another of the application, or perform file manipulations on a server.
2. JAVACSRIPT VARIABLES:
All JavaScript variables must be identified with unique [Link] unique
names are called identifiers. Variables are containers for storing data (storing
data values).
Identifiers can be short names (like x and y) or more descriptive names (age,
sum, total ,Volume etc).The general rules for constructing names for variables
(unique identifiers) are:
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter
Names can also begin with $ and _ (but we will not use it in this tutorial)
Names are case sensitive (y and Y are different variables)
Reserved words (like JavaScript keywords) cannot be used as names
JavaScript identifiers are case-sensitive.
Declaring a JavaScript Variable:
Creating a variable in JavaScript is called "declaring" a [Link] declare a
JavaScript variable with the var keyword:
Syntax: var variablename;
Example: var carName;
After the declaration, the variable has no value (technically it is undefined). To
assign a value to the variable, use the equal sign:
86
Web Programming BCA – V Sem Sri Srinivasa Degree College
Synatx: var variablename=value;
Ex: var carName = "Volvo";
In this example, x, y, and z, are variables, declared with the var keyword:
Ex:1
<html>
<head>
<title> Variables in javascript</title>
</head>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<script language="javascript">
var x = 5;
var y = 6;
var z = x + y;
[Link]("The value of z is: " + z);
</script>
</body>
</html>
Output:
The value of z is: 11
Ex2:
In the example below, we create a variable called carName and assign the
value "Volvo" to it.
<html>
<head>
<title> declaring variables</title>
</head>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<script language="javascript">
var carName = "Volvo";
[Link](carName);
</script>
</body>
</html>
Output:
Volvo
One Statement, Many Variables:
87
Web Programming BCA – V Sem Sri Srinivasa Degree College
You can declare many variables in one statement. Start the statement with var
and separate the variables by comma:
Ex 3:
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<script language="javascript">
var person = "John Doe", carName = "Volvo", price = 200;
[Link](person+"<br>" +carName+"<br>"+price);
</script>
</body>
</html>
Output:
JavaScript Variables
You can declare many variables in one statement.
John Doe Volvo 200
3. JavaScript identifiers:
JavaScript identifiers are names used to identify variables, functions, and
objects. They must follow specific rules:
Start: Identifiers must begin with a letter (a-z, A-Z), an underscore (\_), or a
dollar sign ($).
Subsequent characters: They can be followed by letters, digits (0-9),
underscores, or dollar signs.
Case-sensitive: JavaScript is case-sensitive, so myVar and myvar are different
identifiers.
Reserved words: Identifiers cannot be reserved keywords like var, let, const,
function, if, else, etc.
Unicode: Identifiers can contain Unicode characters, allowing for names from
various languages and mathematical symbols, but it is common to use only
ASCII characters for portability.
No spaces: Identifiers cannot contain spaces.
Cannot start with a digit: Identifiers cannot begin with a digit to avoid
confusion with numbers.
These rules ensure that JavaScript can distinguish between identifiers and
other elements of the code. Identifiers are fundamental for creating
meaningful and organized JavaScript programs.
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
Ex:<html>
88
Web Programming BCA – V Sem Sri Srinivasa Degree College
<body>
<h2>JavaScript is Case Sensitive</h2>
<p>Try to change lastName to lastname.</p>
<p id="demo"></p>
<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
[Link]("demo").innerHTML = lastName;
</script>
</body>
</html>
Output:
JavaScript is Case Sensitive
Try to change lastName to lastname.
Doe
4. JavaScript Assignments:
Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Bitwise Assignment Operators
Operator Example Same As
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
Logical Assignment Operators
Operator Example Same As
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)
Ex:
<html>
<body>
89
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
[Link]("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
Output:
JavaScript Assignments
Simple Assignment
The = Operator
Value of x is: 10
5. Button control with event handler:
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a
<button> element:
Ex: <html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
90
Web Programming BCA – V Sem Sri Srinivasa Degree College
<button onclick="[Link]('demo').innerHTML=Date()">The
time is?</button>
<p id="demo"></p>
</body>
</html>
6. JavaScript functions:
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Syntax:function name(parameter1, parameter2, parameter3) { // code to be
executed }
Function parameters are listed inside the parentheses () in the function
definition.
Function arguments are the values received by the function when it is
invoked.
Inside the function, the arguments (the parameters) behave as local
variables.
Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop
executing.
If the function was invoked from a statement, JavaScript will "return" to
execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back
to the "caller":
Ex:<html>
<body>
91
Web Programming BCA – V Sem Sri Srinivasa Degree College
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
[Link]("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Output:
JavaScript Functions
Call a function which performs a calculation and returns the result:
12
Functions advantages
With functions you can reuse code
You can write code that can be used many times.
You can use the same code with different arguments, to produce different
results.
7. JavaScript DOM:
When a web page is loaded, the browser creates a Document Object Model
of the page.
With the HTML DOM, JavaScript can access and change all the elements of an
HTML document.
The HTML DOM model is constructed as a tree of Objects:
92
Web Programming BCA – V Sem Sri Srinivasa Degree College
With the object model, JavaScript gets all the power it needs to create dynamic
HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an
HTML element).
A method is an action you can do (like add or deleting an HTML element).
Ex: <html>
<body>
<h2>My First Page</h2>
93
Web Programming BCA – V Sem Sri Srinivasa Degree College
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
Output:
My First Page
Hello World!
In the example above, getElementById is a method, while innerHTML is a
property.
The getElementById Method
The most common way to access an HTML element is to use the id of the
element.
In the example above the getElementById method used id="demo" to find
the element.
8. Form with a text control and a button in javascript:
An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
Syntax: <form> . form elements . </form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
All the different form elements are covered in this chapter: HTML Form
Elements.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type
attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input
field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for
94
Web Programming BCA – V Sem Sri Srinivasa Degree College
selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
Key Features:
Validation: JavaScript can be used to validate the input before submission,
ensuring data quality.
Dynamic Updates: JavaScript can dynamically update the text input or other
elements based on user interaction.
Accessibility: Ensure proper labels are associated with input fields for
accessibility.
Form Data: Use FormData to easily collect form data for sending to a server.
Data validation
When implementing form validation, there are a few things to consider:
1. What is defined as "valid" data? i.e. about the format, length, required
fields, and type of data.
2. What happens when invalid data is entered? i.e. whether to show an error
message inline or at the top of the form, how detailed should the error
message be, should the form be submitted anyways, should there be analytics
to track invalid format of data? And so on.
JavaScript validation in two ways:
[Link] validation using JavaScript
2.HTML5 Constraint validation API
Inline validation using JavaScript:
Ex:
html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php"
method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
95
Web Programming BCA – V Sem Sri Srinivasa Degree College
your browser will display an error message.</p>
</body>
</html>
HTML5 Constraint validation API:
If you want more complex validation or want to provide detailed error
messaging, you can use the Constraint Validation API.
Some methods provided by this API The following properties are useful:
are: [Link]
[Link] [Link]
[Link] [Link]
[Link]
In this example, we will validate using HTML5 inbuilt methods such as required
and length in conjunction with the Constraint Validation API to provide
detailed error messages.
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button> </form>
const nameField = [Link]("input");
[Link]("input", () => {
[Link]("");
[Link]();
[Link]([Link]());
});
[Link]("invalid", () => {
[Link]("Please fill in your First Name.");
});
Server side validation:
Client side validation is not the only validation check you should do. You must
also validate the data received from your client on the server side code to
ensure that the data matches what you expect it to be.
Form Validation best practices:
1. Always have server side validation, since malicious actors can bypass client
side validation.
2. Provide detailed error messages in-context with the field that produced the
error.
3. Provide an example of what the data should look like in case of an error
message, such as - "Email did not match format - test@[Link]"
96
Web Programming BCA – V Sem Sri Srinivasa Degree College
4. Avoid using single error pages that involve redirection. This is bad user
experience and forces the user to go back to a previous page to fix the form
and lose context.
5. Always mark required fields.
9. Event handler attributes :
Events are essentially the actions that occur on a web app due to user
interaction, such as clicking a button. In JavaScript, when an event occurs, the
app fires the event, which is kind of a signal that an event has occurred. The
app then automatically responds to the user in the form of output, thanks to
event handlers in JavaScript. An event handler is essentially a function with a
block of code that is executed or triggered when a specific event fires.
Sometimes, when an event occurs, it triggers multiple events. This is because
web elements in an app are often nested. This is where event propagation
comes in. Event propagation involves capturing and bubbling phases as the
event travels across the DOM hierarchy. We’ll discuss these phases later in the
article. There are common types of events:
Keyboard/touch events: Occur when a user presses or releases a key on the
keyboard or performs an action with a touch-enabled smartphone, laptop or
tablet.
JavaScript Click event: Fires when a user clicks on a button or other such web
element.
Mouse hover events: These events are fired when a user performs an action
with the mouse, such as scrolling a page or moving the cursor.
Form/submit events: Triggered when a user submits a form, modifies it, or
resets it.
Drag and drop events: Occurs when a user drags and drops an element on
the web page, such as dragging and dropping an image on a file uploader.
Event Listeners
A javascript event listener is essentially a JavaScript function that waits for a
specific event to occur and then executes a callback function to respond to
that event. Event listeners and event handlers are often considered the same
thing. However, in essence, they work together to respond to an event. As the
name suggests, the listener listens for the event, and the handler is the code
that is executed in response to that [Link] JavaScript event looping
manages asynchronous code execution.
There are two common built-in event listener methods in JavaScript:
addEventListener and removeEventListener. The addEventListener() method
97
Web Programming BCA – V Sem Sri Srinivasa Degree College
enables us to attach an event handler to an element. We can also add multiple
event handlers to an element. removeEventListener() allows us to remove an
event listener/handler from a specific element. You add event listener in
JavaScript to handle events.
Event Object
When an event occurs, it belongs to a specific event object. The event object is
essentially the argument passed into the callback/event handler function. It
provides information about the event, such as the target element, the type of
event, etc. It also contains additional properties for the specific event type.
Here are common event properties:
target: Represents the element that fired the event.
type: Tells about the specific type of the event, such as click or submit
keyCode: Used for keyboard events. It contains the Unicode value of the key
pressed by the user
Here is an javascript code examples demonstrating the use of the event object
(Click event):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Example of using Event Object</title>
</head>
<body>
<button id="myButton">Click me!</button>
<script>
var button = [Link]("myButton");
[Link]("click", function(event) {
// Accessing event properties
[Link]("Type of Event: " + [Link]);
[Link]("Target Element: " + [Link]);
});
</script>
</body>
</html>
Basic Event Handling Examples
Based on the concepts we discussed in the previous sections, here is an
example for creating a simple button-click event:
<!DOCTYPE html>
98
Web Programming BCA – V Sem Sri Srinivasa Degree College
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button-Click Event</title>
</head>
<body>
<button id="myButton">Click me!</button>
<script>
var button = [Link]("myButton");
// Adding an event listener
[Link]("click", function() {
alert("Button is clicked!");
});
</script>
</body>
</html>
Here is a basic example demonstrating how to handle form submissions:
<!DOCTYPE html>
<html>
<head>
<title> Handling Form Submission </title>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>
<script>
var form = [Link]("myForm");
// Adding an event listener for form submission
[Link]("submit", function(event) {
[Link](); // Preventing the default form submission
// Accessing form data
99
Web Programming BCA – V Sem Sri Srinivasa Degree College
var username = [Link]("username").value;
var password = [Link]("password").value;
// Form validation
[Link]("Username: " + username);
[Link]("Password: " + password);
});
</script>
</body>
</html>
10. Rollover using mouse events
Mouse rollover effects in JavaScript are achieved using
mouse events, primarily mouseover and mouseout (or mouseenter and
mouseleave). These
events trigger functions when the mouse cursor moves over an element or out
of it.
Key Concepts
mouseover:
This event fires when the mouse pointer moves onto an element or one of its
child
elements.
The onmouseover event occurs when the mouse pointer enters an element.
The onmouseover event is often used together with the onmouseout event,
which occurs when the mouse pointer leaves the element.
The onmouseover event is similar to the onmouseenter event. The difference
is
that the onmouseenter event does not bubble (does not propagate up the
document
hierarchy).
mouseout:
This event fires when the mouse pointer moves out of an element or one of
its child
elements.
The onmouseout event occurs when the mouse pointer moves out of an
element.
The onmouseout event is often used together with the onmouseover event,
which occurs when the pointer is moved over an element.
Theonmouseout event is similar to the onmouseleave event. The difference
is
that the onmouseleave event does not bubble (does not propagate up the
document
100
Web Programming BCA – V Sem Sri Srinivasa Degree College
hierarchy).
mouseenter:
Similar to mouseover, but it only triggers when the pointer enters the
selected element,
not its children.
The onmouseenter event occurs when the mouse pointer enters an
element.
The onmouseenter event is often used together with the onmouseleave
event,
which occurs when the mouse pointer leaves an element.
The onmouseenter event is similar to the onmouseover event. The difference
is
that the onmouseenter event does not bubble (does not propagate up the
document
hierarchy).
mouseleave:
Similar to mouseout, but it only triggers when the pointer leaves the selected
element, not
its children.
The onmouseleave event occurs when the mouse pointer leaves an element.
The onmouseleave event is often used together with the onmouseenter
event,
which occurs when the mouse pointer enters an element.
Theonmouseleave event is similar to the onmouseout event. The difference
is that
the onmouseleave event does not bubble (does not propagate up the
document
hierarchy
How to Implement Rollover Effects
HTML Structure:
Create the HTML elements you want to apply the rollover effect to (e.g.,
images, text, divs).
Assign an ID to these elements for easier manipulation with JavaScript.
JavaScript Implementation:
Select Elements: Use [Link]() or
[Link]() to select the
HTML elements.
Event Listeners: Attach mouseover and mouseout (or mouseenter and
mouseleave) event listeners
101
Web Programming BCA – V Sem Sri Srinivasa Degree College
to the selected element. These listeners will call functions when the events
occur.
JavaScript
const element = [Link]('myElement');
[Link]('mouseover', function() {
// code to change the element's appearance when the mouse is over it
});
[Link]('mouseout', function() {
// code to revert changes when the mouse moves away
});
Event Handler Functions: Inside the event listeners, write the code to change
the
element's appearance. This might involve:
o Changing the element's style (e.g., background color, text color, size).
o Changing the src attribute of an image to swap images.
o Displaying or hiding additional content.
Ex:1<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmouseover Event</h2>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)"
border="0" src="[Link]" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the
mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer
is moved out of the image.</p>
<script>
function bigImg(x) {
[Link] = "64px";
[Link] = "64px";
}
function normalImg(x) {
[Link] = "32px";
[Link] = "32px";
}
</script>
</body>
</html>
The onmouseover Event
102
Web Programming BCA – V Sem Sri Srinivasa Degree College
The function bigImg() is triggered when the user moves the mouse pointer
over the image.
The function normalImg() is triggered when the mouse pointer is moved out of
the image.
EX2:<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmouseenter Event</h2>
<img onmouseenter="bigImg(this)" onmouseleave="normalImg(this)"
border="0" src="[Link]" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the
mouse pointer onto the image.</p>
<p>The function normalImg() is triggered when the mouse pointer
is moved out of the image.</p>
<script>
function bigImg(x) {
[Link] = "64px";
[Link] = "64px";
}
function normalImg(x) {
[Link] = "32px";
[Link] = "32px";
}
</script>
</body></html>
HTML DOM Events
The onmouseenter Event
The function bigImg() is triggered when the user moves the mouse pointer
onto the
[Link] function normalImg() is triggered when the mouse pointer is moved
out of
the image.
103
You might also like
- HTML and XHTML: History and Syntax GuideNo ratings yetHTML and XHTML: History and Syntax Guide75 pages
- Learning Web Design - Html5 A Practical Handbook (S, SHANMUGAPRIYAA)No ratings yetLearning Web Design - Html5 A Practical Handbook (S, SHANMUGAPRIYAA)122 pages
- Internet and Web Technology Lecture NotesNo ratings yetInternet and Web Technology Lecture Notes23 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Understanding HTML: Structure & EvolutionNo ratings yetUnderstanding HTML: Structure & Evolution5 pages
- HTML Basics: Introduction and ApplicationsNo ratings yetHTML Basics: Introduction and Applications45 pages
- HTML Fundamentals and Versions ExplainedNo ratings yetHTML Fundamentals and Versions Explained29 pages
- Full Stack Development Course OverviewNo ratings yetFull Stack Development Course Overview1,001 pages
- Introduction to HTML Basics and HistoryNo ratings yetIntroduction to HTML Basics and History32 pages
- HTML & CSS Basics for Dynamic Web DevelopmentNo ratings yetHTML & CSS Basics for Dynamic Web Development58 pages
- Understanding HTML Basics for Web DevelopmentNo ratings yetUnderstanding HTML Basics for Web Development64 pages
- Integrated Photodetectors Based On Group IV and Colloidal Semiconductors: Current State of ANo ratings yetIntegrated Photodetectors Based On Group IV and Colloidal Semiconductors: Current State of A24 pages
- Anna University UG/PG Exam Results 2018No ratings yetAnna University UG/PG Exam Results 201842 pages
- Isiolo County Procurement Compliance ImpactNo ratings yetIsiolo County Procurement Compliance Impact17 pages
- Measurement Uncertainty in InstrumentationNo ratings yetMeasurement Uncertainty in Instrumentation49 pages
- Data Interpretation and Quantitative AnalysisNo ratings yetData Interpretation and Quantitative Analysis29 pages
- Understanding Traction in PhysiotherapyNo ratings yetUnderstanding Traction in Physiotherapy33 pages
- Partial Molar Enthalpy in Glycerol-Water Mixtures100% (2)Partial Molar Enthalpy in Glycerol-Water Mixtures4 pages
- BJT-Based Metal Detector Circuit DesignNo ratings yetBJT-Based Metal Detector Circuit Design11 pages
- IT and Knowledge Management in XXX PharmaNo ratings yetIT and Knowledge Management in XXX Pharma17 pages