KEMBAR78
HTML HandBook | PDF | Html Element | Html
Scribd
Upload
20 views103 pages

HTML HandBook

Html book this is the first based of all of the technology and coding so this book written to have great awareness in start up.

Uploaded by

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

HTML HandBook

Html book this is the first based of all of the technology and coding so this book written to have great awareness in start up.

Uploaded by

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

HTML Handbook

by : Mohammed Teshome

Learn with us :
Telegram: https://t.me/EmmersiveLearning

Youtube: https://www.youtube.com/@EmmersiveLearning/
1. HTML Roadmap
Here’s the overall roadmap for learning HTML, starting from the basics and
progressing to more advanced concepts. This roadmap will guide you through
different topics, along with suggested practices at each stage.

ng
1. HTML Basics

ni
Key Topics:

ar
● What is HTML? (Structure of HTML document)
● HTML Tags and Elements
Le
○ <html>, <head>, <body>, <title>, <meta>
○ <h1> - <h6> (Headings), <p> (Paragraphs)
ve
○ <a> (Links), <img> (Images), <br>, <hr>
○ Comments: <!-- This is a comment -->
si

Practice:
er

● Create a simple webpage with a heading, paragraph, and link.


m

● Add an image with alt text.


Em

2. HTML Text Formatting

Key Topics:

● Text Formatting Tags


○ <b>, <i>, <u>, <strong>, <em>, <mark>, <small>, <sub>,
<sup>, <del>, <ins>

1
Practice:

● Create a webpage with formatted text using bold, italics, and underlined
text.
● Use superscripts and subscripts in a mathematical expression.

3. HTML Links

ng
Key Topics:

ni
● Anchor Element: <a href="URL">
○ Internal vs. External links

ar
○ Linking to email (mailto:)

