Scribd
Upload
14 views66 pages

Web Design Technologiesmodule-1 - Parta

Uploaded by

chandan kumar
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
14 views66 pages

Web Design Technologiesmodule-1 - Parta

Uploaded by

chandan kumar
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/ 66

HTML Documents

All HTML documents must start with a type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

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

HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://newhorizoncollegeofengineering.in/">This is a link</a>


The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

Example

<img src=“flag.jpeg" alt=“Image is not displayed" width="104" height=“142">

HTML Basics

HTML (HyperText Markup Language) is a markup language used to structure and organize the
content on a web page. It uses various tags to define the different elements on a page, such as
headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a
tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web
browser to render the web page. For example,

<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>
Browser Output
In this example, the html element is the root element of the hierarchy and contains two child
elements: head and body. The head element, in turn, contains a child element called the title, and
the body element contains child elements: h1 and p.

Let's see the meaning of the various elements used in the above example.

• <html>: the root element of the DOM, and it contains all of the other elements in the code

• <head>: contains metadata about the web page, such as the title and any linked CSS or
JavaScript files

• <title>: contains the title of the web page, which will be displayed in the web browser's
title bar or tab

• <body>: contains the main content of the web page, which will be displayed in the web
browser's window

• <p>: contains the paragraphs of text on the web page

• <strong>, <em>: child elements of the <p> elements, they are used to mark text as
important and emphasized respectively

Note: Only the elements inside the <body> tag renders in the web browser.

What are HTML elements?

HTML elements consist of several parts, including the opening and closing tags, the content, and
the attributes. Here is an explanation of each of these parts:
Here,

• The opening tag: This consists of the element name, wrapped in angle brackets. It indicates
the start of the element and the point at which the element's effects begin.

• The closing tag: This is the same as the opening tag, but with a forward slash before the
element name. It indicates the end of the element and the point at which the element's effects
stop.

• The content: This is the content of the element, which can be text, other elements, or a
combination of both.

• The element: The opening tag, the closing tag, and the content together make up the
element.

What are HTML Attributes?

HTML elements can have attributes, which provide additional information about the element. They
are specified in the opening tag of the element and take the form of name-value pairs. Let's see an
example:

<a href="http://example.com"> Example </a>


The href is an attribute. It provides the link information about the <a> tag. In the above example,

• href - the name of attribute

• https://www.programiz.com - the value of attribute

Note: HTML attributes are mostly optional.

HTML Syntax

We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of
tags, elements, and attributes, as well as the correct use of indentation and white space. Here are
some key points about HTML syntax:
1. HTML tags consist of the element name, wrapped in angle brackets. For
example, <h1>, <p>, <img> are some HTML tags.

2. HTML elements are created by enclosing the content of the element inside the opening and
closing tags of the element. For example,

<span>Some text.</span>
is an HTML element.

3. HTML attributes are used to provide additional information about HTML elements and are
specified in the opening tag of the element. For example,

<a target="www.google.com">Click Here</a>


Here, target is an attribute.

4. HTML code should be well-formed and properly indented, with each element on its own line and
each level of hierarchy indented by one level. This makes the code easier to read and understand,
and can help to avoid errors. For example,

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p> Hello World!</p>
</body>
</html>

HTML Paragraphs

The HTML <p> tag is used to create paragraphs. For example,

<p>HTML is fun to learn.</p>


Browser Output
As we can see, a paragraph starts with the <p> and ends with the </p> tag.

HTML paragraphs always start on a new line. To demonstrate this, let's create a webpage with two
paragraphs.

<p>Paragraph 1: Short Paragraph</p>

<p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill an entire line in the
website.</p>
Browser Output

The above HTML code contains two paragraphs. And each paragraph starts on a new line even
though there is sufficient space after the first paragraph.

Note: By default, browsers automatically add whitespace (margin) above and below paragraphs. It
is possible to change whitespace and other design aspects using CSS.
HTML Paragraphs and Spaces

Paragraphs automatically remove extra spaces and lines from our text. For example,

<p>
The paragraph tag removes all extra spaces.

The paragraph tag also removes all extra lines.


</p>
Browser Output

Here, the output

