Scribd
Upload
2 views114 pages

Basic HTML

The document provides an introduction to HTML, including its differences from CSS and JavaScript, and details on HTML elements, meta tags, and their functions. It covers the installation of Visual Studio Code and the Live Server extension, as well as various HTML tags and their usage. Additionally, it explains the purpose of meta tags and their importance for web pages, including examples of common meta tags.

Uploaded by

srinuyadav1676
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
2 views114 pages

Basic HTML

The document provides an introduction to HTML, including its differences from CSS and JavaScript, and details on HTML elements, meta tags, and their functions. It covers the installation of Visual Studio Code and the Live Server extension, as well as various HTML tags and their usage. Additionally, it explains the purpose of meta tags and their importance for web pages, including examples of common meta tags.

Uploaded by

srinuyadav1676
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

BASIC HTML

=>INTRODUCTION TO HTML
Introduction To HTML

Difference Between HTML vs CSS vs JavaScript

Feature HTML CSS JavaScript

Hypertext
Stands Cascading
Markup JavaScript
for Style Sheets
Language

Defines
content Defines Adds
and styles and interactivity
Purpose
structure layouts for and behavior
of web web pages to web pages
pages

Type of Markup Style Sheet Programming


Language Language Language Language

Uses tags Uses Uses


Syntax to define selectors and statements
elements declarations and
Feature HTML CSS JavaScript

and to style expressions to


attributes elements perform
actions and
calculations

Defines
Adds
content Enhances
functionality
and the
Role and
structure presentation
interactivity
of web of web pages
to web pages
pages

<html>,
<head>, if/else
color, font,
<body>, statements,
Examples margin,
<p>, loops, event
padding, etc.
<img>, handlers, etc.
etc.

Hypertext Markup Language ( HTML ) :


HTML is a markup language used to describe the
content and structure of a webpage. It uses a set of
tags and attributes to define the structure of the
content, such as headings, paragraphs, links, images,
tables, and forms. The HTML code is interpreted by the
browser to render the webpage, and it tells the
browser how to display the content and where to
position it on the page.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>My Heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Iure sit, nam commodi quasi vel facilis molestias?
Quis aut doloribus maiores illo repellendus. Facilis
harum repudiandae, ullam reiciendis numquam nobis?
Commodi repellat illum fugiat nesciunt. Reiciendis, illo
quas corporis nesciunt suscipit excepturi! Sit autem ut
reprehenderit. Rem temporibus exercitationem id.
Autem explicabo veniam quod deserunt alias quisquam
officiis accusamus, voluptatum repellendus neque
eligendi officia unde dolorum possimus natus corporis
iste reiciendis fuga, quam est velit voluptatem facilis
laudantium eaque! Veniam beatae repudiandae
quibusdam blanditiis eum, aut, doloribus earum
adipisci temporibus non ea quasi impedit perferendis
doloremque consequuntur accusantium dolore deleniti
sint!</p>
</body>
</html>

Output :

Output

Steps To Install Visual Studio Code :


