Scribd
Upload
3 views

HTML_Unique_Topics_Slides

This document provides a comprehensive overview of HTML, including its structure, elements, and various tags used for creating web pages. Key topics covered include HTML document structure, elements like headings, links, images, lists, tables, forms, and attributes, as well as styling and responsive design. It also touches on advanced topics such as semantic elements, accessibility, and CSS integration.

Uploaded by

Motuma Lalisa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML_Unique_Topics_Slides

This document provides a comprehensive overview of HTML, including its structure, elements, and various tags used for creating web pages. Key topics covered include HTML document structure, elements like headings, links, images, lists, tables, forms, and attributes, as well as styling and responsive design. It also touches on advanced topics such as semantic elements, accessibility, and CSS integration.

Uploaded by

Motuma Lalisa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 71

HTML Full Note - Slide

Presentation
Comprehensive HTML Explanation
with Unique Topics and Examples
Introduction to HTML
• HTML stands for HyperText Markup Language.
• It is the standard markup language for creating
web pages.
HTML Document Structure
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• </body>
• </html>
Explanation:

<!DOCTYPE html>: Declares the document type as HTML5.

<html>: Root element of the HTML document.

<head>: Contains meta-information (like title, styles,


scripts).

<title>: Title shown on the browser tab.

<body>: Where all the visible content of the page goes.


HTML Elements
• HTML elements are the building
blocks of HTML pages.
• Examples: <h1>, <p>, <a>, <div>.
Sure! Here’s a simple explanation of each HTML element you
mentioned:

1. <h1> – Heading 1
This is used to define the main heading of a webpage.

It is the largest and most important heading.

There are six heading levels in HTML: <h1> to <h6>, where


<h1> is the most important and <h6> is the least.
Example:

<h1>Welcome to My Website</h1>
2. <p> – Paragraph
This element is used to define a paragraph of text.

It automatically adds some space before and after


the paragraph.
Example:

<p>This is a paragraph of text.</p>

•
3. <a> – Anchor (Link)
This is used to create hyperlinks to other web
pages, files, email addresses, or sections within the
same page.

The href attribute specifies the destination URL.


Example:

<a href="https://www.example.com">Visit
Example</a>
4. <div> – Division or Container
This is a block-level container element used to group other HTML
elements.

Commonly used in layout design and styling with CSS or scripting with
JavaScript.
Example:

<div>
<h2>About Us</h2>
<p>We provide web development services.</p>
</div>

Would you like examples of how these are styled with CSS or used together in a webpage?
HTML Tags
• Tags are used to mark up the start and end of
an HTML element.
• Example: <p>Paragraph</p>.
In HTML, tags are used to define the structure and
content of a webpage.
They typically come in pairs — an opening tag and a
closing tag.

Example:

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

<p> is the opening tag.

</p> is the closing tag.


A few more examples:

<h1>This is a heading</h1>
<a href="https://example.com">This is a link</a>
<img src="image.jpg" alt="An image"> <!-- Self-
closing tag -->

Want me to give you a list of common HTML tags


and what they do?
HTML Headings
• Headings range from <h1> to <h6>. <h1> is
the largest heading, <h6> is the smallest.
Headings in HTML range from <h1> to <h6>, and they define the importance and size of text —
not just how big the text looks, but also its semantic meaning for search engines and screen
readers.

Example:

<h1>This is Heading 1</h1>


<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

<h1> is usually used for the main page title.

<h2> to <h6> are used for subheadings or structuring sections within the page.

Would you like me to include this example visually in the HTML cheat sheet too?
HTML Links

• <a href='https://example.com'>Visit
Example</a> creates a hyperlink.
Absolutely right!

The <a> tag (called the anchor tag) is used to create hyperlinks in HTML.

Example:

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

href="https://example.com" specifies the URL the link will navigate to.

The text "Visit Example" is what users see and click on.

This link will open in the same tab by default.

Optional: Open in a new tab

If you want the link to open in a new tab, you can add target="_blank":
Alright! Here's a basic and commonly used hyperlink example you can include in your HTML cheat sheet:

<a href="https://www.example.com">Visit Example Website</a>

Explanation:

<a> is the anchor tag used to create hyperlinks.

href specifies the destination URL.

The text between the tags ("Visit Example Website") is the clickable link.

Would you like more variations added too? For example:

Opening in a new tab

Linking to an email address

Linking to a phone number

Linking to a section within the same page


