UNIT- 4
HTML
HTML Introduction
HTML stands for Hyper Text Markup Language, which is the core language used to
structure content on the web.
•It is a markup language, not a programming language. This means it annotates text to define
how it is structured and displayed by web browsers.
•It is a static language, meaning it does not inherently provide interactive features but can be
combined with CSS for styling and JavaScript for interactivity.
Basic HTML Code Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
HTML Page Structure
•<!DOCTYPE html> - This is the document type declaration, not a tag. It declares that the
document is an HTML5 document.
•<html> - This is called the HTML root element. All other elements are contained within it.
•<head> - The head tag contains the "behind the scenes" elements for a webpage. Elements
within the head aren't visible on the front end of a webpage. Typical elements inside the <head>
include:
• <title>: Defines the title displayed on the browser tab.
• <meta>: Provides information like the character set or viewport settings.
• <link>: Links external stylesheets or resources.
• <style>: Embeds internal CSS styles.
• <script>: Embeds JavaScript for functionality.
•<title> - The title is what is displayed on the top of your browser when you visit a website and
contains the title of the webpage that you are viewing.
•<h2> - The <h2> tag is a second-level heading tag.
•<p>- The <p> tag represents a paragraph of text.
•<body> - The body tag is used to enclose all the visible content of a webpage. In other words,
HTML TAGS
Tag Description
<html> The root element of an HTML document
<head> Contains meta-information about the webpage
<body> Contains the visible content of the webpage
<h1> to <h6> Headings of various levels (h1 being the largest)
<p> Defines a paragraph
<a> Defines a hyperlink
<img> Embed an image
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<table> Defines a table
<form> Defines an HTML form
HTML Attributes
Attributes provide additional information about an element. They are placed inside the opening tag
and are written as name="value". Common attributes include class, id, href, and src.
Example:
<a href="[Link] Example</a>
•href is an attribute of the <a> tag that defines the URL of the link.
Applications of HTML
•Web Development: HTML is the backbone of every webpage. It structures the content and
integrates multimedia, hyperlinks, and more.
•Web Applications: HTML, in combination with CSS and JavaScript, powers complex web
applications (e.g., Google Docs, Trello).
•Emails: HTML emails use table-based layouts and embedded media to deliver rich, interactive
content.
•Mobile App Development: HTML5 is used with frameworks like PhoneGap to build mobile
apps for iOS and Android.
Limitations of HTML
•No Logic or Functionality: HTML cannot handle complex logic, interactivity, or dynamic
content on its own. It requires JavaScript for such tasks.
•Limited Styles: While HTML can handle basic styles via the style attribute, it is typically
complemented by CSS for complex styling and layout.
HTML5: Enhancements and New Features
HTML5 Introduced several powerful features that improve the structure and functionality of
web pages, including:
•Semantics: New tags like <article>, <footer>, <header>, and <section> to improve the
meaning of the content.
•Multimedia: <audio> and <video> tags for embedding audio and video without plugins.
•APIs: New APIs like Geolocation, Web Storage, and Canvas allow for more dynamic content
and interactive websites.
Commenting in HTML
•Used to write notes in code that are not displayed on the webpage.
•Helps developers understand the structure or purpose of sections.
Example:
<!-- This is a comment. It won’t appear in the browser -->
<p>This is visible text.</p>
Headers in HTML
•Define headings and subheadings on a webpage.
•<h1> is the largest heading, <h6> is the smallest.
•Example:
<h1>Main Title (h1)</h1>
<h2>Section Heading (h2)</h2>
<h3>Subsection Heading (h3)</h3>
Text Styling in HTML
You can style text using tags:
•Bold: <b> or <strong>
•Italic: <i> or <em>
EXAMPLE:
•Underline: <u>
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
•Strikethrough: <s>
<p>H<sub>2</sub>O = Water</p>
•Superscript / Subscript: <sup>, <sub>
<p>2<sup>3</sup> = 8</p>
Images in HTML
•Insert images using <img> tag.
•Attributes: src (image path), alt (alternative text), width/height.
Example:
<img src="[Link]" alt="Beautiful Flower" width="300" height="200">
Formatting Text with <font>
Note: The <font> tag is deprecated in HTML5 (not recommended now). Instead, we use CSS for styling.
Example:
<p><font color="red" size="5" face="Arial">This is red, size 5, Arial text</font></p>
Special Characters in HTML
HTML uses character entities for symbols not on the keyboard (like &, <, >).
Example:
<p>< = Less than sign (<)</p>
<p>> = Greater than sign (>)</p>
<p>& = Ampersand (&)</p>
<p>© = © Copyright</p>
<p>® = ® Registered Trademark</p>
<p> = Non-breaking space</p>
Horizontal Rules
The <hr> tag creates a horizontal line to separate sections.
•Self-closing tag (doesn’t need </hr>).
•Can be styled with attributes (size, color, width) or CSS.
Example:
<p>Section 1</p>
<hr>
<p>Section 2</p>
<hr size="5" color="blue" width="50%">
Line Breaks
•In HTML, line breaks are added using <br> tag.
Example:
<p>This is first line.<br>This is second line.</p>
Tables
•Tables are created using <table>, <tr> (row), <th> (header), <td> (data).
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Amit</td>
<td>22</td>
</tr>
<tr>
<td>Riya</td>
<td>21</td>
</tr>
</table>
Forms
•Forms collect user input using <form>, <input>, <textarea>, <select>.
Example:
<form action="[Link]" method="post">
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Gender:
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female <br><br>
<input type="submit" value="Submit">
</form>
Image Maps
•Image maps allow clickable areas inside an image using <map> and <area>.
Example:
<img src="[Link]" usemap="#worldmap" width="400" height="200">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="[Link]" alt="India">
<area shape="circle" coords="350,150,50" href="[Link]" alt="USA">
</map>
Notes
•Notes in HTML are written as comments so they don’t appear on the webpage.
Example:
<!-- This is a note/comment in HTML --> <p>Visible text here.</p>
<META> Tags
•<meta> tags provide metadata (information about the web page).
•They are placed inside <head> and not displayed on the page.
•Common uses:
•Specify character encoding
•Set keywords/description for SEO
•Refresh/redirect a page
•Control viewport for responsive design
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="description" content="Learn HTML basics like meta and frameset.">
<meta name="keywords" content="HTML, Meta, Frameset, Tutorial">
<meta name="author" content="Rashmi Chaudhary">
<meta http-equiv="refresh" content="10; url=[Link] <!-- Redirect after 10 sec -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive -->
<title>Meta Example</title>
</head>
<body>
<p>Check the page metadata in the source code.</p>
</body>
</html>
<FRAMESET> Tags
•Framesets were used in older HTML to divide the browser window into multiple sections
(frames).
•Each frame could load a separate HTML page.
•Not used in modern HTML5 (replaced by CSS Flexbox, Grid, or <iframe>).
•Still, useful to know historically.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="30%,70%">
<frame src="[Link]"> <!-- Left side frame -->
<frame src="[Link]"> <!-- Right side frame -->
</frameset>
</html>
Attributes:
•cols → divide window vertically (30%,70% means 30% left, 70% right).
•rows → divide window horizontally.
•<frame src="..."> → loads another page into that section.
File Formats in Computers
1. Text File Formats
•.txt → Plain text (no formatting).
•.doc / .docx → Microsoft Word documents (supports formatting, images).
•.pdf → Portable Document Format (fixed layout, cross-platform).
•.rtf → Rich Text Format (basic formatting).
•.html / .htm → Web page source files.
2. Data File Formats
•.csv → Comma-Separated Values (tabular data).
•.xml → Extensible Markup Language (structured data).
•.json → JavaScript Object Notation (lightweight data exchange).
•.xlsx / .xls → Microsoft Excel spreadsheets.
•.mdb / .accdb → MS Access database.
•.db / .sqlite → Database files.
3. Audio File Formats
•.mp3 → Compressed audio (popular, small size).
•.wav → Uncompressed audio (high quality, large size).
•.aac → Advanced Audio Coding (used in iTunes, YouTube).
•.flac → Lossless audio compression.
4. Video File Formats
•.mp4 → Most widely used (good quality, small size).
•.avi → Older format, larger file size.
•.mkv → Supports multiple subtitles/audio tracks.
•.mov → Apple QuickTime video format.
•.wmv → Windows Media Video.
5. Image File Formats
•.jpg / .jpeg → Compressed image, best for photos (lossy compression).
•.png → Supports transparency, lossless compression, good for logos/icons.
•.gif → Supports animations, only 256 colors.
•.bmp → Bitmap, uncompressed, large size.
•.tiff → High-quality images, used in printing/scanning.
•.svg → Scalable Vector Graphics (vector-based, resolution independent).
•.webp → Modern format, smaller size + supports transparency.
6. Compressed / Archive Formats
•.zip → Most common compressed file format.
•.rar → Another archive format (requires WinRAR).
•.7z → High compression ratio.
•.[Link] → Linux/Unix compressed archive.
What is a Web Page?
A web page is a document on the World Wide Web (WWW), written in HTML (HyperText Markup Language), that
can be viewed in a web browser.
It may contain text, images, audio, video, hyperlinks, and interactive elements.
Every web page is identified by a URL (Uniform Resource Locator).
Example: [Link]
Types of Web Pages
[Link] Web Pages
1. Content is fixed and does not change unless the developer updates the source code.
2. Written mainly using HTML, CSS.
3. No interaction with databases.
4. Example: A company’s "About Us" page.
[Link] Web Pages
1. Content changes based on user interaction, database queries, or server responses.
2. Built using server-side scripting (PHP, JSP, [Link], [Link]).
3. Example: Facebook feed, Online shopping cart.
[Link] Web Pages
1. Designed to adapt to different screen sizes (desktop, tablet, mobile).
2. Uses CSS media queries, flexible grids, and images.
3. Example: News websites, e-commerce sites (Flipkart, Amazon).
[Link] Web Pages (PWA)
1. Web apps that work like native mobile apps.
2. Can work offline, send push notifications.
3. Example: Twitter Lite.
Example of a Responsive Web Page
<!DOCTYPE html>
<html>
<head>
<title>Responsive Web Page Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1;
min-width: 300px;
padding: 20px;
text-align: center;
background: lightblue;
margin: 5px;
}
/* Media query for mobile devices */
@media (max-width: 600px) {
.box {
flex: 100%; /* Full width on small screens */
}
}
</style>
</head>
<body>
<h2 style="text-align:center;">Responsive Web Page</h2>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Explain client and server side Web Pages
Client-Side Web Pages
These are web pages where most of the work (rendering, interaction, some processing) happens in the user’s
browser.
Characteristics:
•Built using HTML, CSS, JavaScript.
•Runs on the client’s machine (browser).
•Faster response because no round trip to the server is required for every action.
•Cannot directly interact with databases (for security reasons).
•Used for form validations, animations, interactivity.
Example:
When you click a button and some text appears/disappears using JavaScript—this is client-side.
Example: Client-Side Web Pages
<!DOCTYPE html>
<html>
<head>
<title>Client-Side Example</title>
<script>
function showMessage() {
[Link]("msg").innerHTML = "Hello! This is Client-side Script.";
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
<p id="msg"></p>
</body>
</html>
Server-Side Web Pages
These are web pages where the main processing happens on the web server before the page is sent to the client’s
browser.
Characteristics:
•Built using PHP, [Link], JSP, [Link], Python (Django/Flask) etc.
•Interacts with databases (MySQL, Oracle, MongoDB).
•Content is dynamic, generated based on user requests.
•Slower than client-side for small tasks (needs request-response cycle).
•Used for login systems, e-commerce carts, dashboards.
Comparison Table
Feature Client-Side Web Page Server-Side Web Page
Execution Runs in browser (client machine) Runs on server
Languages HTML, CSS, JavaScript PHP, [Link], JSP, Python, etc
Database Access Not possible Possible
Speed Fast for small tasks Slower (server round-trip)
Security Less secure (code visible) More secure (logic hidden)
Examples Form validation, animations Login page, online banking