1. Go to the official website of Visual Studio Code
([Link] and click on the
"Download for Windows" button if you are using a
Windows operating system. If you are using a Mac or
Linux operating system, click on the respective buttons.
2. Once the download is complete, double-click on the
downloaded file to start the installation process.
3. Follow the instructions on the screen to complete
the installation process. During the installation, you can
select the destination folder, start menu folder, and
other settings as per your preference.
4. Once the installation is complete, open Visual Studio
Code by double-clicking on the shortcut on your
desktop or by searching for it in the Start menu.
5. Visual Studio Code is now ready to use. You can start
coding by creating a new file or opening an existing
one.
Steps to install the Live Server extension in Visual
Studio Code :
1. Open Visual Studio Code.
2. Click on the Extensions icon on the left-hand side of
the window.
3. In the Extensions panel, type "Live Server" in the
search bar.
4. The Live Server extension should appear in the
search results. Click on the "Install" button next to the
Live Server extension.
5. After the installation is complete, you should see an
option to "Open with Live Server" in the bottom right-
hand corner of the editor window.
6. Click on "Open with Live Server" to start the server
and view your web page in the browser.

=>META TAGS
Meta Tags

Meta tags are HTML elements that provide information


about a web page to search engines and web browsers.
They are placed in the head section of an HTML
document and are not visible to website visitors. Meta
tags include various attributes such as name, content,
and charset, and are used to provide metadata about
the document, such as its author, keywords,
description, and viewport. Search engines use this
metadata to understand the content of a page and to
display it properly in search results. Web browsers may
also use the metadata to optimize the display of the
page, such as setting the viewport size for mobile
devices.
Types Of Meta Tags :
1. <meta charset="UTF-8"> :
This tag is used to declare the character encoding of an
HTML [Link] charset attribute specifies the
character set used in the document, which is
typically UTF-8, a widely used character encoding that
can represent almost all characters in the Unicode
character set.
2. <meta http-equiv="X-UA-Compatible"
content="IE=edge"> :
The <meta> tag with the http-equiv attribute and X-
UA-Compatible value is used to specify the version of
Internet Explorer (IE) that the web page should be
rendered [Link] value of IE=edge indicates that the
web page should be rendered in the highest version of
IE available in the browser, regardless of the version
that is being used. This helps ensure that the page is
rendered properly and functions as expected in all
versions of IE.
3. <meta name="viewport" content="width=device-
width, initial-scale=1.0"> :
This tag is used in HTML to set the viewport of the
[Link] viewport is the user's visible area of a web
page, and it varies depending on the device being used.
By setting the viewport with this tag, we can make sure
that the web page looks good and is properly scaled on
all devices, including desktops, laptops, tablets, and
[Link] width=device-width attribute sets
the width of the viewport to the width of the device,
which means the web page will automatically adjust to
the size of the device's screen. The initial-
scale=1.0 attribute sets the initial zoom level of the
web page to 100%, which means the web page will be
displayed at its original size when the user first visits
the page.
4. <title>Meta Tags</title>
This tag is used to define the title of the HTML
document. It is typically placed within
the <head> section of the HTML file and is displayed in
the title bar of the web browser when the page is
opened. The text inside the <title> tag is also used by
search engines as the main title for the page in search
results.
5. <meta name = "author" content="GFG">
This meta tag is used to provide information about the
author of the webpage. The "name" attribute is used
to specify the type of metadata and
the "content" attribute is used to define the value of
that metadata.
6. <meta name = "description" content="This is a
description">
This tag with name="description" is used to provide a
brief description of the content of the webpage. It is
often used by search engines to display a short
summary of the page in search results. The content
attribute is where the description text is provided.
7. <meta name = "keywords" content= "Movies,top 50
movies,gfg">
This tag is used to provide the search engines with a list
of keywords or phrases relevant to the content of the
webpage. These keywords or phrases help search
engines to index the webpage properly and improve its
visibility in search results.
Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Meta Tags</title>
<meta name = "author" content="GFG">
<meta name = "description" content="This is a
description">
<meta name = "keywords" content= "Movies,top 50
movies,gfg">
</head>
<body>
<h1>Meta Tags</h1>
<p>Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Molestias, facilis adipisci beatae rerum
distinctio et iste recusandae ullam molestiae at
consequuntur soluta quas expedita? Nulla magni illum
doloribus doloremque exercitationem accusamus
corporis velit, fuga nemo ab at ducimus incidunt
voluptatum dolorum quisquam suscipit eveniet
molestias nesciunt quis maxime obcaecati commodi
eaque eligendi est. Officiis, commodi accusantium odio,
sapiente aperiam molestias aut architecto dolorem qui
ea tempora optio non repudiandae unde similique alias
sunt ad mollitia corrupti veritatis? Delectus, doloribus
dolores quae nemo rerum iusto numquam qui
necessitatibus ullam harum quos unde culpa adipisci
obcaecati blanditiis iure, beatae totam reiciendis
natus.</p>
</body>
</html>

Output :

Output
=>HTML ELEMENTS
HTML Elements

HTML elements are the basic building blocks of an


HTML document. An HTML element is defined by a
start tag, some content, and an end tag. The start tag is
the opening tag that defines the element, while the
end tag is the closing tag that signifies the end of the
element. Some HTML elements do not have an end tag
and are referred to as self-closing tags. HTML
elements can be text, images, forms, videos, audio, and
more, and they can be used to structure and format
the content of a web page.
Types :
1. Heading Tag :
In HTML, a heading tag is used to define the headings
or titles of a webpage. There are six levels of heading
tags : h1, h2, h3, h4, h5, and h6. The h1 tag is used for
the main heading or title of the webpage, and the
subsequent tags (h2, h3, etc.) are used for subheadings
and other levels of headings.
The syntax for heading tags from h1 to h6 is as follows:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The h1 tag represents the most important or highest-
level heading on the page, while h6 represents the
least important or lowest-level heading.
2. Paragraph Tag :
The paragraph tag <p> in HTML is used to define a
paragraph of text. It is a block-level element, which
means it creates a rectangular block of content that
takes up the full width of its container.
The syntax for the paragraph tag is as follows:
<p> Your text here </p>
3. Span Tag :
The <span> tag is used as a container for small pieces
of content that are inline with the surrounding text,
such as a word or phrase. It is an inline element and
does not create a new line. The purpose of
the <span> tag is to apply styling or scripting to specific
content without affecting the structure of the
document. It can also be used to group and apply the
same styling to multiple inline elements. The syntax for
the <span> tag is:
<span>Content goes here</span>

Difference between <p> tag and <span> tag :

<span> Tag <p> Tag

Defines a small inline


Defines a paragraph
section of content
<span> Tag <p> Tag

Does not add line breaks


Adds a line break before
before or after the
and after the element
element

Used to group inline Used to structure larger


elements and apply styles blocks of text

Example: <span
Example: <p>This is a
style="color: blue;">Hello
paragraph.</p>
World!</span>

4. List Tag :
There are three types of lists that can be used to
display information in a structured way. These are:
(I) Ordered List (<ol>): An ordered list is a list of items
where each item is numbered. It is created using
the <ol> tag.
Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
(II) Unordered List (<ul>): An unordered list is a list of
items where each item is bulleted. It is created using
the <ul> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
(III) Definition List (<dl>): A definition list is a list of
terms and their corresponding definitions. It is created
using the <dl> tag.
Syntax:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
Note: In the definition list, <dt> tag is used for the
term and <dd> tag is used for its definition.
The type attribute in the list tag (<ul> and <ol>) is used
to define the type of list marker that should be used for
each list item. There are several values that can be
used for the type attribute:
• For ordered lists (<ol>), the type attribute can be
used to specify the numbering style of the list. The
default value is "1", which is for decimal
numbering. Other possible values are "A" for
uppercase alphabetical numbering, "a" for
lowercase alphabetical numbering, "I" for
uppercase Roman numerals, and "i" for lowercase
Roman numerals.
• For unordered lists (<ul>), the type attribute can
be used to specify the type of bullet or marker that
should be used for each list item. The default value
is "disc", which is a solid bullet. Other possible
values are "circle" for a hollow circle, "square" for
a solid square, and "none" for no bullet or marker.
5. Comment :
Comments are used to add notes or explanations to a
section of code. These comments are not displayed in
the browser but can be viewed by viewing the page
source code.
The syntax for adding comments is:
<!-- This is a comment -->
Anything between <!-- and --> is treated as a comment
and is ignored by the browser.
6. Bold Tag :
The <b> tag is used to define text in boldface. The text
enclosed within the <b> and </b> tags will appear in
bold format.
Syntax:
<b>Text to be bolded</b>
7. Italics Tag :
The "italics tag" is called the <i> tag, which stands for
"italic". This tag is used to indicate that the text within
the tags should be rendered in italic style. The syntax
for the <i> tag is:
<i>Italicized text</i>
8. Underline Tag :
The <u> tag is used to underline text. Here is the syntax
for the <u> tag:
<u>Underlined text</u>
9. Strikethrough Tag :
The <s> tag or <strike> tag is used to create a
strikethrough effect on the text. It is typically used to
show that a particular text has been deleted or is no
longer valid.
Syntax:
<s>Text to be striked through</s>
10. Superscript Tag :
The superscript tag is used to represent a superscript
text. It is often used to denote exponents, footnotes,
mathematical equations, etc. The syntax for
the superscript tag is:
<sup>Superscript Text</sup>
11. Subscript Tag :
The subscript tag is used to format text in a subscript
style. It is commonly used to write chemical formulas
or mathematical expressions that require the use of a
subscript. The syntax for the subscript tag is as follows:
<sub>text</sub>
12. Small Text Tag :
The <small> tag is used to define smaller text. It is
often used to display small print information such as
copyright, legal disclaimers, and other similar text.
The syntax for the <small> tag is as follows:
<small>Smaller Text</small>
13. Big Text Tag :
The <big> tag is used to define text that should be
displayed in a bigger font size than the surrounding
text. The syntax for the <big> tag is as follows:
<big>Text to be displayed in bigger font size</big>
14. Highlight Tag :
The <mark> tag is used to highlight text. It is often used
to indicate search results, keywords, or other
significant text on a web page. The syntax for
the <mark> tag is as follows:
<mark>Highlighted Text</mark>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Meta Tags</title>
<meta name = "author" content="GFG">
<meta name = "description" content="This is a
description">
<meta name = "keywords" content= "Movies,top 50
movies,gfg">
</head>
<body>
<h1>This is heading1</h1>

<h2>This is heading2</h2>

<h3>This is heading3</h3>

<h4>This is heading4</h4>

<h5>This is heading5</h5>

<h6>This is heading1</h6>

<p style="background-color: turquoise;">This is a


paragraph</p>
<span style="background-color: turquoise;">This is
span</span>

<ul>
<li> list 1</li>
<li> list 2</li>
<li> list 3</li>
</ul>

<ol type="a">
<li> list 1</li>
<li> list 2</li>
<li> list 3</li>
</ol>

<p>This is a <strong>pg</strong> in
<b>bold</b>.</p>

<p>This is a <em>pg</em> in <i>italics</i>.</p>


<p>This is <u>underlined</u>.</p>

<p>This is <s>pg</s> has <del>strikethrough</del>


text.</p>

<p>2<sup>2</sup> equals to 4</p>

<p>O<sub>3</sub> refers to third member of


sequence O .</p>

<p>This <small>pg</small> has small text .</p>

<p>This <big>pg</big> has big text .</p>

<p>This <mark>pg</mark> has highlighted text .</p>

</body>
</html>

Output :
Output

Output

=>MULTIMEDIA TAGS
Multimedia Tags

Multimedia tags are HTML tags that are used to embed


multimedia content such as images, videos, and audio
files in a web page. These tags allow developers to add
interactive and engaging elements to a website.
Types :
1. Image Tag :
The <img> tag is an HTML element used to embed
images in a web page. It is a self-closing tag, meaning it
does not require a closing tag. The <img> tag has
several attributes that define how the image should be
displayed, including the src attribute, which specifies
the URL of the image, the alt attribute, which provides
alternative text for the image, and the width and height
attributes, which specify the dimensions of the image.
The syntax for the img tag is as follows:
<img src="image_url" alt="alternative_text"
width="width_pixels" height="height_pixels">
• src (required) specifies the URL of the image to be
displayed.
• alt (required) provides an alternative text
description of the image for users who are visually
impaired or who have images disabled in their
browser.
• width (optional) specifies the width of the image
in pixels.
• height (optional) specifies the height of the image
in pixels.
Note : It is an self closing tag.
2. Video Tag :
The <video> tag is an HTML5 element used to embed
videos into a webpage. It allows the browser to display
a video file natively, without requiring a third-party
plugin. The <video> tag supports various video formats
such as MP4, WebM, and Ogg.
The controls and autoplay attributes are used in
the video tag to enable video control buttons and
automatic playback, respectively.
a) The controls attribute adds a set of playback controls
to the video player, such as play, pause, seek, and
volume controls. It can be added as follows:
<video poster="[Link]" controls>

