0% found this document useful (0 votes)

26 views120 pages

HTML Basics for Web Design Beginners

This document provides an introduction to HTML, covering its basic structure, common tags, and attributes used to create web pages. It explains the significance of elements like <html>, <head>, and <body>, as well as formatting options for text, paragraphs, and lists. Additionally, it discusses HTML5 semantic tags and the importance of proper tag nesting and comments in the code.

Uploaded by

nallamaniartsbca

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

26 views120 pages

HTML Basics for Web Design Beginners

Uploaded by

nallamaniartsbca

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

WEB DESIGNING

UNIT I

HTML: HTML-Introduction-tag basics- page structure-adding comments working with texts,

paragraphs and line break. Emphasizing test- heading and horizontal rules-list-font size, face and color-
alignment links-tables-frames.

Introduction to HTML:

HTML (HyperText Markup Language) is the standard language used to create web pages. It structures the
content on the page, including text, images, links, and multimedia. HTML elements are represented by tags that
are interpreted by web browsers to display the content.

Basic Structure of an HTML Document

An HTML document typically follows a basic structure that includes several key elements:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Introduction</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a basic introduction to HTML.</p>
</body>
</html>

Key Components of an HTML Document

1. <!DOCTYPE html>: This declaration tells the browser that the document is written in HTML5. It is
required at the top of every HTML document.
2. <html>: The root element that wraps the entire HTML document.
3. <head>: This section contains meta-information about the document, such as the character set, title, and
viewport settings (for responsiveness).
o <meta charset="UTF-8">: Defines the character encoding, ensuring the document can handle
special characters.
o <title>: Sets the title of the web page that appears on the browser tab.
o <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the
page is responsive on different devices, particularly mobile devices.
4. <body>: The body of the document, where all visible content goes, such as headings, paragraphs,
images, and links.
Common HTML Tags

 Headings (<h1> to <h6>): HTML provides six levels of headings, where <h1> is the highest and <h6>
is the lowest.

<h1>Main Heading</h1>

<h2>Subheading</h2>

 Paragraph (<p>): Used to define a block of text.

<p>This is a paragraph of text.</p>

 Links (<a>): Used to create hyperlinks to other pages or websites.

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

 Images (<img>): Embeds images in the page. The src attribute specifies the image source.

<img src="[Link]" alt="An example image" width="300">

 Lists: HTML supports both ordered (<ol>) and unordered (<ul>) lists.

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

 Forms: HTML forms are used to collect user input.

<form action="/submit" method="post">

HTML Attributes

HTML elements can have attributes that provide additional information. Attributes are placed within the
opening tag.

 href (for links): Specifies the URL of the page the link goes to.
 src (for images): Specifies the path to the image file.
 alt (for images): Provides alternative text if the image cannot be displayed.
 id and class: Used to uniquely identify elements or group them together for styling or scripting.
Example:

<a href="[Link] target="_blank">Go to Example</a>

In this example, href specifies the URL, and target="_blank" opens the link in a new tab.

HTML Document Flow

1. HTML elements are read top to bottom, left to right.

2. Tags: Most HTML tags have an opening tag (e.g., <p>) and a closing tag (e.g., </p>), but some, like
<img>, are self-closing.
3. Nesting: HTML elements can be nested inside one another. Ensure that tags are properly nested (an
open tag must be closed in the reverse order).

HTML Tag Basics

In HTML, tags are the fundamental building blocks used to define the structure and content of a web page.
HTML tags are surrounded by angle brackets, and most elements have an opening tag and a closing tag. Here's
a detailed explanation of the key concepts of HTML tags:

1. HTML Tag Structure

 Opening tag: Marks the beginning of an element.

<p>

 Content: The actual content or text that is enclosed by the tags.

This is a paragraph.

 Closing tag: Marks the end of an element. It is the same as the opening tag but with a forward slash /.

</p>

Putting it all together:

<p>This is a paragraph.</p>

2. Self-Closing Tags

Some HTML tags don't have content and are self-closing. In HTML5, self-closing tags don’t need a closing tag,
but in XHTML (an older standard), a forward slash is used before the closing bracket.

 Example of self-closing tags:

<img src="[Link]" alt="Sample Image">

<br> 
<hr> 
3. Common HTML Tags

Here’s a breakdown of some of the most commonly used HTML tags:

a. Heading Tags (<h1> to <h6>)

Headings help structure content into different levels of importance, with <h1> being the most important.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

b. Paragraph Tag (<p>)

Used to define a paragraph of text.

<p>This is a paragraph of text in HTML.</p>

c. Anchor Tag (<a>)

Used to create hyperlinks. The href attribute specifies the destination URL.

<a href="[Link] here to visit Example</a>

d. Image Tag (<img>)

Displays images on a webpage. It uses attributes like src for the image source and alt for alternative text.

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

e. List Tags

 Unordered List (<ul>): Creates a bullet-point list.

 Ordered List (<ol>): Creates a numbered list.

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

f. Form Tag (<form>)

Used to collect user input.

g. Division Tag (<div>)

A block-level container for grouping elements, often used with CSS for styling and layout.

<div>
<h2>Section Title</h2>
<p>Content goes here.</p>
</div>

4. Attributes

HTML tags can have attributes, which provide additional information about an element. Attributes are written
within the opening tag and usually come in name-value pairs like name="value".

Common Attributes:

 href: Used in the <a> tag to specify the URL.

 src: Used in the <img> tag to specify the image file location.
 alt: Provides alternative text for an image.
 class: Used to assign one or more CSS classes to an element for styling.
 id: A unique identifier for an element.

Example:

<a href="[Link] target="_blank">Open Example</a>

 target="_blank": Opens the link in a new tab.

5. Nesting Tags

Tags can be nested inside one another, but they must be properly closed. Incorrectly nesting tags can break the
structure of the page.

 Correct Nesting:

<div>
<p>This is a paragraph inside a div.</p>
</div>

 Incorrect Nesting (will cause errors):

<div>
<p>This is incorrect nesting.</div>
</p>

6. Comments in HTML

Comments are notes within the code that are not displayed in the browser. They are useful for explaining code
or leaving reminders.

<p>This paragraph will be displayed.</p>

7. HTML5 Semantic Tags

HTML5 introduced semantic tags, which give more meaning to the structure of the page.

 <header>: Defines the header of a page or section.

 <nav>: Represents a navigation menu.
 <main>: Main content of the document.
 <section>: A section of content.
 <article>: Independent content that could stand alone.
 <footer>: Footer of a page or section.

Example:

<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
</main>
<footer>
<p>Footer content © 2024</p>
</footer>
HTML Page Structure
An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets
and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document
structure:

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>

</body>

</ A typical HTML page looks like this:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Almost every website uses this structure. The main content goes inside the body tag. No worries if this looks
complicated; let's break it down!
Note: These are the essential elements for a basic HTML document: <!DOCTYPE
html>, <html>, <head>, <title>, </head>, <body>, </body>, </html>
DOCTYPE Declaration

<!DOCTYPE html>

The <!DOCTYPE html> declaration informs the web browser about the HTML version being used. The
latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype
declaration will be helpful!
HTML Root Element

<html>

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

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

Head Section

<head>

The <head> tag contains metadata and links to external resources like CSS and JavaScript files.

</head>

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

Title Tag

<title>Document</title>

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

Body Tag

<body>

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

</body>

The </body> tag marks the end of the visible content of the web page.
Every HTML page should include at least these essential elements to define the basic layout. In upcoming
tutorials, we'll dive deeper into the fascinating world of HTML.
Summary:

 The <!DOCTYPE html> tag specifies that the document is an HTML5 document.
 The <html lang="en"> tag defines the document to be in English.
 The <head> section contains metadata and the title of the webpage, which appears in the browser's
title bar.
 The <body> section contains the content that will be displayed on the webpage.
 The h1 and p are two types of tags. We will learn about more tags in the later section
1. Adding Comments in HTML

Comments are useful for leaving notes or explanations within your code. Comments are not displayed by the
browser and are ignored during rendering.

Syntax:

Example:

<h1>Welcome to My Website</h1>
<p>This is the introduction paragraph.</p>

2. Working with Text in HTML

HTML provides basic text formatting tags to style and present content on a web page.

Basic Text Formatting Tags:

 <b>: Bold text

<b>This text is bold.</b>

 <i>: Italic text

<i>This text is italicized.</i>

 <u>: Underlined text

<u>This text is underlined.</u>

 <strong>: Indicates strong importance, often bold.

<strong>This text is strongly emphasized.</strong>

 <em>: Indicates emphasis, usually italicized.

<em>This text is emphasized.</em>

3. Working with Paragraphs (<p>)

The <p> tag is used to define a block of text, making it a paragraph. Browsers automatically add space before
and after paragraphs.

Syntax:

<p>Your text goes here...</p>

Example:

<p>This is the first paragraph of text. It introduces the main topic of the page.</p>

<p>This is the second paragraph, providing more details and context.</p>

In this example, the two paragraphs will appear one after the other with spacing in between them.

4. Line Breaks (<br>)

If you want to force a line break (without starting a new paragraph), use the <br> tag. It’s a self-closing tag,
which means it doesn’t need an end tag.

Syntax:

<br>

Example:

<p>This is the first line.<br>This is the second line, right after a line break.</p>

Here, the text after the <br> tag will appear on a new line, but it will remain part of the same paragraph.

Combining Comments, Text, Paragraphs, and Line Breaks

Here's how you can combine comments, text formatting, paragraphs, and line breaks in a simple HTML
structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Formatting Example</title>
</head>
<body>

<h1>Welcome to My Page</h1>

<p><strong>This is an introduction</strong> to my webpage.</p>

<p>This paragraph is giving you an overview of the content.<br>
We can also break the line within the same paragraph.<br>
Here is another line break without starting a new paragraph.</p>

<p><em>Don't forget to check the other sections.</em> We have a lot more content below.</p>

</body>
</html>

Explanation:

1. Comments: Comments are added to explain various parts of the code without affecting the output.
2. Text Formatting: <strong> makes text bold (and adds semantic importance), and <em> italicizes text.
3. Paragraphs: Text is divided into separate blocks using the <p> tag.
4. Line Breaks: The <br> tag is used to force new lines within a paragraph.

Emphasizing Text

You can emphasize text in different ways using tags like <strong>, <em>, <b>, and <i>.

 Bold (<b> or <strong>)

<b>This text is bold.</b>

<strong>This text is important and bold.</strong>

 Italic (<i> or <em>)

<i>This text is italicized.</i>

<em>This text is emphasized and italicized.</em>

2. Headings (<h1> to <h6>)