Le
○ Linking to sections within the page (#)

Practice:
ve
● Create internal links that navigate to different sections of your webpage.
● Create external links to other websites.
si

4. HTML Images
er

Key Topics:
m

● Image Element: <img src="URL" alt="description">


Em

○ Image attributes: src, alt, width, height

Practice:

● Add an image to your webpage, resize it using width and height.

2
5. HTML Lists

Key Topics:

● Ordered List: <ol>


● Unordered List: <ul>
● Definition List: <dl>

ng
Practice:

ni
● Create a webpage with an ordered and unordered list.

ar
● Create a definition list to explain technical terms.

6. HTML Tables

Key Topics:
Le
ve
● Table Elements: <table>, <tr>, <th>, <td>
○ Table headers, rows, columns
si

○ colspan and rowspan


er

Practice:
m

● Create a table to display information like a calendar or product pricing.


Em

7. HTML Forms

Key Topics:

● Form Elements: <form>, <input>, <textarea>, <select>,


<button>
○ Form attributes: action, method

3
○ Input types: text, password, checkbox, radio, submit, file
○ Form validation (required, pattern, min, max)

Practice:

● Create a form with input fields, a text area, a drop-down menu, and a
submit button.

ng
● Add validation to make certain fields required.

8. HTML Semantics

ni
Key Topics:

ar
● HTML5 Semantic Elements
Le
○ <header>, <footer>, <nav>, <section>, <article>,
<aside>, <main>
ve
Practice:

● Build a webpage with a semantic structure, using appropriate elements for


si

navigation, content, and footer sections.


er

9. HTML Multimedia
m

Key Topics:
Em

● Multimedia Elements: <audio>, <video>, <iframe>


○ Embed videos and audio files
○ Add YouTube videos using <iframe>

Practice:

● Embed a video or audio file into a webpage.

4
● Embed a YouTube video using an iframe.

10. HTML Forms with Advanced Input

Key Topics:

● Advanced Input Types

ng
○ <input type="date">, <input type="time">, <input
type="color">, <input type="range">, <input

ni
type="number">

ar
Practice:

● Build a form with fields like date, time, color, and number.
Le
11. HTML Attributes (Global and Event Attributes)
ve
Key Topics:

● Global Attributes: id, class, style, title, lang, data-*


si

● Event Attributes: onclick, onchange, onfocus, onblur


er

Practice:
m

● Use class and id to style elements via CSS.


Em

● Add simple interactivity using the onclick event attribute.

12. HTML Accessibility

Key Topics:

● ARIA (Accessible Rich Internet Applications) Attributes


○ aria-label, aria-hidden, role

5
Practice:

● Add accessibility attributes to a form to ensure it's usable by screen


readers.

13. HTML Meta Tags and SEO

ng
Key Topics:

● Meta Tags for SEO and Social Sharing

ni
○ <meta> for descriptions, keywords, author
○ Open Graph (og:) and Twitter cards for social media previews

ar
Practice:
Le
● Add meta tags to a webpage for SEO optimization and social sharing.
ve
14. HTML Best Practices

Key Topics:
si

● Proper HTML Structure


er

○ Use semantic elements where appropriate


○ Validate your HTML code using tools like W3C Validator
m

Practice:
Em

● Refactor an existing webpage to use semantic elements and follow best


practices.

Additional Resources for Practice and Learning

6
● MDN Web Docs: Comprehensive resource for HTML.
● W3Schools: Good for examples and tutorials.
● FreeCodeCamp: Hands-on exercises to practice HTML.

Suggested Tools

● Text Editor: VSCode, Sublime Text, or Atom for writing and practicing

ng
HTML.
● Browser DevTools: Use Chrome or Firefox DevTools to inspect and

ni
debug HTML.

ar
This roadmap will help you progress from the basics to advanced concepts in
HTML. Once you're comfortable with HTML, you can move on to CSS for styling
and JavaScript for interactivity. Le
ve
2. HTML Basics: Tags and Elements
si

HTML (HyperText Markup Language) is the standard language for creating web
pages. It describes the structure of a webpage using tags and elements.
er

1. HTML Tags
m

Tags are the building blocks of HTML. They are keywords wrapped in angle
Em

brackets (<>). Most HTML tags come in pairs: an opening tag (<tagname>) and
a closing tag (</tagname>).

Example of a tag:

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

7
2. HTML Elements

An element is everything from the opening tag to the closing tag, including the
content in between. The content inside the element can be text, other HTML
elements, or empty in the case of self-closing tags.

Example of an element:

ng
<h1>This is a heading</h1>

ni
Here, <h1> is the opening tag, This is a heading is the content, and </h1>

ar
is the closing tag.

Le
Basic HTML Document Structure
ve

An HTML document has a standard structure:


si

Basic HTML:
er

<!DOCTYPE html>
<html>
<head>
m

<title>My First HTML Page</title>


</head>
Em

<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML document.</p>
</body>
</html>

Key Tags:

8
1. <!DOCTYPE html>: Defines the document type and version of HTML.
2. <html>: The root element that contains all the HTML code.
3. <head>: Contains metadata about the document (not displayed on the
webpage).
4. <title>: Specifies the title of the webpage (shown in the browser tab).
5. <body>: Contains the visible content of the webpage (like text, images,

ng
etc.).

ni
ar
Common HTML Tags

Headings: <h1> to <h6>


Le
HTML provides six levels of headings, from <h1> (most important) to <h6> (least
ve
important).

Example:
si

<h1>This is a Heading 1</h1>


er

<h2>This is a Heading 2</h2>


<h3>This is a Heading 2</h3>
m

<43>This is a Heading 2</h4>


<h5>This is a Heading 2</h5>
Em

<h6>This is a Heading 2</h6>

Paragraphs: <p>

Defines a block of text as a paragraph.

Example:

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

Links: <a>

Creates a hyperlink that users can click on to navigate to another page or


section.

ng
Example:

ni
<a href="https://example.com">Click here to visit Example</a>

ar
Images: <img>
Le
Embeds an image into the webpage. It is a self-closing tag.

Example:
ve

<img src="image.jpg" alt="Description of the image">


si
er

Lists: <ul>, <ol>, and <li>


m

Defines lists.
Em

● Unordered List (<ul>) creates bullet points.


● Ordered List (<ol>) creates numbered items.
● Each item in the list is defined using the <li> tag.

Example:

<ul>

10
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

ng
Divisions: <div>

ni
Defines a division or a section in an HTML document. It is often used to group

ar
block elements for styling.

Example:

<div>
Le
<h2>This is inside a div element</h2>
ve
<p>Div is useful for layout.</p>
</div>
si
er

Span: <span>

Similar to <div>, but it is an inline element. It is used to group inline elements for
m

styling purposes.
Em

Example:

<p>This is a <span style="color:red;">red</span> word in a


sentence.</p>

Buttons: <button>

11
Defines a clickable button.

Example:

<button>Click Me!</button>

ng
Input Fields: <input>

Used to create form fields where users can input data. It is a self-closing tag.

ni
Example:

ar
<input type="text" placeholder="Enter your name">

Line Break: <br>


Le
ve
Creates a line break, moving content to a new line. It is a self-closing tag.
si

Example:
er

<p>This is a line.<br>This is a new line.</p>


m

Horizontal Rule: <hr>


Em

Creates a horizontal line, often used to separate content. It is a self-closing tag.

Example:

<hr>

12
HTML Attributes

Tags can have attributes that provide additional information about elements.
Attributes are always included in the opening tag and are in the form of
name="value".

ng
Example of attributes:

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

ar
● href: Specifies the URL of the link.
Le
● target: Specifies where to open the linked document (_blank opens it in
a new tab).
ve
si

Example of a Basic HTML Page


er

<!DOCTYPE html>
<html>
<head>
m

<title>Basic HTML Page</title>


</head>
Em

<body>
<h1>Welcome to My Webpage</h1>

<p>This is a paragraph with a <a


href="https://example.com">link</a>.</p>

<img src="image.jpg" alt="An example image" width="200">

13
<h2>My Favorite Things</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

ng
<p>Contact me by clicking the button below:</p>
<button>Contact Me</button>

ni
<hr>

ar
<p>This is an example of a basic HTML document
structure.</p>
</body>
</html> Le
ve

Key Takeaways:
si

● Tags define elements in an HTML document.


er

● Elements contain the opening tag, content, and closing tag.


● Attributes add extra information to elements (like href, src, etc.).
m

● HTML is used to structure and define the content of a webpage.


●
Em

14
3. HTML Formatting Elements ?

What is HTML Formatting Elements ?

● HTML formatting elements are used to change the appearance of text


content.

ng
● They include a variety of tags that allow you to emphasise, style, and
structure your text in different ways.

ni
● Here’s an overview of some of the most common HTML formatting
elements along with a sample code demonstrating their usage:

ar
Common HTML Formatting Elements

1. <b>: Bold text.


Le
2. <strong>: Strong emphasis (bold text with added semantic meaning).
ve
3. <i>: Italic text.
4. <em>: Emphasised text (italic with added semantic meaning).
si

5. <mark>: Marked or highlighted text.


er

6. <small>: Smaller text.


7. <del>: Deleted (strikethrough) text.
m

8. <ins>: Inserted (underlined) text.


Em

9. <sub>: Subscript text.


10. <sup>: Superscript text.
11.<u>: Underlined text.
12. <abbr>: Abbreviation or acronym.
13. <cite>: Citation/reference to a title.
14. <code>: Computer code.

15
15. <pre>: Preformatted text.
16. <q>: Short inline quotation.
17. <blockquote>: Longer block quotation.

ng
ni
ar
Le
ve
si
er
m
Em

16
ng
ni
ar
Le
Sample Code Demonstrating HTML Formatting Elements
ve
Here's an example HTML document that uses various formatting elements:

HTML code:
si

<!DOCTYPE html>
er

<html lang="en">
<head>
<meta charset="UTF-8">
m

<meta name="viewport" content="width=device-width,


initial-scale=1.0">
Em

<title>HTML Formatting Elements</title>


<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>

17
<body>
<h1>HTML Formatting Elements</h1>

<p>This is a paragraph with <b>bold</b> text.</p>


<p>This is a paragraph with <strong>strong</strong>
emphasis.</p>
<p>This is a paragraph with <i>italic</i> text.</p>

ng
<p>This is a paragraph with <em>emphasized</em> text.</p>
<p>This is a paragraph with <mark>highlighted</mark>
text.</p>

ni
<p>This is a paragraph with <small>small</small> text.</p>
<p>This is a paragraph with <del>deleted</del> text.</p>

ar
<p>This is a paragraph with <ins>inserted</ins> text.</p>
<p>This is a paragraph with <sub>subscript</sub> text.</p>
<p>This is a paragraph with <sup>superscript</sup> text.</p>
Le
<p>This is a paragraph with <u>underlined</u> text.</p>
<p>This is an abbreviation: <abbr title="Hypertext Markup
Language">HTML</abbr>.</p>
ve
<p>This is a citation: <cite>The Great Gatsby</cite>.</p>
<p>This is some <code>inline code</code> within a
paragraph.</p>
si

<pre>
er

This is preformatted text.


It preserves spaces
m

and line breaks.


</pre>
Em

<p>This is a short quotation: <q>To be, or not to be, that


is the question.</q></p>

<blockquote>
This is a longer block quotation. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Integer posuere erat a ante.
</blockquote>

18
</body>
</html>

Explanation of the Elements

1. <b>: Makes text bold without adding semantic importance.

ng
2. <strong>: Makes text bold and indicates that the text is of strong
importance.

ni
3. <i>: Makes text italic without adding semantic importance.

ar
4. <em>: Makes text italic and indicates emphasis.
5. <mark>: Highlights text.
Le
6. <small>: Reduces the font size of the text.
7. <del>: Strikes through text to indicate deletion.
ve
8. <ins>: Underlines text to indicate insertion.
9. <sub>: Lowers text to create subscript.
si

10. <sup>: Raises text to create superscript.


11.<u>: Underlines text.
er

12. <abbr>: Indicates an abbreviation or acronym; the title attribute


m

provides the full form.


13. <cite>: Italicizes text to indicate a title of a work.
Em

14. <code>: Formats text to represent computer code.


15. <pre>: Preserves both spaces and line breaks, displaying text in a
fixed-width font.
16. <q>: Creates short inline quotations, typically displayed with quotation
marks.
17. <blockquote>: Creates a longer block quotation, usually indented.

19
These formatting elements help enhance the readability and semantic structure
of your HTML documents.

4. HTML Links

ng
● HTML links are fundamental elements that allow you to navigate between
different pages and resources on the web.

ni
● They are created using the <a> (anchor) tag.
● Let's dive into the details and examples to understand how to use them

ar
effectively.

Le
ve

Basic Structure of an HTML Link


si

The basic structure of an HTML link consists of the <a> tag, which stands for
"anchor." The href attribute within the <a> tag specifies the URL or location to
er

which the link points.


m

Html code
Em

<a href="URL">Link Text</a>

20
ng
Types of Links

ni
1. Absolute URL: Links to an external website.

ar
2. Relative URL: Links to a page within the same website.
3. Anchor Link: Links to a specific section within the same page.
Le
4. Email Link: Creates a link that opens the user's email client to send an
email.
ve
si
er
m
Em

Examples

21
1. Absolute URL

Links to an external website.

HTML code

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

ng
2. Relative URL

ni
Links to a page within the same website.

ar
HTML code

<a href="about.html">About Us</a>

3. Anchor Link
Le
ve
Links to a specific section within the same page. First, create an anchor point
with an id, then link to it.
si

HTML code
er

<!-- Anchor point -->


<h2 id="section1">Section 1</h2>
m

<p>Content for section 1...</p>


Em

<!-- Link to the anchor point -->


<a href="#section1">Go to Section 1</a>

4. Email Link

Creates a link that opens the user's email client.

22
HTML code

<a href="mailto:someone@example.com">Send Email</a>

Additional Attributes

ng
ni
ar
Le
ve
si

● target: Specifies where to open the linked document.


○ _blank: Opens the link in a new tab or window.
er

○ _self: Opens the link in the same frame (default).


m

○ _parent: Opens the link in the parent frame.


Em

23
○ _top: Opens the link in the full body of the window.

ng
ni
ar
Le
● title: Provides additional information about the link (displayed as a
tooltip on hover).
ve
Examples with Attributes
si

Open Link in a New Tab


HTML code
er

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


in a New Tab</a>
m
Em

Link with Tooltip


HTML code

<a href="https://www.example.com" title="Go to Example


website">Visit Example with Tooltip</a>

Complete Example

24
Here's a complete HTML document demonstrating different types of links:

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

ng
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Links Example</title>

ni
<style>
body {

ar
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
Le
<body>
ve
<h1>HTML Links Example</h1>

<h2>Absolute URL</h2>
si

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


er

<h2>Relative URL</h2>
<p><a href="about.html">About Us</a></p>
m

<h2>Anchor Link</h2>
Em

<!-- Anchor point -->


<h2 id="section1">Section 1</h2>
<p>Content for section 1...</p>
<p><a href="#section1">Go to Section 1</a></p>

<h2>Email Link</h2>
<p><a href="mailto:someone@example.com">Send Email</a></p>

<h2>Link with New Tab</h2>

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

<h2>Link with Tooltip</h2>


<p><a href="https://www.example.com" title="Go to Example
website">Visit Example with Tooltip</a></p>
</body>

ng
</html>

ni
Explanation

ar
● Absolute URL: Links to https://www.example.com.
● Relative URL: Links to about.html, a page within the same website.
Le
● Anchor Link: Links to #section1, which is an anchor point within the
same page.
ve
● Email Link: Creates a mailto link to someone@example.com.
● New Tab Link: Opens the link in a new tab using target="_blank".
si

● Tooltip Link: Displays additional information on hover using the title


attribute.
er

These examples should help you understand how to create and use HTML links
m

in various ways. If you have any questions or need further clarification, feel free
to ask!
Em

5. HTML Images

26
HTML images are created using the <img> tag, which is used to embed images
in web pages. The <img> tag is an empty tag, meaning it doesn't have a closing
tag. Here’s a detailed explanation of how to use the <img> tag, along with
examples.

Basic Structure of an HTML Image

ng
The <img> tag requires the src and alt attributes:

ni
● src: Specifies the path to the image file.
● alt: Provides alternative text for the image if it cannot be displayed.

ar
Example
HTML code
Le
<img src="path/to/image.jpg" alt="Description of the image">
ve

Common Attributes of the <img> Tag


si
er

1. src: The URL or path to the image file.


2. alt: Alternate text for the image.
m

3. width: The width of the image.


Em

4. height: The height of the image.


5. title: Additional information about the image (displayed as a tooltip on
hover).

27
ng
ni
ar
Le
ve
si
er
m
Em

Examples

1. Basic Image
HTML code

<img src="https://www.example.com/image.jpg" alt="Example


Image">

28
2. Image with Width and Height
HTML code

<img src="https://www.example.com/image.jpg" alt="Example Image"


width="500" height="600">

3. Image with Tooltip

ng
HTML code
<img src="https://www.example.com/image.jpg" alt="Example

ni
Image" title="This is an example image">

ar
4. Responsive Image
Le
To make an image responsive (adjustable to different screen sizes), you can use
CSS.
ve

HTML code
si

<img src="https://www.example.com/image.jpg" alt="Example Image"


style="width: 100%; height: auto;">
er
m

Common Image Formats


Em

Here are the most common image file types, which are supported in all
browsers (Chrome, Edge, Firefox, Safari, Opera):

29
ng
ni
ar
Complete Example

Le
Here's a complete HTML document demonstrating different ways to use the
<img> tag:
ve
HTML code

<!DOCTYPE html>
si

<html lang="en">
<head>
er

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
m

initial-scale=1.0">
<title>HTML Images Example</title>
Em

<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.responsive {
width: 100%;
height: auto;
}

30
</style>
</head>
<body>
<h1>HTML Images Example</h1>

<h2>Basic Image</h2>
<img src="https://www.example.com/image1.jpg" alt="Example

ng
Image 1">

<h2>Image with Width and Height</h2>

ni
<img src="https://www.example.com/image2.jpg" alt="Example
Image 2" width="300" height="200">

ar
<h2>Image with Tooltip</h2>
<img src="https://www.example.com/image3.jpg" alt="Example
Le
Image 3" title="This is an example image">

<h2>Responsive Image</h2>
ve
<img src="https://www.example.com/image4.jpg" alt="Example
Image 4" class="responsive">
</body>
si

</html>
er

Explanation
m

● Basic Image: An image from


Em

https://www.example.com/image1.jpg with an alt text "Example


Image 1".
● Image with Width and Height: An image with a specified width of 300
pixels and height of 200 pixels.
● Image with Tooltip: An image that displays a tooltip "This is an example
image" when hovered over.

31
● Responsive Image: An image that adjusts its size based on the screen
width, ensuring it looks good on all devices.

Additional Tips

1. File Path: The src attribute can use absolute URLs (e.g.,
https://www.example.com/image.jpg) or relative paths (e.g.,

ng
images/image.jpg).
2. Alt Text: Always provide descriptive alt text for accessibility and better

ni
SEO.

ar
3. Image Formats: Common formats include JPEG (.jpg), PNG (.png),
GIF (.gif), and SVG (.svg).
Le
These examples and explanations should help you understand how to use HTML
images effectively. If you have any questions or need further clarification, feel
ve
free to ask!
si
er

6. HTML Styling
m

HTML styling is primarily achieved using CSS (Cascading Style Sheets), which
allows you to control the layout, appearance, and design of your HTML elements.
Em

32
ng
ni
ar
Le
ve
There are three main ways to apply CSS to your HTML:

1. Inline CSS: Adding CSS directly to the HTML elements using the style
si

attribute.
er

2. Internal CSS: Adding CSS within a <style> tag in the <head> section of
your HTML document.
m

3. External CSS: Linking to an external CSS file using the <link> tag in the
Em

<head> section.

Let's go through each method with examples.

1. Inline CSS

Inline CSS is used to apply a unique style to a single HTML element.

33
Example
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,

ng
initial-scale=1.0">
<title>Inline CSS Example</title>
</head>

ni
<body>
<h1 style="color: blue; text-align: center;">Hello,

ar
World!</h1>
<p style="font-size: 20px; color: green;">This is a
paragraph with inline CSS.</p>
</body>
</html>
Le
ve

2. Internal CSS
si

Internal CSS is used to define styles within the <style> tag in the <head>
er

section of the HTML document.


m

Example
HTML code
Em

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Internal CSS Example</title>

34
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;

ng
}
p {
font-size: 20px;

ni
color: green;
}

ar
</style>
</head>
<body>
<h1>Hello, World!</h1> Le
<p>This is a paragraph with internal CSS.</p>
</body>
ve
</html>
si

3. External CSS
er

External CSS is used to define styles in a separate CSS file, which is linked to
the HTML document using the <link> tag.
m

Example
Em

index.html:

HTML code

<!DOCTYPE html>
<html lang="en">
<head>

35
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

ng
<h1>Hello, World!</h1>
<p>This is a paragraph with external CSS.</p>
</body>

ni
</html>

ar
styles.css:

body {
font-family: Arial, sans-serif;
Le
}
ve

h1 {
color: blue;
si

text-align: center;
}
er

p {
m

font-size: 20px;
color: green;
Em

CSS Syntax

CSS syntax consists of selectors and declarations. A selector points to the HTML
element you want to style. A declaration block contains one or more declarations
separated by semicolons.

36
Example

selector {
property: value;
property: value;
}

ng
Common CSS Properties

● Color and Background:

ni
○ color: Sets the text color.

ar
○ background-color: Sets the background color.
○ background-image: Sets a background image.
● Text and Font:
Le
○ font-size: Sets the font size.
ve
○ font-family: Sets the font family.
○ font-weight: Sets the weight of the font (e.g., bold).
si

○ text-align: Aligns the text (e.g., left, center, right).


er

○ text-decoration: Adds decoration to text (e.g., underline).


● Box Model:
m

○ width: Sets the width of an element.


○ height: Sets the height of an element.
Em

○ padding: Sets the padding inside an element.


○ margin: Sets the margin outside an element.
○ border: Sets the border of an element.
● Display and Positioning:
○ display: Specifies the display behavior of an element (e.g., block,
inline, none).

37
○ position: Specifies the positioning method (e.g., static, relative,
absolute, fixed).
○ top, right, bottom, left: Specifies the position of an element.

Example of Common CSS Properties

<!DOCTYPE html>

ng
<html lang="en">
<head>
<meta charset="UTF-8">

ni
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

ar
<title>CSS Properties Example</title>
<style>
body {
Le
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
ve
}
h1 {
si

color: blue;
text-align: center;
er

font-size: 36px;
text-decoration: underline;
}
m

p {
font-size: 18px;
Em

color: green;
padding: 10px;
margin: 20px 0;
border: 1px solid #ccc;
background-color: #fff;
}
</style>
</head>

38
<body>
<h1>Welcome to CSS Styling</h1>
<p>This is a paragraph demonstrating various CSS
properties.</p>
</body>
</html>

ng
Explanation

ni
● Font and Text: The font-family, font-size, color, text-align,
and text-decoration properties style the text.

ar
● Background: The background-color property sets the background

Le
color of the body and paragraph elements.
● Box Model: The padding, margin, and border properties adjust the
spacing and border of the paragraph.
ve

By using these CSS techniques, you can effectively style your HTML elements to
si

create visually appealing web pages. If you have any questions or need further
assistance, feel free to ask!
er
m

7. HTML Classes and Id’s


Em

An HTML page consists of many elements or tags. We often need to


target a specific element or a group of specific elements for achieving
different functionality like styling. That is exactly when id and classes
come in handy. The id is unique to each element in an HTML page,
whereas several elements can have the same class.

39
In HTML, classes and IDs are used to assign unique identifiers and group
elements together for styling and scripting purposes. They help you apply CSS
styles and manipulate elements with JavaScript. Let's explore both in detail.

HTML Classes

A class is used to group multiple elements together. It allows you to apply the

ng
same styles or functionality to multiple elements.

Adding a Class to an Element

ni
Use the class attribute to assign one or more classes to an element.

ar
HTML code

<!DOCTYPE html>
<html lang="en">
Le
<head>
ve
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
si

<title>HTML Classes Example</title>


<style>
er

.highlight {
color: red;
m

font-weight: bold;
}
Em

</style>
</head>
<body>
<h1 class="highlight">This is a heading</h1>
<p class="highlight">This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

40
In this example, both the heading and the first paragraph have the class
highlight, which applies the same CSS styles to both elements.

HTML IDs

An ID is used to identify a single unique element. Each ID must be unique within


a page.

ng
Adding an ID to an Element

ni
Use the id attribute to assign an ID to an element.

ar
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
Le
<meta charset="UTF-8">
ve
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML IDs Example</title>
si

<style>
#unique {
er

color: blue;
font-size: 20px;
m

}
</style>
Em

</head>
<body>
<h1 id="unique">This is a unique heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

In this example, the heading with the ID unique has specific styles applied to it.

41
Differences Between Classes and IDs

● Classes: Can be applied to multiple elements. Use classes when you want
to style multiple elements the same way or apply the same functionality.
● IDs: Should be unique and applied to only one element. Use IDs when you
need to uniquely identify an element, such as for specific styling or when
manipulating the element with JavaScript.

ng
ni
ar
Le
ve
si

Combining Classes and IDs


er

You can combine classes and IDs to apply both specific and general styles to an
m

element.
Em

Example
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,

42
initial-scale=1.0">
<title>Combining Classes and IDs</title>
<style>
.highlight {
color: red;
font-weight: bold;
}

ng
#unique {
color: blue;
font-size: 20px;

ni
}
</style>

