PowerPoint presentation
on HTML
What is HTML?
1. HTML stands for Hyper Text Markup Language.
2. It’s the language used to create web pages.
3. HTML tells a web browser how to display the text,
images, videos, and other content on a webpage.
4. HTML is made up of elements or tags.
5. Websites are built using HTML, and it's the
foundation of web design.
HTML Structure
1.<!DOCTYPE html>: Tells the browser that this is an HTML5
document.
2.<html>: This tag wraps all the HTML code.
3.<head>: Contains information about the document (like the
title and links to stylesheets or scripts).
4.<body>: Contains the content that the browser will display to
the user.
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
HTML Tags
•HTML Tags are used to define elements on a webpage.
•Tags tell the browser what type of content to display and how to format it.
•A typical HTML tag looks like this:
•<tag name>Content</tag name>
•Some tags like <img> don’t need closing tags.
Example Tags:
•<h1>: Heading 1 (largest text)
•<p>: Paragraph
•<a>: Anchor (used for links)
Common HTML Tags
•Headings: Used for titles and section names. They range from <h1>
(largest) to <h6> (smallest).
•Example:
html
<h1>Welcome to My Site</h1>
•Paragraph: Used to display blocks of text.
•Example:
html
<p>This is a paragraph of text on my webpage.</p>
•Links: Used to create clickable links to other pages.
•Example:
html
<a href="https://www.example.com">Click here to visit Example</a>
Attributes in HTML
•Attributes provide additional information about
an element.
•They are added inside the opening tag.
•Common Attributes:
•href: Specifies the URL of a link.
•src: Specifies the source of an image.
•alt: Provides alternative text for an image.
Examples:
•Link:
html
<a href="https://www.wikipedia.org">Visit
Wikipedia</a>
•Image:
html
<img src="cat.jpg" alt="A cute cat">
HTML Lists
•HTML allows you to create two types of
lists:
•Unordered List (bulleted):
•Use the <ul> tag for unordered
lists.
•Each item is inside an <li> tag.
•Example:
html
<ul> <li>Item 1</li> <li>Item 2</li>
</ul>
•Ordered List (numbered):
•Use the <ol> tag for ordered
lists.
•Each item is inside an <li> tag.
•Example:
html
<ol> <li>First step</li> <li>Second
Creating Links in HTML
•Links allow users to click and move to another webpage or section.
•The <a> tag creates links, and the href attribute specifies where
the link goes.
Example:
html
<a href="https://www.example.com">Visit Example</a>
•Links can also open in new tabs with the target="_blank" attribute:
html
<a href="https://www.example.com" target="_blank">Visit Example
in a new tab</a>
Inserting Images
•Images make your webpage more interesting and
visually appealing.
•Use the <img> tag to insert an image on your webpage.
•Attributes:
•src: Specifies the source (file path) of the image.
•alt: Describes the image if it can’t be loaded or for
accessibility.
Example:
html
<img src="dog.jpg" alt="A cute dog">
HTML Forms
•Forms are used to collect information from users, like signing up for an account
or entering a search query.
•Common form elements:
•<input>: For text input, checkboxes, and more.
•<button>: For buttons.
•<label>: To add labels to form fields.
Example of a simple form:
html
<form> <label for="name">Your Name:</label> <input type="text"
id="name" name="name"> <button type="submit">Submit</button>
</form>
Here is a example
That concludes my presentation.
Thank you for your attention and
time today. I hope you found the
information helpful. Goodbye,
and have a wonderful day ahead.