Headings help structure your content. <h1> is the most important, and <h6> is the least.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

3. Horizontal Rules (<hr>)

Use the <hr> tag to insert a horizontal line that separates sections.

<p>This is the first section.</p>

<hr>
<p>This is the second section, separated by a horizontal line.</p>

4. Lists
HTML supports two types of lists: unordered (bulleted) and ordered (numbered).

 Unordered List (<ul>)

 Ordered List (<ol>)

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

5. Font Size, Face, and Color

You can customize the font size, face, and color using the style attribute or the deprecated <font> tag. However,
using CSS is the modern and recommended approach.

 Using CSS Inline for Font Customization

<p style="font-size:20px; font-family:Arial; color:blue;">This is a customized paragraph.</p>

 Using the Deprecated <font> Tag (Not Recommended)

<font size="5" face="Verdana" color="red">This is some text in Verdana font, size 5, and red
color.</font>

6. Text Alignment

You can align text using the align attribute (deprecated) or CSS.

 Aligning Text with CSS

<p style="text-align:center;">This text is centered.</p>

<p style="text-align:right;">This text is aligned to the right.</p>

7. Links (<a>)

Use the <a> tag to create hyperlinks.

 Basic Link

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

 Open Link in New Tab

<a href="[Link] target="_blank">Open Example in a New Tab</a>

HTML TABLE:

A table in HTML consists of table cells inside rows and columns.

A simple HTML table:

<table>
<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>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

TABLE CELLS

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example:

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

TABLE ROWS

Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

Example:

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

TABLE HEADERS

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML TABLE TAGS

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
TABLES:

The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under
<td> are regular and left aligned by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce the following result –

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell.
Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are
centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result –

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use toadjust the
white space in your table cells.
The cellspacing attribute defines space between table cells, while cellpaddingrepresents
the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result –

Name Salar
y
Ramesh Raman
5000
Shabbir Hussein
7000

Colspan and Rowspan Attributes

Use colspan attribute if you want to merge two or more columns into a singlecolumn.
Similar way you will use rowspan if you want to merge two or more rows.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
This will produce the following result –

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds

You can set table background using one of the following two ways −
bgcolor attribute − You can set background color for whole table or just for onecell.
background attribute − You can set background image for whole table or just forone cell.
You can also set border color also using bordercolor attribute.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

OUTPUT:
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/[Link]">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table Height and Width

set a table width and height using width and height attributes.
You can specify table width or height in terms of pixels or in terms of percentageof
available screen area.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce the following result –

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table. This tag is deprecated in newer version of HTML/XHTML.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

OUTPUT

This is the caption

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">

<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
This will produce the following result –

This is the head of the table

Cell 1 Cell 2 Cell 3 Cell 4
This is the foot of the table

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside
table data tag <td>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>

</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

FRAMES:
HTML frames are used to divide your browser window into multiple sectionswhere
each section can load a separate HTML document.
Introducing Frameset:
A collection of frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables are organized: into rowsand columns.
SYNTAX:
<frameset cols=" "> ............ </frameset>
Example:
!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="[Link]
<frame src="[Link]
</frameset>
</html>
Output:
<Frame> elements: Tag-specific attribute

Attribute Value Description

cols Pixels It specifies the number and size of column spaces in theframeset.
% (Not Supported in HTML5)
*
rows Pixels It specifies the number and size of the rows spaces in the
% frameset. (Not Supported in HTML5)
*
[Link] Attribute & Description

src
This attribute is used to give the file name that should be loaded in the frame. Its value
1
can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file
available in html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create
2
links in one frame that load pages into an another frame, in which case the second frame
needs a name to identify itself as the target of the link.

frameborder
This attribute specifies whether or not the borders of that frame are shown; it overrides
3
the value given in the frameborder attribute on the <frameset> tag if one is given, and
this can take values either 1 (yes) or 0 (no).

marginwidth
This attribute allows you to specify the width of the space between the left and right of
4
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth = "10".

marginheight
5
This attribute allows you to specify the height of the space between the top
and bottom of the frame's borders and its contents. The value is given inpixels. For
example marginheight = "10".

noresize
By default, you can resize any frame by clicking and dragging on the borders of a frame.
6
The noresize attribute prevents a user from being able to resize the frame. For example
noresize = "noresize".

scrolling
This attribute controls the appearance of the scrollbars that appear on the frame. This
7
takes values either "yes", "no" or "auto". For example scrolling = "no" means it should
not have scroll bars.

longdesc
This attribute allows you to provide a link to another page containing a long description
8
of the contents of the frame. For example longdesc = "[Link]"

Creating Links between Frames :

Creating hyperlinks in HTML frames is a little more complicated than creating them
in standard web pages.
The key difference is outlined in the following:
 In a standard web page, clicking on a hyperlink will —by default— reload the original
browser window with the new page.
 In a framed web page, on the other hand, clicking on a hyperlink will —by default—
reload the frame in which the hyperlink is located in with the new page.
Loading the new page in the same frame, however, may only be desirable in certain situations.
In other situations, you may instead require that:
A. A hyperlink in one frame loads a new page in another frame. OR
B. A hyperlink loads a new page which breaks out of the frame.
In all cases, to make sure hyperlinks in a framed page perform their intended function, you will
have to do two things:
1. Use the name attribute to give each of your frames a special identity.
2. Use the target attribute in your hyperlinks.
There are also some standard frame target names predefined by the HTML specification which
control other possibilities of handling hyperlinks in frames.
 A Link in One Frame Loads a New Page in Another Frame
Example:
<html>
<head>
<title>HTML Frames - A Basic Frame Layout</title>
</head>
<frameset cols="25%,75%">
<frame src="[Link]" name="menu">

<frame src="[Link]" name="content">

</frameset>
</html>

Setting a default target frame using <base> Elements:

 The <base> target Attribute in HTML is used to specify the default targetfor all
hyperlinks and forms in the webpage.
 This attribute could also be overridden by the use of the target attributefor each
hyperlink and the Form.
Syntax:
<base target="_blank|_self|_parent|_top|framename" >
Attribute Values:
 _blank: It opens the link in a new window.
 _self: It opens the linked document in the same frame. it is the default value.
 _parent: It opens the linked document in the parent frameset.
 _top: It opens the linked document in the full body of the window.
 framename: It opens the linked document in the named frame. Example: This
example illustrates the use of target attribute in the <base>element.
Example:
<!DOCTYPE html>
<html>

<head>
<base target="_self">
<title>
HTML Base target Attribute
</title>
</head>

<h1 style="color:green;">
GeeksForGeeks
</h1>

<h2>HTML Base target Attribute</h2>

<a href="[Link]/"
alt="GFG"> Geeks Link
</a>
</body>

</html>
Output:

Nested frame sets

Framesets may be nested to any level.
In the following example, the outer FRAMESET divides the available space into three
equal columns. The inner FRAMESET then divides the second area into tworows of
unequal height.
Example:

<FRAMESET cols="33%, 33%, 34%">

...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>
Inline or Floating Frames with <iframe>:
Inline Frame or an iframe is allows us to open new pages inside main pages.
Inline frames are also referred to as Floating frames.
<iframe> .. </iframe> tag is used to create inline or floating frame.

Attributes of <iFrame> tag :

name: used to set a name for the iframe.
src: Specifies the url of the document to be loaded into the iframe.
Width: used to specify the width of the iframe.
Height: used to specify the height of the iframe.
Frameborder: used to specify the whether to have a border for the iframe or not.
This attribute possibly takes two values. i.e, 1 for on and 0 for off.
Scrolling: used to specify whether the iframe should have scrolling capability or not.
This attribute possibly takes two values i.e, 1 for on and 0 for off.
vspace: used to leave gaps on the top and bottom of the iframe. This attribute is similar
to cellspacing attribute of a table tag.
hspace: used to leave gaps on the sides of the iframe. This attribute is similar to cellpadding
attribute of a table tag.
marginwidth: used to specify the number of pixels to be left as the left/right
margins.
marginheight: used to specify the number of pixels to be left as the top/bottom
margins.
Example:
<iframe name="iname" src="[Link]"></iframe>
Hidden attribute can be added in HTML5

UNIT I COMPLETED
Unit II
Forms & Images Using Html: Graphics:Introduction-How to work efficiently
with images inweb pages, image maps, GIF animation, addingmultimedia, data
collection with html forms textbox,password, list box, combo box, text area, tools
for building web page front page.

Forms
Forms Design is used to create interactive forms on web pages that allow users to
input and submit data to a server for processing.
 The <form> tag defines the form structure.
 Form elements like <input>, <button>, and <select> are used to collect data.
 HTML forms are essential for tasks such as login, registration, and surveys.

<html>

<body>

<form action="/submit-form" method="post">

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="30"></textarea>

<button type="submit">Submit</button>

</form>

</body>

</html>
 <form> defines a section for collecting user inputs with attributes
specifying where (action) and how (method) to send the data.
 <label>, <input>, and <button> create a simple field for text input and a
button to submit the form.
 Input Elements in HTML Forms
 Input elements are the building blocks of HTML forms, allowing users
to enter and submit various types of data. Common input elements
include:
 1. Text Field: Allows the user to input single-line text. It is created
using the <input> element with type=”text”
<!DOCTYPE html>
<html>

<body>
<h3>Example of Text Field</h3>
<form>
<label for="email">Email ID:</label><br>
<input type="text" name="email" id="email"><br>
</form>
</body>

</html>
 The <input type=”text”> element creates a single-line text field for user
input.
 The <label> element provides a descriptive label for the text field,
enhancing accessibility and usability.
2. Number Field: This field accepts numeric input. It is created using the
<input> element with type=”number”.
<html>
<body>
<form>
<label for="age">Age:</label><br>
<input type="number" name="age" id="age">
</form>
</body>
</html>
 The <input type=”number”> element creates a numeric input field,
allowing users to enter their age.
 The <label> element provides a descriptive label (“Age:”) for the input
field, enhancing accessibility and usability.
3. Password Field: A password field masks the user’s input (e.g.,
asterisks or dots). It is created using the <input> element with
type=”password”.

<html>

<body>

<form>

<label for="password">Password:</label><br>

<input type="password" name="password" id="password">

</form>

</body>

</html>

 The <input type=”password”> element creates a password input field

where user entries are masked, enhancing privacy during data entry.
4. Radio Buttons: Used when the user needs to select one option from a
list. Radio buttons are created using the <input> element with type=”radio”.
<html>

<body>

<form>

<label>Select Gender:</label><br>

<input type="radio" name="gender"

id="male" value="Male">

<input type="radio" name="gender"

