HTML SYLLABUS

Module 1: Introduction to Web Development

 What is a website?
 What is Web Development?
 Types of Web Development: Frontend, Backend, Full Stack
 MEAN vs MERN Stack Overview
 Frontend vs Backend vs Database Roles
 Text Editors vs IDEs
 Project Directory Structure
 Opening Projects in VS Code

Module 2: Introduction to HTML

 What is HTML?
 History and Evolution of HTML
 Differences between HTML4 and HTML5
 How Browsers Interpret HTML
 Basic Structure of an HTML Document

Module 3: HTML Basics

 HTML Tags, Elements, and Attributes
 Headings (<h1> to <h6>)
 Paragraphs (<p>)
 Buttons (<button> and its attributes)

Module 4: HTML Basic Formatting

 Text Formatting Tags:
o <b>, <strong>, <i>, <em>, <u>.…..
o Line and Block Separators: <br>, <hr>

Module 5: HTML Anchor (Link) Tags

 Anchor Tag Syntax and Use
 Types of Links: Online, Offline, Local
 Target Attributes (_blank, _self, _parent)

Module 6: HTML Lists

 Types of Lists:
o Unordered List (<ul>)
o Ordered List (<ol>)
o Definition List (<dl>, <dt>, <dd>)
CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
Module 7: HTML Forms and Input
 <form> Element and Attributes
 Common Form Controls:
o <input> (types: text, password, checkbox, radio, email, file, number, etc.)
o <select>, <textarea>, <button>
 <fieldset> and <legend>

Module 8: HTML Media

 Embedding Media:
o Images: <img>
o Video: <video>, <source>
o Audio: <audio>, <source>
o Iframe: <iframe>
o Figures with Captions: <figure>, <figcaption>

Module 9: HTML Tables

 Table Structure:
o Tags: <table>, <tr>, <th>, <td>, <caption>
 Table Attributes (scope, colspan, rowspan, etc.)

Module 10: Semantic and Non-Semantic Tags

 Semantic Tags: <header>, <footer>, <nav>, <section>, <article>, <aside>, <main>, <figure>,
<figcaption>, <time>
 Non-Semantic Tags: <div>, <span>
 Comparison and Benefits
 id vs class Attributes

Module 11: HTML5 New Features

 Canvas, SVG, Web Storage API, Geolocation API
 Web Workers, Drag and Drop API, Global Attributes

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 1: INTRODUCTION

What is website?

A website is a collection of one or more web pages that may contain text, images, media, and other
digital content. These pages are hosted on a web server and can be accessed via the internet using a
browser.

What is Web Development?

Web development is the process of creating, building, and maintaining websites. It involves both the
design and functionality of websites, and can range from creating simple static pages to complex
web applications.

Types of Web Development

1. Frontend development:
Where a developer have the knowledge of frontend.eg HTML, CSS, JS, BOOTSTRAP
2. Backend development:
Where a developer have the knowledge of backend.eg JAVA, PYTHON, DOTNET, and PHP
3. Full stack Development:
Where a developer has the knowledge of frontend, backend, database, deployment and
maintenance
4. MEAN stack Development:
Where a developer has the knowledge of MONGODB, EXPRESSJS, ANGULAR, NODE
(framework of JS)
5. MERN stack Development:
Where a developer has the knowledge of MONGODB, EXPRESSJS, REACTJS, NODE
(framework of JS)

Frontend VS Backend VS Database

Frontend:
The client-side part of a website — everything a user sees and interacts with. Technologies used:
HTML, CSS, and JS.
Backend:
The server-side logic that powers the website, including user authentication, database interactions,
and application logic. Technologies include: JAVA, PYTHON, DOTNET, PHP, and JAVASCRIPT

Database:
The system used to store and manage data. Common database systems include: SQL, MYSQL,
POSTGRESQL, MONGODB

Text Editor and IDES:

Text editors:
Lightweight tools used to write and edit code. Examples:notepad, VScode, Notepad++.
IDES: Integrated Development Environment
Comprehensive software that provides tools for writing, compiling, debugging, and executing code.
Examples:VScode (with extensions) .

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
Directory Setup
projectname/
|
|----- assets/ # Folder to store all static files like images, CSS, etc.
| | CSS/ # CSS files (optional)
| | images/ # Image files (optional)
|---- index.html # Main HTML file for the project

