Scribd
Upload
16 views50 pages

E-Note 25291 Content Document 20241001040321PM

Uploaded by

sufiyansheikh1066
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
16 views50 pages

E-Note 25291 Content Document 20241001040321PM

Uploaded by

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

MODULE-II

B a s i c s o f H T M L , H T M L Ta g s a n d a t t r i b u t e s , M e t a t a g s , C h a r a c t e r e n t i t i e s , h y p e r l i n k , l i s t s ,

tables, images, forms, divs, XHTML

1) Basics of HTML:
֍ HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to
develop web pages.
֍ In late 1994, Tim Berners-Lee (who developed the initial version of HTML) started the World Wide Web
Consortium (W3C), which had as one of its primary purposes to develop and distribute standards for Web
technologies.
֍ HTML 2.0 was the first standard HTML specification which was published in 1995.
֍ HTML 4.01 was a major version of HTML and it was published in late 1999.
֍ Currently we are having HTML-5 version which was published in 2012.
֍ 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 which will tell the browser how to display the content.
֍ HTML tags are not case sensitive: <P> means the same as <p>.
Basic Structure:
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, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading.
The <p> element defines a paragraph.
HTML elements:
An HTML element is defined by a start tag, some content, and an end tag.
Syntax: <tagname > Contents... </tagname>
Nested HTML elements:
When an HTML element is used inside another, it’s called a nested element.
All HTML documents consist of nested HTML elements.

<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph is visible on the webpage. </p>
</body>
</html>

The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>. Then, inside the <html> element there is a <body>
element.
The <body> element defines the document's body. It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>.
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:

2.1) HTML Tags:

Tags are enclosed within angle braces <Tag Name>. <!DOCTYPE html>
Tags have their corresponding closing tags. <html>

For example, <html> has its closing tag </html>. <head>


<title>HTML Comments Example</title>
<body> tag has its closing tag </body> tag etc.
</head>
HTML Comments Example
<body>
Single Line Comment in HTML
<! -- This is a single-line comment -->
Multiline Comment in HTML <h1>Welcome to My Website</h1>
<! -- This is a multi-line comment.
You can add multiple lines of text here.
Comments are ignored by the browser. -->
<p>This paragraph is visible on the webpage. </p>
</body>
</html>
Heading Tags: HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>
Paragraph Tags (<p>):
Used to define blocks of text. Each <p> tag creates a separate paragraph with some space between it and
the next block of content.
Line Break Tag (<br>):
Used within a paragraph to break the line and start the text on a new line without starting a new paragraph.
Horizontal Rule Tag (<hr>):
Creates a horizontal line that can be used to separate sections of content.
Horizontal Rule Tag (<hr>):
Can use <center> tag to put any content in the center of the page or any table cell.
Hyperlink Tag (<a>):
Defines a hyperlink that allows users to click and navigate to another page or website. The href attribute
specifies the URL to which the link points.
<!DOCTYPE html>
<html>
<head> <title>HTML Tags Example</title> </head>

<body>
<! -- Paragraph Tags -->
<p> <h1>This is paragraph 1. </h1> </p>
<center> <p> <h2> This is paragraph 1. </h2> </p> </center>
<! -- Line Break Tag -->
<p>This is a paragraph with a line break. <br>This text is on the next line due to the line break tag.</p>
<! -- Horizontal Rule Tag -->
<hr>
<! -- Hyperlink Tag -->
<p>Click the following link to visit <a href="https://www.google.com/"> google</a>. </p>
</body>
</html>
Emphasis Tag (<em>):
Emphasizes the text, typically rendering it in italics.
Example: <em>emphasized</em>
Bold Tag (<b>):
Makes the text bold, which stands out more prominently.
Example: <b>bold</b>
Italic Tag (<i>):
Italicizes the text, giving it a slanted appearance.
Example: <i>italic</i>
Underline Tag (<u>):
Underlines the text.
Example: <u>underlined</u>
<!DOCTYPE html>
<html>
<head> <title>Text Styling with HTML</title> </head>
<body>
<h1>Text Styling Example</h1>
<p>This is a regular paragraph. Now, let's see how different tags can style text:</p>

<! -- Emphasis Tag -->


<p>This text uses the <em>emphasis</em> tag to emphasize certain words within the sentence. </p>
<! -- Bold Tag -->
<p>This text contains <b>bold</b> text that stands out due to the use of the bold tag. </p>
<! -- Italic Tag -->
<p>This sentence includes some <i>italic</i> text for a slanted or cursive appearance. </p>
<! -- Underline Tag -->
<p>In this sentence, some text is <u>underlined</u> using the underline tag. </p>