ar
</head>
<body>
<h1 id="unique" class="highlight">This is a unique and
highlighted heading</h1> Le
<p class="highlight">This is a paragraph.</p>
<p>This is another paragraph.</p>
ve
</body>
</html>
si

In this example, the heading has both an ID unique and a class highlight.
er

The styles from both are applied, with the ID styles taking precedence due to
their higher specificity.
m

CSS Selectors for Classes and IDs


Em

Class Selector: Prefixed with a dot ..


Css code

.classname {
/* styles */
}

43
ID Selector: Prefixed with a hash #.
Css code

#idname {
/* styles */
}

ng
JavaScript with Classes and IDs

You can also use classes and IDs in JavaScript to manipulate elements.

ni
Example

ar
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
Le
<meta charset="UTF-8">
ve
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
si

<title>JavaScript with Classes and IDs</title>


<style>
er

.highlight {
color: red;
}
m

</style>
</head>
Em

<body>
<h1 id="unique" class="highlight">This is a heading</h1>
<p>This is a paragraph.</p>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
document.getElementById('unique').style.color =

44
'green';
}
</script>
</body>
</html>

ng
In this example, the changeColor function changes the color of the element
with the ID unique when the button is clicked.

ni
These examples should give you a good understanding of how to use HTML

ar
classes and IDs. If you have any questions or need further clarification, feel free
to ask!