Opening VSCODE
We have various steps to open vscode in project directory
a) By opening vs code:
Open vs code
Goto fie
Click on open folder (ctrl + k ctrl + o)
Choose your file
b) By opening vs code from context menu
Open the project directory.
Right click in the blank space
Choose vs code (if window 11, goto show more options, click open with vscode)
c) By command prompt
Open cmd in the project directory
Type “ code .”

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 2: Introduction to HTML
What is HTML?

HTML (Hypertext Markup Language) is the basic language used to create web pages and applications.
It uses tags to organize content like headings, paragraphs, links, images, lists, and forms. HTML helps
browsers display the content correctly. It works with CSS for styling and JavaScript for interactivity,
making it essential for building websites and enabling navigation through links.

History and evolution of HTML

Version Year Key Features/Changes

HTML 1.0 1991 The first version, created by Tim Berners-Lee, introduced
basic tags for structuring text and linking documents.
HTML 2.0 1995 Standardized the language with new elements like forms
and tables.
HTML 3.2 1997 Added support for tables, styles, applets, and scripting.
HTML 4.01 1999 Improved support for multimedia, CSS, and separation of
structure and style. Focused on accessibility and web
standards.
XHTML 1.0 2000 A stricter, XML-based version of HTML, requiring well-
formed code.
HTML 5.0 2014 Major update, added support for audio, video, and new
semantic elements like <article>, <section>, and <nav>.
Enhanced support for mobile and modern web apps.
HTML 5.2 2017 Added new features for accessibility and security,
including the <dialog> element.
HTML Living Ongoing Continuous updates, including new APIs, better
Standard accessibility, and integration with modern web
technologies like AR and VR.

Difference between HTML4 & HTML5

Feature HTML4 HTML5

Doctype Complex and lengthy: <!DOCTYPE Simple and short:
Declaration HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE html>
4.01//EN"
"http://www.w3.org/TR/html4/strict.dt
d">
Multimedia Relied on external plugins like Flash for
Native support for
Support audio and video. audio and video with
<audio> and <video>
tags.
New Elements Basic structural elements like <div>, New semantic
<span>. elements like
<header>, <footer>,
<section>, <article>,
and more.
Forms Basic input types like text, password, New input types like
checkbox, and radio. email, date, tel,
CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 number, etc.
JavaScript Limited support for dynamic content. Built-in support for
Features features like local
storage, geolocation,
and real-time apps
Outdated Tags Included deprecated tags like <font>, Removed outdated
<marquee>, <blink>. tags; now relies on
CSS for styling and
animations.
Character Character encoding was not Uses <meta
Encoding standardized or required. charset="UTF-8"> for
standardized
encoding.
Offline Support No native offline support for web apps. Supports offline apps
with features like
local storage and
application cache.
Mobile Support Not optimized for mobile devices. Built-in support for
mobile devices and
touch events.

How web browsers interpret HTML

 Request and Receive HTML: The browser sends a request to the server, which responds with
the HTML document and other resources like CSS, JavaScript, and images.
 HTML Parsing: The browser parses the HTML document to build the Document Object
Model (DOM). This tree-like structure represents the page's content and elements (e.g.,
headings, paragraphs, images).
 CSS Styling: The browser retrieves and applies CSS styles (from internal or external sources)
to the DOM, determining the visual layout and design of the page.
 JavaScript Execution: The browser processes any JavaScript code in the page, which can
dynamically modify the DOM and interact with the page, enabling dynamic behavior and
interactivity.
 Rendering: The browser combines the DOM, styles, and executed JavaScript to render the
final page. It converts the content into a visual layout, displaying the page for the user.
 Event Handling: The browser listens for user interactions (like clicks, form submissions, or
keyboard inputs) and uses JavaScript to respond to these events, keeping the page
interactive.

Basic structure of an HTML document:

The basic structure of an HTML document consists of several key elements that define the content
and layout of a web page. Here's a simple breakdown:

 <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 here).
 <html>: The root element that contains the entire HTML document.
 <head>: Contains meta-information about the document, like the character encoding (<meta
charset="UTF-8">), viewport settings, and links to stylesheets.

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
  <title>: Specifies the title of the webpage, shown in the browser tab.
 <body>: Contains the content of the webpage, including headings, paragraphs, links, images,
