Mastering HTML: The Building Blocks of the Web

HTML
LESSON
Let's start with the basics of HTML and gradually move to more advanced
topics. HTML (HyperText Markup Language) is the standard language used to
create and design web pages.

TABLE OF CONTENTS
01
Basic
Structure
of a HTML
03
Lists
02
Tags
04
Links,Images,
Tables,Forms

TABLE OF CONTENTS
05
Attributes
07
Multimedia
Tags
06
Semantic
HTML5 Tags
08
Inline vs
Block
Elements

TABLE OF CONTENTS
09
Meta Tags
11
Linking CSS
and JavaScript
10
Comments
12
DOCTYPE
Declaration

TABLE OF CONTENTS
13
Character
Entities
15
Accessibility
14
Responsive
Design
16
Inline CSS and
JavaScript

• HTML stands for Hyper Text Markup
Language
• HTML is the standard markup language
for creating Web pages
• HTML describes the structure of a Web
page
• HTML consists of a series of elements
• HTML elements tell the browser how to
display the content
• HTML elements label pieces of content
such as "this is a heading", "this is a
paragraph", "this is a link", etc.
INTRODUCTION

—Santosh Kalwar
“Coding like poetry should
be short and concise.”

Basic Structure of an HTML
Document
01

Every HTML document should start with a declaration and have a structure like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Basic Structure of an
HTML Document

Basic Tags
•<html>: Root element of an HTML page.
•<head>: Contains meta-information about the HTML
document.
•<title>: Specifies the title of the document, shown in
the browser's title bar.
•<body>: Contains the contents of the HTML
document, such as text, images, links, etc.
•<h1> to <h6>: Header tags, <h1> is the largest and
<h6> is the smallest.
•<p>: Paragraph tag.
•<br>: Line break.
•<hr>: Horizontal rule (line).

Text Formatting Tags
•<b>: Bold text.
•<i>: Italic text.
•<u>: Underlined text.
•<strong>: Important text (usually bold).
•<em>: Emphasized text (usually italic).
•<mark>: Highlighted text.
•<small>: Smaller text.
•<del>: Strikethrough text.
•<ins>: Inserted text (usually underlined).

Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Ordered List
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Definition List
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>

Links
Anchor Tag:
<a href="https://www.example.com">Visit
Example</a>

Images
Image Tag:
<img src="image.jpg" alt="Description of
image">

Tables
Table Structure:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Forms
Form Elements:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
Form Elements:
html

Links
Common Attributes:
•id: Unique identifier.
•class: Class name for CSS styling.
•style: Inline CSS styles.
•title: Tooltip text.
•alt: Alternative text for images.

Semantic HTML5 Tags
Semantic Tags:
•<header>: Defines a header for a document or section.
•<nav>: Defines navigation links.
•<section>: Defines a section in a document.
•<article>: Defines an independent, self-contained article.
•<aside>: Defines content aside from the main content.
•<footer>: Defines a footer for a document or section.
•<main>: Specifies the main content of a document.
•<figure>: Specifies content that is self-contained, such as images
• with captions.
•<figcaption>: Provides a caption for a <figure> element.

Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Inline Elements
•Examples: <span>, <a>, <img>, <em>, <strong>.
•Do not start on a new line and only take up as much width
as necessary.

Block Elements
•Examples: <div>, <p>, <h1>, <ul>, <table>.
•Always start on a new line and take up the full width available.

Block Elements
<meta charset="UTF-8">
<meta name="description" content="Free Web
tutorials">
<meta name="keywords" content="HTML, CSS,
JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
•Meta Information:

Comments

Adding Comments:

Linking CSS
<link rel="stylesheet" type="text/css" href="styles.css">
CSS:

Linking Java Script
<script src="script.js"></script>
JavaScript:

Specifying the Document
Type
<!DOCTYPE html>

Using Character Entities
< for <
> for >
& for &
" for "
' for '

Meta Tag for Responsive
Design
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

Alt Text for Images
<img src="image.jpg" alt="Description of image">

ARIA Attributes
<button aria-label="Close">X</button>

Inline CSS
<p style="color:blue;">This is a blue paragraph.</p>

Inline JavaScript
<button onclick="alert('Hello World!')">Click
Me</button>

These topics cover most of the useful
tags,attribtes and concepts in HTML.
Feel free to ask for more detailed
explanation or examples on any
specific topic.
Email = umarkhan99887766ui@gmail.com
Conclusion

Mastering HTML: The Building Blocks of the Web

More Related Content

Similar to Mastering HTML: The Building Blocks of the Web (20)

Recently uploaded (20)

Mastering HTML: The Building Blocks of the Web