id="female" value="Female">

<label for="female">Female</label>

</form>
</body>

</html>

 The <input type=”radio”> elements create radio buttons, allowing users to

select one option from the provided choices (e.g., “Male” or “Female”).
 Each <label> element is associated with a corresponding radio button,
providing descriptive text and enhancing accessibility by enabling users to
click on the label to select the associated option.
Checkboxes: Used to allow users to select one or more options from a list.
Checkboxes are created using the <input> element with type=”checkbox”.
<html>

<body>

<form>

<b>Select Subjects:</b><br>

<input type="checkbox" name="subject"

id="maths" value="Maths">

<label for="maths">Maths</label><br>

<input type="checkbox" name="subject"

id="science" value="Science">

<label for="science">Science</label><br>

<input type="checkbox" name="subject"

id="english" value="English">

<label for="english">English</label>

</form>

</body>

</html>

File Select Box: Allows users to select a file from their local device and
upload it. It is created using the <input> element with type=”file”.
<html>
<body>

<form>

<label for="fileupload">Upload a file:</label>

<input type="file" name="fileupload" id="fileupload">

</form>

</body>

</html>

 The <input type=”file”> element creates a file upload field, allowing users
to select a file from their device for submission.
 The <label> element provides a descriptive label (“Upload a file:”) for the
file input field, enhancing accessibility and usability.
Select Boxes: Used to present a dropdown list of options. Select boxes are
created using the <select> element, and the individual options are defined
using the <option> element.
<html>

<body>

<form>

<label for="country">Country:</label>

<select name="country" id="country">

<option value="India">India</option>

<option value="Sri Lanka">Sri Lanka</option>

<option value="Australia">Australia</option>

</select>

</form>

</body>

</html>

 The <select> element creates a drop-down list labeled “Country,” allowing

users to choose one option from the provided list.
 Each <option> element within the <select> defines an individual choice in
the drop-down menu, such as “India,” “Sri Lanka,” and “Australia.”
9. Reset And Submit Buttons: The Submit Button allows the user to send
the form data to the web server. The Reset Button is used to reset the form
data and use the default values.
<html>

<body>

<form action="[Link]" method="post" id="users">

<label for="username">Username:</label>

<input type="text" name="username" id="Username">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

</body>

</html>

 The <input type=”submit”> element creates a button that, when clicked,

submits the form data to the server.
 The <input type=”reset”> element creates a button that, when clicked,
resets all form fields to their default values

Best Practices for HTML Form Design

 Use Semantic HTML5 Elements: Utilize <form>, <fieldset>, <legend>,
and <label> to enhance form structure and accessibility.
 Keep Forms Concise: Limit the number of fields to essential information
to prevent user overwhelm.
 Provide Clear Labels and Instructions: Use descriptive labels and
placeholders to guide users in completing the form accurately.
 Implement Inline Validation: Provide real-time feedback to users as they
complete the form to reduce errors and improve user experience.

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

 Syntax
 <img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="[Link]" alt="HTML5 Icon" width="128" height="128">

<img src="[Link]" alt="HTML5

Icon" style="width:128px;height:128px;">

</body>
</html>

Graphics

Graphics are representations used to make web-page or applications

visually appealing and also for improving user experience and user
interaction. Some examples of graphics are photographs, flowcharts,
bar graphs, maps, engineering drawings, constructional blueprints, etc.
Usually, the following technologies are used in web graphics with
HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.

Scalable vector graphics(SVG)

 These are images created by a markup language that are reusable,
simple, high-quality standalone images that can be exported and imported
as well.
 They are cross-browser friendly and can be used both on the client-side
and server-side of the application.
 They can be manipulated to create animations, hybrid images, etc by
editing the markup language or by editing using a stylesheet.
 Files come with a .svg extension.
<!DOCTYPE html>

<body>

<svg width="550" height="50" viewBox="0 0 550 50"

fill="green" xmlns="[Link]

<text x="0" y="20">I love GeeksforGeeks</text>

<svg>

</body>

</html>

Output:

PNG (Portable Network Graphics)

 They are portable, static and lossless with proper indexed-color control.
 Files come with a .png or .PNG extension.
 Cross-browser friendly and have streaming capabilities.
Example:
 HTML

<!DOCTYPE html>
<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

</img>

</body>

</html>

Output:

JPG or JPEG (Joint Photographic Experts Group)

 Lossy compressed with an adjustable degree of compression.
 Used mainly with digital photography and can achieve a compression of
10:1.
 Files come with a .jpg or jpeg extension.

Example
<!DOCTYPE html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

</img>

</body>

</html>

OutPut:

CSS (Cascading Style Sheets):

 This is a type of language mainly used for designing and HTML and SVG
elements by using code.
 They are scalable and give more space for creativity to the user.
 Files usually come with a .css extension.

<!DOCTYPE html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="[Link]"></link>

</head>

<body>

</body>

</html>

[Link]: The following code is used in the above HTML file.

body {
position: relative;
}

.star {
position: absolute;
width: 423px;
height: 384px;
left: 456.7px;
top: 80.34px;
background: #346d33;
transform: rotate(18.69deg);
}
Output:

Canvas API
 Has no DOM and uses vector based methods to create objects, graphics
and shapes.
 Canvas API applications can be standalone or integrated with HTML or
SVG.
 Widely used for games
 Client-side scripting with native modern browser support.
<!DOCTYPE html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<canvas id="canvas1" width="400" height="200"

style="border:2px solid green; border-radius:35px">

Your browser does not support the canvas element.

</canvas>

</body></html>

OUTPUT:

WebCGM (Web Computer Graphics Metafile)

 Very similar to SVG when it comes to graphical features.
 CGM is the ISO standard for vector image definition.
 Used in aeronautics, automotive engineering, technical illustration, etc.
 They are not widely used traditionally. More modern approaches have
been to use SVGs, Canvas, etc.
To work efficiently with images in web pages, you can optimize images, use the right
file formats, and implement lazy loading
 Compress images
Use image compressors to reduce the file size of your images without
compromising quality.
 Resize images
Resize images before exporting them.
 Use the right file format
Use the right file format for the image, such as JPG, PNG, GIF, SVG, or
WebP.
 Use image editors
Use image editors to adjust the size, resolution, and appearance of your
images.
Use the right file format
 Use SVGs
Scalable Vector Graphics (SVGs) are a good choice for logos, icons, text,
and simple images. SVGs are automatically scalable and can be smaller in
file size than other formats.
 Use the right dimensions
Use the correct dimensions for your images so they fit the layout of your web
page.
Implement lazy loading
 Use the "loading" attribute set to "lazy" in HTML to tell the browser to load
images only when they are visible on the page. This can improve page
loading performance.
Use a content delivery network (CDN)
 Host your images on a CDN to increase page load speed. A CDN is a network
of servers that host identical copies of your files.
HTML Images – FAQs
1. Use the <img> tag with the src attribute. ...
2. The alt attribute provides alternative text for an image if it cannot be displayed
and improves accessibility by describing the image to screen readers.
3. Use the width and height attributes. ...
4. The src (source) attribute specifies the path to the image file.
Images are an important part of web design, Images can easily explain what
text cannot. Using images in an efficient manner improves the UI design,
users can understand it faster but it will affect webpage performance if not
used efficiently. So in this article, we will understand how to use images in an
efficient way.
How to Use Images Efficiently in Web Design?
Step 1. Choosing right Images
First step of creating an efficient design is choosing right images, if images
are bad then it does'nt matter where they are placed. So how will you choose
right images just keep three things in mind
 Relevance: Images should be relevant to the content of your site. You
should choose images which portray the your message and brand
identity, not distract or confuse the users For example if you have site
related to health and foods, you can show images of different foods or
nutrients but not random images of landscapes.
 Quality: Images should be clear, high quality and not blurry. Images
should not be like cut from between or half. They should also have good
contrast, lighting and colors.
 Size: Image should be of size which would fit properly in web design and
does not look too small big or strange. If the size of image is larger you
can change its dimensions with help of online image resizing tools in few
clicks.
 Format: Images can be in many formats like Webp, JPG, SVG, GIF Png
etc you should use appropriate format images with proper research
because each format have there own advantages and disadvantages.
Step 2. Optimising Image Placement
Now after choosing the right image, its time to optimise the image placement
in your web design. Following aspects should be considered for optimising
image placement.
 Alignment: Images should be aligned properly with other elements of
webpage. There should not be gaps between that would disrupt the
readibitlity of page You can use CSS properties like float, display,
position, margin, padding, and flexbox to control the alignment of your
images.
 Balance: There should be a proper balance between images and text of
webpage. There should not be like lot of images and less text or lot of text
but no images. You should aim for a harmonious and proportional
distribution of visual weight and white space on your web page.
 Hierarchy: The images should be arranged accordingly on page, for ex.
you should place the images which are very important content above in
page while use less important images below. Because showing less
important images which distract users. You can use various techniques
such as proper scaling, colors, shapes and use of animation to create
visual hierarchy of images
Step 3. Enhance the accessibility of Image
If we found right image and right place for it. Then the third step is to make is
easily accessible to users. For you consider following things
 Alt Text: It means alternative text, it is shown in the case the image does
not open or fails to open. It should represent he content of image in form
of text. Its also very good for seo, because it helps understanding the
search engine what the image is about?
 Captions: The images should have captions that provide additional
information or context about the image content to users who can see
them. Captions are also useful for SEO, as they can include keywords
and phrases that relate to your content.
 Fixing problems: You should prevent and fix the errors which are
causing your images fail to open, like sometimes images does not open
because the size of image is too big, sometimes its on server which have
problem.
So this is a small guide for efficient use of images now we will look for what
are benefits of efficient usage of image and what things to avoid.
Benefits of Efficient Placement of Images
 Use of high quality, relevant images at good place on page will grab users
attention in first look and will be memorable for them.
 Clear relevant images clarify concepts when combined with images.
 Good image placement ensures a balanced layout.
 Images enhance storytelling by illustrating concepts or narratives.
Sequential images can guide users through a story or process.
 High-resolution images in the wrong places can slow down your website's
loading time, resulting in a poor user experience and potential loss of
visitors But the good placement do exactly opposite

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below

Example
Here is the HTML source code for the image map above:

<img src="[Link]" alt="Workplace" usemap="#workmap">

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="[Link]" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
You must also define some coordinates to be able to place the clickable area
onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

Example
<area shape="rect" coords="34, 44, 270, 350" href="[Link]">
This is the area that becomes clickable and will send the user to the page
"[Link]":

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300
GIF animations

GIF animations are basic animations created by combining images or