etc.
 <header>: Represents introductory content or navigation.
 <nav>: Contains navigation links (e.g., menus).
 <section>: Represents a section of content, often with a heading.
 <footer>: Contains footer information such as copyright or contact details

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

</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 3: HTML BASICS
Introduction to tags element and attributes
Tags:
 Tags are the building blocks of HTML.
 They tell the browser how to display the content.
 Tags are usually written in angle brackets.
 Ex: <p>This is a paragraph.</p>

Attributes
 Attributes provide extra information about an element.
 They are written inside the opening tag.
 They usually come in name="value" pairs.
 Ex: <imgsrc="image.jpg" alt="A beautiful image"> // src and alt are attributes of the <img>
tag.

Elements
 An element includes the opening tag, the content, and the closing tag.
 The whole line is an HTML element.
 Elements can also be empty (no content inside)
 Ex: <h1>Welcome to My Website</h1> or, <br>

HTML Heading Tags:

HTML heading tags are used to define headings in a webpage. They represent the structure and
hierarchy of content, much like titles and subtitles in a document. These tags help organize the
content for readers, search engines, and assistive technologies like screen readers.
There are six levels of heading tags in HTML:

Tag Description Default Appearance

<h1> Main heading – used for page title Largest, bold
<h2> Subheading – major sections Slightly smaller
<h3> Sub-subheading Smaller
<h4> Deeper subsection Smaller still
<h5> Minor heading Very small
<h6> Least important heading Smallest, bold

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CLASS</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
HTML Paragraph Tags:

The HTML paragraph tag is used to define blocks of text as paragraphs. It helps structure content
into readable sections and adds spacing between chunks of text. Paragraphs make content easier to
read and improve overall layout and flow on a webpage.

Tag Description Default Appearance

<p> Defines a paragraph of text Block level, margin in before and after the tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CLASS</title>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laboriosam autem quod
cum maxime corrupti voluptates a! Placeat tempora consequuntur ex sunt nulla aut ratione
hic quos ad dicta numquam beatae, doloribus exercitationem dolorem.</p>
</body>
</html>

HTML Button Tags:

The HTML <button> tag is used to create clickable buttons on a webpage. These buttons can trigger
actions like submitting forms, running JavaScript functions, or interacting with user input. They are
interactive elements commonly used in forms and user interfaces.

Tag Description Default Appearance

<button> Creates a clickable button Regular, clickable and inline-block

HTML Button Tags:

Attributes Purpose
<button>…</buton> Creates a clickable button
<button type=”submit”>…</button> Used to submit the page
<button type=”reset”>…</button> Used to reset the page
<button disabled>…</button> Use to create non clickable button

<!DOCTYPE html>
CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Click Me</button>
<button type="submit">Click Me</button>
<button type="reset">Click Me</button>
<button disabled>Click Me</button>
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 4: HTML BASIC FORMATING
Introduction
HTML (Hypertext Markup Language) uses formatting tags to change the appearance of text on a
webpage. These tags help enhance readability, structure, and emphasis for the user. Most
formatting tags either style the text (like bold or italic) or add structure (like line breaks or horizontal
lines).
Tags Description Example
<b> Bold text <b>Bold Text</b>
<strong> Important text (semantically bold) <strong>Strong Text</strong>
<i> Italic text <i>Italic Text</i>
<em> Emphasized text (semantically italic) <em>Emphasized Text</em>
<u> Underlined text <u>Underlined Text</u>
<ins> Inserted (underlined) text <ins>Inserted Text</ins>
<mark> Marked/highlighted text <mark>Highlighted</mark>
<small> Smaller text <small>Small Text</small>
<del> Deleted (strikethrough) text <del>Deleted Text</del>
<sub> Subscript text H₂O
<sup> Superscript text x²
<br> Line break Line 1<br>Line 2
<hr> Horizontal rule Text<hr>More Text

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Formatting Example with "Satya"</title>
</head>
<body>
<p>this is <b>Satya</b>.</p>
<p>this is <strong>Satya</strong>.</p>
<p>this is <i>Satya</i>.</p>
<p>this is <em>Satya</em>.</p>
<p>this is <u>Satya</u>.</p>
<p>this is <ins>Satya</ins>.</p>
<p>this is <del>Satya</del>.</p>
<p>this is <mark>Satya</mark>.</p>
<p>this is _Satya.</p>
<p>this is ^Satya.</p>
<p>this is <br>Satya.</p>
<hr>
<p>Nested example: <b><i><u>Satya</u></i></b> is bold, italic, and
underlined.</p>
<p>Multiple tags: <mark><strong><em>Satya</em></strong></mark> is highlighted,
strong, and emphasized.</p>
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 5: HTML ANCHOR (LINK TAG)
Introduction
The HTML <a> (anchor) tag is used to create hyperlinks, enabling users to navigate from one
resource to another. These resources can be located online, offline, or within the local file system.
The anchor tag requires the href attribute, which defines the destination URL or path of the link.
Syntax
<a href="URL">Link Text</a>
VSCode: a enter
Types of anchor tag:
Anchor tags can be categorized into three types based on the location of the linked resource:
Online Anchor tag:
An online anchor tag links to an external website or online resource. An active internet connection is
required to access the destination.
<a href="https://www.example.com">Visit Example</a>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag/ Link Tag</title>
</head>