</body>
</html>
Preserve Formatting: To preserve formatting in HTML, you can use the <pre> tag.
The <pre> (preformatted text) tag is used to display text exactly as it is written in the HTML code,
including spaces, line breaks, and tabs.
This is useful when you want to display code snippets, poetry, or any text where the exact formatting is
important.
<!DOCTYPE html>
<html>
<head> <title>Preserve Formatting Example</title> </head>
<body>
<h1>Preserving Formatting with the &lt;pre&gt; Tag</h1>
<p>Here is an example of text where the formatting is preserved:</p>
<pre>
This is a line of text.
This line is indented with spaces.
This line is indented even more.
Tabs, spaces, and line breaks are all preserved exactly as written………….
</pre>
</body>
</html>
2.2) HTML Attributes:

HTML Global Attributes

HTML src Attribute

HTML alt Attribute

HTML width and height Attribute

HTML id Attribute

HTML title Attribute

HTML href Attribute

HTML style Attribute

HTML lang attribute


HTML Global Attributes

Global attributes apply to all types of HTML tags. Some commonly used global attributes include:

Attribute Description
class Groups elements and allows styling.
style Inline CSS styles.
src Specifies the source of various resources, such as image URLs for the
img element, video URLs for the video element, and audio URLs for the
audio element.
contenteditable Determines whether the content within the element is editable.
role Specifies the element’s accessibility role.
tabindex Determines the order of focus during keyboard navigation.
id Assigns a unique identifier to an element, allowing targeting with CSS
or JavaScript.
href Defines the hyperlink destination within the element, enabling
navigation.
alt Provides alternative text for images, essential for accessibility and SEO.
title Creates a tooltip that appears when a user hovers over the element.
lang Specifies the language of the element’s content, aiding with translation
and accessibility.
HTML src, alt, width, height, and href Attributes
The src attribute in HTML specifies the URL of a resource (such as an image, audio, or video) to be embedded or
included in the webpage.
The alt attribute in HTML provides alternative text for an image if the image cannot be displayed.
The <img> tag should also contain the width and height attributes, which specify the width and height of the
image (in pixels).
The href attribute in HTML, used with the <a> tag, specifies a link destination. Clicking the linked text navigates
to this address.
<!DOCTYPE html>
<html>
<head> <title> Image with Link Example </title> </head>
<body>
<h1>Image with Link</h1>
<! -- Wrapping the image inside an anchor tag to make it clickable -->
<a href="https://www.example.com">
<img src="https://imagename.jpg" alt="Cat Image" width="500" height="300">
</a>
<p>Click on the image above to visit Example.com. </p>
</body>
</html>
HTML lang, style, id Attributes
The lang attribute of the <html> tag declares the language of the Web page.
The style attribute is used to add styles to an element, such as colour, font, size, and more.
The id attribute in HTML assigns a unique identifier to an element, allowing it to be targeted by CSS and JavaScript
for styling and manipulation purposes.

<!DOCTYPE html>
<html lang="en">
<head> <title> Using lang, style, and id Attributes</title> </head>
<body>
<! -- Paragraph with id and inline style attributes -->
<p id="intro" style="font-family: Arial; color: darkred; font-size: 18px;">
This paragraph is styled using the <code>style</code> attribute and has a unique <code>id</code>.
</p>
<! -- Heading with id and inline style attributes -->
<p> <h1 id="mainHeading" style="text-align: center; color: darkblue;"> Welcome to My Page </h1> </p>
</body>
</html>
HTML title Attributes

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:

<!DOCTYPE html>
<html>
<head> <title> HTML title Attribute</title> </head>
<body>
<h3 title="Hello students...! Welcome to Web development class">
Mouse over this paragraph, to display the title attribute.
</h3>
</body>
</html>
3) HTML Meta tags:

The <meta> tag defines metadata about an HTML document.

Metadata is data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to specify

character set, page description, keywords, author of the document, and viewport

settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines

(keywords), and other web services.


Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setting the Viewport:


The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a
mobile phone than on a computer screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width part sets the width of the page to follow the screen-width of the device (which
will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
4) HTML Character Entities
HTML entities provide a way to display reserved characters, ensuring they are rendered correctly. Some of them are
listed in below table.

Result Description Entity Name Number Code


