HTML AND DHTML
1. HTML and DHTML
1.1 Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language used to
create and design web pages. It provides the basic structure of a web page by defining
elements such as headings, paragraphs, links, images, tables, and forms. HTML uses
tags enclosed within angle brackets to mark up content so that web browsers can
interpret and display it correctly.
HTML is not a programming language; rather, it is a markup language that describes
the structure and presentation of information. Every website on the internet relies on
HTML as its foundational technology.
1.2 Evolution of HTML
HTML has evolved through several versions:
- HTML 1.0 – Basic document structure
- HTML 2.0 – Standardized features
- HTML 3.2 – Support for tables and scripting
- HTML 4.01 – Improved styling and accessibility
- HTML5 – Multimedia support, semantic elements, APIs
HTML5 is the current standard and supports audio, video, canvas, local storage, and
responsive design.
1.3 Introduction to DHTML
DHTML (Dynamic HyperText Markup Language) is not a separate language but a
combination of technologies including HTML, CSS, JavaScript, and the Document
Object Model (DOM). DHTML enables web pages to change dynamically without
reloading the page.
Using DHTML, developers can create interactive features such as drop-down menus,
animations, real-time content updates, and dynamic form validation.
1.4 Difference Between HTML and DHTML
HTML DHTML
Static in nature Dynamic and interactive
Content does not change without reload Content changes without reload
Uses HTML only Uses HTML + CSS + JavaScript
Limited user interaction Rich user interaction
2. HTML Basic Concepts
2.1 HTML Tags
HTML tags are predefined keywords enclosed in angle brackets. Most tags come in
pairs: an opening tag and a closing tag.
Example:
<p>This is a paragraph.</p>
2.2 Attributes
Attributes provide additional information about HTML elements. They are written
within the opening tag.
Example:
<img src="[Link]" alt="Sample Image">
2.3 Case Sensitivity
HTML tags are not case-sensitive, but it is recommended to use lowercase for
consistency and compatibility.
2.4 Comments in HTML
Comments are used to explain code and are ignored by browsers.
Example:
<!-- This is a comment -->
3. Static and Dynamic HTML
3.1 Static HTML
Static HTML pages contain fixed content. Once created, the content does not change
unless the developer manually edits the file.
Characteristics:
Simple and fast
No database interaction
Limited functionality
Example:
<h1>Welcome to My Website</h1>
<p>This content never changes.</p>
3.2 Dynamic HTML
Dynamic HTML pages generate content at runtime based on user interaction or data
from databases.
Characteristics:
- Interactive
- Uses scripting languages
- Content updates dynamically
Example:
<button onclick="alert('Hello User')">Click Me</button>
3.3 Comparison Between Static and Dynamic HTML
Static HTML Dynamic HTML
Fixed content Content changes
Faster loading Slightly slower
No scripting Uses scripting
4. Structure of HTML Documents
4.1 Basic HTML Document Structure
Every HTML document follows a standard structure.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
4.2 DOCTYPE Declaration
The DOCTYPE declaration informs the browser about the HTML version used.
4.3 Head Section
The <head> section contains metadata, title, styles, and scripts.
4.4 Body Section
The <body> section contains visible content displayed in the browser.
5. HTML Elements
5.1 Definition of HTML Elements
An HTML element consists of a start tag, content, and an end tag.
5.2 Types of HTML Elements
5.2.1 Block-Level Elements
These elements start on a new line and occupy full width.
Examples: <div>, <p>, <h1>
<div>This is a block element</div>
5.2.2 Inline Elements
These elements do not start on a new line.
Examples: <span>, <a>, <b>
<span>This is inline text</span>
5.3 Empty Elements
Empty elements do not have closing tags.
Example:
<br>
<hr>
5.4 Semantic Elements
Semantic elements clearly describe their meaning.
Examples: <header>, <footer>, <article>, <section>
6. Linking in HTML
6.1 Hyperlinks in HTML
Hyperlinks allow navigation between web pages.
Example:
<a href="[Link] Example</a>
6.2 Types of Links
6.2.1 External Links
Links to other websites.
<a href="[Link]
6.2.2 Internal Links
Links within the same website.
<a href="[Link]">About Us</a>
6.2.3 Anchor Links
Links to specific sections within a page.
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
6.3 Linking Images
Images can act as hyperlinks.
<a href="[Link]">
<img src="[Link]" alt="Home">
</a>
7. Anchor Attributes (HTML Links)
Anchor attributes are used with the <a> (anchor) tag in HTML to create hyperlinks
that connect one web page to another page, file, email address, or location within the
same page.
Common Anchor Attributes
href (Hyperlink Reference) – Specifies the destination URL.
<a href="[Link] Website</a>
target – Specifies where the linked document will open.
_self – same window
_blank – new tab
<a href="[Link]" target="_blank">Open Page</a>
title – Provides additional information displayed as a tooltip.
<a href="[Link]" title="About Us Page">About</a>
name / id – Used to create internal page bookmarks.
<a id="top"></a>
download – Allows downloading the linked file.
Importance
Enables navigation between pages
Helps in linking documents and resources
Essential for building websites and web applications
8. Image Maps
An Image Map allows different parts of a single image to act as separate clickable
links.
Components
<img> tag with usemap attribute
<map> tag
<area> tag to define clickable regions
Example
<img src="[Link]" usemap="#world">
<map name="world">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="circle" coords="337,300,44" href="[Link]">
</map>
Types of Shapes
rect – rectangle
circle – circular area
poly – polygon shape
Uses
Interactive maps
Product catalogs
Navigation diagrams
9. Meta Information
Meta information describes data about the web page and is placed inside the <head>
section using the <meta> tag.
Example
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
<meta name="keywords" content="HTML, CSS, Web">
<meta name="author" content="John">
Common Meta Tags
charset – character encoding
description – page summary
keywords – search engine keywords
author – page author
viewport – responsive design settings
Importance
Improves SEO (Search Engine Optimization)
Provides page information to browsers and search engines
Helps with responsive web design
10. Image Preliminaries
Image preliminaries refer to the basic concepts and requirements for using images
in HTML webpages.
Common Image Formats
JPEG (.jpg) – photographs
PNG (.png) – transparent images
GIF (.gif) – animations
SVG (.svg) – vector graphics
Basic Image Tag
<img src="[Link]" alt="Sample Image" width="300" height="200">
Important Attributes
src – image source path
alt – alternative text for accessibility
width / height – image size
title – tooltip text
Importance
Enhances webpage appearance
Improves user engagement
Helps convey visual information
11. Layouts, Backgrounds, Colors and
Text, Fonts, Tables
Layouts
Layouts define the structure and arrangement of webpage elements.
Earlier layouts used tables, but modern layouts use CSS, flexbox, and grid.
Example:
<div class="container">
<header>Header</header>
<section>Main Content</section>
</div>
Backgrounds
Backgrounds define the background color or image of a webpage.
Example:
<body style="background-color: lightblue;">
or
body {
background-image: url("[Link]");
}
Colors and Text
HTML allows styling of text using color attributes.
Example:
<p style="color:red;">Hello World</p>
Text formatting tags:
<b> – bold
<i> – italic
<u> – underline
Fonts
Fonts control the appearance of text.
Example:
<p style="font-family: Arial; font-size: 18px;">Sample text</p>
Tables
Tables organize data into rows and columns.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
12. Frames and Layers
Frames
Frames divide the browser window into multiple sections, each displaying a different
HTML document.
Example:
<frameset cols="30%,70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
Advantages
Display multiple pages simultaneously
Useful for navigation menus
Disadvantages
Poor SEO
Difficult navigation
Now mostly obsolete in modern HTML
Layers
Layers allow positioning elements on top of each other using CSS positioning.
Example:
<div style="position:absolute; top:50px; left:100px;">
Layer Content
</div>
Uses
Pop-ups
Overlays
Animations
13. Audio and Video Support with
HTML Database Integration
Audio Support
HTML5 provides the <audio> tag to embed sound files.
Example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Attributes:
controls
autoplay
loop
Video Support
HTML5 introduced the <video> tag.
Example:
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Attributes:
controls
autoplay
muted
poster
Database Integration
HTML pages can interact with databases using server-side technologies such as:
PHP
Java
Python
[Link]
Example workflow:
HTML form collects data
Server-side script processes data
Data stored in database (e.g., MySQL)
Results displayed on webpage
Example form:
<form action="[Link]" method="post">
<input type="text" name="username">
<input type="submit">
</form>