Here are a few more useful hyperlink variations you might want to include in your cheat sheet:

1. Open Link in a New Tab

<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>

2. Email Link

<a href="mailto:[email protected]">Send an Email</a>

3. Phone Number Link

<a href="tel:+1234567890">Call Us</a>

4. Link to a Section on the Same Page

<a href="#about">Go to About Section</a>

<!-- Somewhere else on the page -->


HTML Images
• <img src='image.jpg' alt='Image description'>
is used to embed images.
HTML Lists
• Types: Ordered (<ol>), Unordered (<ul>), and
Definition Lists (<dl>).
HTML Tables
• Tables are created using <table>, <tr>, <th>,
and <td> tags.
HTML Forms
• Forms collect user input using <form>,
<input>, <textarea>, <select>, etc.
HTML Input Types
• Input types include text, password, checkbox,
radio, submit, etc.
HTML Attributes
• Attributes provide additional information
about elements, e.g., href, src, alt, style.
HTML Style Attribute
• The style attribute is used to add CSS directly
in HTML elements.
HTML Div and Span
• <div> is a block container, <span> is an inline
container.
HTML Semantic Elements
• Examples include <header>, <footer>,
<article>, <section>, etc.
HTML Audio
• <audio controls>
• <source src='audio.mp3' type='audio/mpeg'>
• </audio>
HTML Video
• <video controls>
• <source src='video.mp4' type='video/mp4'>
• </video>
HTML Comments
• <!-- This is a comment --> used to insert notes
in the code.
HTML Meta Tags
• Used inside <head> to specify metadata like
charset, description, keywords.
HTML Block vs Inline Elements
• Block elements: <div>, <p>, <h1>...
• Inline elements: <span>, <a>, <img>
HTML Global Attributes
• Global attributes include: id, class, style, title,
lang, dir, etc.
HTML iframes
• <iframe src='page.html'></iframe> is used to
embed another webpage.
HTML Forms - GET vs POST
• GET appends data to URL. POST sends data in
request body, more secure.
HTML Fieldset and Legend
• <fieldset> groups related form fields. <legend>
adds a caption.
HTML datalist Element
• <input list='browsers'> allows suggestions
using <datalist>.
HTML Required Attribute
• The 'required' attribute ensures the form field
must be filled before submitting.
HTML Placeholder Attribute
• Provides a hint or short description in an input
field.
HTML Readonly and Disabled
• 'readonly' makes input uneditable. 'disabled'
makes it inactive.
HTML Button Types
• button, submit, reset - each has different form
functionality.
HTML Charset Declaration
• <meta charset='UTF-8'> defines character
encoding.
HTML Page Redirect
• <meta http-equiv='refresh' content='5;
url=https://example.com'>
HTML Favicon
• <link rel='icon' href='favicon.ico'> adds an icon
in the browser tab.
HTML Link Tags
• Used to link external stylesheets or resources.
<link rel='stylesheet'>
HTML Script Tag
• <script src='script.js'></script> loads JavaScript
into HTML.
HTML Noscript Tag
• <noscript> is displayed when JavaScript is
disabled.
HTML Canvas Element
• Used for drawing graphics via JavaScript.
<canvas id='myCanvas'></canvas>
HTML SVG Element
• Used to define vector graphics. <svg
width='100' height='100'>
HTML Accessibility (ARIA)
• ARIA roles improve accessibility for screen
readers.
HTML lang Attribute
• Specifies language of content, e.g., <html
lang='en'>
HTML Base Tag
• <base href='https://example.com/'> sets the
base URL for relative links.
HTML Code, Kbd, Samp Tags
• <code> for code, <kbd> for keyboard input,
<samp> for sample output.
HTML Progress and Meter
• Used for progress indicators and
measurements. <progress>, <meter>
HTML Details and Summary
• <details><summary>More
Info</summary>Hidden content</details>
HTML Template Tag
• <template> holds client-side content not
rendered until activated.
HTML Picture Element
• Allows different images based on screen size.
<picture><source><img>
HTML Forms Validation
• Includes pattern, minlength, maxlength,
required, type, etc.
HTML Inline CSS
• Used with the style attribute: <p
style='color:red;'>Text</p>
HTML Internal CSS
• <style> inside <head> defines internal CSS
rules.
HTML External CSS
• CSS file linked via <link rel='stylesheet'
href='style.css'>
HTML Responsive Design
• Uses meta viewport and media queries to
adapt to devices.

You might also like