non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' apostrophe &apos; &#39;
inverted exclamation
¡ &iexcl; &#161;
mark
¤ currency &curren; &#164;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
¦ broken vertical bar &brvbar; &#166;
§ section &sect; &#167;
¨ spacing diaeresis &uml; &#168;
© copyright &copy; &#169;
feminine ordinal
ª &ordf; &#170;
indicator
angle quotation mark
« &laquo; &#171;
(left)
¬ negation &not; &#172;
€ Euro sign &euro; &#8364;
® registered trademark &reg; &#174;
™ trademark &trade; &#8482;
¯ spacing macron &macr; &#175;
° degree &deg; &#176;
± plus-or-minus &plusmn; &#177;
² superscript 2 &sup2; &#178;
³ superscript 3 &sup3; &#179;
´ spacing acute &acute; &#180;
µ micro &micro; &#181;
¶ paragraph &para; &#182;
· middle dot &middot; &#183;
¸ spacing cedilla &cedil; &#184;
¹ superscript 1 &sup1; &#185;
masculine ordinal
º &ordm; &#186;
indicator
angle quotation mark
» &raquo; &#187;
(right)
¼ fraction 1/4 &frac14; &#188;
½ fraction 1/2 &frac12; &#189;
¾ fraction 3/4 &frac34; &#190;
¿ inverted question mark &iquest; &#191;
× multiplication &times; &#215;
÷ division &divide; &#247;
Task: Use Description list for get the below output.
5) Hyperlink in HTML

HTML links, or hyperlinks, connect web pages and are created using the `<a>` tag with the

`href` attribute.

They enable users to navigate between pages or resources.

Links can be text, images, or other elements, enhancing web navigation and interactivity.

A hyperlink can be represented by an image or any other HTML element, not just text.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red


<a href="https://www.geeksforgeeks.org"
Syntax
target="_blank">

Attribute Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame or window as the link. (Default
behaviour)
_parent [frames] Opens the linked document in the parent frame.
_top [frames] Opens the linked document in the full body of the window.
<!DOCTYPE html>
<html>
<head> <title> Hyperlinks: Target Attribute Example </title> </head>
<body>
<h3> Various options available in the Target Attribute </h3>
<p> If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
<a href="https://www.who.int/" target="_blank"> World Health Organization </a>

<p> If you set the target attribute to "_self", the link will open in the same window or tab. </p>
<a href="https://www.who.int/" target="_self"> World Health Organization </a>

</body>
</html>
6.HTML Lists
6.1 Ordered List

Syntax:
<ol>
<li>...</li>
</ol>

<ol type="A">, <ol type="a">, <ol type="1">

Type Descriptions

type= “1” This will list the items with numbers (default)

type= “A” This will list the items in uppercase letters.

type= “a” This will list the items in lowercase letters.

type= “I” This will list the items with uppercase Roman numbers.

type= “i” This will list the items with lowercase Roman numbers.
6.3 Unordered List

Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Type Descriptions

<ul style="list-style-type:disc;"> This value sets the list marker to a bullet (default).

<ul style="list-style-type: square"> This value sets the list marker to a circle.

<ul style="list-style-type:circle;"> This value sets the list marker to a square.

<ul style="list-style-type:none;"> This value unmarks the list of items.


6.4 Description List

Syntax:
<dl>
<dt>Course</dt>
<dd>DSA</dd>
<dt>Language</dt>
<dd>Python</dd>
</dl>

Type Descriptions

<dl> This tag defines the description list.

<dt> This tag defines the data terms inside the list.

<dd> This tag defines the description of data.


7.Tables

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
HTML Table Borders:
To add a border, use the CSS border property on table, th, and td elements:
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
table, th, td
{
border: 1px solid white;
border-collapse: collapse;
}
th, td
{
background-color: #96D4D4;
}

th, td
{
border-style: dotted;
}
Another possibility:
(dotted, dashed, solid, double, groove, ridge, inset,
outset, none, hidden)

th, td
{
border-color: #96D4D4;
}
HTML Table sizes:

HTML tables can have different sizes for each column, row or the entire table.
To set the width of a table, add the style attribute to the <table> element.

<table style="width:100%"> Set the width of the table to 100%

<th style="width:70%">name</th> Set the width of the column to 70%

<tr style="height:200px"> Set the height of the row to 200 pixels

HTML Table cell padding:

Cell padding is the space between the cell edges and the cell content.
By default, the padding is set to 0.

th, td
{
Set the width of the table to 100%
padding: 15px;
}
th, td { ֍ To add padding only above the content, use the padding-
padding-top: 10px; top property.
padding-bottom: 20px; ֍ And the others sides with the padding-bottom, padding-
padding-left: 30px; left, and padding-right properties.
padding-right: 40px;
}