• remove all the extra spaces between words

• remove extra lines between sentences

Note: It's possible to add extra spaces and lines in HTML, which we will discuss later in this
tutorial.

Adding Line Breaks in Paragraphs

We can use the HTML line break tag, <br>, to add line breaks within our paragraphs. For example,

<p>We can use the <br> HTML br tag <br> to add a line break.</p>
Browser Output

Note: The <br> tag does not need a closing tag like the <p> tag.

Pre-formatted Text in HTML

As we have discussed, paragraphs cannot preserve extra lines and space. If we need to create
content that uses multiple spaces and lines, we can use the HTML <pre> tag.

The <pre> tag creates preformatted text. Preformatted texts are displayed as written in the HTML
file. For example,

<pre>
This text
will be
displayed

in the same manner


as it is written
</pre>
Browser Output
Other Elements Inside Paragraphs

It's possible to include one HTML element inside another. This is also true for <p> tags. For
example,

<p>
We can use other tags like <strong>the strong tag to emphasize text</strong>
</p>
Browser Output

In the above example, we have used the <strong> tag inside the <p> tag.

Browsers automatically make the contents inside <strong> tags bold.


Paragraph is Block-level

The <p> tag is a block-level element. It starts on a new line and takes up the full width (of its parent
element).

Note: Keep note of which elements are inline-level and which are block-level. It will be important
later when we learn CSS.

Add Extra Space Inside Paragraphs

As discussed earlier, we cannot normally add extra empty spaces inside paragraphs. However, we
can use a certain HTML entity called non-breaking space to add extra spaces. For example,

<p>Extra space &nbsp;&nbsp; inside a paragraph</p>


Browser Output
Here, &nbsp; is an HTML entity, which is interpreted as a space by browsers. This allows us to
create multiple spaces inside paragraphs and other HTML tags.

HTML Headings

The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

<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>
Browser Output

In the example, we have used tags <h1> to <h6> to create headings of varying sizes and
importance.

The <h1> tag denotes the most important heading on a webpage. Similarly, <h6> denotes the least
important heading.

The difference in sizes of heading tags comes from the browser's default styling. And, you can
always change the styling of heading tags, including font size, using CSS.
Note: Do not use heading tags to create large texts. It's because search engines like Google use
heading tags to understand what a page is about.

h1 Tag is Important

The HTML <h1> tag defines the most important heading in a webpage.

Although it's possible to include multiple <h1> tags in a webpage, the general practice is to use a
single <h1> tag (usually at the beginning of the page).

The <h1> tag is also important for SEO. Search engines (such as Google) treat content
inside <h1> with greater importance compared to other tags.

Headings are block-level elements

The Headings <h1> to <h6> tags are block-level elements. They start on a new line and take up the
full width of their parent element. For example,

<h1>Headings</h1> <h2>are</h2> <h3>fun!</h3>


Browser Output

HTML Comments
HTML comments are used to insert notes to a web page. For example,

<!-- heading 2 -->


<h2>Comments in HTML</h2>
Here, <!-- heading 2 --> is a comment. In HTML, comments start with <!-- and ends with -->

HTML comments are not displayed by browsers. They are used to add notes for documentation
purposes within code. For example,

<!-- an HTML div -->


<div>
<p>HTML is fun to learn.</p>
</div>
Browser Output

Here,

<!-- an HTML div -->


is a comment. Hence, it is not displayed in the browser output.

Why use HTML Comments?

Comments are mainly used to make our code more readable. They are completely hidden from the
webpage and only show up in the code.
Commenting on your code is a good practice as it helps us to express what the code is doing. It can
act as an anchor for you if you want to change your code in the future.

In a collaborative environment, code comments are helpful for other developers as well.

Note: Even though browsers don't display comments, it's still possible to view comments using the
browser's View Source feature. That's why we must not add sensitive information inside comments.

Single-Line and Multi-line Comments

In HTML, we use the same syntax to create single-line and multi-line comments.

Single Line Comment

<!-- Write a heading -->


<h1>Important Heading</h1>
Multi-line Comments

<!-- Multiple Line comments


can include line breaks
and also extra spaces -->