frames in a Graphics Interchange Format (GIF) file. They can be used in web
design to create motion design for user interfaces and other elements.

How to create a GIF animation in web design?

1. Use a program like Google Web Designer, Canva, or Adobe Photoshop
2. Select the Animated GIF file type
3. Choose the dimensions of the GIF
4. Customize the design
5. Add animation or effects
6. Preview, download, and share
creating GIF animations
 Consider the goal of the GIF
 Select a key design element
 Choose the number of slides
 Be aware of the different guidelines for each platform

How to use an animated image in HTML page

 Animated images in HTML are an image on a web page that moves. It is

in GIF format i.e. Graphics Interchange Format file.
 We need to use the <image> tag with the src attribute to add an
animated image in HTML. The src attribute adds the URL of the image
(file destination).
 Also, we can set the height and width of the image using
the height and width attribute.
Syntax
<image src=”Animated image”>
Example

<!DOCTYPE html>

<html>

<head>

<meta name="description" content="meta tag in the web document">

<meta name="author" content="lokesh">

<meta name="viewport" content="width=device-width, initial-

scale=1.0"> </head>

<body> <p>Adding Animated Images to the web page</p>

<img src="[Link] </body>

</html>

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.

Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

There are many video formats out
there.

The MP4, WebM, and Ogg formats are

supported by HTML.

The MP4 format is recommended by

YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving

.mpeg Pictures Expert Group. The first
popular video format on the web. Not
supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave).

Developed by Microsoft. Commonly
used in video cameras and TV
hardware. Plays well on Windows
computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video).

Developed by Microsoft. Commonly
used in video cameras and TV
hardware. Plays well on Windows
computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple.

Commonly used in video cameras and
TV hardware. Plays well on Apple
computers, but not in web browsers.

RealVideo .rm RealVideo. Developed by Real Media to

.ram allow video streaming with low
bandwidths. Does not play in web
browsers.

Flash .swf Flash. Developed by Macromedia.

.flv Often requires an extra component
(plug-in) to play in web browsers.

Ogg .ogg Theora Ogg. Developed by the

[Link] Foundation. Supported by
HTML.

WebM .webm WebM. Developed by Mozilla, Opera,

Adobe, and Google. Supported by
HTML.

The HTML <video> Element

To show a video in HTML, use the <video> element:

Example
<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>

How it Works
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.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:

Example
<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>

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser
support for the different formats is:

Browser MP4 WebM Ogg

Edge YES YES YES

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

HTML Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as

<track> Defines text tracks in media players

HTML Audio - How It Works

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.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:

Example
<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>

Example
<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>

HTML Forms are used to send data across the web, like
login, signup, search etc. Forms are often used as contact
form to convert information input by a user into
leads. Forms includes many inputs controls like text, password,
file, radio, checkbox etc
The elements used in HTML form are form tag as
parent, input, textarea,, select, button and label.

HTML Form Elements

HTML Form Tag

 Input Tag

 Label

 Input type password

 Input type file

 Radio Buttons

 Checkbox
 Select Dropdown

 Textarea

 Button

 Fieldset

HTML Form Tag

Form Tag defines the form and within this tag, there is action
attribute which tells the form where its contents will be sent when
it is submitted

HTML form can have input elements, checkbox, radio

buttons, submit button and more.A form can also contain select
dropdown, textarea, fieldset, legend, and label elements.

Create HTML Form

form is build inside <form> tag. See the code below

<form action="" method="get" name="enquiry">

/* Content */

</form>

</form>
f we want to create the text box in Html document for inserting the characters by the user on
the web page then we have to follow the steps which are given below. Using these steps,
any user can easily create a text box.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html
file in the text editor in which we want to create the text box.

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Create the Text Box
6. </Title>
7. </Head>
8. <Body>
9. Hello User! <br>
10. </Body>
11. </Html>
Step 2: For creating the text box, firstly we have to define the <form> tag, if not defined in
the code. Now, we have to place the cursor at that point in the <form> tag where we want to
create the text box. And, then we have to type the <input> tag at that point.

1. <form>
2. Student Name:
3. <input >
4. <br> <br>
5. Course:
6. <input >
7. </form>
Step 3: After writing the <input> tag, we have to use its attribute whose name
is type. This attribute specifies what type of data is to be entered. So, to create the text box
we have to give the value "text" in the type attribute.

1. <form>
2. Student Name:
3. <input type="text" name="Name">
4. <br> <br>
5. Course:
6. <input type="text" name="Course">
7. </form>
Step 4: If we want to define the width of the text box, then we can define it with the help of
the size attribute.

1. <form>
2. Student Name:
3. <input type="text" name="Name" size="20">
4. <br> <br>
5. Course:
6. <input type="text" name="Course" size="15">
7. </form>
Step 5: And, at last, we have to save the Html file and then run the file in the browser.

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Create the Text Box
6. </Title>
7. </Head>
8. <Body>
9. Hello User! <br>
10. <form>
11. Student Name:
12. <input type="text" name="Name" size="20">
13. <br> <br>
14. Course:
15. <input type="text" name="Course" size="15">
16. </form>
17. </Body>
18. </Html>

HTML <input type=”password”> is used to specify the password field of

the input tag. Password should be served over the HTTPS pages because it
includes the sensitive information of the user.
Note: We can add the <label> tag for improved accessibility.
Syntax
<input type="password">
Example: We are using the HTML <input type=”password”> to create a
password field where characters are masked, enhancing security by hiding
sensitive information like passwords from plain view

<!DOCTYPE html>

<html>

<body>

<h3>HTML input type="password" Example</h3>

<label for="email">Email:</label>

<input type="email" name="email"

placeholder="Email Address"

required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<br>

<label for="paswword">Password:</label>

<input type="password" name="password"

placeholder="Password" required>

<br>

<input type="submit" value="Login">

</form></body>

</html>

Tips for Password Input in HTML

Here are a few tips for using <input type=”password”>:
 Password Input in HTML Forms : Use <input type=”password”> to
collect password information securely in HTML forms. This masks the
entered text for privacy.
 Hide Password in HTML: Password masking is done automatically with
<input type=”password”>, preventing the password from being visible in
plain text and enhancing security.

List Box
The list box is a graphical control element in the HTML document that allows a user to
select one or more options from the list of options. HTML listboxes, otherwise called
dropdown lists or select elements, give a helpful method for introducing a list of choices to
clients on a webpage. They are broadly utilized in forms, permitting clients to select one or
different things from a predefined set of decisions. In this article, we'll investigate the HTML
<select> element and its different attributes, alongside reasonable guides to outline their
use.

Syntax:
To create a list box, use the HTML element <select> which contains two
attributes Name and Size. The Name attribute is used to define the name for calling the list
box, and size attribute is used to specify the numerical value that shows the how many
options it contains.

1. <select Name="Name_of_list_box" Size="Number_of_options">

2. <option> List item 1 </option>
3. <option> List item 2 </option>
4. <option> List item 3 </option>
5. <option> List item N </option>
6. </select>

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of List Box
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Customer Name"/>
8. <br>
9. <br>
10. <select name="Cars" size="5">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18. </body>
19. </html>

Combobox HTML
We will discuss the Combobox HTML in this article. The name "Combobox" itself contains
the word "combo" which means combination. So, from its name, a combobox is a
combination of boxes. In HTML, it is the element that we can construct with a combination
of tags such as <select> tag and <option> tag. It is mostly utilized inside forms in HTML. It
is utilized to construct the dropdown list.

Combobox HTML Syntax:

1. <label for="name">Name</label>
2. <input type="text">
3. <select>
4. <option>Option 1</option>
5. <option>Option 2</option>
6. <option>Option 3</option>
7. <option>Option 4</option>
8. <option>Option 5</option>
9. <option>Option 6</option>
10. </select>
There are many tags in the above syntax that are defined below:

o The <label for="name"> tag is utilized to provide the name of the element. This tag
uses the "for" attribute that provides more accessibility.
o The <input type="text"> tag is utilized to define the single-line text field where the user
can input.
o The <select> tag is utilized to make a dropdown list.
o The <option> tag is utilized inside the <select> tag to define the options in a list.
o <!DOCTYPE html>
o <html lang="en">
o <head>
o <title>Demonstration of Combobox in HTML</title>
o </head>
o <body>
o <h2>It is the demonstration of Comboxbox in HTML</h2>
o <label for="name">Full Stack Web Development Languages</label> <br> <br>

o <select>
o <option value="HTML">HTML</option>
o <option value="CSS">CSS</option>
o <option value="JavaScript">JavaScript</option>
o <option value="PHP">PHP</option>
o <option value="Scala">Scala</option>
o <option value="Ruby">Ruby</option>
o <option value=".NET">.NET</option>
o <option value="Angular">Angular</option>
o <option value="React">React</option>
o <option value="SQL">SQL</option>
o <option value="C++">C++</option>
o <option value="C#">C#</option>
o <option value="Java">Java</option>
o <option value="Python">Python</option>
o <option value="OC">Objective C</option>
o </select>
o </body>
o </html>
o Output:
o Here is the output in which we can witness the combobox that shows full-stack web

o o
Textarea
The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually
courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined
through CSS height and width properties.
Textarea
1. <textarea rows="9" cols="70">
2. JavaTpoint textarea tag example with rows and columns.
3. </textarea>

Output:

JavaTpoint textarea tag example with rows and columns.

APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

UNIT III:

XML & DHTML: Cascading style sheet (CSS)-what is CSS-Why we use

CSS-adding CSS to your web pages-Grouping styles-extensible markup language
(XML). Dynamic HTML: Document object model (DCOM)-Accessing HTML &
CSS through DCOM Dynamic content styles & positioning-Event bubbling-data
binding.

CSS

 CSS stands for Cascading Style Sheets. It is a stylesheet language used

to style and enhance website presentation.
 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

 CSS is one of the main three components of a webpage along

with HTML and JavaScript.
 HTML adds Structure to a Webpage, JavaScript adds logic to it and CSS
makes it visually visually appealing or stylish. It controls the layout of a web
page i.e. how HTML elements will be displayed on a webpage.
 CSS was released (in 1996), 3 years after HTML (in 1993). The main idea
behind its use is, it allows the separation of content (HTML) from presentation
(CSS). This makes websites easier to maintain and more flexible.

1
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

CSS AND XML

CSS stands for Cascading Style Sheets. It is a rule-based language which is

used to describe the look and formatting of a document written in HTML.
It is used with HTML to change the style of web pages. It can also be used
with XML documents. XML, short for eXtensible Markup Language, is a set of
tags and codes that help carry the data presented on the website.

USES OF CSS