<source src="video.mp4" type="video/mp4">

</video>
In this syntax, the poster attribute is used to specify an
image that will be displayed before the video starts
playing.
b) The autoplay attribute, on the other hand, tells the
browser to start playing the video automatically as
soon as it is loaded. It can be added as follows:
<video src="video.mp4" autoplay></video>
3. Audio Tag :
The audio tag in HTML is used to embed audio files
directly on a webpage. It allows developers to add
audio files in various formats such as MP3, WAV, and
OGG to their web pages. The audio tag supports the
use of controls such as play, pause, and volume
adjustment, which can be added using attributes such
as autoplay, controls, and loop. The audio tag can also
be used in conjunction with JavaScript to create
interactive audio players and custom audio controls.
The syntax for the audio tag is:
<audio src="audio_file.mp3" controls></audio>
The src attribute specifies the URL of the audio file to
be played, and the controls attribute displays the built-
in controls for the user to play, pause, and adjust the
volume of the audio. Additional attributes can also be
added to the audio tag for customization purposes.
4. Object Tag :
The <object> tag in HTML is used to embed an external
resource into a web page, such as an image, video,
audio, PDF, or Flash animation. The resources are
usually multimedia files or plugins for web browsers.
The <object> tag contains several attributes, including
data, type, width, height, and classid, which are used to
specify the source and display properties of the object.
The syntax for the object tag:
<object data="url" type="mime/type">
<!-- fallback content -->
</object>
The data attribute specifies the URL of the resource to
be embedded, and the type attribute specifies the
MIME type of the resource.
Inside the object tag, you can include any kind of
fallback content in case the media file cannot be
loaded or displayed. For example, you can include text
or an image that describes the content of the media
file.
5. Embedded Tag :
The <iframe> tag is an example of an embedded tag in
HTML. It is used to embed a webpage or a portion of a
webpage into another HTML document. The src
attribute specifies the URL of the webpage to be
embedded. Other attributes such as width, height,
scrolling, and frameborder can be used to customize
the appearance and behavior of the embedded content
. The <iframe> tag is commonly used for displaying
content from other websites, embedding videos or
maps, and creating a layout for a webpage that
includes multiple sections.
The syntax for the <iframe> tag is:
<iframe src="url" width="value"
height="value"></iframe>
• The src attribute specifies the URL of the
document to be embedded.
• The width attribute specifies the width of the
embedded document.
• The height attribute specifies the height of the
embedded document.
Steps for embedding a YouTube video using an iframe:
1. Go to the YouTube website and find the video you
want to embed.
2. Click on the "Share" button located beneath the
video.
3. Click on the "Embed" button in the share menu.
4. Choose the video size and other customization
options you prefer.
5. Copy the iframe code generated by YouTube.
6. Open your HTML document in a text editor.
7. Paste the copied iframe code into the section of
your HTML document where you want the video to
appear.
8. Save your HTML document and open it in a web
browser to test the video playback.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Multimedia</title>
</head>
<body>
<h1>Multimedia Tags</h1>

<img src="./[Link]" alt="no image"


width="200px" height="200px"/>
<video width="200px" height="200px" controls
poster="./[Link]">
<source src="./Woman-riding-a-horse-in-the-street-
[Link]"
type="video/mov">
Your browser does not support this video
</video>

<video width="200px" height="200px" autoplay loop


poster="./[Link]">
<source src="./Woman-riding-a-horse-in-the-
[Link]"
type="video/mov">
Your browser does not support this video
</video>

<audio controls>
<source
src="./MA_DaniilDavydov_NeonAeon_Main.wav">
</audio>
<object data="./[Link]" type="application/pdf"
width="200px" height="200px"></object>

<iframe width="560" height="315"


src="[Link]
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-
share" allowfullscreen></iframe>
</body>
</html>

Output :
Output

=>IMAGE ELEMENTS
Image Elements

Image Tag :
The <img> tag is an HTML element used to embed
images in a web page. It is a self-closing tag, meaning it
does not require a closing tag. The <img> tag has
several attributes that define how the image should be
displayed, including the src attribute, which specifies
the URL of the image, the alt attribute, which provides
alternative text for the image, and the width and height
attributes, which specify the dimensions of the image.
The syntax for the img tag is as follows:
<img src="image_url" alt="alternative_text"
width="width_pixels" height="height_pixels">
Attributes :
1. Source : src (required) specifies the URL of the image
to be displayed.
2. Alternative Text : alt (required) provides an
alternative text description of the image for users who
are visually impaired or who have images disabled in
their browser.
3. Width : width (optional) specifies the width of the
image in pixels.
4. Height : height (optional) specifies the height of the
image in pixels.
5. Loading : The loading attribute in the <img> tag is
used to control how the browser loads and displays
images on a web page. It is a new attribute introduced
in HTML5 and is used to optimize the loading and
rendering of images to improve web page
[Link] loading attribute can have three
possible values:
• auto : This is the default value, and it tells the
browser to load the image as soon as possible.
• lazy : This tells the browser to delay loading the
image until it is about to come into the viewport or
the visible area of the web page. This can help
reduce the initial load time of the page and
improve performance, especially for images that
are located below the fold or not immediately
visible to the user.
• eager : This tells the browser to load the image
immediately, even if it is not currently visible in the
viewport. This can be useful for images that are
critical to the content or layout of the page and
need to be loaded and displayed as soon as
possible.
Note : It is an self closing tag.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Image Elements</title>
</head>
<body style="display: flex;flex-direction:column;">
<h1>Image Tag</h1>
<img src="./[Link]" alt="no image"
width="200px" height="200px"/>
<h1>Eager Loading</h1>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="eager" />
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="eager"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="eager"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="eager"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="eager"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="eager"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="eager"/>
<h1>Lazy Loading</h1>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="lazy" />
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="lazy"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="lazy"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px" loading="lazy"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="lazy"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="lazy"/>
<img src="./[Link]" alt="no image"
width="200px" height="200px"loading="lazy"/>