<p>this will display in the webpage</p>

HTML Tags Inside Comments

If we put HTML elements inside comments, they will be ignored. For example,

<p>this will be displayed</p>

<!-- <p>this will not be displayed</p> -->

<p>this will also be displayed</p>


Browser Output
HTML Table

The HTML table tag (<table>) is used to represent data in a structured way by creating a table. For
example,

<table border="1" >


<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</table>
Browser Output

In the above example, you can see we have used multiple tags to create a table in HTML.

• <table>

• <tr>

• <td>

• <th>

Table tag <table> in HTML

The <table> tag is used to define a table. For example,

<table>
….
<table>

Table Row <tr> in HTML

The <tr> tag is used to define a row in a table. For example,

<table>
<tr>
...
</tr>
</table>
The table row can include either table heading, <th> or table data, <td>.
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Prasanna</td>
<td>Nepal</td>
</tr>
<tr>
<td>Simon</td>
<td>USA</td>
</tr>
In a table, there can be any number of rows.

Table Heading, <th> in HTML

The <th> tag is used to define a table header. It is generally the top row of the table. For example,

<table>
<tr>
<th>Item</th>
<th>Count</th>
</tr>
<tr>
<td>Mango</td>
<td>125</td>
</tr>
<tr>
<td>Orange</td>
<td>75</td>
</tr>
</table>
Browser Output
In the above example, Item and Count are table headers and they are used to represent the category
of data in a particular row.

Here, the styling of the table headers is bold and center-aligned. This is because the <th> tag has
some default styling.

Table Cell <td> in HTML

The <td> tag is used to define table cells (data). The table cells store data to be displayed in the
table. For example,

<tr>
<td>Apple</td>
<td>Mango</td>
<td>Orange</td>
</tr>
In the above example, <td>Apple</td>, <td>Mango</td> and <td>Orange</td> are table cells.

Table cells are generally inside the table row or table headers.

Table Border

Remember we have used the border attribute in our first example.

<table border="1">
...
</table>
In HTML, the border attribute is used to add a border to a table and all the cells.

Note: We can have borders of various styles in tables, however for more specific borders, we need
to use CSS.
To prevent double borders like the one in the example above, we can set the border-collapse
property of the table. For example,

<table border="1" style="border-collapse: collapse;">


...
</table>

Table Head, Body, and Footer

The HTML table can be divided into three parts: a header, a body, and a footer.

1. Table Header

We use the <thead> tag to add a table head. The <thead> tag must come before any other tags inside
a table. For example,

<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>

...
...
</table>
The content of <thead> is placed on the top part of the table and we usually place the rows with
table headers inside the <thead> tag.
2. Table Body

We use the <tbody> tag to add a table body. The <tbody> tag must come after <thead> and before
any other tags inside a table. For example,

<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>

...
...
</table>
The content of <tbody> is placed on the center part of the table and we usually place the rows with
the content we want to represent in the <tbody>.

3. Table Footer

We use the <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody> and before
any other tags inside a table. For example,

<table>
<thead>
...
</thead>
<tbody>
,,,,
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table>
The content of <tbody> is placed on the bottom part of the table and we usually place the rows with
the footer in the <tfoot>.

All these tags must be placed inside a <table> tag and must contain at least one <tr>. For example,
Example: HTML Table Head, Body, and Footer

<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>
Browser Output
Colspan and Rowspan

Colspan

The colspan attribute merges cells across multiple columns. For example,

<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>5</td>
</tr>
</table>
Browser Output

In the above example, you can see that the last row only has 2 cells with one cell occupying 2
columns.

The value of the colspan attribute determines how many columns the cell occupies.

Rowspan

The rowspan attribute merges cells across multiple rows. For example,

<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3"> <td>67<Mark Smith</td>
<td>English</td>
/td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>
Browser Output
In the above example, you can see that the first column only has 2 cells with one cell
occupying 2 rows.

The value of the rowspan attribute determines how many rows the cell occupies.

HTML Lists

HTML lists are used to display related information in an easy-to-read and concise way as lists.

We can use three types of lists to represent different types of data in HTML:

1. Unordered List <ul>