Le
8. HTML Tables
ve

HTML tables are a great way to organise and display data in a tabular format.
si

Tables are created using the <table> element, and they contain rows and
er

columns of data. Each row is defined with the <tr> (table row) element, and
each cell within a row is defined with either the <td> (table data) element for
m

regular cells or the <th> (table header) element for header cells.
Em

45
Basic Structure of an HTML Table
HTML Code :

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>

ng
<tr>
<td>Data 1</td>

ni
<td>Data 2</td>
</tr>

ar
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
Le
ve

Example Explained
si

● <table>: Defines the table.


er

● <tr>: Defines a row in the table.


● <th>: Defines a header cell in the table.
m

● <td>: Defines a standard data cell in the table.


Em

46
ng
ni
ar
Complete Example

Here's a complete example of a basic HTML table:

HTML code
Le
<!DOCTYPE html>
ve
<html lang="en">
<head>
si

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
er

initial-scale=1.0">
<title>HTML Tables Example</title>
<style>
m

table {
width: 50%;
Em

border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;

47
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

ng
<h1>HTML Tables Example</h1>
<table>
<tr>

ni
<th>First Name</th>
<th>Last Name</th>

ar
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
Le
ve
</tr>
<tr>
<td>Jane</td>
si

<td>Smith</td>
<td>25</td>
er

</tr>
<tr>
m

<td>Sam</td>
<td>Brown</td>
<td>20</td>
Em

</tr>
</table>
</body>
</html>

Explanation

48
● <table>: Starts the table.
● <tr>: Each <tr> defines a new row.
● <th>: Each <th> defines a header cell, styled to look different from
regular cells.
● <td>: Each <td> defines a standard data cell.

ng
Additional Table Elements and Attributes

1. <caption>: Adds a title to the table.

ni
2. <thead>: Groups the header content in a table.

ar
3. <tbody>: Groups the body content in a table.
4. <tfoot>: Groups the footer content in a table.
Le
5. colspan: Makes a cell span across multiple columns.
6. rowspan: Makes a cell span across multiple rows.
ve

Example with Additional Elements


si

HTML code
er

<!DOCTYPE html>
<html lang="en">
<head>
m

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
Em

initial-scale=1.0">
<title>Advanced HTML Tables Example</title>
<style>
table {
width: 70%;
border-collapse: collapse;
margin: 20px 0;
}

49
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}

