2.
1 Overview of HTML:
HTML-
TML (Hyper Text Markup Language) is the standard markup language for
H
creating web pages. It describes the structure of a webpage using elements that
inform the browser how to display content, labeling sections like headings,
paragraphs, and links.
HTML Element-
n HTML element is a component of an HTML document that consists of a start
A
tag, content, and an end tag. It defines how a specific piece of content should be
displayed in the browser.
Structure of an HTML Element:
1. Start Tag: Indicates the beginning of the element(e.g., <p> for a
paragraph).
2. Content: The text or other elements contained withinthe tags (e.g., "This is
a paragraph.").
3. End Tag: Indicates the end of the element (e.g., </p>).
Eg : <p>This is a paragraph.</p>
Types of HTML Elements:
● B lock-level Elements: These elements typically starton a new line
(e.g., <div>, <h1>, <p>).
● Inline Elements: These elements do not start on anew line and can be
contained within block-level elements (e.g. <a>, <strong>).
HTML elements are crucial for structuring and formatting content on a web page.
2.2 Basic Structure of HTML:
2.3 Basic Tags :
2.3.1 The <!DOCTYPE> Declaration :
he <!DOCTYPE> declaration represents the document type, and helps browsers to display web
T
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
2.3.2 HTML Headings :
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
2.3.3 HTML Paragraphs :
HTML paragraphs are defined with the <p> tag
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2.3.4 HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.facebook.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
2.3.5 HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<img src="smile.jpg" alt="Please Smile" width="104" height="142">
2.3.6 Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
2.3.7 HTML Attributes :
ll HTML elements can have attributes. Attributes provide additional information about
A
elements. Attributes are always specified in the start tag. Attributes usually come in name/value
pairs like: name="value".
The href Attribute
he <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
T
to:
<a href="https://www.instagram.com">Visit W3Schools</a>
The src Attribute
he <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
T
to the image to be displayed:
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1 . Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".
otes: External images might be under copyright. If you do not get permission to use it, you may
N
be in violation of copyright laws. In addition, you cannot control external images; it can
suddenly be removed or changed.
2 . Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current
page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
The width and height Attributes
he <img> tag should also contain the width and height attributes, which specify the width and
T
height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
he required alt attribute for the <img> tag specifies an alternate text for an image, if the image
T
for some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
ou should always include the lang attribute inside the <html> tag, to declare the language of the
Y
Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the country.
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a paragraph.</p>
2.3.8 HTML Paragraph :
<!DOCTYPE html>
html>
<
<body>
p>
<
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
p>
<
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
p>
<
The number of lines in a paragraph depends on the size of the browser window. If you resize the
browser window, the number of lines in this paragraph will change.
</p>
</body></html>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page: ( no end tag)
h1>This is heading 1</h1>
<
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <pre> Element:
The HTML <pre> element defines preformatted text.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
2.3.9 The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagnamestyle="property:v alue;">
Thepropertyis a CSS property. Thevalueis a CSSvalue.
Background Color
The CSS background-color property defines the background color for an HTML element.
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
2.3.10 HTML Formatting Elements:
● b> - Bold text
<
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
<
● sub> - Subscript text
● <sup> - Superscript text
2.3.11 HTML Quotation and Citation Elements:
2.3.12 HTML Comments :
TML comments are not displayed in the browser, but they can help document your HTML
H
source code.
Syntax:<!-- Write your comments here -->
2.3.13 HTML COLORS:
Background color :
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color :
<h1style="color:Tomato;">Hello World</h1>
<pstyle="color:DodgerBlue;">Lorem ipsum...</p>
<pstyle="color:MediumSeaGreen;">Ut wisi enim...</p>
Border color:
<h1style="border:2px solid Tomato;">Hello World</h1>
2.3.14 HTML TABLES :
xample :
E
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
th {
background-color: yellow;
}
</style>
<title>Class Timetable</title>
</head>
<body>
<table>
<caption>Class Timetable</caption>
<colgroup>
col style="width: 20%;">
<
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 - 10:00</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
</tr>
<tr>
<td>10:15 - 11:15</td>
<td>Art</td>
<td>PE</td>
<td>Math</td>
<td>Music</td>
</tr>
<tr>
<td>11:30 - 12:30</td>
<td>History</td>
<td>Science</td>
<td>English</td>
<td>Math</td>
</tr>
<tr>
<td>1:00 - 2:00</td>
<td>PE</td>
<td>Art</td>
<td>Music</td>
<td>Science</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">End of Timetable</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.3.15 Lists:
2.3.15.1Unordered Lists:
An unordered list starts with the<ul>tag. Each listitem starts with the<li>tag.
We can choose List Item Marker:
2.3.15.2 Ordered List :
An ordered list starts with the<ol>tag. Each listitem starts with the<li>tag.
We can choose List Item Marker:
Nested HTML List :
Lists can be nested (list inside list):
2.3.15.3 Description List :
A description list is a list of terms, with a description of each term.
he<dl>tag defines the description list, the<dt>tag defines the term (name), and the<dd>tag
T
describes each term:
2.4.1 HTML Forms:
TML forms are used to collect user input. The input is sent to a server for processing.
H
A basic form uses the <form> element to structure the data collection.
Syntax:
<form action="submit_form.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
Key Attributes in <form>:
● action: Specifies the URL where form data is sent.
● method: Specifies the HTTP method (GET or POST) used when sending form data.
2.4.2 HTML Form Attributes:
Attributes in the <form> tag define how the form behaves.
2.4.3. HTML Form Elements:
HTML forms contain various elements for user input, such as:
2.4.4. HTML Input Types:
The <input> element has different type values for specific functionalities.
2.4.5. HTML Input Attributes
Attributes customize the behavior of <input> elements.
2.4.6. The form Attribute
he form attribute associates input elements with a specific form when inputs are outside the
T
<form> tag.
Example:
<form id="form1" action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
<input type="submit" form="form1" value="Submit Form">
Here, the form attribute in the <input> connects the submit button to form1.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprehensive HTML Form Example</title>
</head>
<body>
<h1>Registration Form</h1>
<!-- Form Element -->
<form id="registrationForm" action="/submit" method="post" enctype="multipart/form-data"
autocomplete="on">
<!-- Input Elements with Attributes -->
<fieldset>
<legend>Personal Information</legend>
<label for="fullname">Full Name:</label>
input type="text" id="fullname" name="fullname" placeholder="Enter your full name"
<
maxlength="50" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<br><br>
<label for="password">Password:</label>
input type="password" id="password" name="password" placeholder="Enter a strong
<
password" required minlength="8">
<br><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required> Male
<input type="radio" id="female" name="gender" value="female" required> Female
<br><br>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading"> Reading
<input type="checkbox" id="traveling" name="hobbies" value="traveling"> Traveling
<input type="checkbox" id="sports" name="hobbies" value="sports"> Sports
<br><br>
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select</option>
<option value="usa">USA</option>
<option value="india">India</option>
<option value="uk">UK</option>
</select>
<br><br>
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
</fieldset>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
<!-- External Submit Button using the form Attribute -->
<input type="button" form="registrationForm" value="Submit Form (External)">
</body>
</html>
Output:
2.5 HTML Multimedia :
ultimedia refers to the integration of various forms of media, such as audio, video, and images,
M
in web pages. HTML provides tags and attributes to handle multimedia content effectively.
2.5.1HTML Audio
<audio>element allows embedding audio files inwebpages.
The
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Attributes:
● ontrols
c : Adds play, pause, and volume controls.
● autoplay
: Starts playing the audio automatically.
● loop
: Repeats the audio file indefinitely.
● muted
: Mutes the audio by default.
2.5.2HTML Video
<video>element is used for embedding videos.
The
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes:
● idthand
w height : Set the dimensions of the videoplayer.
● controls
: Displays video controls (play, pause, etc.).
● autoplay
: Plays the video automatically.
● loop
: Repeats the video indefinitely.
● poster
: Displays an image before the video loads.
2.5.3 HTML Images:
<img>element embeds images in the webpage.
The
<img src="image.jpg" alt="A beautiful scenery" width="500" height="300">
Attributes:
s
● rc
: Path to the image file.
● alt: Alternate text displayed if the image fails toload.
●
widtha ndheight : Set the image dim
2.5.4 HTML Canvas :
<canvas>element allows drawing graphics via JavaScript.
The
canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
<
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 150, 50);
</script>
Example :
!DOCTYPE html>
<
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Multimedia Example</title>
</head>
<body>
<h1>HTML Multimedia Example</h1>
!-- Image -->
<
<h2>Image</h2>
<img src="https://via.placeholder.com/400x200" alt="Sample Image" width="400">
!-- Audio -->
<
<h2>Audio</h2>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
!-- Video -->
<
<h2>Video</h2>
<video width="640" height="360" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
!-- Canvas -->
<
<h2>Canvas</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#000000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'lightblue';
ctx.fillRect(50, 50, 200, 50);
</script>
</body></html>
