HTML - Let’s Begin
• Creating First Webpage
We have only two thinks to create webpage
o Editor ( Notepad, Notepad ++, Vs Code, Edit Plus, Sublime Text Editor
etc.)
o Browser ( Chrome, Firefox etc. )
1. Printing Hello HTML in Heading1.
2. Printing your name in Heading1 and “My First Web Page” in
Paragraph.
• What is HTML ?
HTML - Hyper Text Markup Language
HTML is invented by Tims Berner Lee in 1991.
HTML is used to create structure of our website.
o Example
1. Aam Example
2. Real Life Example
HTML - Structure
CSS - Styling
JS - Functionality
-__--- Purpose of HTML Invention
HTML was originally invented to publish and link documents 🗎 together. At that
time its primary focus was to share Scientific Documents and Research Papers.
Example:- Wikipedia
-____----Understanding HTML Structure
• Tags </>
o What is Tag
Something write inside < and > it is tag.
Tag is used to tell the browser how to display content in webpage. As
a Image, As a Link, As a video, audio etc.
• Types of Tag
o Paired Tag
<h1></h1>, <p></p> etc.
o Non-Paired Tag
<img>, <hr>, <br>, <input> etc.
• What is Attribute
Attribute used to tell the extra information about the tag.
Example
<a href="https://google.com">Go to Google</a>
<a title="Central Processing Unit">C.P.U</a>
----___---Heading Tags
-Paragraph Tag
Used to create a Paragarph.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a simple paragraph of text.</p>
</body>
</html>
• Anchor Tag
Used to create links in webpages.
1. Absolute URL:-
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<a href="https://www.google.com"
target="_blank">Google</a>
</body>
</html>
2. Relative URL:-
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<a href="./about.html" target="_blank">About</a>
</body>
</html>
3. Jump to the specific section in html through anchor tag.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<h1>Welcome</h1>
<a href="#info">Jump to Info Section</a>
<h2 id="info">Information Section</h2>
<p>This is some information.</p>
</body>
</html>
• Task
1. Create a basic webpage with a heading and a paragraph.
heading - welcome to My webpage
paragraph - This is my first webpage. I'm learning
HTML!
2. Add a clickable external link (absolute URL) of YouTube.
3. Create two HTML files (index.html and about.html) and link
them together using relative URLs.
index.html - Go To About Page
about.html - Back to Home
4. Create a page with a section link that jumps to a specific part.
----__---Image Tag---__---
Used to insert a image in webpage.
<!DOCTYPE html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<img src="image_url.jpeg" alt="image-
description" width="200" height="200">
</body>
</html>
---___--Attributes---__---
src = path of the image ( online or local )
alt = Image description
width = width of the image
height = height of the image ( optional )
• Formatting Tags
o Basic Formatting Tags
Old vs. New (Recommended) HTML Tags
Old Tag New Tag Purpose
(Recommended)
<b> <strong> Bold text with strong
importance
<i> <em> Italic text with special meaning
<u> <ins> Underline with special meaning
<strike> <del> Strikethrough with meaning
(Deprecated)
---__--Advance Formatting Tags--__--
1. <mark> – Highlights text.
<mark>Important</mark> information.
2. <sup> – Displays text as superscript.
X<sup>2</sup> (X squared)
3. <sub> – Displays text as subscript.
H<sub>2</sub>O (Water)
4. <small> – Shows text in a smaller font size.
<small>Copyright © 2025</small>
5. <code> – Defines computer code ( like c, c++ etc.)
<code>console.log("Hello");</code>
6. <kbd> – Represents keyboard input.
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
7. <pre> – Preserves whitespace, line breaks, and
indentation.
<pre>
This is a preformatted
text with spaces and line breaks.
</pre>
• Inline vs Block Element
o Inline Element
Inline Element contains width only its required.
Example:- <b></b>, <a></a>, <img>, <i></i>, etc.
o Block Element
Block Element contains full width of the screen.
Example:- <h1></h1>…….<h6></h6>, <p></p>,
<header></header> etc.
• Lists
o Ordered List
Number List
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
Alphanumeric list
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
Roman List
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
Number list with staring from 5
<ol start="5">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
Alphanumeric list with staring from c
<ol type="a" start="3">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
Roman list with starting from (v)
<ol type="i" start="5">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
* Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
• Description List
Description list is used to describe something.
<dl> :- Description List
<dt> :- Description Term
<dd> :- Description Details or Description Definition
<dl>
<dt>HTML</dt>
<dd>HTML is used to create structure of our
webpage.</dd>
</dl>