ng
th {
background-color: #f2f2f2;
}

ni
caption {
caption-side: top;

ar
font-size: 1.5em;
margin: 10px 0;
}
</style>
</head>
<body>
Le
ve
<h1>Advanced HTML Tables Example</h1>
<table>
<caption>Student Information</caption>
si

<thead>
<tr>
er

<th>First Name</th>
<th>Last Name</th>
m

<th>Age</th>
<th>Grade</th>
</tr>
Em

</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
<td rowspan="2">A</td>
</tr>

50
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>Sam</td>

ng
<td>Brown</td>
<td>20</td>
<td colspan="2">B</td>

ni
</tr>
</tbody>

ar
<tfoot>
<tr>
<td colspan="4">End of Data</td>
</tr>
</tfoot>
</table>
Le
ve
</body>
</html>
si

Explanation
er

● <caption>: Adds a title "Student Information" to the table.


m

● <thead>: Groups the header rows.


Em

● <tbody>: Groups the body rows.


● <tfoot>: Groups the footer row.
● rowspan: The "Grade" cell for "John" spans two rows.
● colspan: The "Grade" cell for "Sam" spans two columns.

51
These examples should give you a solid understanding of how to create and
style HTML tables. If you have any questions or need further clarification, feel
free to ask!

ng
9. HTML Forms

ni
HTML forms are used to collect user input. Forms can contain various input

ar
elements like text fields, checkboxes, radio buttons, submit buttons, and more.
Let's go through the basics of creating a form in HTML.
Le
ve
si
er
m
Em

Basic Structure of an HTML Form

52
An HTML form is created using the <form> element. The form can contain
various input elements, and it should have an action attribute specifying where to
send the form data when it is submitted.

HTML code

<!DOCTYPE html>

ng
<html lang="en">
<head>
<meta charset="UTF-8">

ni
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

ar
<title>HTML Form Example</title>
</head>
<body>
<h1>HTML Form Example</h1> Le
<form action="/submit-form" method="post">
<label for="fname">First Name:</label><br>
ve
<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last Name:</label><br>


si

<input type="text" id="lname" name="lname"><br><br>


er

<input type="submit" value="Submit">


</form>
m

</body>
</html>
Em

Explanation

● <form>: The container for the form elements. The action attribute
specifies the URL where the form data will be sent when the form is
submitted. The method attribute specifies the HTTP method to be used
when submitting the form (usually "GET" or "POST").

53
● <label>: Defines a label for an <input> element. The for attribute
should match the id of the corresponding input.
● <input type="text">: Defines a single-line text input field.
● <input type="submit">: Defines a button to submit the form.

Common Input Types

ng
ni
ar
Le
ve
si
er
m
Em

Here are some common input types you can use in forms:

Text Input
html

54
<input type="text" id="fname" name="fname">

Password Input
HTML code

<input type="password" id="password" name="password">

ng
Radio Buttons

ni
HTML code

ar
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input
<label Le
type="radio" id="female" name="gender" value="female">
for="female">Female</label><br>
ve
Checkboxes
HTML code
si

<input type="checkbox" id="subscribe" name="subscribe"


value="newsletter">
er

<label for="subscribe">Subscribe to newsletter</label><br>


m

Dropdown List
Em

HTML code

<select id="country" name="country">


<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

55
Textarea
HTML code

<textarea id="message" name="message" rows="4"


cols="50"></textarea>

Submit Button

ng
HTML code

ni
<input type="submit" value="Submit">

ar
Complete Form Example

Le
ve
si
er
m
Em

56
Em
m
er
si
ve
Le
ar
ni
ng

57
Em
m
er
si
ve
Le
ar
ni
ng

58
Here is a complete example of a form with various input types:

HTML code

<!DOCTYPE html>
<html lang="en">

ng
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,

ni
initial-scale=1.0">
<title>Complete HTML Form Example</title>

ar
</head>
<body>
<h1>Contact Us</h1>
Le
<form action="/submit-form" method="post">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
ve

<label for="lname">Last Name:</label><br>


<input type="text" id="lname" name="lname"><br><br>
si

<label for="email">Email:</label><br>
er

<input type="email" id="email" name="email"><br><br>


m

<label for="password">Password:</label><br>
<input type="password" id="password"
Em

name="password"><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label><br><br>

59
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select><br><br>

ng
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe"

ni
value="newsletter"><br><br>

ar
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
cols="50"></textarea><br><br>
Le
<input type="submit" value="Submit">
</form>
ve
</body>
</html>
si

Explanation
er

● Email Input: <input type="email"> specifies an input field for email


m

addresses.
Em

● Password Input: <input type="password"> specifies an input field


for passwords.
● Radio Buttons: Allow the user to select one option from a set.
● Checkbox: Allows the user to select (or deselect) an option.
● Dropdown List: <select> creates a dropdown menu.
● Textarea: <textarea> creates a multi-line text input field.

60
Styling Forms with CSS

You can style forms and their elements using CSS to make them look more
appealing.

Example
HTML code

ng
<!DOCTYPE html>
<html lang="en">

ni
<head>
<meta charset="UTF-8">

ar
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Styled Form Example</title>
<style>
form {
Le
width: 300px;
ve
margin: auto;
}
label {
si

display: block;
margin: 10px 0 5px;
er

}
input[type="text"],
m

input[type="email"],
input[type="password"],
select,
Em

textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {

61
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;

ng
font-size: 16px;
margin: 10px 0;
cursor: pointer;

ni
border-radius: 4px;
}

ar
</style>
</head>
<body>
Le
<h1>Styled Contact Form</h1>
<form action="/submit-form" method="post">
<label for="fname">First Name:</label>
ve
<input type="text" id="fname" name="fname">

<label for="lname">Last Name:</label>


si

<input type="text" id="lname" name="lname">


er

<label for="email">Email:</label>
<input type="email" id="email" name="email">
m

<label for="password">Password:</label>
<input type="password" id="password" name="password">
Em

<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

62
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe"
value="newsletter">

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
cols="50"></textarea>

ng
<input type="submit" value="Submit">
</form>

ni
</body>
</html>

ar
HTML FORM Attributes Le
HTML form attributes define the behaviour and functionality of a form. Here
ve

are some important form attributes you should know about:


si
er
m
Em

Action method Enctype target


Novalidate autocomplete name
Accept-charset rel

1. action

63
The action attribute specifies the URL where the form data will be sent
when the form is submitted.

HTML code

<form action="/submit-form" method="post">


<!-- form elements go here -->

ng
</form>

ni
2. method

ar
The method attribute specifies the HTTP method to be used when

Le
submitting the form. It can be either get or post.

● get: Appends the form data to the URL in name/value pairs.


ve
● post: Sends the form data as an HTTP POST transaction.

HTML code
si

<form action="/submit-form" method="post">


er

<!-- form elements go here -->


</form>
m
Em

3. enctype

The enctype attribute specifies how the form data should be encoded
when submitting it to the server. This attribute is only used if the method is
post. The most common values are:

● application/x-www-form-urlencoded (default)

64
● multipart/form-data: Used when the form includes file uploads.
● text/plain

HTML code

<form action="/submit-form" method="post"


enctype="multipart/form-data">

ng
<!-- form elements go here -->
</form>

ni
4. target

ar
The target attribute specifies where to display the response after
Le
submitting the form. It can have the following values:

● _self (default): The response will be displayed in the same frame as


ve

the form.
si