2. Ordered List <ol>

3. Description List <dl>

Unordered List
The unordered list is used to represent data in a list for which the order of items does not matter.

In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a <li> tag
which represents list items. For example,

<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
Browser Output

Here, <li>Apple</li>, <li>Orange</li>, and <li>Mango</li> are the list items.

To learn more about unordered lists, visit HTML Unordered Lists.

Ordered List

The ordered list is used to represent data in a list for which the order of items has significance.

The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the ordered list
must be a <li> tag. For example,

<ol>
<li>Ready</li>
<li>Set</li>
<li>Go</li>
</ol>
Browser Output

Here, you can see list items are represented with numbers to represent a certain order.

To learn more about ordered lists, visit HTML Ordered Lists.

Description List

The HTML description list is used to represent data in the name-value form. We use the <dl> tag to
create a definition list and each item of the description list has two elements:

• term/title - represented by the <dt> tag

• description of the term - represented by the <dd> tag

Let's see an example,

<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading StyleSheets</dd>
<dt>JS</dt>
<dd>Javascript</dd>
</dl>
Browser Output
HTML Unordered List

We use the HTML unordered list to define a list where the sequence or order of the list items doesn't
matter. We can use an unordered list for keeping track of groceries, supplies and random objects.

In HTML, we use the <ul> tag to create an unordered list. For example,

<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
</ul>
Browser Output

Each item of the list is enclosed inside the <li> tag and they are represented by the dot bullet point
symbol.

By default, the symbol to represent an unordered list in HTML is a dot bullet point, however, we
can change them as per our choice.
Below, we can see examples for all the marker types.

Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For example,

<ul >
<li>
Coffee
<ul>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ul>
</li>
<li>
Tea
<ul>
<li>Milk Tea</li>
<li>Black Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Browser Output
In the above example, you can see we have added unordered lists inside another unordered list.

In this case, the first and second list items of the outer unordered list include unordered lists.

Ordered List inside Unordered List

Similarly, we can also mix list types while nesting and add ordered lists inside the unordered list.
For example,

<ul>
<li>
Coffee
<ol>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ol>
</li>
<li>
Tea
<ol>
<li>Milk Tea</li>
<li>Black Tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
Browser Output
Multi-level Nesting of Unordered List

In our examples, we are nesting the list up to a single level, however, we can also nest lists up to
multiple levels. This might be important while creating lists like Table of Content. For example,
HTML Ordered List

We use the HTML ordered list to define a list where the sequence or order of the list items is
important. We can use the HTML ordered list for recipes, algorithms, top ten lists, and so on.

We use the <ol> tag to create an unordered list. For example,

<ol>
<li>Name</li>
<li>Address</li>
<li>Phone Number</li>
</ol>
Browser Output

Each item of the list is enclosed inside the <li> tag and they are numbered by decimal numbers.

By default, ordered lists are ordered by numbers, however, we can change them as per our choice.

Ordered Lists Type

We use the type attribute to change the marker for the list. There are five types of numbering in the
ordered list. They are

Below, we can see examples for all the number types.


start Attribute

We use the start attribute to change the starting point for the numbering of the list. For example,

<ol start='5'>
<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>
Browser Output

Here, we change the starting value of the list to 5.

This attribute also works with other types. For example,

<ol type="a" start='5'>


<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>
Browser Output

Similarly, we can use the start attribute along with all other types.

reversed Attribute

We can use the reversed attribute on the ordered list to reverse the numbering on the list. For
example,

<ol reversed>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>
Browser Output

Here, we can see the order of the list is reversed, the first list item is numbered 4 and the last is
numbered 1.

Similarly, the reversed attribute can also be used with other types and in conjunction with the start
attribute. For example,
<ol reversed type="I" start="10">
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>
Browser Output

In the above example, we use the upper-case roman numeral type and start at 10 and reverse the
order of the numbers.

Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For example,

<ol type="I">
<li>
Chapter 1
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
</ol>
</li>
<li>
Chapter 2
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
</ol>
</li>
<li>
Chapter 3
<ol type="a">
<li>Lesson 1</li>
</ol>
</li>
</ol>
Browser Output