</body>
</html>

Output :
Output
Output

Explanation :
This is a basic HTML document with an image tag that
displays an image file called "[Link]". The tag
includes the "src" attribute, which specifies the path to
the image file. The "alt" attribute is also included,
which provides a text description of the image in case it
cannot be displayed.
In addition to the basic image tag, there are multiple
image tags included with the "loading" attribute set
to "eager" or "lazy". The "loading" attribute specifies
when and how the browser should load the
image. "Eager" loading means the browser will load the
image as soon as possible, while "lazy" loading means
the browser will wait until the image is needed before
loading it. This can help improve website performance
by reducing the amount of unnecessary resources
loaded on a page.

=>HYPERLINK
Hyperlink

The hyperlink tag, commonly known as the <a> tag in


HTML, is used to create hyperlinks or links to other web
pages, documents, or resources on the internet.
The <a> tag is one of the most commonly used tags in
HTML for creating clickable links.
The basic syntax of the <a> tag is as follows:
<a href="URL">Link Text</a>
Where:
• href: This is the attribute that specifies the URL
(Uniform Resource Locator) of the target
document or resource that the link points to. It can
be an absolute URL (e.g., "[Link]
or a relative URL (e.g., "[Link]" or
"../documents/[Link]").
• Link Text: This is the text that appears as the
clickable link on the web page. It is the text that
users click on to navigate to the target document
or resource.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>About page</h1>
<a href="[Link]
Me</a>

</body>
</html>

Output :

Output

Explanation :
• The first line, <!DOCTYPE html>, is the document
type declaration. It tells the browser that the
document is an HTML5 document.
• The second line specifies that the document is in
the English language, using the lang attribute in
the <html> tag.
• Inside the <head> section, there are
several <meta> tags. These tags provide metadata
about the document. The first <meta> tag specifies
the character encoding used in the document
(UTF-8). The second <meta> tag specifies that the
document should be rendered in the latest version
of Internet Explorer. The third <meta> tag sets the
viewport width to the device's width and scales
the content accordingly.
• The <title> tag sets the title of the page, which
appears in the browser's title bar.
• Inside the <body> section, there is a
single <h1> heading tag that displays the text
"About page".
• Finally, there is an <a> tag that creates a hyperlink
to the GeeksforGeeks website. The href attribute
specifies the URL of the website, and the text
"Click Me" is displayed as the link text. When the
user clicks on this link, they will be taken to the
GeeksforGeeks website.
Types Of Hyperlink Tags :
1. Absolute Hyperlinks : Absolute hyperlinks use the
complete URL (Uniform Resource Locator) of the target
document or resource. They include the protocol (e.g.,
"[Link] or "[Link] domain name (e.g.,
"[Link]"), and the specific path or file name
(e.g., "/[Link]" or "/images/[Link]"). Absolute
hyperlinks point to a specific web address on the
internet.
2. Relative Hyperlinks : Relative hyperlinks use a
relative path to the target document or resource, which
is relative to the current web page's location. Relative
hyperlinks do not include the protocol or domain
name, but instead specify the path or file name of the
target document or resource relative to the current
web page's location. Relative hyperlinks are commonly
used when linking to documents or resources within
the same website or domain.
Example :
1. Home Page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>Home page</h1>
<a href="[Link]
Me</a>
<a href="./[Link]">About</a>
<div>
<a href="#section1">Go to section1</a>
<a href="#section2">Go to section2</a>
<a href="#section3">Go to section3</a>
</div>

<div>
<h1 id="section1">section1</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>

<div>
<h1 id="section2">section2</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>

<div>
<h1 id="section3">section3</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>
</body>
</html>

Output :

Output
2. About Page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>About page</h1>
<a href="[Link]
Me</a>

</body>
</html>

Output :
Output

Explanation :
• The first code creates a webpage with a hyperlink
to an external website
([Link] and two internal
hyperlinks to sections within the same page. The
internal hyperlinks are created using the anchor
tag <a> with the href attribute set to the ID of the
corresponding section within the page. The ID is
set using the id attribute on the section's header
tag (<h1> in this case).
• The second code creates a webpage with a single
hyperlink to an external website
([Link] on an "About"
page.
Target Attribute in Hyperlink Tag :
The target attribute is used to specify where the linked
document or resource should be displayed when a
hyperlink is clicked. It is used as an attribute within
the <a> (anchor) tag, which is used to create
[Link] target attribute can take several values,
including:
1. _self: The linked document or resource will be
loaded in the same frame or window as the current
web page. This is the default behavior if
the target attribute is not specified.
Example:
<a href="[Link] target="_self">Visit
Example Website</a>
2. _blank: The linked document or resource will be
loaded in a new, unnamed browser window or tab.
Example:
<a href="[Link] target="_blank">Visit
Example Website</a>
3. _parent: The linked document or resource will be
loaded in the parent frame or window of the current
web page, if the current web page is within a frameset
or iframe.
Example:
<a href="[Link]
target="_parent">Visit Example Website</a>
4. _top: The linked document or resource will be
loaded in the top-level browsing context, replacing any
frames or iframes that may be present.
Example:
<a href="[Link] target="_top">Visit
Example Website</a>

Example :
1. Target Page 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 1</title>
</head>
<body>
<a href="[Link]
target="_blank"></a>

<a href="[Link]
target="_parent"></a>

<a href="[Link]
target="_self"></a>

<a href="[Link]
target="_top"></a>
</body>
</html>

2. Target Page 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 2</title>
</head>
<body>
<h1>This is page 2</h1>
<iframe src="./[Link]" width="500px"
height="500px"></iframe>
</body>
</html>

3. Target Page 3 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 3</title>
</head>
<body>
<h1>This is page 3</h1>
<iframe src="./[Link]" width="500px"
height="500px"></iframe>
</body>
</html>

4. Target Page 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 4</title>
</head>
<body>
<a href="[Link]
target="_self">Geeks For Geeks</a>
</body>
</html>

Output :

Output
Output

Output
Explanation :
These codes are related to the use of
the target attribute in hyperlinks and iframes.
In the first HTML code block, there are four hyperlinks
that have different values set for the target attribute.
The target attribute determines where the linked
document should be displayed when the user clicks on
the hyperlink. The values used in this code block are:
• _blank: The linked document will be displayed in a
new window or tab.
• _parent: The linked document will be displayed in
the parent frame of the current frame or in the
parent window if there is no parent frame.
• _self: The linked document will replace the current
document in the same frame or window.
• _top: The linked document will replace the current
document and will be displayed in the full body of
the window.
In the second HTML code block, there is an iframe that
embeds the content of the third HTML code block.
The src attribute specifies the source URL of the
document to be embedded, and
the width and height attributes define the size of the
iframe. When the user loads the second HTML
document, the embedded document from the third
HTML code block is displayed within the iframe.
In the third HTML code block, there is another iframe
that embeds the content of the fourth HTML code
block. The embedded document contains a hyperlink
with the target attribute set to _self. When the user
clicks on the hyperlink, the linked document will
replace the current document in the same frame or
window.
In the fourth HTML code block, there is a hyperlink
with the target attribute set to _self. This means that
when the user clicks on the hyperlink, the linked
document located at
"[Link] will replace the
current document in the same frame or window. The
linked document will load in the same browser window
or frame where the hyperlink is clicked, and it will
replace the content of the current document with the
content of the linked document.
The text "Geeks For Geeks" is the visible link text that
will be displayed to the user. When the user clicks on
this link, the browser will navigate to the URL specified
in the href attribute, which is
"[Link] The target
attribute _self ensures that the linked document will be
loaded in the same window or frame where the
hyperlink is clicked, and the current document will be
replaced by the content of the linked document.
=>CONTAINERS AND LIST
Hyperlink

The hyperlink tag, commonly known as the <a> tag in


HTML, is used to create hyperlinks or links to other web
pages, documents, or resources on the internet.
The <a> tag is one of the most commonly used tags in
HTML for creating clickable links.
The basic syntax of the <a> tag is as follows:
<a href="URL">Link Text</a>
Where:
• href: This is the attribute that specifies the URL
(Uniform Resource Locator) of the target
document or resource that the link points to. It can
be an absolute URL (e.g., "[Link]
or a relative URL (e.g., "[Link]" or
"../documents/[Link]").
• Link Text: This is the text that appears as the
clickable link on the web page. It is the text that
users click on to navigate to the target document
or resource.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>About page</h1>
<a href="[Link]
Me</a>

</body>
</html>
Output :

Output

Explanation :
• The first line, <!DOCTYPE html>, is the document
type declaration. It tells the browser that the
document is an HTML5 document.
• The second line specifies that the document is in
the English language, using the lang attribute in
the <html> tag.
• Inside the <head> section, there are
several <meta> tags. These tags provide metadata
about the document. The first <meta> tag specifies
the character encoding used in the document
(UTF-8). The second <meta> tag specifies that the
document should be rendered in the latest version
of Internet Explorer. The third <meta> tag sets the
viewport width to the device's width and scales
the content accordingly.
• The <title> tag sets the title of the page, which
appears in the browser's title bar.
• Inside the <body> section, there is a
single <h1> heading tag that displays the text
"About page".
• Finally, there is an <a> tag that creates a hyperlink
to the GeeksforGeeks website. The href attribute
specifies the URL of the website, and the text
"Click Me" is displayed as the link text. When the
user clicks on this link, they will be taken to the
GeeksforGeeks website.
Types Of Hyperlink Tags :
1. Absolute Hyperlinks : Absolute hyperlinks use the
complete URL (Uniform Resource Locator) of the target
document or resource. They include the protocol (e.g.,
"[Link] or "[Link] domain name (e.g.,
"[Link]"), and the specific path or file name
(e.g., "/[Link]" or "/images/[Link]"). Absolute
hyperlinks point to a specific web address on the
internet.
2. Relative Hyperlinks : Relative hyperlinks use a
relative path to the target document or resource, which
is relative to the current web page's location. Relative
hyperlinks do not include the protocol or domain
name, but instead specify the path or file name of the
target document or resource relative to the current
web page's location. Relative hyperlinks are commonly
used when linking to documents or resources within
the same website or domain.
Example :
1. Home Page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>Home page</h1>
<a href="[Link]
Me</a>
<a href="./[Link]">About</a>
<div>
<a href="#section1">Go to section1</a>
<a href="#section2">Go to section2</a>
<a href="#section3">Go to section3</a>
</div>

<div>
<h1 id="section1">section1</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>

<div>
<h1 id="section2">section2</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>

<div>
<h1 id="section3">section3</h1>
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Sit ducimus ullam laudantium neque
cupiditate? Itaque accusamus, placeat, porro mollitia
expedita tempora necessitatibus dolores libero eligendi
distinctio eum cupiditate delectus in quidem eaque
esse. Quaerat praesentium, alias fugiat consequatur
odio aliquam incidunt possimus non sequi quia aut
ratione. Labore, odit quod.</p>
</div>
</body>
</html>

Output :

Output

2. About Page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hyperlinks</title>
</head>
<body>
<h1>About page</h1>
<a href="[Link]
Me</a>

</body>
</html>

Output :

Output

Explanation :
• The first code creates a webpage with a hyperlink
to an external website
([Link] and two internal
hyperlinks to sections within the same page. The
internal hyperlinks are created using the anchor
tag <a> with the href attribute set to the ID of the
corresponding section within the page. The ID is
set using the id attribute on the section's header
tag (<h1> in this case).
• The second code creates a webpage with a single
hyperlink to an external website
([Link] on an "About"
page.
Target Attribute in Hyperlink Tag :
The target attribute is used to specify where the linked
document or resource should be displayed when a
hyperlink is clicked. It is used as an attribute within
the <a> (anchor) tag, which is used to create
[Link] target attribute can take several values,
including:
1. _self: The linked document or resource will be
loaded in the same frame or window as the current
web page. This is the default behavior if
the target attribute is not specified.
Example:
<a href="[Link] target="_self">Visit
Example Website</a>
2. _blank: The linked document or resource will be
loaded in a new, unnamed browser window or tab.
Example:
<a href="[Link] target="_blank">Visit
Example Website</a>
3. _parent: The linked document or resource will be
loaded in the parent frame or window of the current
web page, if the current web page is within a frameset
or iframe.
Example:
<a href="[Link]
target="_parent">Visit Example Website</a>
4. _top: The linked document or resource will be
loaded in the top-level browsing context, replacing any
frames or iframes that may be present.
Example:
<a href="[Link] target="_top">Visit
Example Website</a>

Example :
1. Target Page 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 1</title>
</head>
<body>

<a href="[Link]
target="_blank"></a>

<a href="[Link]
target="_parent"></a>

<a href="[Link]
target="_self"></a>
<a href="[Link]
target="_top"></a>
</body>
</html>

2. Target Page 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 2</title>
</head>
<body>
<h1>This is page 2</h1>
<iframe src="./[Link]" width="500px"
height="500px"></iframe>
</body>
</html>

3. Target Page 3 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 3</title>
</head>
<body>
<h1>This is page 3</h1>
<iframe src="./[Link]" width="500px"
height="500px"></iframe>
</body>
</html>
4. Target Page 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Target 4</title>
</head>
<body>
<a href="[Link]
target="_self">Geeks For Geeks</a>
</body>
</html>

Output :
Output
Output

Output
Explanation :
These codes are related to the use of
the target attribute in hyperlinks and iframes.
In the first HTML code block, there are four hyperlinks
that have different values set for the target attribute.
The target attribute determines where the linked
document should be displayed when the user clicks on
the hyperlink. The values used in this code block are:
• _blank: The linked document will be displayed in a
new window or tab.
• _parent: The linked document will be displayed in
the parent frame of the current frame or in the
parent window if there is no parent frame.
• _self: The linked document will replace the current
document in the same frame or window.
• _top: The linked document will replace the current
document and will be displayed in the full body of
the window.
In the second HTML code block, there is an iframe that
embeds the content of the third HTML code block.
The src attribute specifies the source URL of the
document to be embedded, and
the width and height attributes define the size of the
iframe. When the user loads the second HTML
document, the embedded document from the third
HTML code block is displayed within the iframe.
In the third HTML code block, there is another iframe
that embeds the content of the fourth HTML code
block. The embedded document contains a hyperlink
with the target attribute set to _self. When the user
clicks on the hyperlink, the linked document will
replace the current document in the same frame or
window.
In the fourth HTML code block, there is a hyperlink
with the target attribute set to _self. This means that
when the user clicks on the hyperlink, the linked
document located at
"[Link] will replace the
current document in the same frame or window. The
linked document will load in the same browser window
or frame where the hyperlink is clicked, and it will
replace the content of the current document with the
content of the linked document.
The text "Geeks For Geeks" is the visible link text that
will be displayed to the user. When the user clicks on
this link, the browser will navigate to the URL specified
in the href attribute, which is
"[Link] The target
attribute _self ensures that the linked document will be
loaded in the same window or frame where the
hyperlink is clicked, and the current document will be
replaced by the content of the linked document.
=>TABLES
Tables

The <table> tag in HTML is used to create an HTML


table with rows and columns. It is a container tag that
holds other HTML elements such as <tr> (table row),
<th> (table header), <td> (table data/cell), etc. The
table element can be used to create simple tables for
displaying tabular data or more complex tables with
multiple rows and columns, headers, footers, etc.
Tables are commonly used to display data such as
financial information, schedules, timetables, etc.
Basic Terminologies :
1. <tr>: This tag represents a row in a table. It is used
within a <tbody>, <thead>, or <tfoot> element, and
contains one or more <th> or <td> elements that
represent the cells in the row.
2. <th>: This tag represents a header cell in a table. It is
used within a <tr> element in
the <thead> or <tfoot> section, and is typically used to
provide labels or titles for columns or rows in the table.
3. <td>: This tag represents a data cell in a table. It is
used within a <tr> element in the <tbody> section, and
is used to display the actual data in the table.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Table</title>
</head>
<style>
table{width: 100%;border-collapse: collapse;}
th{color: aqua;border: 1pxsolid blue;font-size: 20px;}
td{color: blueviolet;font-size: 10px;text-align:
center;border: 1px solid blue;}
</style>
<body>
<h1>Table</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
</table>
</body>
</html>

Output :

Output

Explanation :
This code is demonstrating how to create a table with
the use of the table, tr (table row), th (table header),
and td (table data/cell) [Link] CSS code is used to
style the table and its elements. The table tag has a
width of 100% and the border-collapse property is set
to collapse to remove the spaces between the cells.
The th tag is styled with a blue border of 1px, aqua
color and font size of 20px. The td tag is styled with a
blueviolet color and font size of 10px and a 1px blue
[Link] table has a header row that contains two
columns, "First Name" and "Last Name". The th tag is
used to define the table header cells. The table data is
filled in the rows with the td tag, where each tr tag
represents a new [Link] table has three rows with the
same data, "Avneet Kaur", in the two columns.

4. <thead>: This tag is used to group the header


content in a table. It is typically used within
a <table> element and contains one or more <tr> (table
row) elements that represent the header row(s) of the
table.
5. <tbody>: This tag is used to group the body content
in a table. It is typically used within a <table> element
and contains one or more <tr> (table row) elements
that represent the data rows of the table.
6. <tfoot>: This tag is used to group the footer content
in a table. It is typically used within a <table> element
and contains one or more <tr> (table row) elements
that represent the footer row(s) of the table.
7. <caption>: This tag is used to provide a caption or
title for a table. It is typically used within
a <table> element and is used to describe the purpose
or content of the table.
8. rowspan: It is an attribute used
in <td> or <th> elements within a table to specify the
number of rows a cell should span vertically. It allows a
cell to occupy multiple rows in a table. The value
of rowspan indicates the number of rows the cell
should span.
9. colspan: It is an attribute used
in <td> or <th> elements within a table to specify the
number of columns a cell should span horizontally. It
allows a cell to occupy multiple columns in a table. The
value of colspan indicates the number of columns the
cell should span.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Table</title>
</head>
<style>
table{width: 100%;border-collapse: collapse;}
th{color: aqua;border: 1pxsolid blue;font-size: 20px;}
td{color: blueviolet;font-size: 10px;text-align:
center;border: 1px solid blue;}
thead{background-color: antiquewhite;}
table #alter thead {background-color: aquamarine;}
table #alter tbody tr :nth-child(even){background-
color: beige;}
table #alter tbody tr :nth-child(odd){background-
color: blanchedalmond;}
</style>
<body>

<table>
<thead>Tables</thead>
<tbody>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>

<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>

<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
<tr>
<td>Avneet</td>
<td>Kaur</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer</td></tr>
</tfoot>
<caption>My Table</caption>
</table>
</body>
</html>

Output :

Output
Explanation :
• The table tag is used to create a table, and
the thead, tbody, and tfoot tags are used to create
the table's header, body, and footer, respectively.
• The style tag contains CSS code that defines the
appearance of the table.
• The table tag's width is set to 100%, and its border
is collapsed.
• The th tag is used to define the table header cells'
appearance, which are colored aqua and have a
border of 1px solid blue. The font size is set to
20px.
• The td tag is used to define the table data cells'
appearance, which are colored blueviolet, have a
font size of 10px, are centered, and have a border
of 1px solid blue.
• The thead tag's background color is set to
antiquewhite, and the #alter id's background color
is set to aquamarine.
• The table's even rows are colored beige, and the
odd rows are colored blanchedalmond.
• The table contains a caption that says "My Table."
• The table contains ten rows, with two columns for
the first and last name.
• The table's footer contains one row with one cell
that spans two columns.

=>INPUT 1
Input I

The <input> tag is a commonly used HTML tag that is


used to create an input field or form control on a
webpage. It allows users to input data, such as text,
numbers, or other types of data, into a web form.
The <input> tag has several attributes that can be used
to customize its behavior and appearance. Here are
some examples of how the <input> tag can be used:
1. <input type="text">: This type of input element
creates a text input field that allows users to enter text
data. It can be used for various purposes such as
collecting names, addresses, and other textual
information.
2. <input type="submit">: This type of input element
creates a submit button that is used to submit the form
data to the server for processing. When clicked, it
triggers the form's submit action.
3. <input type="password">: This type of input element
creates a password input field that allows users to
enter sensitive information, such as passwords or other
confidential data. The input is typically masked with
asterisks or dots for security reasons.
4. <input type="radio">: This type of input element
creates a radio button that allows users to select a
single option from a group of options. Radio buttons
are typically used for mutually exclusive options, where
only one option can be selected at a time.
5. <input type="checkbox">: This type of input element
creates a checkbox that allows users to select one or
more options from a group of options. Checkboxes are
typically used for options that can be selected
independently and multiple options can be selected
simultaneously.
6. <input type="button">: This type of input element
creates a button that can be used to trigger JavaScript
functions or perform custom actions on a web page. It
does not submit form data to the server by default.
7. <input type="color">: This type of input element
creates a color picker control that allows users to select
a color from a color palette.
8. <input type="date">: This type of input element
creates a date picker control that allows users to select
a date from a calendar.
9. <input type="file">: This type of input element
creates a file input control that allows users to select
and upload files from their local computer.
10. <input type="month">: This type of input element
creates a month picker control that allows users to
select a month and year.
11. <input type="time">: This type of input element
creates a time picker control that allows users to select
a time.
12. <input type="datetime-local">: This type of input
element creates a datetime picker control that allows
users to select a date and time in the local time zone.
13. <input type="week">: This type of input element
creates a week picker control that allows users to select
a week of the year.
14. <input type="number">: This type of input element
creates a numeric input field that allows users to enter
numeric values. It may also include optional attributes
such as min and max to specify the minimum and
maximum values that can be entered.
15. <input type="range">: This type of input element
creates a slider control that allows users to select a
value within a specified range.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for="fname">First name</label>
<input type="text" name="fname" id="fname">
<br><br>
<!-- -->
<label for="lname">Last Name<label>
<input type="text" name="1name">
<br><br>
<label for="userpassword">Password</label>
<input type="password" name="userpassword">
<input type="submit" value="SignUp">
<input type="reset" value="reset data">
<br><br>
<br><br>
<br><br>
<p>What is Your Gender?</p>
<input type="radio" name="gender" value="Male">
<label>Male</label>
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="radio" name="gender" value="Female">
<label>Female</label>

<br><br>
<br><br>
<br><br>
<p>What is Your hobby?</p>
<input type="checkbox" name="hobby1"
value="Reading">
<label>Reading</label><br>
<input type="checkbox" name="hobby2"
value="Weading">
<label>Writing</label><br>
<br><br>
<input type="button" value="Click Me"
onclick="alert(2+2)">
<br><br>
<input type="color" name="bgcolor" value="#ffffff">
<br><br>
<input type="date" name="dob" max="2023-11-30"
min="2023-10-30" value="2023-11-01">
<br><br>
<input type="file" name="myfile" accept=".pdf,.jpg">
<br><br>
<input type="month" min="2023-10" value="2023-
11">
<br><br>
<input type="time" value="12:00:00"/>
<br><br>
<input type="datetime-local" value="2023-11-
10T12:00:00"/>
<br><br>
<input type="week" value="2023-W10"/>
<br><br>
<input type="number" value="10" min="4" max="20"
step="3" />
<br><br>
<label>Select Your Age</label>
<input type="range" min="0" max="120" value="20"
step="1"/>
</form>

</body>
</html>

Output :
Output
Output

Marked as Read
Report An Issue
=>INPUT 2
Input II

The <input> tag is a commonly used HTML tag that is


used to create an input field or form control on a
webpage. It allows users to input data, such as text,
numbers, or other types of data, into a web form.
The <input> tag has several attributes that can be used
to customize its behavior and appearance. Here are
some examples of how the <input> tag can be used:
1. disabled: This attribute is used to disable the input
field, preventing any user input. When an input field is
disabled, its value cannot be changed by the user.
2. readonly: This attribute is used to make the input
field read-only, allowing the user to view the value but
not modify it. Unlike disabled, a read-only input field
can still be submitted with the form data.
3. autocomplete: This attribute is used to specify
whether the input field should have autocomplete
functionality enabled or disabled. It takes a boolean
value, such as "on" or "off", to control whether the
browser should remember and suggest previously
entered values for the input field.
4. capture: This attribute is used with the input element
of type "file" and is used to specify how the file should
be captured. It can take values like "user" to allow the
user to choose a file from their device, "environment"
to capture a media file using the device's camera or
microphone, or "none" to disable file capture.
5. min and max: These attributes are used to set the
minimum and maximum allowed values for numeric
input fields, such as number, range, and date. For
example, min="0" and max="100" would limit the input
field to accept values between 0 and 100.
6. maxlength and minlength: These attributes are used
to specify the maximum and minimum length of text
input fields, respectively. They can be used with text,
search, url, tel, email, password, and textarea input
types.
7. placeholder: This attribute is used to provide a hint
or example text that is displayed in the input field until
the user enters a value. It is typically used to provide
instructions or suggestions for the expected input.
8. value: This attribute is used to set the initial value of
the input field. It can be used with various input types
to specify the default value that will be displayed when
the form loads.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Input 2</title>
</head>
<body>
<input type="text" name="username" disabled
value="Harshal">
<input type="text" name="username2" readonly
value="Harshal">
<input type="text" name="email"
autocomplete="on">
<input type="file" name="userphoto"
capture="user">
<input type="number" name="userage" min="10"
max="30" value="15">
<input type="tel" name="userphone"
maxlength="10" minlength="9">
<input type="text" name="userphone"
maxlength="10" minlength="9" placeholder="Enter
Something">
<input type="submit" value="submit">
</body>
</html>

Output :

Output

=>FORM
Form

The <form> tag is used to create a container for


collecting and submitting data from user input on a
web page. It is used to define a section of a web page
that contains input fields, buttons, and other form
elements, which allow users to enter and submit data
to a web server.
The <form> element has several attributes that can be
used to specify how the form should behave, such
as action, method, enctype, and target. Here's a brief
overview of these attributes:
• action: This attribute specifies the URL where the
form data should be submitted when the form is
submitted. It can be a relative or absolute URL, or a
JavaScript function to handle form submission.
• method: This attribute specifies the HTTP method
to be used for submitting the form data. It can be
either "GET" or "POST". "GET" method appends
the form data to the URL as query parameters,
while "POST" method sends the form data in the
request body.
• enctype: This attribute specifies the encoding type
for the form data when it is submitted. It is used
with the method attribute set to "POST". Common
values include "application/x-www-form-
urlencoded" for URL-encoded form data and
"multipart/form-data" for binary or large form
data.
• target: This attribute specifies where the form
response should be displayed after form
submission. It can take values like "_self" (default),
"_blank", "_parent", or "_top", or a custom target
name.
Here's a brief overview of some common tags used in
conjunction with the <form> tag to create interactive
and user-friendly forms on web pages :
1. <label>: The <label> tag is used to associate a label
with an input field in a form. It is typically used to
provide a text description for an input field, such as a
text input, checkbox, or radio button. The for attribute
of the <label> tag should match the id attribute of the
associated input field, so that clicking on the label will
focus or activate the associated input field.
2. <select> and <option>: The <select> tag is used to
create a drop-down list of options in a form.
The <option> tag is used to define the individual
options within the <select> tag. Users can select one or
more options from the list, depending on
the multiple attribute on the <select> tag. The selected
option(s) will be included in the form data when the
form is submitted.
3. <textarea>: The <textarea> tag is used to create a
multi-line text input field in a form. It allows users to
enter and edit text that can span multiple lines. The
text entered in the <textarea> field will be included in
the form data when the form is submitted.
4. <button>: The <button> tag is used to create a
button in a form. It can be used for various purposes,
such as submitting a form, resetting a form, or
triggering a JavaScript function. The type attribute on
the <button> tag can be set to "submit", "reset", or
"button" to specify the button's behavior.
5. <fieldset> and <legend>: The <fieldset> tag is used to
group related form elements together and create a
visual grouping effect. The <legend> tag is used to
provide a caption or title for the <fieldset> element,
describing the purpose of the grouped form
elements. <fieldset> and <legend> are commonly used
to group and organize related form elements.
6. <datalist>: The <datalist> tag is used to provide a
pre-defined list of options for an input field in a form.
The <datalist> tag is used in conjunction with
an <input> field of type "text" or "search", and the list
of options is defined using <option> tags within
the <datalist> tag. The user can select an option from
the list or enter a custom value.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="/submituserdata" method="get"
target="_blank" autocomplete="off" id="myform1"
enctype="multipart/form-data">
<input type="text" name="email"
placeholder="enter your email">
<input type="password" name="pwd"
placeholder="enter your password">
<input type="submit" value="login">

<br><br>
<label>What is your age ?</label>
<select name="userage" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
<textarea name="message" rows="10" cols="50"
style="width:100px;height:100px;max-
width:300px;min-width:150px;"></textarea>

<br><br>
<button type="button" onclick="alert('hey
there')">Don't Click</button>

<br><br>
<fieldset>
<legend>Login</legend>
<input type="text" name="email"
placeholder="enter your email" list="myname">
<datalist id="myname">
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
</datalist>
<input type="password" name="pwd"
placeholder="enter your password">
<input type="submit" value="login"
formaction="/someotherpath"
formenctype="multipart/form-data"
formmethod="get" formtarget="_blank">
</fieldset>

</form>
<input type="submit" value="login"
form="myform1">
</body>
</html>

Output :

Output
Explanation :
The <form> tag defines a form that is used to collect
user input. It has several attributes:
• action="/submituserdata": Specifies the URL to
which the form data will be submitted.
• method="get": Specifies the HTTP method to be
used for submitting the form data. In this case, it is
set to "get", which means the form data will be
appended to the URL as query parameters.
• target="_blank": Specifies the target window or
frame where the form response will be displayed.
In this case, it is set to "_blank", which means the
form response will open in a new window.
• autocomplete="off": Specifies whether the form
should have autocomplete enabled or disabled. In
this case, it is set to "off", which means
autocomplete is disabled.
• id="myform1": Specifies a unique identifier for the
form, which can be used to reference the form in
JavaScript or other parts of the HTML document.
• enctype="multipart/form-data": Specifies the
encoding type for the form data. In this case, it is
set to "multipart/form-data", which is used for
uploading files.
Inside the <form> tag, there are several form elements:
1. <input> elements: These are used to collect user
input. There are three <input> elements in this form:
• One with type="text" and name="email": This is a
text input field where users can enter their email
address.
• One with type="password" and name="pwd": This
is a password input field where users can enter
their password.
• One with type="submit" and value="login": This is
a submit button that users can click to submit the
form data.
2. <select> element: This is a dropdown list where
users can select an option. It has the name attribute set
to "userage" and the size attribute set to "1", which
means it will display one option at a time.
3. <textarea> element: This is a multi-line text input
field where users can enter a longer message. It has
the name attribute set to "message" and
the rows and cols attributes set to control the size of
the textarea.
4. <button> element: This is a button that users can
click. It has the type attribute set to "button" and
an onclick attribute that specifies a JavaScript function
to be executed when the button is clicked. In this case,
it displays an alert with the message "hey there".
5. <fieldset> element: This is used to group related
form elements together. It has a <legend> element
inside that specifies a caption for the fieldset, which in
this case is "Login". Inside the fieldset, there are
two <input> elements:
• One with type="text" and name="email": This is a
text input field where users can enter their email
address. It also has a list attribute that references
a <datalist> element with the id "myname", which
provides suggestions for the input field.
• One with type="password" and name="pwd": This
is a password input field where users can enter
their password.
• There is also an <input> element
with type="submit", which is a submit button that
users can click to submit the form data. It has
additional attributes
formaction="/someotherpath", and
formenctype="multipart/form-data". These
attributes override the form-level action, method,
and enctype attributes for this specific submit
button. When this submit button is clicked, the
form data will be submitted to the URL specified in
the formaction attribute, using the encoding type
specified in the formenctype attribute, and the
HTTP method specified in the formmethod
attribute.

=>SEMANTIC HTML
Semantic HTML

Semantic HTML refers to the practice of using HTML


markup in a way that conveys the meaning and
structure of the content on a webpage, making it more
accessible to both browsers and developers.
Semantic HTML uses HTML elements that have a clear
and meaningful purpose, such as <header>, <nav>,
<main>, <article>, <section>, <aside>, <footer>, <h1> to
<h6> for headings, <p> for
paragraphs, <ul> and <ol> for lists, and so on. These
elements provide a logical structure to the content,
making it easier for search engines, screen readers, and
other web technologies to understand the content and
present it in a meaningful way to users.
Semantic HTML Tags:
1. <header>: Represents the header of a section or a
webpage, typically containing a logo, a site title,
navigation links, or other introductory content.
2. <nav>: Represents a navigation menu, typically used
to contain links that allow users to navigate through
different sections or pages of a website.
3. <footer>: Represents the footer of a section or a
webpage, typically containing copyright information,
contact details, or other supplementary content.
4. <main>: Represents the main content area of a
webpage, excluding headers, footers, and sidebars. It is
typically used to wrap the primary content of a
webpage.
5. <section>: Represents a section of content that is
thematically related, such as a chapter or a group of
related articles. It can be used to divide content into
meaningful sections.
6. <article>: Represents a self-contained piece of
content that could be distributed and reused
independently, such as a news article, blog post, or
forum post.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Semantic HTML</title>
</head>
<body>
<header>
<H1>Hey There</H1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>This is an article</h2>
</article>
<main>This is main</main>
<section>
<h2>This is section</h2>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. In, corrupti! Eaque iure cumque adipisci
quis porro unde temporibus quos ipsum quas
dignissimos voluptatibus deserunt tempore, harum
magnam quo modi eius minus libero quam quia
mollitia molestias quisquam. Repellendus modi minus,
reiciendis fugiat, aut voluptate, nobis autem
consectetur quo rerum impedit.</p>
</section>
</header>
<footer>Its a footer</footer>

</body>
</html>

Output :
Output

Marked as Read
Report An Issue

You might also like