● _blank: The response will be displayed in a new window or tab.


● _parent: The response will be displayed in the parent frame.
er

● _top: The response will be displayed in the full body of the window.
m

HTML code
Em

<form action="/submit-form" method="post" target="_blank">


<!-- form elements go here -->
</form>

65
ng
ni
ar
Le
ve
si
er

In this example, CSS is used to style the form elements, making them more
visually appealing and user-friendly.
m

If you have any questions or need further clarification, feel free to ask!
Em

66
10. HTML Semantics
Semantic HTML refers to the use of HTML elements that clearly describe their
meaning in a way that is understandable to both developers and browsers.
Semantic elements convey the structure and purpose of the content, making it
easier for search engines, screen readers, and other tools to interpret the page

ng
accurately.

For example, instead of using generic tags like <div> and <span>, semantic

ni
HTML uses tags like <header>, <article>, and <footer> that describe the

ar
content's role in the webpage.

Why Use Semantic HTML?


Le
ve
1. Improved Accessibility: Semantic tags make content more accessible to
screen readers and other assistive technologies.
si

2. SEO Benefits: Search engines like Google can better understand the
structure and meaning of your webpage, improving indexing and
er

potentially ranking.
m

3. Better Code Readability: Semantic elements make your HTML code


easier to understand, both for yourself and other developers.
Em

4. Consistent Structure: Using semantic elements ensures a consistent and


well-structured layout, aiding in website maintenance and future updates.

Common Semantic HTML Elements

1. <header>

67
Represents the header section of a document or a section. It often contains the
website's logo, navigation links, or introductory content.

Example:

<header>
<h1>My Website</h1>

ng
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>

ni
<a href="#contact">Contact</a>
</nav>

ar
</header>

2. <nav>
Le
Represents a navigation section, typically containing links to other parts of the
ve
webpage or other pages of the site.
si

Example:
er

<nav>
<a href="index.html">Home</a>
m

<a href="about.html">About</a>
<a href="contact.html">Contact</a>
Em

</nav>

3. <article>

Represents a self-contained piece of content, such as a blog post, news article,


or comment. It should make sense on its own even if it is removed from the rest
of the website.

68
Example:

<article>
<h2>How to Learn HTML</h2>
<p>HTML is the foundation of web development...</p>
</article>

ng
4. <section>

ni
Represents a thematic grouping of content, often with a heading. A section can
contain multiple articles or other elements.

ar
Example:

<section>
<h2>Latest News</h2>
Le
<article>
ve
<h3>New Features Released</h3>
<p>Our platform just got a major update...</p>
si

</article>
<article>
er

<h3>Upcoming Events</h3>
<p>Join us for our annual conference...</p>
</article>
m

</section>
Em

5. <footer>

Represents the footer section of a document or section. It often contains


information such as copyright notices, links to terms of service, or contact
information.

Example:

69
<footer>
<p>(c) 2024 My Website. All rights reserved.</p>
<a href="#privacy">Privacy Policy</a>
</footer>

6. <aside>

ng
Represents content that is tangentially related to the main content, such as a
sidebar, advertisements, or quotes. It is often used for content that is not directly

ni
tied to the main article but still relevant.

ar
Example:

<aside>
<h4>Related Articles</h4>
Le
<ul>
ve
<li><a href="#">Introduction to CSS</a></li>
<li><a href="#">Getting Started with JavaScript</a></li>
</ul>
si

</aside>
er

7. <main>
m

Represents the main content of the document. It should contain the primary
Em

information of the webpage, and there should only be one <main> element per
page.

Example:

<main>
<h1>Welcome to My Blog</h1>

70
<p>Here, I share my thoughts on web development and
technology.</p>
</main>

8. <figure> and <figcaption>

ng
The <figure> element is used to group content such as images, diagrams, or
code blocks, while <figcaption> provides a caption or description for the

ni
content.

ar
Example:

<figure>
Le
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A beautiful landscape in the
mountains.</figcaption>
ve
</figure>
si

9. <mark>
er

Highlights or marks text within content for reference, such as highlighting


m

important text.
Em

Example:

<p>Please pay <mark>special attention</mark> to the


instructions.</p>

10. <time>

71
Represents a specific time or date.

Example:

<time datetime="2024-09-16">September 16, 2024</time>

ng
Example: Semantic HTML Layout

ni
Here is an example that combines multiple semantic elements to create a basic
webpage layout:

ar
HTML web Page Example :

<!DOCTYPE html>
<html lang="en">
Le
<head>
ve
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
si

<title>Semantic HTML Example</title>


</head>
er

<body>
<header>
m

<h1>My Webpage</h1>
<nav>
Em

<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>

<main>

72
<section id="home">
<h2>Welcome to My Website</h2>
<p>This is a demonstration of using semantic HTML
elements.</p>
</section>

<section id="about">

ng
<h2>About Me</h2>
<article>
<h3>My Background</h3>

ni
<p>I am a web developer with a passion for
creating clean, accessible websites.</p>

ar
</article>
</section>

<h2>Services</h2>
Le
<section id="services">

<p>We offer web design, development, and SEO


ve
services.</p>
</section>
</main>
si

<aside>
er

<h4>Related Links</h4>
<ul>
m

<li><a href="#">Web Development Blog</a></li>


<li><a href="#">HTML Tutorials</a></li>
</ul>
Em

</aside>

<footer>
<p>(c) 2024 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>

73
Key Takeaways:

● Semantic HTML improves readability, accessibility, and SEO.


● Use semantic elements like <header>, <footer>, <section>, and
<article> instead of generic <div> and <span> tags where

ng
appropriate.
● Screen readers, search engines, and developers benefit from

ni
well-structured, semantic HTML.

ar
11. HTML Multimedia Le
ve
si
er
m
Em

74
HTML provides various elements to embed multimedia content like images,
audio, and video into your web pages. Let's explore these elements and how to
use them.

ng
ni
ar
Le
ve
si

Images
er

Images can be added using the <img> tag.


m

Example
Em

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Images Example</title>

75
</head>
<body>
<h1>Embedding an Image</h1>
<img src="example.jpg" alt="An example image" width="500"
height="300">
</body>
</html>

ng
Audio

ni
Audio files can be added using the <audio> tag. You can control playback with

ar
the controls attribute.

Example
HTML code
Le
ve
<!DOCTYPE html>
<html lang="en">
<head>
si

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
er

initial-scale=1.0">
<title>HTML Audio Example</title>
m

</head>
<body>
Em

<h1>Embedding an Audio File</h1>


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

76
Video

Video files can be added using the <video> tag. You can control playback with
the controls attribute and specify dimensions with width and height.

Example
HTML code

ng
<!DOCTYPE html>
<html lang="en">

ni
<head>
<meta charset="UTF-8">

ar
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Video Example</title>
</head>
<body>
Le
<h1>Embedding a Video File</h1>
ve
<video width="600" height="400" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
si

</video>
</body>
er

</html>
m

Embedding YouTube Videos


Em

You can embed YouTube videos using the <iframe> tag.

Example
HTML code

<!DOCTYPE html>
<html lang="en">

77
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Embedding a YouTube Video</title>
</head>
<body>

ng
<h1>Embedding a YouTube Video</h1>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"

ni
allowfullscreen></iframe>
</body>

ar
</html>

Le
Embedding SVG (Scalable Vector Graphics)

SVG images can be embedded directly in HTML for scalable and interactive
ve
graphics.

Example
si

HTML code
er

<!DOCTYPE html>
<html lang="en">
m

<head>
<meta charset="UTF-8">
Em

<meta name="viewport" content="width=device-width,


initial-scale=1.0">
<title>Embedding SVG</title>
</head>
<body>
<h1>Embedding an SVG Image</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black"

78
stroke-width="3" fill="red" />
</svg>
</body>
</html>