o CSS Stands for "Cascading Style Sheet." Cascading style sheets are
used to format the layout of Web pages.
o They can be used to define text styles, table sizes, and other aspects of
Web pages that previously could only be defined in a page's HTML,
o CSS are a powerful way to separate content from design in our Web
Forms applications.
o CSS helps Web developers create a uniform look across several pages
of a Web site.
o Instead of defining the style of each table and each block of text
within a page's HTML, commonly used styles need to be defined only
once in a CSS document.
o Once the style is defined in cascading style sheet, it can be used by
any page that references the CSS file.
o CSS makes it easy to change styles across several pages at once.
o CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.

ADVANTAGES OF CSS

 Separation of Style and Structure:

o The basic idea behind CSS is to separate the structure of the document
from the presentation of the document.
 Easier to maintain and update:
o When CSS separates you website's content from its design language,
we can easily modify and dramatically reduce our file transfer size.

 Greater consistency in design:

o By making one change to o website's CSS style sheet, we can
2
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

automatically make it to every page of your website.

 Greater Control of Presentation:

o CSS has more formatting options over HTML such as options to
control the spacing and leading text, CSS can also determine in what
order the page itself displays Possible present the same page
differently to different media isa making our documents printable.

 Lightweight code.

 Faster Web Page Download Time:

o Using cascading style-sher generally leads to less code behind our
web pages which helps the download times of a page.

 Search Engine Optimization:

o Because our CSS site contains les code and has a simpler structure it's
easier to read not only for u but also for search engine spiders.
Allowing search engine spiders get through your code faster means
your web pages can be indem faster.

 Greater accessibility.

 Browser Compatibility:
o CSS stylesheets increase your websi adaptability and ensure that more
visitors will be able to view you website.

o -It can control the layout of multiple web pages all at once.

CSS SYNTAX

A CSS rule consists of a selector and a declaration block.

o The selector points to the HTML element you want to style.

3
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

o The declaration block contains one or more declarations separated by

semicolons.
o Each declaration includes a CSS property name and a value, separated
by a colon.
o Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

EXAMPLE

<html>
<head>
<style>
body
{
background-color: lightblue;
}
h1
{
color: white;
text-align: center;
}
p
{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

<p>THIS IS MY CSS SAMPLE PROGRAM</p>
<p>This is a paragraph.</p>

</body>
</html>

4
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

ADD CSS TO WEB PAGE

EMBEDDING CSS INTO A WEB PAGE

When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

1. Internal CSS
2. Inline CSS
3. External CSS

[Link] CSS

o An internal style sheet may be used if one single HTML page has a
unique style.
o The internal style is defined inside the <style> element, inside the
head section.
o Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
o Place the CSS styles within a <style> tag inside the HTML file,
usually inside the <head> section.

5
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE FOR INTERNAL CSS

<html>
<head>

<style>
h3 {
color: red;
}
</style>
</head>
<body>

<h3>Welcome To Internal CSS </h3>

OUTPUT

2. INLINE CSS

 An inline style may be used to apply a unique style for a single

element.

 To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

6
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE

Inline styles are defined within the "style" attribute of the relevant element:

Use the style attribute on the HTML element to add styles to the web page.
It is used for small projects.

<html>
<body>

<h3 style="text-align: center;">
Welcome To CSS
</h3>

<p>EXAMPLE FOR INLINE CSS</p>

</body>
</html>

OUTPUT

[Link] CSS

With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

7
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

o An external style sheet can be written in any text editor, and must be
saved with a .css extension.

o The external .css file should not contain any HTML tags.

OUTPUT

8
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

CSS SELECTORS

 A CSS selector selects the HTML element(s) you want to style.

 CSS selectors are used to "find" (or select) the HTML elements you
want to style.
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)

CSS ELEMENT SELECTOR

The element selector selects HTML elements based on the element name.

EXAMPLE

<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

9
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS ID SELECTOR

 The id selector uses the id attribute of an HTML element to select a

specific element.
 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.
EXAMPLE

<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>
</html>

10
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS CLASS SELECTOR

 The class selector selects HTML elements with a specific class
attribute.
 To select elements with a specific class, write a period (.) character,
followed by the class name.
EXAMPLE
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

11
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

CSS UNIVERSAL SELECTOR

The universal selector (*) selects all HTML elements on the page.

EXAMPLE

<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

</body>
</html>

12
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

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;
}
h2
{
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.

13
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

EXAMPLE

<html>
<head>
<style>
h1, h2, p
{
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

OUTPUT

GROUPING STYLES

 Grouping in CSS is a technique used to reduce code redundancy and

write clean, concise easy to follow code.
 There are going to be many instances in which multiple CSS selectors
will have the same declarations.
 In these cases, we can group all the selectors together and write the

14
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

declarations only one time.

 For example, if we want to apply the exact same font size and color to
three different headings, we can write it as shown below. However,
this method will waste space.
hl
{
font-size: 10px;
color: green;
}
h2
{
font-size: 10px;
color: green;
}
h3
{
font-size: 10px;
color: green;
}

 Instead, we can shorten the code by grouping it.

 All three headings have the exact same declarations, we can write the
three heading selectors separated by a comma .

EXAMPLE:

h1, h2, h3
{
font-size: 10px;
color: green;
}
It improves the performance by reducing page loading time and save storage
space.

15
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

XML
Extensible Markup Language (XML) is a type of markup language that
establishes a set of guidelines for encoding texts in a way that is both machine-
and human-readable.
For storing and transferring data on the web and in many other applications,
XML is widely used. XML steps in as a versatile tool for encoding and
organizing data in a way that both humans and machines can comprehend.

 XML stands for eXtensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive

SYNTAX

<element attribute="value">Text content</element>

EXAMPLE

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The XML above is quite self-descriptive:

 It has sender information

 It has receiver information
 It has a heading
 It has a message body

The XML above does not DO anything. XML is just information wrapped in
tags.

Someone must write a piece of software to send, receive, store, or display it:

16
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Note
To: Tove
From: Jani
Reminder
Don't forget me this weekend!

<book>
<title>Harry Potter and the Sorcerer's Stone</title>
<author>[Link]</author>
<year>1997</year>
</book>

XML with Attributes

XML and HTML were designed with different goals:

 XML was designed to carry data - with focus on what data is

 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

The tags in the example above (like <to> and <from>) are not defined in any
XML standard. These tags are "invented" by the author of the XML document.

HTML works with predefined tags like <p>, <h1>, <table>, etc.

With XML, the author must define both the tags and the document structure.

 XML simplifies data sharing

 XML simplifies data transport
 XML simplifies platform changes
 XML simplifies data availability

17
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

APPLICATIONS OF XML

 Web development: XML is used to store and exchange data in web

applications.
 Mobile development: XML is used to store and exchange data in mobile
applications.
 Desktop development: XML is used to store and exchange data in desktop
applications.
 Data exchange: XML is often used to exchange data between different
applications and systems.
 API: XML is often used to implement APIs. APIs allow different applications
to communicate with each other and exchange data.

FEATURES OF XML

 Flexibility: XML is a flexible data format as it allows you to create your own
custom tags to meet your specific needs.
 Extensibility: XML is extensible as it enables you to add new features to
XML without breaking existing applications.
 Platform-independence: XML files can be read and processed on any
platform, regardless of the operating system or programming language.
 Human-readability: XML files are also human-readable, which makes them
easy to edit and maintain.
 Machine-readability: XML files can be easily parsed and processed by
computers. This makes XML ideal choice to store and exchange.

ADVANTAGES OF XML

 Human-readable: XML's straightforward tag-based syntax makes it easy

for humans to read and understand.
 Interoperability:
 XML bridges the communication gap between disparate systems, enabling
seamless data exchange.
 Flexibility: XML's adaptability allows it to handle a wide range of data
types and structures,

18
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

LIMITATIONS /DISADVANTAGES OF XML

 Verbosity: XML can sometimes be verbose, resembling a verbose

storyteller who takes longer to convey information, leading to larger file
sizes.
 Complexity: Managing namespaces, schemas, and other XML-related
concepts can add layers of complexity
 Parsing Overhead: Parsing XML documents can be resource-intensive,
especially for large datasets

DYNAMIC HTML: DHTML

Document object model (DCOM)

DHTML combines HTML, CSS, JavaScript, and the Document Object

Model (DOM) to create dynamic content.

It uses the Dynamic Object Model to modify settings, properties, and methods.

HTML:
HTML stands for Hypertext Markup Language and it is a client-side
markup language. It is used to build the block of web pages.

Javascript:
It is a Client-side Scripting language. Javascript is supported by most of
browsers, and also has cookie collection to determine the user’s needs.

CSS:
The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of
the web pages and helps in designing of the pages. The CSS rules for DHTML
will be modified at different levels using JS with event handlers which adds a
significant amount of dynamism with very little code.

DOM:
It is known as a Document Object Model which acts as the weakest link in
it. The only defect in it is that most of the browsers does not support DOM. It is a
way to manipulate the static content.

19
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

DHTML is not a technology; rather, it is the combination of three different

technologies, client-side scripting (JavaScript or VBScript), cascading style
sheets and document object model.

Uses of DHTML

o It is used for designing the animated and interactive web pages that
are developed in real-time.
o DHTML helps users by animating the text and images in their
documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or
rollover buttons.
o This term is also used to create various browser-based action games.

Features of DHTML

 Its simplest and main feature is that we can create the web page
dynamically.
 Dynamic Style is a feature, that allows the users to alter the font, size,
color, and content of a web page.

20
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

 It provides the facility for using the events, methods, and properties.
And, also provides the feature of code reusability.
 It also provides the feature in browsers for data binding.
 Using DHTML, users can easily create dynamic fonts for their web
sites or web pages.
 With the help of DHTML, users can easily change the tags and their
properties.
 The web page functionality is enhanced because the DHTML uses
low-bandwidth effect.

DOCUMENT OBJECT MODEL (DOM)

In DHTML (Dynamic HTML), the Document Object Model (DOM) is a
programming interface that represents an HTML document as a tree-like structure,
allowing developers to access and manipulate the content, structure, and style of a
web page dynamically using JavaScript, essentially enabling interactive and changing
elements on the page after it loads.

21
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

XML AND DTD

DTD STANDS FOR DOCUMENT TYPE DEFINITION.

A DTD defines the structure and the legal elements and attributes of an
XML document.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "[Link]">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration above contains a reference to a DTD file. The

content of the DTD file is shown and explained below.

XML DTD

The purpose of a DTD is to define the structure and the legal elements and
attributes of an XML document:

[Link]:

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:

!DOCTYPE note - Defines that the root element of the document is note

22
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

!ELEMENT note - Defines that the note element must contain the elements: "to,
from, heading, body"
!ELEMENT to - Defines the to element to be of type "#PCDATA"
!ELEMENT from - Defines the from element to be of type "#PCDATA"
!ELEMENT heading - Defines the heading element to be of type "#PCDATA"
!ELEMENT body - Defines the body element to be of type "#PCDATA"

Document Type Definition and XML Schema Definition both contain a set
of rules that control the structure and elements of XML files, but they are different
in syntax and usage. They check whether an XML document has a valid structure
or not.

DTD stands for Document Type Definition and DTD contains a set of rules
that control the structure and elements of XML files. It is used to describe the
attributes of XML language precisely. It can be classified into two types namely
internal DTD and external DTD. It can be specified inside a document or outside a
document. DTD mainly checks the grammar and validity of an XML document.

Features of DTD
 It defines the compulsory and optional elements in the XML document.
 It validates the structure of the XML document.
 It checks for the grammar of the XML document.
 It describes the order in which the element occurs.

Advantages of DTD

 We can define our own format for the XML files by DTD.
 It helps in validation of XML file.
 It provides us with a proper documentation.
 It enables us to describe a XML document efficiently.

Disadvantages of DTD

 DTDs are hard to read and maintain if they are large in size.
 It is not object oriented.
 The documentation support is limited.
 DTD doesn’t support namespaces.

23
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

In HTML, DOM stands for Document Object Model, which is a

programming interface that represents the structure of a web page. The DOM
allows programs to change the page's content, style, and structure.
The DOM represents a web page as a tree of objects, with each branch
ending in a node.
The root node is the HTML element, and the head and body elements are
below it.
The DOM allows programmers to access, modify, add, or delete elements
and content.
Programmers can attach event handlers to nodes, which are executed when
an event occurs.

Using the DOM

The DOM can be used with scripting languages like JavaScript.

The DOM can be used to build documents, navigate their structure, and add,
modify, or delete elements and content.

The Document Object Model (DOM) is a programming API for HTML and
XML documents. It defines the logical structure of documents and the way a
document is accessed and manipulated.

HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model
of the page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects

24
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

HTML DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or
change.
The HTML DOM can be accessed with JavaScript (and with other
programming languages).
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).

The following example changes the content (the innerHTML) of

the <p> element with id="demo":

<html>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

25
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

My First Page
Hello World!

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.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML
property.

The innerHTML property is useful for getting or replacing the content of

HTML elements.

The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.

The HTML DOM document object is the owner of all other objects in your web
page.

The HTML DOM Document Object

The document object represents your web page.

If you want to access any element in an HTML page, you always start with
accessing the document object.

Below are some examples of how you can use the document object to access and
manipulate HTML.

26
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Finding HTML Elements

Method Description

[Link](id) Find an element

by element id

[Link](name) Find elements by

tag name

[Link](name) Find elements by

class name

JAVASCRIPT HTML DOM - CHANGING CSS

Dynamic content in HTML can be styled and positioned using CSS

properties and embedded scripts.

Dynamic content

o Dynamic HTML allows for changes to HTML documents, such as

changing the background color of a page when a button is clicked.
o Dynamic tags can be used to insert customized data, such as post
titles, author information, and more.

The HTML DOM allows JavaScript to change the style of HTML elements.

Changing HTML Style

To change the style of an HTML element, use this syntax:

[Link](id).[Link] = new style

The following example changes the style of a <p> element:

27
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Example

<html>
<body>
<p id="p2">Hello World!</p>
<script>
[Link]("p2").[Link] = "blue";
</script>
</body>
</html>

OUTPUT

JavaScript HTML DOM

Changing the HTML style:
Hello World!
Hello World!

Using Events

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when "things happen" to HTML

elements:

 An element is clicked on
 The page has loaded
 Input fields are changed

This example changes the style of the HTML element with id="id1", when the user
clicks a button:

<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="[Link]('id1').[Link] = 'red'">

28
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Click Me!</button>
</body>
</html>

OUTPUT

CSS POSITIONING

 The position property specifies the positioning method for an element.

 The five position values are static, relative, fixed, absolute, and sticky.
 Relative positioning moves an element relative to its normal position.
 The top, bottom, left, and right properties can be used to move an element.
 The sticky element toggles between relative and fixed, depending on the
scroll position.
CSS positioning defines how elements are placed within a web page. It allows
you to control the layout, stacking order, and alignment of elements. The primary
positioning types in CSS are:

Position
Property Description

An element with position: fixed property remains in the same

Fixed
position relative to the viewport even when the page is scrolled.

Default positioning method. Elements with position: static are

Static
positioned according to the normal flow of the document.

Elements with position: relative are positioned relative to their

Relative normal position in the document flow. Other elements will not fill
the gap left by this element when adjusted.

29
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Position
Property Description

Positioned concerning its nearest non-static ancestor. Elements

Absolute
with position: absolute are taken out of the normal document flow.

Combines features of position: relative and position: fixed. The

Sticky element is treated as position: relative until it reaches a specified
threshold, then it becomes position: fixed.

1. Static Positioning
Static is the default position of an element. It does not accept properties
like top, left, right, or bottom.

The boxes follow the normal flow of the document.

There’s no overlap or displacement of elements.

<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
</body>
</html>

30
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

OUTPUT

2. Relative Positioning
Relative positioning places an element relative to its normal position.
You can move it using top, left, right, or bottom.

<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div class="relative">Box 2</div>
</body>
</html>

OUTPUT

31
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

3. Absolute Positioning
Absolute positioning removes the element from the document flow and
places it relative to the nearest ancestor with a positioning context (relative,
absolute, or fixed).

<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 2px solid black;
margin: 20px auto;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>Container with Relative Positioning</p>
<div class="absolute">Absolutely Positioned Element</div>
</div>
</body>
</html>

OUTPUT

32
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

The pink box (.absolute) is positioned 50px down and 50px right within the
.container.
It does not affect other elements in the flow.

4. Fixed Positioning
Fixed positioning removes the element from the flow and positions it
relative to the viewport. It remains in place even when the page scrolls.

<html>
<head>
<style>
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid black;
}
.content {
height: 1200px;
padding: 10px;
}
</style>
</head>
<body>