HTML Table headers:


HTML tables can have headers for each column or row, or for many columns/rows.
Table headers are defined with th elements. Each th element represents a table cell.
By default, table headers are bold and centered.
The <caption> tag should be inserted immediately after the <table> tag.

<table>
You can add a caption that serves as a heading for the
<caption>Progress</caption>
entire table.
</table>
th
{ To left-align the table headers, use the CSS text-align
text-align: left; property.
}
th
{
To right-align the table headers, use the CSS text-align property.
text-align: right;
}
You can have a header that spans over two or more columns.
<th colspan="2">Name</th>
To do this, use the colspan attribute on the <th> element
HTML Table - Cell Spacing

Cell spacing is the space between each cell.


By default, the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:

table {
border-spacing: 30px; Set the width of the table to 100%
}
HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.
To make a cell span over multiple columns, use the colspan attribute
To make a cell span over multiple rows, use the rowspan attribute

<tr>
<td rowspan="2">Phone</td> Two row cells are applied for span
</tr>

<tr>
<td colspan="2">Phone</td> Two column cells are applied for span
</tr>

HTML Table Styling

tr:nth-child(even) {
To style every other table row element, use the: nth-child(even)
background-color: #D6EEEE;
selector like this
}
td:nth-child(even), th:nth-child(even)
{ To make vertical zebra stripes, style every other column,
background-color: #D6EEEE; instead of every other row.
}

Combine Vertical and Horizontal Zebra Stripes

tr:nth-child(even)
{
background-color: rgba(150, 212, 212,
0.4);
}

th:nth-child(even),td:nth-child(even)
{
background-color: rgba(150, 212, 212, You can combine the styling from the two examples above and you will have stripes
0.4); on every other row and every other column.
} Use an rgba() color to specify the transparency of the color.
7.HTML Images

The HTML <img> tag is used to embed an image in a web page.


Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes.

Attribute Description
Specifies the path to the image file.
src
<img src="url" alt="alternatetext">

Provides alternate text for the image, useful for accessibility and when the image
alt cannot be displayed.
<img src="img.jpg" alt="Flowers in valley">

Specifies the height of the image.


height <img src="img.jpg" alt=" Flowers in valley " width="500" height="600">

Specifies the width of the image.


width <img src="img.jpg" alt=" Flowers in valley " width="500" height="600">
Case 1: Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.
However, it is recommended to use the style attribute, as it prevents stylesheets from altering the size of
images.
Case 2: Images in Another Folder:
If you have your images in a sub-folder, you must include the folder name in the src attribute:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Case 3: Images in Another Server/Website:


To point to an image on another server, you must specify an absolute (full) URL in the src
attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Case 4: Animated Images:
HTML allows animated GIFs:

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Case 5: Image as a Link:


To use an image as a link, put the <img> tag inside the <a> tag:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Case 6: Image Maps:
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
<img> Tag:

✓ Displays the image workplace.jpg with the alternative text "Workplace" if the image fails to load.
✓ usemap="#workmap" links the image to the map defined by name="workmap".

<map> Element:

✓ Defines the clickable areas on the image.


✓ The name="workmap" links this map to the usemap attribute of the image.

<area> Elements:

✓ First <area>:

֍ shape="rect": Defines a rectangular area.


֍ coords="34,44,270,350": Specifies the coordinates (top-left-x, top-left-y, bottom-right-x, bottom-right-y).
֍ alt="Computer": Describes the area for accessibility.
֍ href="computer.htm": Links to computer.htm when clicked.

✓ Second <area>:
֍ Another rectangular area linking to phone.htm.

✓ Third <area>:
֍ shape="circle": Defines a circular area.
֍ coords="337,300,44": Specifies the center's coordinates (337, 300) and the radius (44).
֍ Links to coffee.htm when clicked.
֍ This creates an interactive image where users can click on the designated areas (Computer, Phone, Coffee)
to navigate to specific pages.
Case 7: Background image:
To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property:

Scenario Description
<p style="background-image: Add a background image on a HTML element:
url('img.jpg');">
<style>
p{
background-image: url('img.jpg'); Specify the background image in the <style> element:
}
</style>
<style>
body { If you want the entire page to have a background image,
background-image: url('img.jpg'); you must specify the background image on the <body>
} element:
</style>
<style>
body {
background-image: url('img.jpg'); To avoid the background image from repeating itself,
background-repeat: no-repeat; set the background-repeat property to no-repeat.
}
</style>
Scenario Description
<style>
֍ If you want the background image to cover the
body { entire element, you can set the background-size
background-image: url('img_girl.jpg'); property to cover.
background-repeat: no-repeat; ֍ Also, to make sure the entire element is always
background-attachment: fixed; covered, set the background-attachment property
background-size: cover; to fixed:
} ֍ This way, the background image will cover the
</style> entire element, with no stretching (the image will
keep its original proportions):
8.HTML Forms

When working with HTML forms, different types of input elements allow users to provide various types
of data, ranging from simple text to dates, file uploads, and choices like checkboxes and radio buttons.
Each type serves a specific function, and understanding these categories is essential for creating
interactive and efficient forms.
Here's Below is a categorized explanation of common HTML input elements.
1. Text Input Types
Text input fields are used to collect general text or numeric data from users. Depending on the input
type, these fields can validate the format (such as email or URL) or restrict the kind of data entered.
Examples:
֍ <input type="text">: Used to collect free-form text like names, addresses, or comments.
֍ <input type="email">: Ensures that the input follows the format of a valid email address.
֍ <input type="search">: Styled for entering search queries; offers a clear button to reset the
search.
֍ <input type="tel">: Used for telephone numbers, allowing for better formatting based on
country code.
֍ <input type="url">: Validates input as a properly formatted URL (e.g., "https://example.com").
֍ <input type="password">: Masks the entered text, used for sensitive data like passwords.
֍ <input type="number">: Restricts the input to numeric values, with optional range settings like
min and max.

2. Choice Inputs
Choice inputs are designed for users to select from a predefined set of options. Depending on the element,
users can select one or multiple choices.
Examples:
֍ <input type="checkbox">: Allows users to select multiple options from a group. Typically used
when more than one choice is valid (e.g., subscribing to multiple newsletters).
֍ <input type="radio">: Lets users choose a single option from a set. Typically used when only
one choice is valid (e.g., selecting gender).
֍ <select> (dropdown): Displays a list of options in a dropdown menu, where users can select one
(or more if multiple attributes are added).
3. Date and Time Inputs
Date and time inputs provide a convenient way to select specific dates, times, or both. These inputs
automatically provide users with a date or time picker, improving user experience and data accuracy.
Examples:
֍ <input type="date">: Displays a calendar for users to pick a specific date.
֍ <input type="month">: Allows users to select a specific month and year.
֍ <input type="week">: Lets users select a week within a year.
֍ <input type="time">: Provides a time picker for users to enter a specific time (hours and
minutes).
֍ <input type="datetime-local">: Allows users to select both a date and time (without a time
zone).

4. Button and Control Inputs


Button and control inputs are used to interact with the form, either by submitting the data, resetting the
form fields, or performing other actions like custom JavaScript functions.
Examples:
֍ <input type="button">: Creates a button that can trigger a JavaScript function or perform other
actions without submitting the form.
֍ <input type="submit">: A button that submits the form data to the server.
֍ <input type="reset">: Resets all the fields in the form to their initial values.
֍ <input type="image">: Submits the form by clicking on an image, acting like a submit button
but with a custom visual element.

5. File Upload and Hidden Data


These inputs handle special tasks like file uploads or passing hidden information in forms.
Examples:
֍ <input type="file">: Lets users upload files from their device. This is commonly used for
uploading resumes, images, or documents.
֍ <input type="hidden">: Stores data that isn't visible to the user but can be submitted along with
the form. Often used for passing information like user IDs or tokens.
6. Range and Color Inputs
These inputs provide users with specialized controls for selecting values within a certain range or picking
a specific color.
Examples:
֍ <input type="range">: Creates a slider that allows users to pick a value between a specified
minimum and maximum. Commonly used for volume control or rating.
֍ <input type="color">: Displays a color picker, allowing users to choose a specific color. This is
useful in applications where color selection is needed, like design tools.

9.HTML div
The <div> tag in HTML is a block-level container element used to group content together.
It doesn't apply any specific styling by itself, but it allows developers to organize and structure their
HTML documents.
Key Features of the <div> Tag:
Block-Level Element: The <div> tag creates a block-level section in the HTML document, meaning
it takes up the full width available by default.
Grouping: It is commonly used to group other elements (like paragraphs, headings, images, etc.)
together for styling or layout purposes.
Styling with CSS: The <div> tag is often used in conjunction with CSS for applying styles like
background color, borders, and layout properties.

You might also like