Embedding Audio and Video with Fallback Content

ng
You can provide fallback content for browsers that do not support the <audio>
and <video> tags.

ni
ar
Example for Audio
HTML code

<!DOCTYPE html>
<html lang="en">
Le
<head>
ve
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
si

<title>Audio with Fallback</title>


</head>
er

<body>
<h1>Audio with Fallback Content</h1>
m

<audio controls>
<source src="example.ogg" type="audio/ogg">
Em

<source src="example.mp3" type="audio/mpeg">


Your browser does not support the audio element.
<a href="example.mp3">Download the audio file</a></a>.
</audio>
</body>
</html>

Example for Video

79
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

ng
<title>Video with Fallback</title>
</head>
<body>

ni
<h1>Video with Fallback Content</h1>
<video width="600" height="400" controls>

ar
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
Le
<a href="example.mp4">Download the video file</a>.
</video>
</body>
ve
</html>
si

Embedding Media Using Object and Embed Tags


er

The <object> and <embed> tags can also be used to embed multimedia
m

content.
Em

Example using Object


HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

80
<title>Embedding Media with Object</title>
</head>
<body>
<h1>Embedding Media with Object</h1>
<object data="example.mp4" type="video/mp4" width="600"
height="400">
<a href="example.mp4">Download the video file</a>.

ng
</object>
</body>
</html>

ni
ar
Example using Embed
HTML code

<!DOCTYPE html>
<html lang="en">
Le
<head>
ve
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
si

<title>Embedding Media with Embed</title>


</head>
er

<body>
<h1>Embedding Media with Embed</h1>
m

<embed src="example.mp4" width="600" height="400">


</body>
Em

</html>

81
ng
ni
ar
Le
Summary
ve

● Images: Use the <img> tag.


si

● Audio: Use the <audio> tag with controls attribute.


● Video: Use the <video> tag with controls attribute.
er

● YouTube Videos: Use the <iframe> tag.


m

● SVG: Directly embed SVG code within the <svg> tag.


● Fallback Content: Provide alternative content for unsupported browsers.
Em

● Object and Embed Tags: Alternative ways to embed multimedia content.

These are the basics of embedding multimedia content in HTML. If you have any
questions or need further clarification, feel free to ask!

82
12. HTML Meta Tags and SEO
Meta tags are HTML tags that provide metadata about a webpage. Metadata is
data that describes other data. Meta tags are not visible to users on the webpage
itself but are essential for search engines, browsers, and social media platforms
to understand and process your site correctly.

ng
Meta tags are placed inside the <head> section of an HTML document.

ni
ar
Why Meta Tags are Important for SEO

SEO (Search Engine Optimization) is the practice of optimizing a website to


Le
rank higher in search engine results pages (SERPs). Meta tags are crucial for
SEO because they provide information about your page that search engines like
ve
Google use to index and rank your website.
si

Common HTML Meta Tags for SEO


er

1. <title> Tag
m

The <title> tag defines the title of the webpage. It appears in browser tabs and
Em

is displayed as a clickable headline in search engine results.

● SEO Impact: The title tag is one of the most important on-page SEO
elements.

Example:

<title>Best Web Development Tutorials for Beginners</title>

83
2. <meta name="description">

The <meta> description provides a short summary of the webpage's content.


Search engines sometimes display this description in search results, although it

ng
may not always be used.

ni
● SEO Impact: A well-written meta description can increase click-through
rates (CTR) from search results.

ar
Example:

Le
<meta name="description" content="Learn the basics of web
development with our easy-to-follow tutorials on HTML, CSS, and
JavaScript.">
ve
si
er

3. <meta name="keywords">
m

This meta tag was used to specify important keywords related to the page
content. However, most modern search engines, including Google, no longer use
Em

this meta tag for ranking purposes.

● SEO Impact: Not used by Google for SEO ranking.

Example:

<meta name="keywords" content="web development, HTML, CSS,


JavaScript, tutorials">

84
4. <meta name="robots">

The robots meta tag instructs search engine crawlers on how to interact with
your page. It controls whether the page should be indexed and whether the links

ng
on the page should be followed.

ni
● SEO Impact: Helps control how search engines interact with your site.

ar
Common values:

● index or noindex: Allows or disallows indexing of the page.


Le
● follow or nofollow: Allows or disallows following the links on the page.

Example:
ve

<meta name="robots" content="index, follow">


si
er
m

5. <meta charset="UTF-8">
Em

This tag specifies the character encoding used by the webpage. UTF-8 is the
most common character encoding.

● SEO Impact: Ensures that characters display correctly on the page.

Example:

85
<meta charset="UTF-8">

6. <meta name="viewport">

ng
This tag controls the viewport's size and scaling on mobile devices. Without this,
mobile users might see a desktop version of your site that doesn't fit their screen

ni
properly.

ar
● SEO Impact: Vital for mobile-friendly design, which is a ranking factor in
Google's algorithm.

Example:
Le
<meta name="viewport" content="width=device-width,
ve
initial-scale=1.0">
si
er

Meta Tags for Social Sharing (Open Graph & Twitter Cards)
m

Social media platforms use Open Graph (OG) meta tags and Twitter Cards
Em

meta tags to generate rich previews when sharing your content.

1. Open Graph (OG) Meta Tags

Used by Facebook, LinkedIn, and other platforms to customize the way your
content is displayed when shared.

● og:title: The title of your content.

86
● og:description: A brief description.
● og:image: The URL of an image to display in the preview.
● og:url: The canonical URL of the page.

Example:

ng
<meta property="og:title" content="Learn HTML with Our
Tutorials">
<meta property="og:description" content="Master the basics of

ni
HTML with step-by-step tutorials.">
<meta property="og:image"

ar
content="https://example.com/image.jpg">
<meta property="og:url"
content="https://example.com/learn-html">
Le
2. Twitter Card Meta Tags
ve

Twitter uses Twitter Card meta tags to display rich media in tweets.
si

● twitter:card: The type of card to display (e.g., summary,


er

summary_large_image).
● twitter:title: The title of the content.
m

● twitter:description: A description of the content.


Em

● twitter:image: A URL to an image to display in the tweet.

Example:

<meta name="twitter:card" content="summary_large_image">


<meta name="twitter:title" content="Learn HTML Easily">
<meta name="twitter:description" content="Step-by-step HTML
tutorials for beginners.">

87
<meta name="twitter:image"
content="https://example.com/image.jpg">

Example of Meta Tags in an HTML Document

ng
Here’s an example of a complete set of meta tags used in an HTML document:

ni
<!DOCTYPE html>

ar
<html lang="en">
<head>
<meta charset="UTF-8">
Le
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content="Learn HTML with our
ve
comprehensive tutorials and guides. Start building websites
today.">
<meta name="robots" content="index, follow">
si

<meta name="author" content="John Doe">


<meta property="og:title" content="HTML Tutorials for
er

Beginners">
<meta property="og:description" content="Start learning HTML
m

with easy-to-follow tutorials.">


<meta property="og:image"
Em

content="https://example.com/image.jpg">
<meta property="og:url"
content="https://example.com/html-tutorials">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Tutorials for
Beginners">
<meta name="twitter:description" content="Step-by-step HTML
tutorials for those new to web development.">
<meta name="twitter:image"

88
content="https://example.com/image.jpg">
<title>Learn HTML - Beginner Tutorials</title>
</head>
<body>
<h1>Welcome to the HTML Tutorial</h1>
<p>This page covers the basics of HTML meta tags and their
importance for SEO and social media sharing.</p>

ng
</body>
</html>

ni
ar
Key Takeaways:
Le
1. Meta tags play a vital role in optimizing your site for search engines and
social media platforms.
ve
2. Title and description tags are key for SEO and attracting clicks from
search engine results.
si