In the above example, you can see we have added an ordered list inside another ordered list.

In this case, the list item of the outer ordered list also includes an ordered list.

Similarly, we can also mix list types while nesting and add an unordered list inside the ordered list.
For example,

<ol>
<li>
Prepare the ingredients.
<ul>
<li>Eggs</li>
<li>Salt</li>
<li>Butter</li>
</ul>
</li>
<li>
Mix the ingredients and cook on a low flame.
</li>
<li>
Serve hot with garnish. You can use
<ul>
<li>Chives</li>
<li>Bacon</li>
<li>Coriander</li>
</ul>
</li>
</ol>
Browser Output

HTML Description List

We use the HTML description list to create a list where list items include terms and descriptions of
the term.

In HTML, we use the <dl> tag to create a description list. For example,

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Browser Output
1. Single Term and Description

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Browser Output

Here, we can see a single term is followed by a single description.

2. Single Term and Multiple Description

Sometimes, we can come across data where there are multiple descriptors that fit the same term,
like a product and its features list.

In such a case, rather than listing the product name multiple times before each feature, we can
follow the single term <dt> with multiple feature/description <dd> to present it better. For example,

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language.</dd>
<dd>Used to create Websites.</dd>
<dd>Released in 1993.</dd>
</dl>
Browser Output

Here, we can see that the single term <dt>HTML</dt> is described by multiple definitions <dd>

3. Multiple Term and Single Description

Sometimes, we come across data where multiple keys may have similar values. Like multiple
programming languages can feature the same feature sets.

In such cases, rather than repeating the key/value pair, we can group several keys <dt> followed by
a single description <dd> such that the single description describes many terms,

<dl>
<dt>HTML</dt>
<dd>is markup language</dd>
<dt>Python</dt>
<dt>Java</dt>
<dd>are programming languages.</dd>
</dl>

Browser Output
Here, we can see that multiple terms <dt>Python</dt> and <dt>Java</dt> share the same
description <dd>are programming languages.</dd>.

HTML Line break

Line-Break vs Multiple Paragraphs

As we know, an HTML paragraph always starts on a new line, instead of a line break we can also
use multiple paragraphs. For example,

<p>Use the</p>
<p> br tag</p>
<p> to create line breaks in text.</p>
Browser Output
We can see we have successfully applied line breaks using multiple paragraphs. However, there are
several drawbacks of this approach:

• Screen readers treat each paragraph as separate sentences. That is, Use the, br tag, and to
create line breaks in text. will be read as different sentences which will create confusion for
users.

• Each paragraph has its own default styling, hence with multiple paragraphs, there will be
unnecessary margin and padding between the lines making them not seem as continuous.
You can see that in the above output as well.

Example: Line breaks using HTML <br> and <p>

<p>Roses are red</p>


<p>Violets are blue</p>
<p>HTML is Fun</p>
<p>and so are You!</p>

<p>
Roses are red <br>
Violets are blue <br>
HTML is fun <br>
and so are You!
</p>
Browser Output
HTML Horizontal Line

The HTML Horizontal rule tag, <hr>, is used to insert a horizontal line between our paragraphs. For
example,

<p>First Paragraph</p>
<hr>
<p>Second Paragraph</p>
Browser Output

The <hr> tag is an empty tag, i.e. it doesn't require a closing tag.

HTML horizontal line to separate Page sections


The <hr> tag is used to apply a thematic break in HTML. i.e It is used when there is a change of
topic or you need to specify separation between content. Commonly, a <hr> tag is used between
sections in an article. For example,

<h2>Physics</h2>
<p>Physics is the natural science that studies matter, its fundamental constituents, its motion and
behavior through space and time, and the related entities of energy and force. </p>
<hr>
<h2>Chemistry</h2>
<p>Chemistry is the branch of science that deals with the properties, composition, and structure of
elements and compounds, how they can change, and the energy that is released or absorbed when
they change.</p>

Browser Output

HTML Form

An HTML Form is a section of the document that collects input from the user. The input from the
user is generally sent to a server (Web servers, Mail clients, etc). We use the
HTML <form> element to create forms in HTML.
Example: HTML Form

The HTML <form> element is used to create HTML forms. For example,