33
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

<h2>Fixed Positioning Example</h2>

<div class="fixed">Fixed Box</div>
<div class="content">
<p>Scroll down to see that the fixed box stays in place.</p>
<p>This content simulates a long page.</p>
</div>
</body>
</html>

OUTPUT

The fixed element stays at the top-right corner of the viewport even as the user
scrolls.

5. Sticky Positioning

Sticky positioning switches between relative and fixed based on the scroll
position

<html>
<head>
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky">I am sticky</div>
<p>Scroll down to see the effect.</p>
<div style="height: 1000px;"></div>
</body>
34
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

</html>

OUTPUT

The sticky element stays at the top of the viewport as you scroll but only
within its containing element.

EVENT BUBBLING

Event bubbling is a mechanism in the DOM (Document Object Model)

where an event triggered on a nested element propagates upwards through its
ancestors. It starts from the target element and bubbles up to the parent,
grandparent, and so on, until it reaches the <html> element.

Event Bubbling Works

 A user interacts with an element (e.g., clicks a button inside a <div>).
 The event first triggers on the target element.
 Then, it propagates up through its parent elements until it reaches the
document root.
Example of Event Bubbling

<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<button id="child">Click Me</button>
35
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

</div>
<script>
[Link]("parent").addEventListener("click", function()
{
alert("Parent Div Clicked!");
});

[Link]("child").addEventListener("click", function()
{
alert("Button Clicked!");
});
</script>
</body>
</html>

OUTPUT

If you click the button, the event fires on the button first (child).
Then, it bubbles up and triggers the event on the parent <div>.

Stopping Event Bubbling

To prevent an event from propagating up the DOM, use [Link]().

36
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

[Link]("child").addEventListener("click", function(event) {
alert("Button Clicked!");
[Link](); // Prevents bubbling to parent
});

Event bubbling helps in event delegation, reducing the need to add multiple event
listeners.
Use stopPropagation() if you don’t want events to propagate to parent elements.

DATA BINDING
Data binding is the process that couples two data sources together and
synchronizes them. With data binding, a change to an element in a data set
automatically updates in the bound data set.

Data binding may be used for many reasons, such as to link an application's
user interface (UI) and the data it displays, for data entry, reporting and in text box
elements. It also lets internet users manipulate the representation of data in the
elements of a web page without needing to use a complicated programming or
scripting processes.

Data and data objects of different logic functions can be bound together in
data binding. Data types with different languages can also be bound, such as data
binding Extensible Markup Language (XML) and UI.

Each data change in one data set automatically reflects in the other bound
data set. In binding syntax, the data source is the data provider, and the other data
set is the data consumer. The binding forms the link between the data provider and
the data consumer, enabling the connection between visual element data and a data
source.

Data binding eliminates the need for Document Object Model (DOM)
manipulation. DOM is an application programming interface, or API, for
Hypertext Markup Language (HTML) and XML.

37
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Types of data binding are typically defined by their data flow and include
the following:

One-way binding is a relatively simple type of data binding. Changes to the data
provider update automatically in the data consumer data set, but not the other way
around.
Two-way binding is where changes to either the data provider or the data consumer
automatically updates the other.
One-way-to-source binding is the reverse of one-way binding. Changes to the data
consumer automatically update the data provider but not the other way around.
One-time binding is where changes to the data provider do not automatically
update the data consumer. This approach is useful when only a snapshot of the data
is needed, and the data is static.
Data binding can be simple or complex. Microsoft defines simple data
binding as the ability to bind to a single data element. Complex data binding is
when multiple elements are bound together.

Data binding libraries enable users to bind UI components to data sources in

a declarative format. These libraries also provide classes and methods to make
changes in data observable. Consequently, collections, fields and objects are more
visible.

38
APOLLO ARTS AND SCIENCE COLLEGE CHENNAI
UNIT III WEB DESIGN AND DEVELOPMENT

Data binding examples

The following examples show how data binding can be used:

 Reporting. Binding is a common way to compile reports that display data from
a data source to a screen or printer.
 Data entry. Data binding is also a common way to enter large amounts of data
and keep it updated and synchronized to a data source.
 Lookup tables. Lookup tables are information tables that are typically a part of
larger data displays. Data binding and controls are used to display and change
data.
 Master-detail formats. This is a model for communication protocols where
one device or process controls another. These formats may have two tables of
data bound together.
Data binding tools
Data binding tools include the following:

 Visual Studio is a Microsoft product that provides design tools for working
