Scribd
Upload
4 views

html notes

The document serves as an introductory guide to HTML, covering the basics of creating a webpage, the purpose of HTML, and its structure. It explains various HTML tags, attributes, and formatting options, as well as how to create links and lists. Additionally, it includes practical tasks for creating a simple webpage and using different HTML elements.

Uploaded by

varsha.amrutha0512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

html notes

The document serves as an introductory guide to HTML, covering the basics of creating a webpage, the purpose of HTML, and its structure. It explains various HTML tags, attributes, and formatting options, as well as how to create links and lists. Additionally, it includes practical tasks for creating a simple webpage and using different HTML elements.

Uploaded by

varsha.amrutha0512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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>

You might also like