3. Viewport meta tags are essential for making your site mobile-friendly.
4. Open Graph and Twitter Cards meta tags help control how your content
er

is displayed when shared on social media.


m
Em

HTML Best Practices


Following best practices while writing HTML ensures that your code is clean,
accessible, and easy to maintain. Here’s a guide to essential HTML best
practices that will improve the performance, readability, and searchability of your
web pages.

89
1. Use Semantic HTML Tags

Semantic HTML helps both browsers and developers understand the structure
and meaning of your content. It also improves accessibility and SEO.

Good example:

ng
<header></header>

ni
<nav></nav>
<main></main>

ar
<article></article>
<section></section>
<footer></footer>
Le
Bad example:
ve

<div id="header"></div>
<div id="nav"></div>
si

<div id="main-content"></div>
er

Why it's important:


m

● Makes your code more readable and maintainable.


Em

● Helps search engines and assistive technologies (like screen readers)


understand your page structure.

2. Always Close Tags

90
HTML is lenient, but it's good practice to close all tags properly to avoid
unexpected behavior across different browsers.

Good example:

<p>This is a paragraph.</p>
<img src="image.jpg" alt="An image of something." />

ng
Bad example:

ni
<p>This is a paragraph.

ar
<img src="image.jpg" alt="An image of something.">

Why it's important:


Le
ve
● Ensures cross-browser consistency.
● Helps tools (like validators and screen readers) to properly parse the
document.
si
er

3. Keep Your Code DRY (Don't Repeat Yourself)


m

Avoid redundant code. Reuse common components through classes, and avoid
Em

writing the same structure multiple times.

Good example:

<div class="card">Card content</div>


<div class="card">Card content</div>

91
Bad example:

<div style="border: 1px solid black; padding: 10px;">Card


content</div>
<div style="border: 1px solid black; padding: 10px;">Card
content</div>

ng
Why it's important:

● Makes maintenance easier.

ni
● Reduces file size and makes the page load faster.

ar
4. Optimize for Accessibility Le
Ensure that your website is usable by people with disabilities, such as vision or
ve
motor impairments.

Use the alt attribute for images:


si
er

<img src="cat.jpg" alt="A cute black cat">


m

Label form inputs:


Em

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Add aria-* attributes for advanced accessibility when necessary:

92
<button aria-label="Close menu">X</button>

Why it's important:

● Accessibility is essential for inclusivity and is often legally required.


● Improves SEO (Google emphasizes accessible websites).

ng
ni
5. Use External CSS and JavaScript Files

Separate HTML structure from styling (CSS) and behavior (JavaScript). Don’t

ar
write CSS or JavaScript inline unless it’s absolutely necessary.

Good example: Le
<link rel="stylesheet" href="styles.css">
ve
<script src="scripts.js"></script>
si

Bad example:
er

<style>
body { font-size: 16px; }
m

</style>
<script>
Em

alert('Welcome!');
</script>

Why it's important:

● Keeps your HTML clean and organized.


● Improves loading performance since browsers cache external files.

93
6. Keep Your HTML Indented and Well-Organized

Indent nested elements consistently for better readability and maintainability.

Good example:

ng
<ul>
<li>

ni
<a href="#">Link 1</a>
</li>

ar
<li>
<a href="#">Link 2</a>
</li>
</ul> Le
Bad example:
ve

<ul>
si

<li><a href="#">Link 1</a></li>


<li><a href="#">Link 2</a></li>
er

</ul>
m

Why it's important:


Em

● Makes the code easier to debug.


● Helps other developers understand your structure quickly.

7. Use Descriptive Class and ID Names

94
Name your classes and IDs in a way that reflects their function, not their
appearance.

Good example:

<div class="product-description"></div>

ng
Bad example:

ni
ar
<div class="red-box"></div>

Why it's important:


Le
● Descriptive names are more maintainable, especially when the design
ve
changes.
● Helps you and other developers quickly understand the purpose of an
si

element.
er
m

8. Use Meaningful alt Text for Images


Em

The alt attribute provides alternative text for images. This is important for SEO
and accessibility.

Good example:

<img src="mountain.jpg" alt="A view of a snow-capped mountain">

95
Bad example:

<img src="mountain.jpg" alt="">

Why it's important:

● Helps visually impaired users understand the content.

ng
● Improves search engine understanding of images.

ni
9. Use srcset for Responsive Images

ar
To ensure images look good on all devices, use the srcset attribute to specify
Le
different images for different screen sizes.

Good example:
ve

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w"


si

alt="A beautiful landscape">


er

Why it's important:


m

● Reduces page load time by serving appropriately sized images.


● Provides a better user experience across devices.
Em

10. Minimize HTTP Requests

Reduce the number of requests to external resources like images, CSS, and
JavaScript files. Minimize the use of large libraries or frameworks unless
necessary.

96
Good example:

<link rel="stylesheet" href="styles.min.css">


<script src="scripts.min.js"></script>

Bad example:

ng
<link rel="stylesheet" href="styles1.css">

ni
<link rel="stylesheet" href=

ar
Why it's important:

● Reduces load time.


Le
● Improves overall site performance and user experience.
ve

11. Use Meta Tags for SEO and Mobile Optimization


si

Make sure your page includes essential meta tags for SEO and
mobile-friendliness.
er

Good example:
m

<meta name="description" content="Learn HTML with our


Em

tutorials.">
<meta name="viewport" content="width=device-width,
initial-scale=1">

Why it's important:

● Ensures your page is optimized for search engines.


● Makes your page mobile-responsive.

97
12. Validate Your HTML

Use a validator like the W3C HTML Validator to check for errors and ensure that
your HTML adheres to standards.

Why it's important:

ng
● Detects errors early.

ni
● Improves cross-browser compatibility.

ar
13. Use rel="noopener noreferrer" for External Links
Le
When linking to external websites, always use rel="noopener noreferrer"
to prevent security risks like tab-nabbing.
ve

Good example:
si

<a href="https://example.com" target="_blank" rel="noopener


er

noreferrer">Visit Example</a>
m

Why it's important:


Em

● Protects your website from potential security risks.


● Ensures a safe user experience when opening external links.

14. Use Comments to Document Your Code

Comments help you and other developers understand your code.

98
Good example:

<!-- This is the main navigation bar -->


<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>

ng
Why it's important:

ni
● Helps future developers (and your future self) understand the purpose of

ar
your code.
● Keeps your project organized.
Le
ve
Summary of HTML Best Practices:

1. Use semantic HTML tags for readability and accessibility.


si

2. Always close your tags properly.


er

3. Keep your code DRY (Don’t Repeat Yourself).


4. Optimize for accessibility by using alt attributes, labels, and ARIA.
m

5. Separate HTML, CSS, and JavaScript into external files.


6. Keep your HTML indented and well-organized.
Em

7. Use descriptive and meaningful class and ID names.


8. Write meaningful alt text for images.
9. Use srcset for responsive images.
10. Minimize HTTP requests by combining resources.
11.Include SEO and mobile optimization meta tags.
12. Validate your HTML using tools like the W3C Validator.

99
13. Use rel="noopener noreferrer" for external links.
14. Use comments to document your code for better collaboration.

By following these practices, you’ll write cleaner, more maintainable HTML that’s
optimized for performance, SEO, and accessibility.

ng
ni
ar
That is All. 👏 Le
ve
si
er
m
Em

100
Thank you for joining me on this journey. Your time, curiosity, and dedication
mean the world to me. I hope this book has inspired you, expanded your
knowledge, and ignited your passion.

ng
Keep learning, keep growing, and remember—great things are built one step at a
time.

ni
ar
For any message, feel free to reach out to me at: 0923191253

Le
Happy creating, and until next time—stay curious and keep coding!
ve
si

Happy Coding
er
m

Mohammed Teshome
Em

101
Em
m
er
si
ve
Le
ar
ni
ng

102

You might also like