Unit 4
HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<! Doctype>
<html>
<head>
<title>your title here</title>
</head>
<body>
<h1> this is the heading </h1>
<p> Document content goes here </p>
</body>
</html>
HTML Tags
HTML is a markup language and makes use of various tags to format the content. These tags are
enclosed within angle braces. Except few tags, most of the tags have their corresponding
closing tags. For example, has its closing tag and tag has its closing tag etc.
Tags Descriptions
<! Doctype> This tag defines the document type and HTML
version.
<html> This tag encloses the complete HTML
document and mainly comprises of document
header which is represented by<head>
...</head> and document body which is
represented by <body>
...
</body>
tags.
<head> This tag represents the document's header which
can keep other HTML tags like
<title> The <title> tag is used to inside the <head> to
mention the document title.
<body> This tag represents the document's body
which keeps other HTML tags like etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
HTML Commenting
HTML comments are used to leave notes or explanations in the code that are not displayed on
the webpage.
<!-- This is a comment -->
Example
<!-- This is a heading section -->
<h1>Welcome to My Website</h1>
HTML Headers
Headers in HTML are used to define headings. There are 6 levels: <h1> to <h6>, where <h1> is
the largest and <h6> is the smallest.
Example
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
HTML Text Styling
Some basic text styling tags:
Tag Description Example
<b> Bold text <b>Bold Text</b>
<i> Italic text <i>Italic Text</i>
<u> Underlined text <u>Underlined Text</u>
<strong> Important (bold) text <strong>Important</strong>
<em> Emphasized (italic) text <em>Emphasis</em>
Inserting Images
Use the <img> tag to insert images.
<img src="[Link]" alt="Description" width="300" height="200">
src: Path to the image
alt: Alternate text if image cannot be displayed
width and height: Size of the image
Formatting Text with <FONT>
The <font> tag was used in older HTML versions to change font style, size, and color. It is deprecated in
HTML5 and should be replaced with CSS, but here's how it's used:
<font face="Arial" size="4" color="blue">Styled Text</font>
face: Font type (e.g., Arial, Verdana)
size: Font size (1 to 7)
color: Font color
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Features Example</title>
</head>
<body>
<!-- This is a main heading -->
<h1>Welcome to My Webpage</h1>
<h2>Subheading</h2>
<p>This is a <b>bold</b>, <i>italic</i>, and <u>underlined</u> text example.</p>
<p><font face="Courier" size="5" color="green">This text uses the FONT tag.</font></p>
<h3>Image Example:</h3>
<img src="[Link]" alt="Sample Image" width="300" height="200">
</body>
</html>
Special Characters in HTML
Some characters have a special meaning in HTML and must be written using character entities.
Character Entity Code Description
& & Ampersand
< < Less than
> > Greater than
" " Double quote
' ' Single quote
© © Copyright
® ® Registered
₹ ₹ Indian Rupee
Horizontal Rules
The <hr> tag is used to insert a horizontal line (divider) in a webpage.
<p>Above the line</p>
<hr>
<p>Below the line</p>
Line Breaks
The <br> tag inserts a line break (new line) in the text.
<p>Line one<br>Line two</p>
HTML Tables
HTML tables are created using <table>, with rows <tr>, headers <th>, and cells <td>.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Avnish</td>
<td>22</td>
</tr>
</table>
HTML Forms
Forms collect user input using elements like <input>, <textarea>, <select>, and <button>.
<form action="[Link]" method="post">
Name: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
Gender:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<input type="submit" value="Submit">
</form>
Image Maps
An image map allows you to define clickable areas inside an image.
<img src="[Link]" usemap="#workmap" width="400" height="200">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="circle" coords="200,150,50" href="[Link]">
</map>
<META> Tags
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML tutorial">
<meta name="keywords" content="HTML, CSS, Web">
<meta name="author" content="Avnish Khare">
<meta http-equiv="refresh" content="30"> <!-- Refresh every 30 sec -->
</head>
<FRAMESET> Tags (Obsolete in HTML5)
Used to divide the browser window into multiple frames. Replaced by CSS Flexbox or iframes in modern
HTML.
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
File Formats
Common File Formats Used in Webpages:
Type Extension Description
Image .jpg, .png, .gif, .svg, .webp Used in <img> tags
Audio .mp3, .wav, .ogg Used in <audio> tag
Video .mp4, .webm, .ogg Used in <video> tag
Text .html, .css, .js Web source files
Document .pdf, .docx Linked using <a href="[Link]">
Common Image Formats:
Supports
Format Description Best For
Transparency
.jpg Compressed, small size No Photos, backgrounds
.png Lossless, good quality Yes Logos, icons, detailed images
.gif Supports animation Yes Simple animations
.svg Vector graphics (scalable) Yes Logos, illustrations
.webp
Modern, small and high- Faster-loading modern
Yes
quality websites