Scribd
Upload
15 views16 pages

WEB Development: Topic: An Intoduction To HTML

Uploaded by

ellykinny3053
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views16 pages

WEB Development: Topic: An Intoduction To HTML

Uploaded by

ellykinny3053
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

WEB

DEVELOPMENT
TOPIC : AN INTODUCTION TO HTML

Made By : Vaishnavi Rawal


220105011342 Guided By: Miss Jyoti Bo
Krishna Barot
• Overview of HTML
• Basic HTML Document Structure
• Common HTML Tags
• Creating Links

Agenda • Inserting Images


OVERVIEW OF HTML

What is HTML?
• HTML stands for Hypertext Markup Language.
• It is the standard markup language used to create
web pages.
• Web browsers use HTML tags to display
content on the internet.
HTML Definition:
HTML: A markup language that structures the content on
web pages using tags.

COMPONENTS:
• HTML
• HEAD
• TITLE
• BODY
1. DOCTYPE Declaration
<!DOCTYPE html>
2. <html> Tag (Root Element)
<html>
<!-- Content here -->
</html>
Basic HTML 3. <head> Tag (Document Metadata)

Document <head>
<!-- Metadata like title, links to CSS, and
Structure scripts -->
</head>
4. <title> Tag (Page Title)
<title>Page Title</title>
5. <body> Tag (Visible Content)
<body>
<!-- All visible content like headings,
paragraphs, images, etc. -->
</body>
Common HTML Tags

•<h1> to <h6>: Defines HTML headings.


Example: <h1>This is a large heading</h1>

•<p>: Defines a paragraph.


Example: <p>This is a paragraph.</p>

•<a>: Defines a hyperlink.


Example: <a href="https://example.com">Click Here</a>

•<img>: Embeds an image.


Example: <img src="image.jpg" alt="Image description">
Hyperlinks in HTML
The <a> tag is used to create a
hyperlink.

•Example:

<a href="https://google.com">Visit
Google</a> Creating
•href: The URL of the page the link goes Links
to.
INSERTING IMAGES
Adding Images with HTML

• The <img> tag is used to embed images in


HTML

EXAMPLE :

<img src="image.jpg" alt="Image description">

• src: Specifies the path to the image file.

• alt: Provides alternative text if the image


cannot be displayed.
Lists in HTML

Lists are used to store data or information in web


pages in ordered or unordered form. HTML Syntax:
supports several types of list elements that can be
included in the <BODY>tag of the document.
<li> content </li>
These elements may also be nested, i.e., the onset
of elements can be embedded within another.
There are three types of list available in HTML:

•Unordered List

•Ordered List
An ordered list defines a list of items in which
the order of the items are matters. An ordered
list is also called a number list

Different ways to number the ordered lists using


the type attribute:
• type=”1″- The list items will be numbered
with numbers (default)
• type=”A”- The list items will be numbered
with uppercase letters Ordered list
• type=”a”- The list items will be numbered
with lowercase letters
• type=”I”- List items will be numbered with
uppercase Roman numbers
• type=”i”- The list items will be numbered
with lowercase Roman numbers
Syntax:
<ol> content </ol>

Attributes of an ordered list:

1. reversed: This attribute is used to specify that


the order of the list should be reversed.
Syntax: <ol reversed>

2. start: This attribute is used to specify the start


value of the list.
Ordered list
Syntax: <ol start = “number”>
3. type: This attribute is used to specify the
type of list item maker. The value of this
attribute is
decimal(Default)/lower-roman/upper
roman/lower-alpha/upper alpha
Syntax:
<ol type = “1|b|A|i|I”>
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list whose type = "A"</h1>
<ol type="A">
<li>Sachin</li>
<li>Manoj</li>

</ol>
<h1>Example of reverse ordered list</h1>
<ol reversed>
<li>Parth</li>
<li>sujay</li>
</ol>
<h1>Example of ordered list start from 10</h1>

Ordered list
<ol start = "10">
<li>Pushpa</li>
<li>Purvi</li>
</ol>

</body>
</html>
An unordered list defines a list of items in which the
order of the items does not. Or in other words, an
unordered list tag is used to create an unordered list.
It is also known as bulleted list. In an unordered list
each element in the list is defined using <li> tag.

• There are 4 types of style in unordered lists:


• ● type=”disc”- sets the list item marker to a bullet
Unordered (default)
•
list ○ type=”circle”- sets the list item marker to a
circle
• ■ type=”square”- sets the list item marker to a
square
• type=”none”- the lists items will not be marked
Syntax:
<ul> content </ul>
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h2>Example of unordered list in circle</h2>
<ul style="list-style-type:circle;">
<li>sachin</li>
<li>manoj</li>
</ul>
<h2>Example of unordered list in disk</h2>
<ul style="list-style-type:disk;">
<li>Priya</li>
<li>Mohit</li>
</ul>
<h2>Example of unordered list in square</h2>
<ul style="list-style-type:square;">
<li>Pinky</li>
<li>Punam</li>
</ul>
<h2>Example of unordered list in none</h2>
<ul style="list-style-type:none;">
<li>Mukti</li>
<li>Dhama</li>
</ul>
</body>
</html>
HTML Text Formatting

Tags Descriptions
HTML text
<i> Showcases italicized text.
formatting tags
<small> Renders text in a smaller font size.
enhance web content’s
visual presentation and <ins> Highlights added or inserted text.

semantic meaning. By <sub> Creates subscript text.

using tags <strong> Emphasizes text with importance, often in bold.

like <b>, <i>, <em>, <b> Displays text in a bold format.


and <strong>, you can <mark> Accentuates text with a background highlight.
style text as bold, italic,
<del> Strikes through text to signify deletion.
emphasized, or
Adds emphasis to text, commonly styled as
important, improving <em>
italic.
readability and user <sup> Formats text as superscript.
experience on webpages
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Text Formatting Example</title>
</head>

<body>
<p>
<strong>Strong:</strong>
This text is important and bold.
</p>
<p>
<em>Emphasized:</em>
This text is emphasized and italic.
</p>
<p>
<b>Bold:</b>
This text is bold.
</p>
<p>
<i>Italic:</i>
This text is italic.
</p>
<p>
<mark>Marked:</mark>
This text is highlighted.
</p>
</body>
</html>
Thank you

You might also like