<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last name: </label>
<input type="text" name="lastname" required>
<br>
<label for="email">email: </label>
<input type="email" name="email" required>
<br>
<label for="password">password: </label>
<input type="password" name="password" required>
<br>
<input type="submit" value="Login!">
</form>
Browser Output

HTML Form Elements

A form contains special interactive elements that users use to send the input. They are text inputs,
textarea fields, checkboxes, dropdowns, and much more. For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
HTML (Hypertext Markup Language) provides various form elements that allow you to create
interactive forms on web pages. Forms are essential for gathering user input, such as text,
checkboxes, radio buttons, and more. Here are some common HTML form elements:

1. `<form>`: The `<form>` element is used to create a container for all the form elements. It
specifies where the data entered into the form should be sent for processing and defines the method
for submitting the form (usually "GET" or "POST").

```html
<form action="process.php" method="post">
<!-- Form elements go here -->
</form>
```

2. `<input>`: The `<input>` element is used to create various types of input fields, including text
fields, password fields, radio buttons, checkboxes, and more.

```html
<input type="text" name="username">
<input type="password" name="password">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newslett```

3. `<textarea>`: The `<textarea>` element is used to create a multi-line text input field, suitable for
longer text entries.
```html
<textarea name="comments" rows="4" cols="50"></textarea>
```

4. `<select>`: The `<select>` element is used to create a drop-down list of options. You can use
`<option>` elements to define the available choices.

```html
<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
```

5. `<button>`: The `<button>` element is used to create a clickable button within a form.

```html
<button type="submit">Submit</button>
```

6. `<label>`: The `<label>` element is used to provide a label for a form element. It helps improve
accessibility and user experience by associating the label with its corresponding input element.

```html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
```

7. `<fieldset>` and `<legend>`: These elements are used to group related form controls and provide
a title or description for the group. This helps organize and structure complex forms.

```html
<fieldset>
<legend>Contact Information</legend>
<!-- Form elements related to contact information -->
</fieldset>
```

8. `<input type="submit">` and `<input type="reset>`: These input elements are used to create a
"Submit" button and a "Reset" button, respectively.

```html
<input type="submit" value="Submit">
<input type="reset" value="Reset">
```
These are some of the most commonly used HTML form elements. By combining these elements
and attributes, you can create a wide range of interactive forms for collecting user data on your web
pages.

Form Attributes

HTML form elements can have several attributes that allow you to control their behavior,
appearance, and interaction with the user. Here are some common attributes used with HTML form
elements:

1. `action`: This attribute specifies the URL to which the form data will be submitted when the user
submits the form.

```html

<form action="process.php" method="post">

<!-- Form elements go here -->

</form>

```

2. `method`: The `method` attribute determines how the form data is sent to the server. It can be set
to either "GET" or "POST."

- `GET`: Appends form data to the URL as query parameters. This method is suitable for non-
sensitive data.

- `POST`: Sends form data in the request body. This method is more secure and is typically used for
sensitive information.

```html
<form action="process.php" method="post">

<!-- Form elements go here -->

</form>

```

3. `name`: The `name` attribute is used to give a name to the form element. It's crucial when
processing the form data on the server.

```html

<input type="text" name="username">

```

4. `id`: The `id` attribute provides a unique identifier for the form element, which can be useful for
styling with CSS and associating labels with form controls.

```html

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

<label for="username">Username:</label>

```

5. `value`: The `value` attribute sets the initial or default value for input fields, checkboxes, and
radio buttons.

```html

<input type="text" name="username" value="JohnDoe">


<input type="checkbox" name="subscribe" value="yes" checked>

```

6. `placeholder`: The `placeholder` attribute provides a hint or example of what should be entered
into the input field. It disappears when the user starts typing.

```html

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

```

7. `disabled`: The `disabled` attribute disables a form element, preventing the user from interacting
with it or submitting its value.

```html

<input type="text" name="disabledField" value="I am disabled" disabled>

```

8. `required`: The `required` attribute enforces that a user must fill out a form field before they can
submit the form.

```html

<input type="text" name="requiredField" required>

```
9. `readonly`: The `readonly` attribute makes an input field or textarea uneditable, but the user can
still see the content.