<body>
<a href="https://www.youtube.com/watch?v=KUMWIFi4HCHE">HTML Full Course</a>
</body>

</html>

Offline Anchor tag:

An offline anchor tag links to a file or resource stored locally on the user's computer, such as a
document or image that is not hosted online.
<a href="https://www.example.com">Visit Example</a>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag/ Link Tag</title>
</head>

<body>
<a href="index2.html">Satya Profile</a>

</body>

</html>

Local Anchor tag:

A local anchor tag refers to a page or file located within the same website or project directory. It's
commonly used for internal navigation.
<a href="#abc">Visit Example</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag/ Link Tag</title>
</head>
<body>
<a href="#name">Name</a>
<a href="#about">About</a>
<p id="name">Lorem200</p>
<p id="about">Lorem300</p>
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
Target attributes Anchor tag:
Target attributes decide how the page will open in the tab.
Mainly it has 3 values
target="_blank": Opens the link in a new tab or window.
target="_self": Opens the link in the same tab (default behavior).
target="_parent": Opens the link in the parent frame, if the page is within a nested frame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag/ Link Tag</title>
</head>
<body>
<a href="https://www.cac.edu.in" target="_blank">Go to CAC</a>
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 Module 6: HTML LIST
Introduction
HTML, a list tag is used to display a group of related items in a structured format. Lists help organize
content clearly and improve readability for users. Mainly it is used to store data in listed format.
It is denoted with <li>…</li>. Before the list begins, we must specify the type of the list.
Types of the list
We mainly have 3 types of list present in HTML such as Unordered List, Ordered List, Definition List
a) Unordered List(ul):
These lists have no specific order and is displayed in a bullet point. It is denoted with <ul>…</ul>.
Syntax:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- unordered list example -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>BOOTSTRAP</li>
<li>PYTHON</li>
<li>DJANGO</li>
<li>Digital Marketing</li>
</ul>
<!-- unordered list example -->
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
b) Unordered List(ol):
These lists having specific order and is displayed in a nueric point. It is denoted with <ol>…</ol>.
Syntax:
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ordered list example -->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>BOOTSTRAP</li>
<li>PYTHON</li>
<li>DJANGO</li>
<li>Digital Marketing</li>
</ol>
<!-- ordered list example -->
</body>
</html>

c) Definition List(dl):
These lists having some term and description.
Syntax:
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830
 <!-- Definition list example -->
<dl>
<dt>HTMl</dt>
<dd> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis repellendus
eveniet ipsa voluptatum placeat quasi asperiores labore veniam autem, explicabo iure. At,
voluptates alias veritatis animi ea iusto sint aut quae pariatur quis mollitia magnam vitae
sit consequuntur vero corrupti maiores dolor possimus dignissimos reiciendis?</dd>

</dl>
<!-- Definition list example -->
</body>
</html>

CAC HTML
3rd FLOOR, PRIYADARSHINI MARKET Satya Sir
CRPF SQUARE, BBSR, 751012
+91 9437089830