with custom objects as a data source in applications. Visual Studio is also used
to bind UI controls. Changes made to objects are automatically made in a
database.
 Data Binding Library is a support library for Android developers that binds
UI components to data sources.

39
UNIT V:- Advance script: JavaScript and objects, JavaScript own objects, the
DOM and web browser environments, forms and validations.

Advance JavaScript: Javascript and objects

 A javaScript object is an entity having state and behavior For example: car, pen, bike,
chair, glass, keyboard, monitor etc.
 JavaScript is an object-based language.
 Everything is an object in JavaScript.
 JavaScript is template based not class based. we don't create class to get the object. But,
we direct create objects.

Creating Objects in JavaScript

There are 3 ways to create objects.

By object literal The syntax of creating object using object literal

object={property1:value1,property2:value2.....propertyN:valueN}

By creating instance of Object directly (using new keyword)

The syntax of creating object directly

var objectname=new Object();

new keyword is used to create object.

you need to create function with arguments. Each argument value can beassigned in
the current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor

[Link]([Link]+" "+[Link]+" "+[Link]);

</script>

JavaScript own objects

An object is a collection of properties, where each property is a key-value pair.

This example creates a new object called personconst

person = {
firstName:
'John',lastName:
'Doe'
};

The person object has two properties: firstName and lastName.a property

of an object can be either own or inherited.

A property that is defined directly on an object is own while a property that theobject receives
from its prototype is inherited.

The following creates an object called employee that inherits from the personobject:

The employee object has its own property job, and inherits firstName andlastName
properties from its prototype person.

The hasOwnProperty() method returns true if a property is own.

[Link]([Link]('job')); // => true

[Link]([Link]('firstName')); // => false
[Link]([Link]('lastName')); // => false
[Link]([Link]('ssn')); // => false

A property that is directly defined on an object is an own property.

The [Link]() method determines whether or not a property isown.

The DOM and web

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. Itis the root
element that represents the html document.

It has properties and methods. By the help of document object, we can add dynamic
content to our web page.

it is the object of window

[Link] Is same as document

“The W3C Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update thecontent, structure,
and style of a document."
Properties of document object

Methods of document object

We can access and change the contents of document by its methods.

write("string") - writes the given string on the doucment.

writeln("string")- writes the given string on the doucment with newlinecharacter at

the end.

getElementById() - returns the element having the given id value.

getElementsByName() - returns all the elements having the given name value.

getElementsByClassName() - returns all the elements having the given classname.

Accessing field value by document object

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
Browser environments

JavaScript was created for web browsers. But, since then, it has expanded andbecome a
language with different platforms and uses.

A platform can be a browser, a web-server, or another host. Each of themincludes a

platform-specific functionality.

For JavaScript specification, it is a host environment.

A host environment has its own objects and functions in addition to thelanguage
core.

Web browsers allow controlling web pages.

The “root” object named window has two roles

It is considered a global object for JavaScript code.

It presents the “browser window”, providing methods to control it.

function welcome() {
[Link]("Welcome to W3Docs");
}
// global functions are global object methods:
[Link]();
Document Object Model (DOM)
Document Object Model (DOM) is targeted at representing the overall pagecontent as
objects that can be transformed.

The document object is considered the primary “entry point” to the page. It allows you to
change or create anything on the page.

// change the background color to green [Link] = "green";

// change it back after 2 second
setTimeout(() => [Link] = "", 2000);

The DOM specification explains a document structure, providing objects tomanipulate

it. Some non-browser instruments also use DOM.

Browser Object Model (BOM)

The Browser Object Model (BOM) represents extra objects provided by the hostenvironment
to work with anything excluding the document.

alert([Link]); // shows current URL

if (confirm("Go to Google?")) {
[Link] = "[Link] // redirect the browser to anotherURL
}

The functions such as alert/confirm/prompt are also a part of BOM.

Manipulation using DOM

each Element object in the DOM has properties and methods that you can use tointeract with
that element.

The following are the most common and practical ways you might want tomanipulate
the Element object:

Change the Content of an Element

You can change the value or content of an element by setting the innerTextproperty of
that element.

<p class="myParagraph">This is a paragraph</p>

Next, you select the element and change its innerText valueconst p =

[Link]('.myParagraph'); [Link] = 'A new day

is dawning';
Manipulate the Class Attribute

You can add a new class attribute to an Element by using the add() method ofthe classList
object:

[Link]('myClass');

You can remove a class using the remove() method:

[Link]('myClass');

Setting CSS Styles Using JavaScript

you can control the style of an element by adding or removing classes thatchange the
style rules applied to an element.

.color-primary
{color:
#007bff;
}

.color-secondary
{color:
#6c757d;
}

.bold {
font-weight: 700;
}

If you have an element with the color-primary class applied, you can replace itwith color-
secondary class, or add the bold class.
<p class="myParagraph">A new day is dawning</p>const p

= [Link]('.myParagraph');

// add a class to the element

[Link]('color-primary');

// replace a class
[Link]('color-primary', 'color-secondary');

// remove a class
[Link]('color-secondary');
or

const p = [Link]('.myParagraph');

[Link] = '700'; // set font weight

[Link] = 'uppercase'; // set to uppercase
[Link] = '#007bff'; // set color

Create, Add, and Remove Elements

Besides creating a DOM tree out of your HTML file, you also have the ability tocreate
DOM elements programmatically using JavaScript.

const p = [Link]('p');
[Link] = 'This paragraph is created using JavaScript';const
body = [Link]('body');

[Link](p);

Insert Element at a Specific Position

The append() method that we explored above will insert a new element as thelast child of
the parent element.

let p2 = [Link]('p');

[Link] = 'The second paragraph';

let body = [Link]('body');

let p1=[Link]('#first');

[Link](p2, p1);

Manipulating Element Attributes

The classList object only provide methods to change the class of an element. If you want to
change other attributes like id, href, or src, you can use the setAttribute() method.

The setAttribute() method accepts two arguments:

The name of the attribute to set

The value of the attribute to set

<img id="profile-pic" src="[Link]"

/> const img =

[Link]('#profile-pic');

[Link]('src', '[Link]');

Manipulating Data Attributes

The data attribute is used to store extra information on HTML elements. How you use the
data is up to you.

let myDiv = [Link]('#intro');

// Access the dataset property [Link]([Link]) // 2022

// Use camelCase when your data attribute is more than one word
[Link]([Link]) // light

Forms and validations

The code gets the values of various form fields (name, email, what, password,address)
using Form.

Data Validation:
Name Validation: Checks if the name field is empty or contains any digits.

Address Validation: Checks if the address field is empty.

Email Validation: Checks if the email field is empty or lacks the „@‟ [Link]
Validation: Checks if the password field is empty or less than 6 characters long.

Selection Validation: Checks if a is [Link]

Handling:

Displays alerts if any of the fields fail validation [Link]

focus back to the respective field.

eturns true if all validation checks pass, indicating that the form can besubmitted.
Otherwise, it returns false, preventing form submission.

Sets focus to the first field that failed validation, ensuring the user‟s attention isdrawn to the
problematic field.

Ex.
if (address === "")
{[Link]
("Please enter your address.");
[Link]();
return false;
}

if (email === "" || ![Link]('@')) {

[Link]
("Please enter a valid e-mail address.");
[Link]();
return false;
}