```html

<input type="text" name="readonlyField" value="I am readonly" readonly>

```

10. `min` and `max`: These attributes are used with number and date input types to define the
minimum and maximum allowed values.

```html

<input type="number" name="age" min="0" max="100">

<input type="date" name="birthdate" min="2000-01-01" max="2022-12-31">

```

These are some of the common attributes used with HTML form elements. Each attribute serves a
specific purpose and allows you to control the behavior and appearance of form elements according
to your requirements.

HTML Input Tag

The HTML <input> tag de nes the eld where the user can enter data. The type attribute
determines what type of user input is taken.

<input type="text" name="firstname">


Browser Output
fi
fi
Here,

• type - determines the type of input the <input> tag takes

• name - speci es the name of the input which is what the data is named as when submitting
the data to a server.

Different Input Types

The various types of input tags available in HTML5 are:

1. text - creates a single-line text elds (default)

2. button - creates a button with no default functionality

3. checkbox - creates a checkbox

4. color - creates a color picker

5. date - creates a date picker

6. datetime-local - creates a date and time picker

7. email - creates an input eld that allows the user to input a valid email address

8. le - creates an input eld that lets the user upload a le or multiple les

9. hidden - creates an invisible input eld

10. image - creates a button using an image

11. month - creates an input eld that lets the user enter month and year

12. password - creates an input eld that lets the user enter information securely

13. radio - creates a radio button

14. range - creates a range picker from which the user can select the value

15. reset - creates the button which clears all the form values to their default value

16. search - allows user to enter their search queries in the text elds

17. submit - allows user to submit form to the server


fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
18. tel - de nes the eld to enter a telephone number

19. time - creates an input eld that accepts time value

20. url - lets the user enter and edit a URL

21. week - lets the user pick a week and a year from a calendar

1. Input Type text

The input type text is used to create single-line text elds. It is the default input type.

<label for="name">Search: </label>


<input type="text" id="name">
Browser Output

The input type text can also contain minlength, maxlength, and size attributes. For
example,

<label for="name">Name</label>
<input type="text" id="name" minlength="4" maxlength="8">
Browser Output

In the above example, values are only allowed between the length of 4 to 8 characters.

Note: If the type attribute is not provided, the tag becomes the type of text.

2. Input Type button

The input type button is used to create a button with no default functionality. For example,
fi
fi
fi
fi
<input type="button" value="Click Me!">
Browser Output

The text inside the value attribute is displayed in the button.

Note: Generally, javascript is used to add functionality to such buttons.

3. Input Type checkbox

The input type checkbox is used to create a checkbox input. For example,

<input type="checkbox" id="subscribe" value="subscribe">


<label for="subscribe">Subscribe to newsletter!</label><br>
Browser Output (checkbox unselected)

The checkbox can be toggled between selected and not selected.

Browser Output (checkbox selected)

The value of the checkbox is included in the form data only if the checkbox is selected and is
omitted if the checkbox is not selected.
4. Input Type color

The input type color is used to create an input eld that lets the user pick a color. For example,

<input type="color" id="background">


<label for="background">Background Color</label>
Browser Output (before expanding)

Browser Output (after expanding)

The color picker is inbuilt into the browser. Users can also manually enter the hex code of the color
instead. The UI for the color picker differs from browser to browser.

5. Input Type date

The input type date is used to create an input eld that lets the user input a date using the date
picker interface from the browser. For example,
fi
fi
<label for="birthday">Birthday:</label>
<input type="date" id="birthday">
Browser Output (before expanding)

Browser Output (after expanding)

6. Input Type datetime-local

The input type datetime-local is used to create an input eld that lets the user pick a date and
time using a date-time-picker from the browser. The time selected from the input does not include
information about the timezone. For example,

<label for="meeting-time">Choose a time for your appointment:</


label>
<input type="datetime-local" id="meeting-time" >
Browser Output (before expanding)
fi
Browser Output (after expanding)

7. Input Type email

The input type email is used to create an input eld that allows the user to input a valid email
address.

<label for="email">Enter your email:</label>


