1.
Introduction
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
2. Environment Setup
Web Browser
Google Chrome
Code Editor
Visual Studio Code
3. Html File
<!DOCTYPE html>
<html>
<head>
<title>html document</title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents.
1
4. HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname> Content. </tagname>
5. HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
6. HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space
(a margin) before and after a paragraph.
<p>This is a paragraph.</p>
7. HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<sub> - Subscript text
<sup> - Superscript text
2
8. HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source
code.
<!-- Write your comments here -->
9. HTML Styles – CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Eg: <h1 style="color:blue;">A Blue Heading</h1>
Internal - by using a <style> element in the <head> section
Eg: <head>
<style>
h1 {color: blue;}
p {color: red;}
</style>
</head>
External - by using a <link> element to link to an external CSS file
Eg: <head>
<link rel="stylesheet" href="styles.css">
</head>
10. HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
<h1 style="background-color:Orange;">Orange</h1>
RGB Color Values
An RGB color value represents RED, GREEN, and BLUE light sources.
3
Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and
255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other
two (green and blue) are set to 0.
<h1 style="background-color:rgb(60, 179, 113);">Light Green</h1>
HEX Color Values
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color.
#rrggbb
<h1 style="background-color:#ff0000;">red</h1>
HSL Color Values
HSL stands for hue, saturation, and lightness.
<h1 style="background-color:hsl(0, 100%, 50%);">Red</h1>
RGBA
HSLA
11. HTML Tables
The <table> tag in HTML is used to create a table within a webpage. This tag is part of a group of
tags that are used together to define the structure and contents of a table. The main tags involved in
creating a table include:
<table>: Defines the start and end of the table.
<tr> (Table Row): Defines a row in the table.
<th> (Table Header): Defines a header cell in a table, which is typically bold and centered.
<td> (Table Data): Defines a standard cell in a table.
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
4
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Colspan & Rowspan
To make a cell span over multiple columns, use the colspan attribute
To make a cell span over multiple rows, use the rowspan attribute
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
12.HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
5
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
13. HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is.
The two most common display values are block and inline.
Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far
as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
HTML Div Element
The <div> element is by default a block element, meaning that it takes all available width, and comes
with line breaks before and after.
Example
A <div> element takes up all available width:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
6
Result
Lorem Ipsum
I am a div
dolor sit amet.
13. HTML class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the specific class name.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
7
14. HTML id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must
be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It is also used by
JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS
properties within curly braces {}.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by
one HTML element within the page
15. HTML Iframes
The <iframe> tag in HTML is used to embed another HTML document within the current
document. This allows you to display content from another webpage, such as a video, map,
or another web page, within a framed area of your page.
<iframe src="URL" width="width" height="height"></iframe>
Common Attributes:
src: Specifies the URL of the page to embed.
width: Sets the width of the iframe.
height: Sets the height of the iframe.
name: Assigns a name to the iframe, which can be used as a target for links.
8
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h2>Embedded YouTube Video</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" ></iframe>
</body>
</html>
16. HTML Links
HTML links, also known as hyperlinks, are created using the <a> (anchor) tag. Links are used to
navigate from one page to another, to other locations within the same page, or to different resources
such as email addresses or files.
Basic Syntax:
<a href="URL">Link Text</a>
Common Attributes:
href: Specifies the URL of the page or resource the link goes to.
target: Specifies where to open the linked document.
title: Provides additional information about the link (displayed as a tooltip on hover).
rel: Specifies the relationship between the current document and the linked document.
Examples
Linking to an External Website
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<h2>Link to an External Website</h2>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
Opening Links in a New Tab
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<h2>Open Link in a New Tab</h2>
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
</body>
9
</html>
17. HTML Images
In HTML, the <img> tag is used to embed images in a webpage. This tag is empty, meaning it does
not have a closing tag, and it uses various attributes to define the source, alternative text, dimensions,
and other properties of the image.
Basic Syntax
<img src="URL" alt="Alternative Text">
Common Attributes:
src: Specifies the path to the image file.
alt: Provides alternative text for the image if it cannot be displayed.
width: Sets the width of the image.
height: Sets the height of the image.
title: Provides additional information about the image (displayed as a tooltip on hover).
<!DOCTYPE html>
<html>
<head>
<title>Image Dimensions</title>
</head>
<body>
<h2>Image with Specified Dimensions</h2>
<img src="https://www.example.com/image.jpg" alt="Example Image" width="300"
height="200">
</body>
</html>
18. HTML Audios and Videos
In HTML, the <audio> and <video> tags are used to embed audio and video files into a webpage.
These tags provide built-in controls for play, pause, and volume, and can be customized with
various attributes to enhance functionality and user experience.
The <audio> Tag
Basic Syntax
<audio src="path/to/audiofile.mp3" controls>
Your browser does not support the audio element.
</audio>
Common Attributes:
o src: Specifies the path to the audio file.
o controls: Adds playback controls like play, pause, and volume.
o autoplay: Starts playing the audio as soon as it is ready.
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
10
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
The <video> Tag
The <video> tag is used to embed video content.
Basic Syntax
<video src="path/to/videofile.mp4" controls>
Your browser does not support the video element.
</video>
Common Attributes:
o src: Specifies the path to the video file.
o controls: Adds playback controls like play, pause, and volume.
o width and height: Set the dimensions of the video player.
o autoplay: Starts playing the video as soon as it is ready.
19. HTMLIcon
In HTML, icons can be added to web pages using various methods, such as icon fonts, inline SVGs,
or external image files. One of the most popular ways to include icons is by using icon libraries like
Font Awesome or Material Icons. These libraries provide a wide range of scalable icons that can be
easily styled with CSS.
Using Font Awesome
To use Font Awesome icons, you need to include the Font Awesome CSS file in your HTML
document. You can do this by linking to the CDN.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-
beta3/css/all.min.css">
</head>
<body>
<h2>Font Awesome Icons</h2>
<i class="fas fa-camera"></i> Camera Icon
<i class="fas fa-heart"></i> Heart Icon
</body>
11
</html>
20. Meta Tags
In HTML, <meta> elements provide metadata about the HTML document. Metadata is information
about the data on the webpage and its attributes, which can include details such as the character
encoding, viewport settings, author, description, keywords, and more. Metadata is not displayed on
the webpage itself but is used by browsers and search engines for various purposes.
Basic Structure of a Meta Tag
<meta name="name" content="content">
Commonly Used Meta Tags:
o Charset
<meta charset="UTF-8">
Specifies the character encoding for the HTML document.
o Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Defines the viewport settings for responsive web design. This is crucial for ensuring that web pages
display properly on various devices and screen sizes.
o Description
<meta name="description" content="Description of the webpage">
Provides a brief description of the content on the webpage. This description is often used by search
engines to display snippets in search results.
o Keywords
<meta name="keywords" content="keyword1, keyword2, keyword3">
Specifies keywords or phrases relevant to the content on the webpage. While not as heavily used by
search engines as in the past, it can still provide additional context.
12
13