if ([Link] < 6) {
alert ("Password should be atleast 6 character long");
[Link]();
return false;

DHTML: Combining HTML, CSS and Javascript

DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.

DHTML combines HTML, CSS, JavaScript, and the Document Object Model(DOM)
to create dynamic content.

It uses the Dynamic Object Model to modify settings, properties, and [Link] is
supported by some versions of Netscape Navigator and Internet Explorer
4.0 and higher.

HTML: HTML stands for Hypertext Markup Language and it is a client-sidemarkup

language. It is used to build the block of web pages.

Javascript: It is a Client-side Scripting language. Javascript is supported by mostof browsers,

and also has cookie collection to determine the user‟s needs.

CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of the web
pages and helps in designing of the pages. The CSS rules for DHTML willbe modified at
different levels using JS with event handlers which adds a significant amount of dynamism
with very little code.

DOM: It is known as a Document Object Model which acts as the weakest link in it. The only
defect in it is that most of the browsers does not support DOM. It is away to manipulate the
static content.

DHTML is not a technology; rather, it is the combination of three different

technologies, client-side scripting (JavaScript or VBScript), cascading style sheets and
document object model.

Advantages:
Size of the files are compact in compared to other interactional media like Flashor
Shockwave, and it downloads faster.

It is supported by big browser manufacturers like Microsoft and [Link]

flexible and easy to make changes.

Disadvantages:
It is not supported by all the browsers. It is supported only by recent browserssuch as
Netscape 6, IE 5.5, and Opera 5 like browsers.

Implementation of different browsers are different. So if it worked in onebrowser, it might not

necessarily work the same way in another browser.

4.13 Events and buttons

An event is defined as changing the occurrence of an object.

It is compulsory to add the events in the DHTML page. Without events, therewill be no
dynamic content on the HTML page.

1 onchange - It occurs when the user changes or updates the value of an object.

2 onclick - It occurs or triggers when any user clicks on an HTML element.3

ondblclick - when user clicks on an HTML element two times together. 4 onload- It

occurs when an object is completely loaded.

5 onkeydown - It triggers when a user is pressing a key on a keyboard device.

6 onkeypress - It triggers when the users press a key on a keyboard.

7 onmouseover - It occurs when a user moves the cursor over an HTML object.

8 onsubmit - It is triggered when user clicks a button after submission of aform.

Ex.
<script type="text/javascript">
function ChangeText(ctext)
{
[Link]=" Hi Gopal! ";
}
</script>

<body>
<font color="red"> Click on the Given text for changing it: <br>
</font>
<font color="blue">
<h1 onclick="ChangeText(this)"> Hello Gopal! </h1>
</font>
</body>

buttons
In dhtml we can create button using <button> Tag.

<body>
<p id="demo"> This text changes color when click on the following differentbuttons.
</p>
<button onclick="change_Color('green');"> Green </button>
<button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">

function change_Color(newColor) {
var element = [Link]('demo').[Link] = newColor;
}
</script>

HTML Basics for Web Design
100% (1)
HTML Basics for Web Design
31 pages
HTML Tags: Basics and Usage Guide
No ratings yet
HTML Tags: Basics and Usage Guide
4 pages
Ncit 121 Basic HTML Web Programming
No ratings yet
Ncit 121 Basic HTML Web Programming
111 pages
Unit1 HTML
No ratings yet
Unit1 HTML
35 pages
HTML Anchor Elements Guide
No ratings yet
HTML Anchor Elements Guide
56 pages
HTML Fundamentals for Web Development
No ratings yet
HTML Fundamentals for Web Development
28 pages
HTML Assignment (N.varshitha)
No ratings yet
HTML Assignment (N.varshitha)
14 pages
Building Blocks of HTML
No ratings yet
Building Blocks of HTML
82 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
24 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
6 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
53 pages
Web Designing Notes (Unit 1-5)
No ratings yet
Web Designing Notes (Unit 1-5)
46 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
11 pages
Understanding HTML and Its Components
No ratings yet
Understanding HTML and Its Components
7 pages
HTML Document Structure Overview
No ratings yet
HTML Document Structure Overview
16 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
9 pages
Introduction to Web Applications and HTML
No ratings yet
Introduction to Web Applications and HTML
27 pages
HTML Basics Using Notepad
No ratings yet
HTML Basics Using Notepad
13 pages
Introduction to HTML Basics and Features
No ratings yet
Introduction to HTML Basics and Features
42 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
44 pages
HTML Basics: Elements, Tags, and Structure
No ratings yet
HTML Basics: Elements, Tags, and Structure
54 pages
Writing Web Pages with HTML Basics
No ratings yet
Writing Web Pages with HTML Basics
98 pages
Simple HTML Document Structure
No ratings yet
Simple HTML Document Structure
18 pages
Avd CH 1
No ratings yet
Avd CH 1
48 pages
HTML
No ratings yet
HTML
14 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
21 pages
HTML Notes
No ratings yet
HTML Notes
16 pages
Web Designing Basics and HTML Elements
No ratings yet
Web Designing Basics and HTML Elements
28 pages
R&D HTML
No ratings yet
R&D HTML
14 pages
Introduction to HTML5 Basics
No ratings yet
Introduction to HTML5 Basics
110 pages
HTML Basics for Class 8 Students
No ratings yet
HTML Basics for Class 8 Students
8 pages
Introduction to HTML Basics and Structure
No ratings yet
Introduction to HTML Basics and Structure
99 pages
Evolution of HTML: A Historical Overview
No ratings yet
Evolution of HTML: A Historical Overview
42 pages
HTML Final File
No ratings yet
HTML Final File
42 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
5 pages
Basic HTML Document Structure Guide
No ratings yet
Basic HTML Document Structure Guide
16 pages
HTML Basics: Essential Tags Guide
No ratings yet
HTML Basics: Essential Tags Guide
21 pages
HTML Basics and Common Tags
No ratings yet
HTML Basics and Common Tags
23 pages
Web Programming
No ratings yet
Web Programming
33 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
10 pages
HTML5
No ratings yet
HTML5
13 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
26 pages
HTML, CSS, and PHP Basics Guide
No ratings yet
HTML, CSS, and PHP Basics Guide
48 pages
Introduction to HTML Basics and Structure
No ratings yet
Introduction to HTML Basics and Structure
178 pages
HTML, CSS, and Bootstrap Basics Guide
No ratings yet
HTML, CSS, and Bootstrap Basics Guide
148 pages
HTML Links: Anchor Tag Explained
No ratings yet
HTML Links: Anchor Tag Explained
30 pages
HTML Notes
No ratings yet
HTML Notes
16 pages
Web Technology Basics: HTML, CSS, JS
No ratings yet
Web Technology Basics: HTML, CSS, JS
11 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
37 pages
HTML Basics: Key Tags Explained
No ratings yet
HTML Basics: Key Tags Explained
15 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
33 pages
HTML Web Programming Internship Report
No ratings yet
HTML Web Programming Internship Report
88 pages
HTML Basics and Web Development Guide
No ratings yet
HTML Basics and Web Development Guide
90 pages
Practical File Introduction: HTML Basics
No ratings yet
Practical File Introduction: HTML Basics
13 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
5 pages
Web Technology N
No ratings yet
Web Technology N
72 pages
Introduction to HTML Basics Guide
No ratings yet
Introduction to HTML Basics Guide
9 pages
Virtual Server Provisioning & Migration Guide
No ratings yet
Virtual Server Provisioning & Migration Guide
2 pages
Cloud Application Benchmarking Guide
No ratings yet
Cloud Application Benchmarking Guide
11 pages
HTML Form Elements and Attributes Guide
No ratings yet
HTML Form Elements and Attributes Guide
1 page
Sri Kailash Women's College Image Processing
No ratings yet
Sri Kailash Women's College Image Processing
196 pages
Understanding HTML Iframes and Elements
No ratings yet
Understanding HTML Iframes and Elements
8 pages
HTML Tag Descriptions and Examples
No ratings yet
HTML Tag Descriptions and Examples
2 pages
VB.NET Programming Projects Guide
No ratings yet
VB.NET Programming Projects Guide
2 pages
PL/SQL Programs: Fibonacci, Factorial, and More
No ratings yet
PL/SQL Programs: Fibonacci, Factorial, and More
14 pages
Web Development Curriculum Overview
No ratings yet
Web Development Curriculum Overview
2 pages
Microsoft Word Ribbon and Document Basics
No ratings yet
Microsoft Word Ribbon and Document Basics
1 page
HTML5 Document Metadata and Comments Guide
No ratings yet
HTML5 Document Metadata and Comments Guide
2 pages
Java Inheritance and Access Control Guide
No ratings yet
Java Inheritance and Access Control Guide
173 pages
Network Layer Design Issues Explained
No ratings yet
Network Layer Design Issues Explained
21 pages
Understanding SQL Views and Creation
No ratings yet
Understanding SQL Views and Creation
2 pages
Computer System Components Explained
No ratings yet
Computer System Components Explained
1 page
Tamil Nadu TET Paper II Hall Ticket 2025
No ratings yet
Tamil Nadu TET Paper II Hall Ticket 2025
2 pages
TN Teacher Eligibility Test Hall Ticket 2025
No ratings yet
TN Teacher Eligibility Test Hall Ticket 2025
2 pages
Overview of Microsoft Office Programs
No ratings yet
Overview of Microsoft Office Programs
1 page
C++ Object-Oriented Programming Guide
No ratings yet
C++ Object-Oriented Programming Guide
128 pages
Office Automation and Word Processing Guide
No ratings yet
Office Automation and Word Processing Guide
23 pages
Types of Computers by Data Processing
No ratings yet
Types of Computers by Data Processing
3 pages
Overview of PL/SQL Programming Language
No ratings yet
Overview of PL/SQL Programming Language
1 page
Welcome
No ratings yet
Welcome
3 pages
Sri Ram Nallamani Yadava Institutions
No ratings yet
Sri Ram Nallamani Yadava Institutions
1 page
Java String Operations Example
No ratings yet
Java String Operations Example
1 page
My Mother: A Class 1 Essay
No ratings yet
My Mother: A Class 1 Essay
1 page
Document Formatting and Style Guide
No ratings yet
Document Formatting and Style Guide
2 pages
Operating System Concepts and Functions
No ratings yet
Operating System Concepts and Functions
23 pages
Welcome Speech for teQfest '24 Event
No ratings yet
Welcome Speech for teQfest '24 Event
2 pages
Understanding Computer Functions and Uses
No ratings yet
Understanding Computer Functions and Uses
1 page
SEO Site Analysis Summary Report
No ratings yet
SEO Site Analysis Summary Report
10 pages
UMPT Replacement Procedure Guide
No ratings yet
UMPT Replacement Procedure Guide
21 pages
Microsoft Azure CLI and Resource Management
No ratings yet
Microsoft Azure CLI and Resource Management
22 pages
Living in the IT Era: ICT Insights
No ratings yet
Living in the IT Era: ICT Insights
8 pages
Bigfix 2FA Login Guide
No ratings yet
Bigfix 2FA Login Guide
15 pages
KEB Combivis 6 Parameterization Tool
No ratings yet
KEB Combivis 6 Parameterization Tool
110 pages
Shubham Mahajan: Cybersecurity Analyst Profile
No ratings yet
Shubham Mahajan: Cybersecurity Analyst Profile
2 pages
CN Unit 4 Notes
No ratings yet
CN Unit 4 Notes
27 pages
Ethical AI in International Development
No ratings yet
Ethical AI in International Development
48 pages
SAP VIM Workplace Overview and Functions
No ratings yet
SAP VIM Workplace Overview and Functions
12 pages
Peshawar
No ratings yet
Peshawar
1 page
Search Engine and Mobile Marketing Guide
No ratings yet
Search Engine and Mobile Marketing Guide
33 pages
Two Layers of Web Authoring
No ratings yet
Two Layers of Web Authoring
4 pages
Pamirs-3 Block Diagram Overview
No ratings yet
Pamirs-3 Block Diagram Overview
41 pages
Chatbots in ÖAMTC Customer Service
No ratings yet
Chatbots in ÖAMTC Customer Service
126 pages
Tom Fox's Anatomy Guide for Artists
No ratings yet
Tom Fox's Anatomy Guide for Artists
1 page
Overview of Cybercrime Types and Prevention
No ratings yet
Overview of Cybercrime Types and Prevention
13 pages
Internet in a Box Overview
No ratings yet
Internet in a Box Overview
49 pages
Cloud Computing Concepts Overview
No ratings yet
Cloud Computing Concepts Overview
39 pages
Dos Donts of Internet Safety For Kids - Final
No ratings yet
Dos Donts of Internet Safety For Kids - Final
2 pages
E-Governance: Transforming Public Services
No ratings yet
E-Governance: Transforming Public Services
3 pages
Impact of Social Networks on Youth
100% (1)
Impact of Social Networks on Youth
2 pages
Data Communication Fundamentals Explained
No ratings yet
Data Communication Fundamentals Explained
50 pages
Secure Hospital Management System Project
No ratings yet
Secure Hospital Management System Project
57 pages
SS1 Data Processing Scheme: 3rd Term
No ratings yet
SS1 Data Processing Scheme: 3rd Term
27 pages
Understanding Protocol Architecture
No ratings yet
Understanding Protocol Architecture
32 pages
Freepik License Certificate Overview
No ratings yet
Freepik License Certificate Overview
2 pages
Siemens SIMATIC S7-400H CPU 412-5H Data Sheet
No ratings yet
Siemens SIMATIC S7-400H CPU 412-5H Data Sheet
9 pages
CSEC Office Administration
100% (5)
CSEC Office Administration
116 pages
OEB9B0512 MME POOL Principle ISSUE 1.20 (Duxiaoqin 20140724)
No ratings yet
OEB9B0512 MME POOL Principle ISSUE 1.20 (Duxiaoqin 20140724)
33 pages