<input type="email" id="email">
Browser Output
fi
This input eld throws an error if the value provided is not a valid email. For example,

Browser Output

8. Input Type file

The input type file is used to create an input eld that lets the user upload a le or multiple les
from their device. For example,

<input type="file" name="file">


Browser Output

9. Input Type hidden

The input type hidden is used to create an invisible input eld. This is used to supply additional
value to the server from the form that cannot be seen or modi ed by the user. For example,
fi
fi
fi
fi
fi
fi
<input type="hidden" name="id" value="123" >

10. Input Type image

The input type image is used to create a button using an image.

<input type="image" src="/submit.png" alt="submit" >


Browser Output

Let's see an example of how we can use it in a form.

<form>
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last name: </label>
<input type="text" id="lastname" name="lastname"><br><br>
<input type="image" src="/submit.png" alt="submit" >
</form>
Browser Output

11. Input Type month

The input type month is used to create an input eld that lets the user enter month and year using a
visual interface from the browser. For example,
fi
<label for="start">Select Month:</label>
<input type="month" id="start" >
Browser Output (before expanding)

Browser Output (after expanding)

12. Input Type password

The input type password is used to create an input eld that lets the user enter information
securely. For example,

<label for="password">Password:</label>
<input type="password" id="password">
Browser Output
fi
The browser displays all the characters the user types using an asterisk (*).

13. Input Type radio

The input type radio is used to de ne a radio button. Radio buttons are de ned in a group. Radio
buttons let users pick one option out of a group of options.

<form>
<input type="radio" id="cat" name="animal" value="cat">
<label for="cat">cat</label>
<input type="radio" id="dog" name="animal" value="dog">
<label for="dog">dog</label>
</form>
Browser Output

From the above example, we can see that all the radio buttons share the same name attribute. It
allows the user to select exactly one option from the group of radio buttons.

When submitting the form data, the key for the input will be the name attribute, and the value will
be the radio button selected.

Note: The name attribute is used as the key for the data when submitting the form.

14. Input Type range

The input type range is used to create a range picker from which the user can select the value.
User can select a value from the range given. It has a default range from 0 to 100. For example,

<label for="range">Select value: </label>


<input type="range" id="range" value="90">
fi
fi
Browser Output

15. Input Type reset

The input type reset de nes the button which clears all the form values to their default value. For
example,

<form>
<label for="name">Name:</label>
<input id="name" type="text" /><br />
<input type="reset" value="Reset" />
</form>
Browser Output

Browser Output (after reset)

16. Input Type search


fi
The input type search allows user to enter their search queries in the text elds. It is similar to
input type text. For example,

<label for="search">Search: </label><input type="search"


id="search" >
Browser Output

Note: The search input does not work as a search unless we use some JavaScript to do the search
calculation.

17. Input Type submit

The input type submit is used when the user submits the form to the server. It is rendered as a
button. For example,

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


Browser Output

Here, The text provided in the value attribute of the input is shown in the button.

18. Input Type tel

The input type tel is used to de ne the eld to enter a telephone number. The telephone number is
not automatically validated to a particular format as telephone formats differ across the world. It has
an attribute named pattern used to validate the entered value. For example,

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Browser Output
fi
fi
fi
The pattern in the above example allows numbers in the format XXX-XX-XXX where X is a
number between 0 and 9.

19. Input Type time

The input type time attribute creates an input eld that accepts time value. It allows users to add
time in hours, minutes, and seconds easily. For example,

<label for="time">Select Time:</label>


<input type="time" id="time">
Browser Output (before expanding)

Browser Output (after expanding)


fi
20. Input Type url

The input type url is used to let the user enter and edit a URL. For example,

<label for="url">URL:</label>
<input type="url" id="url" placeholder="https://example.com"
pattern="https://.*">
Browser Output

Here, placeholder is a hint that speci es the expected value of an input eld, and
the pattern de nes what type of value is accepted. The above pattern means that only text
beginning with https:// will be valid.

21. Input Type week

The input type week lets the user pick a week and a year from a calendar. For example,
fi
fi
fi
<label for="week">Week</label>
<input type="week" id="week" >
Browser Output

You might also like