1.
HTML Concept
Introduction:
HTML (HyperText Markup Language) is the standard markup language for creating
web pages. It structures content into text, images, links, tables, and multimedia. The
"HyperText" part refers to the linking of documents, while "Markup Language" means it
uses predefined tags to mark content.
Versions of HTML:
● HTML 1.0 (1991): Basic version, only supported simple text.
● HTML 2.0 (1995): Introduced forms and tables, first standard by IETF.
● HTML 3.2 (1997): Added scripting, applets, and improved text presentation.
● HTML 4.01 (1999): Supported CSS, multimedia embedding, scripting.
● XHTML (2000s): A stricter XML-based HTML.
● HTML5 (2014 – present): Current version, supports multimedia (<audio>,
<video>), semantic tags (<header>, <footer>), canvas, offline storage, and
responsive features.
Applications of HTML:
● Create static web pages.
● Embed graphics, audio, video.
● Collect user inputs via forms.
● Build the base for dynamic pages using JavaScript and CSS.
Editors:
● Simple text editors: Notepad, Notepad++.
● Code editors: Visual Studio Code, Sublime Text, Atom.
● WYSIWYG editors: Adobe Dreamweaver, CoffeeCup (design without coding).
- by Kumari Sneha
2. Structure of an HTML Document
Every HTML page follows a structure:
<!DOCTYPE html> <!-- Declares HTML5 -->
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="Learning HTML basics">
<meta name="keywords" content="HTML, CSS, Web">
<meta name="author" content="Your Name">
</head>
<body bgcolor="lightblue" text="black">
<h1>Welcome to HTML</h1>
<p>This is my first webpage.</p>
</body>
</html>
Breakdown:
● <!DOCTYPE html> → Defines the version (HTML5).
● <html> → Root tag.
● <head> → Metadata (title, CSS, scripts).
● <title> → Browser tab title.
● <meta> → Defines information about the page.
● <body> → Main content (text, images, forms).
Body Attributes (old but still seen):
● bgcolor="red" → Sets background color.
● text="blue" → Sets text color.
● link="green" → Link color.
● vlink="purple" → Visited link color.
● alink="yellow" → Active link color.
- by Kumari Sneha
3. Paragraph and Text Formatting Tags
● <p> → Defines a paragraph.
● <br/> → Inserts a line break.
● <hr/> → Inserts a horizontal line.
● <b> → Bold text.
● <i> → Italic text.
● <u> → Underlined text.
● <strong> → Bold with semantic meaning (important).
● <em> → Italics with semantic meaning (emphasis).
● <small> → Makes text smaller.
● <big> (deprecated) → Enlarges text.
● <font> (deprecated) → Set font face, size, color.
● <mark> → Highlights text.
● <del> → Strikethrough text (deleted).
● <ins> → Inserted text (underlined).
● <sub> → Subscript (H₂O).
● <sup> → Superscript (X²).
Example:
<p>This is <b>bold</b>, <i>italic</i>, <u>underlined</u>, and
<mark>highlighted</mark> text.</p>
4. <marquee> and List Tags
Marquee (deprecated in HTML5):
<marquee behavior="scroll" direction="left" scrollamount="5">Scrolling
Text</marquee>
Attributes:
● behavior → scroll, slide, alternate.
● direction → left, right, up, down.
● scrollamount → Speed.
- by Kumari Sneha
List Tags:
● <ol> → Ordered list (numbers, roman numerals, alphabets).
● <ul> → Unordered list (bullets, circles, squares).
● <li> → List item.
Example:
<ol type="A" start="3">
<li>First</li>
<li>Second</li>
</ol>
<ul type="square">
<li>Apple</li>
<li>Mango</li>
</ul>
5. Definition Lists and Links
Definition Lists:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Links (<a> tag):
<a href="[Link] target="_blank">Google</a>
Attributes:
● href → Destination URL.
● target="_blank" → Opens in new tab.
● title → Tooltip text.
● download → Download link.
- by Kumari Sneha
6. Adding Graphics and Multimedia
● <img src="[Link]" alt="Image" width="300" height="200"> → Inserts image.
● <audio controls autoplay loop> → Embeds audio.
● <video controls autoplay muted loop> → Embeds video.
● <embed> → Embeds external content.
● <canvas> → Draw graphics via JavaScript.
7. Tables in HTML
<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>Student Info</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>22</td>
</tr>
<tr>
<td>Priya</td>
<td>20</td>
</tr>
</table>
Attributes:
● border → Table border.
● cellpadding → Space inside cell.
● cellspacing → Space between cells.
● align → Position (left, center, right).
Tags:
● <caption> → Table title.
● <thead> <tbody> <tfoot> → Grouping rows.
- by Kumari Sneha
8. Frames and Iframes
Frameset (outdated):
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
Iframe (modern):
<iframe src="[Link] width="600" height="400"
frameborder="0"></iframe>
Attributes:
● src → Source URL.
● width, height.
● frameborder.
● allowfullscreen.
9. HTML Forms
Form Attributes:
● action → Where data is sent.
● method → GET or POST.
● enctype → Data encoding type.
Form Elements:
● <input type="text"> → Single-line text.
● <input type="password"> → Hidden characters.
● <input type="radio"> → Radio option.
● <input type="checkbox"> → Checkbox option.
● <input type="file"> → File upload.
● <input type="submit"> → Submit button.
● <textarea> → Multi-line input.
● <select><option> → Dropdown menu.
- by Kumari Sneha
● <button> → Clickable button.
10. Designing Form using Table
<form>
<table border="1" cellpadding="5">
<tr>
<td>Username:</td>
<td><input type="text" name="user"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Login"></td>
</tr>
</table>
</form>
11. <div> Tag
● <div> is a block-level container used for grouping content.
● It helps with layout and CSS styling.
Example:
<div style="background-color:lightyellow; padding:15px; border:1px solid black;">
<h2>Section Title</h2>
- by Kumari Sneha
<p>This content is inside a styled div.</p>
</div>
Important HTML Tags:
● <h1> to <h6> → Defines headings.
● <p> → Creates paragraph.
● <a> → Hyperlink.
● <img> → Insert image.
● <br> → Line break.
● <hr> → Horizontal line.
● <table> → Creates table.
● <form> → Collects input from user.
● <input> → Form input element.
● <textarea> → Multi-line text.
● <select> → Dropdown menu.
● <iframe> → Embeds webpage.
● <div> → Block container.
● <span> → Inline container.
● <script> → Embeds JavaScript.
● <link> → Links external CSS file.
● <meta> → Defines metadata.
- by Kumari Sneha
Metadata
Metadata means “data about data.”
In HTML, metadata provides information about the webpage that is not displayed
directly on the page but is used by browsers, search engines, and other services to
understand the page better. Metadata is always written inside the <head> section of an
HTML document.
Common Metadata Tags in HTML
1. Title Tag (<title>)
○ Defines the title of the page (shown in the browser tab and search engine
results).
<title>My Portfolio Website</title>
2. Meta Charset (<meta charset="">)
○ Defines the character encoding of the page (e.g., UTF-8 supports most
languages).
<meta charset="UTF-8">
3. Meta Description (<meta name="description">)
○ Provides a summary of the page content (important for SEO).
<meta name="description" content="Learn HTML, CSS, and Web Development with
easy tutorials.">
4. Meta Keywords (<meta name="keywords">)
○ Specifies keywords for search engines (not much used today).
<meta name="keywords" content="HTML, CSS, JavaScript, Web Design">
- by Kumari Sneha
5. Meta Author (<meta name="author">)
○ Defines the name of the webpage’s author.
<meta name="author" content="Sneha Sharma">
6. Meta Viewport (<meta name="viewport">)
○ Controls how the page is displayed on different devices (for responsive
design).
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7. Meta Refresh (<meta http-equiv="refresh">)
○ Refreshes or redirects a page after a set time.
<meta http-equiv="refresh" content="5;url=[Link]
- by Kumari Sneha
