Scribd
Upload
0 views45 pages

Unit-2_html

The document provides an overview of HTML and CSS fundamentals, focusing on the structure and elements of HTML documents. It covers essential tags such as <html>, <head>, <title>, and <body>, as well as various formatting options and HTML table creation. Additionally, it explains the differences between physical and logical formatting tags in HTML.

Uploaded by

vaghelaumang1886
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
0 views45 pages

Unit-2_html

The document provides an overview of HTML and CSS fundamentals, focusing on the structure and elements of HTML documents. It covers essential tags such as <html>, <head>, <title>, and <body>, as well as various formatting options and HTML table creation. Additionally, it explains the differences between physical and logical formatting tags in HTML.

Uploaded by

vaghelaumang1886
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

New L J Institute of Engineering and Technology

Subject: Web Application Development (BE05000281)


Branch: CSE/ CSE(DS) Semester: V
========================================================

UNIT - 2 HTML AND CSS FUNDAMENTALS

HTML

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages

 HTML describes the structure of a Web page

 HTML consists of a series of elements

 HTML elements tell the browser how to display the content

 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

HTML Page Structure

An HTML document is structured using a set of nested tags. Each tag is enclosed
within <…> angle brackets and acts as a container for content or other HTML tags.

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<!-- content -->

</body>

</html>

Note: These are the essential elements for a basic HTML document: <!DOCTYPE
html>, <html>, <head>, <title>, </head>, <body>, </body>, </html>

1
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

DOCTYPE Declaration

<!DOCTYPE html>

 The <!DOCTYPE html> declaration informs the web browser about the HTML version
being used. The latest version is HTML5. But if this changes in the future (maybe 10
years down the line), the doctype declaration will be helpful!

HTML Root Element

<html>

 The <html> tag is the root element that encapsulates all the content on the page.

</html>

 The </html> tag marks the end of the <html> section.

Head Section

<head>

 The <head> tag contains metadata and links to external resources like CSS and
JavaScript files.

</head>

 The </head> tag marks the end of the <head> section.

Title Tag

<title>Document</title>

 The <title> tag sets the title of the web page, which is displayed in the browser's title
bar or tab.

Body Tag

<body>

 The <body> tag contains the visible content of the web page. This is where text, images,
and other elements go.

</body>

2
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 The </body> tag marks the end of the visible content of the web page.

Summary

 The <!DOCTYPE html> tag specifies that the document is an HTML5 document.

 The <html lang="en"> tag defines the document to be in English.

 The <head> section contains metadata and the title of the webpage, which appears in
the browser's title bar.

 The <body> section contains the content that will be displayed on the webpage.

 The h1 and p are two types of tags. We will learn about more tags in the later section

Visualization of an HTML Document:

3
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

Consider this html code:

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h1> This is a heading</h1>

<p>This is a paragraph</p>

</body>

</html>

Copy

Below is an image showing how this HTML document will be rendered in a web browser:

In the browser, the title bar will display the content from the <head> section, specifically
the <title> tag. The main area of the browser window (usually a white background) will display
the content inside the <body> tag.

4
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML Formatting

 HTML Formatting is a process of formatting text for better look and feel.
 HTML provides us ability to format text without using CSS. There are many formatting
tags in HTML.
 These tags are used to make text bold, italicized, or underlined
 In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.

o Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance, but
they will be different in semantics.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not


supported in HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

5
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

1) Bold Text

 HTML<b> and <strong> formatting elements


 The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If we write anything within <b>............</b> element, is shown in
bold letters.
 The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>….. </strong>, is shown important text.

Example

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of formatting element</h1>

<p><strong>This is an important content</strong>, and this is normal content</p>

</body>

</html>

2) Italic Text

 HTML <i> and <em> formatting elements.


 The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance.
 If we write anything within <i>............</i> element, is shown in italic letters.
 The HTML <em> tag is a logical element, which will display the enclosed content in
italic font, with added semantics importance.

6
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of italic formatting element</h1>

<p><em>This is an important content</em>, which displayed in italic font.</p>

</body>

</html>

3) HTML Marked formatting

 If we want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

<!DOCTYPE>
<html>
<body>
<h2> I want to put a <mark> Mark</mark> on your face</h2>
</body>
</html>

4) Underlined Text

 If you write anything within <u>.........</u> element, is shown in underlined text.

<!DOCTYPE>
<html>
<body>
<p> <u>Write Your First Paragraph in underlined text.</u></p>
</body>
</html>

7
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
5) Strike Text

 Anything written within <strike>.......................</strike> element is displayed with


strikethrough. It is a thin line which cross the statement.

<!DOCTYPE>
<html>
<body>
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
</body>
</html>

6) Monospaced Font

 If we want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.

<!DOCTYPE>
<html>
<body>
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
</body>
</html>

7) Superscript Text

 If you put the content within <sup>..............</sup> element, is shown in superscript;


means it is displayed half a character's height above the other characters.

<!DOCTYPE>
<html>
<body>
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
</body>
</html>

Output:

Hello Write Your First Paragraph in superscript.

8
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
8) Subscript Text

 If you put the content within <sub>..............</sub> element, is shown in subscript ;


means it is displayed half a character's height below the other characters.

<!DOCTYPE>
<html>
<body>
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
</body>
</html>

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text

 Anything that puts within <del>..........</del> is displayed as deleted text.

<!DOCTYPE>
<html>
<body>
<p>Hello <del>Delete your first paragraph.</del></p>
</body>
</html>

Output:

Hello

10) Inserted Text

 Anything that puts within <ins>..........</ins> is displayed as inserted text.


<!DOCTYPE>
<html>
<body>
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
</body>
</html>

Output:

Delete your first [Link] another paragraph.

9
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
11) Larger Text

 If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
<!DOCTYPE>
<html>
<body>
<p>Hello <big>Write the paragraph in larger font.</big></p>
</body>
</html>

Output:

Hello Write the paragraph in larger font.

12) Smaller Text

 If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
<!DOCTYPE>
<html>
<body>
<p>Hello <small>Write the paragraph in smaller font.</small></p>
</body>
</html>

Output:

Hello Write the paragraph in smaller font.

HTML Table

 HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
 We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
 In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
 HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .

HTML Table Tags

10
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
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.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

<table>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

First_Name Last_Name Marks

Sonoo Jaiswal 60

11
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
James William 80

Swati Sironi 82

Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1) HTML Border attribute

 We can use border attribute of table tag in HTML to specify border. But it is not
recommended now.

<table border="1">

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

First_Name Last_Name Marks

12
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

2) CSS Border property

 It is now recommended to use border property of CSS to specify border in table.

<style>

table, th, td {

border: 1px solid black;

</style>

 We can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;

</style>

13
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS.
So let's see the code of CSS.

1. <style>

2. table, th, td {

3. border: 1px solid pink;

4. border-collapse: collapse;

5. }

6. th, td {

7. padding: 10px;

8. }

9. </style>

Output:

14
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table width:

 We can specify the HTML table width using the CSS width property. It can be specify
in pixels or percentage.
 We can adjust our table width as per our requirement.

Following is the example to display table with width.

table{

width: 100%;

Example:

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;

15
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
}

</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
Test it Now

Output:

16
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML Table with colspan

 If we want to make a cell span more than one column, we can use the colspan attribute.
 It will divide one cell/row into multiple columns, and the number of columns depend
on the value of colspan attribute.

CSS code:

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

</style>

HTML code:

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Mobile No.</th>

</tr>

<tr>

<td>Ajeet Maurya</td>

<td>7503520801</td>

<td>9555879135</td>

</tr>

17
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
</table>

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

 If we want to make a cell span more than one row, we can use the rowspan attribute.
 It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.

CSS code:

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

</style>

HTML code:

<table>

<tr><th>Name</th><td>Ajeet Maurya</td></tr>

<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

<tr><td>9555879135</td></tr>

18
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
</table>

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

HTML table with caption

 HTML caption is diplayed above the table.


 It must be used after table tag only.

<table>

<caption>Student Records</caption>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>

<tr><td>Mike</td><td>Warn</td><td>60</td></tr>

<tr><td>Shane</td><td>Warn</td><td>42</td></tr>

<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>

</table>

Styling HTML table even and odd cells

CSS code:

<style>

table, th, td {

19
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

table#alter tr:nth-child(even) {

background-color: #eee;

table#alter tr:nth-child(odd) {

background-color: #fff;

table#alter th {

color: white;

background-color: gray;

</style>

Output:

20
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML Links Hyperlinks

 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. Users can click on links to navigate between different pages or resources.

Note: 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

Syntax

<a href="url">link text</a>

Target Attribute

Attribute Description

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

Opens the linked document in the same frame or window as the link. (Default
_self
behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

Opens the linked document in a specified frame. The frame’s name is


framename
specified in the attribute.

21
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

HTML Links Examples

<!DOCTYPE html>

<html>

<head>

<title>HTML Links</title>

</head>

<body>

<p>Click on the following link</p>

<a href="[Link]

GeeksforGeeks

</a>

</body>

</html>

Example 2: Using target attributes

In this example we demonstrates the use of target attributes in links. Each link opens in a
different context: _blank opens in a new window or tab, _self in the same frame, _parent in the
parent frame, _top in the full window body, and framename in a specified frame.

<! DOCTYPE html>


<Html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h3>
Various options available in the
Target Attribute
</h3>
<p>

22
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="[Link]
target="_blank">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a href="[Link]
target="_self">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
<a href="[Link]
target="_top">
GeeksforGeeks
</a>

<p>
If you set the target attribute to
"_parent", the link will open in the
parent frame.
</p>
<a href="[Link]
target="_parent">
GeeksforGeeks
</a>
</body>
</html>

HTML <meta > tag

 HTML <meta> tag is used to represent the metadata about the HTML document. It
specifies page description, keywords, copyright, language, author of the documents,
etc.

23
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 The metadata does not display on the webpage, but it is used by search engines,
browsers and other web services which scan the site or webpage to know about the
webpage.
 With the help of meta tag, you can experiment and preview that how your webpage will
render on the browser.
 The <meta> tag is placed within the <head> tag, and it can be used more than one times
in a document.

Syntax:

<meta charset="utf-8">

Following are some specifications about the HTML <meta> tag

Display None

Start tag/End tag Empty Tag(Only Start tag)

Usage Document Structural

Following are some specific syntaxes of meta tag which shows the different uses of meta Tag.

1. <meta charset="utf-8">

 It defines the character encoding. The value of charset is "utf-8" which means it will
support to display any language.

2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">

 It specifies the list of keyword which is used by search engines.

3. <meta name="description" content="Free Online tutorials">

 It defines the website description which is useful to provide relevant search performed
by search engines.

4. <meta name="author" content="thisauthor">

 It specifies the author of the page. It is useful to extract author information by Content
management system automatically.

5. <meta name="refresh" content="50">

24
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 It specifies to provide instruction to the browser to automatically refresh the content
after every 50sec (or any given time).

6. <meta http-equiv="refresh" content="5; url=[Link]


list">

 In the above example we have set a URL with content so it will automatically redirect
to the given page after the provided time.

7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

 It specifies the viewport to control the page dimension and scaling so that our website
looks good on all devices. If this tag is present, it indicates that this page is mobile
device supported.

Example

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">

<meta name="description" content="Free Online tutorials">

<meta name="author" content="this author">

<meta http-equiv="refresh" content="5; url=[Link]


list">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<h2>Example of Meta tag</h2>

<p>This example shows the use of meta tag within an HTML document</p>

</body>

</html>

25
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
Attribute:

Attribute Value Description

charset character_set It specifies the character encoding of an HTML page.

content text It contains the value of the attribute "name" and "http-
equiv" in an HTML document, depending on context.

http- o Content-type It specifies the Information given by the web server


equiv about how the web page should be served.
o default-style

o refresh

name o application- It specifies the name of document-level metadata.


name

o author

o description

o generator

o keywords

scheme format/URL It specifies the scheme in which metadata is described.


(Not Supported in HTML5)

HTML Form

 An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
 An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form

 HTML forms are required if we want to collect some data from the site visitor.
 For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given address.

26
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML Form Syntax

1. <form action="server url" method="get|post">

2. //input controls e.g. textfield, textarea, radiobutton, button

3. </form>

HTML Form Tags

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

27
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such as
text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all required
form elements, such as <input>, <label>, etc.

Syntax:

1. <form>

2. //Form elements

3. </form>

HTML <input> element

 The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.

Example:

<body>

<form>

Enter your name <br>

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

</form>

</body>

Output:

28
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

HTML TextField Control

 The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

<form>

First Name: <input type="text" name="firstname"/> <br/>

Last Name: <input type="text" name="lastname"/> <br/>

</form>

Output:

Note: If we will omit 'name' attribute then the text filed input will not be submitted to server.

HTML <textarea> tag in form

 The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

<!DOCTYPE html>

<html>

<head>

29
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
<title>Form in HTML</title>

</head>

<body>

<form>

Enter your address:<br>

<textarea rows="2" cols="20"></textarea>

</form>

</body>

</html>

Output:

Label Tag in Form

 It is considered better to have label in form. As it makes the code parser/browser/user


friendly.
 If we click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.

<form>

<label for="firstname">First Name: </label> <br/>

30
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
<input type="text" id="firstname" name="firstname"/> <br/>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname" name="lastname"/> <br/>

</form>

Output:

HTML Password Field Control

The password is not visible to the user in password field control.

<form>

<label for="password">Password: </label>

<input type="password" id="password" name="password"/> <br/>

</form>

Output:

HTML 5 Email Field Control

31
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

<form>

<label for="email">Email: </label>

<input type="email" id="email" name="email"/> <br/>

</form>

Note: If we will not enter the correct email, it will display error like:

Radio Button Control

 The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
 If we use one name for all the radio buttons, only one radio button can be selected at a
time.

Using radio buttons for multiple options, you can only choose a single option at a time.

32
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
<form>

<label for="gender">Gender: </label>

<input type="radio" id="gender" name="gender" value="male"/>Male

<input type="radio" id="gender" name="gender" value="female"/>Female <br/


>

</form>

Checkbox Control

 The checkbox control is used to check multiple options from given checkboxes.

<form>

Hobby:<br>

<input type="checkbox" id="cricket" name="cricket" value="cricket"/>

<label for="cricket">Cricket</label> <br>

<input type="checkbox" id="football" name="football" value="football"/>

<label for="football">Football</label> <br>

<input type="checkbox" id="hockey" name="hockey" value="hockey"/>

<label for="hockey">Hockey</label>

</form>

Note: These are similar to radio button except it can choose multiple options at a time and radio
button can select one button at a time, and its display.

Output:

33
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

Submit button control

 HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.

Syntax:

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

 The type = submit, specifying that it is a submit button


 The value attribute can be anything which we write on button on web page.
 The name attribute can be omit here.

Example:

<form>

<label for="name">Enter name</label><br>

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

<label for="pass">Enter Password</label><br>

<input type="Password" id="pass" name="pass"><br>

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

</form>

Output:

34
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================

HTML <fieldset> element:

 The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped
elements.

Example:

<form>

<fieldset>

<legend>User Information:</legend>

<label for="name">Enter name</label><br>

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

<label for="pass">Enter Password</label><br>

<input type="Password" id="pass" name="pass"><br>

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

</fieldset>

</form>

35
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
Output:

HTML Form Example

<!DOCTYPE html>

<html>

<head>

<title>Form in HTML</title>

</head>

<body>

<h2>Registration form</h2>

<form>

<fieldset>

<legend>User personal information</legend>

<label>Enter your full name</label><br>

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

<label>Enter your email</label><br>

<input type="email" name="email"><br>

<label>Enter your password</label><br>

<input type="password" name="pass"><br>

<label>confirm your password</label><br>

<input type="password" name="pass"><br>

36
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
<br><label>Enter your gender</label><br>

<input type="radio" id="gender" name="gender" value="male"/>Male <br>

<input type="radio" id="gender" name="gender" value="female"/>Female <br/>

<input type="radio" id="gender" name="gender" value="others"/>others <br/>

<br>Enter your Address:<br>

<textarea></textarea><br>

<input type="submit" value="sign-up">

</fieldset>

</form>

</body>

</html>

Output:

HTML media attribute

 The HTML media attribute is employed to specify the media or device the coupled
document is optimized for. This attribute specifies that the target URL is designed for
special devices like iPhones, speech, or print media.

37
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
syntax

<element media="value">

Supported Tags

Element Description

<a> Represents a hyperlink, linking to another resource.

<area> Defines a clickable area inside an image map.

<link> Specifies the relationship between a document and an external resource.

<source> Specifies multiple media resources for media elements


like <audio> and <video>.

<style> Contains CSS rules to style HTML elements.

HTML media attribute Examples

Example1: In this example we demonstrates the use of the media attribute, which is incorrect
for anchor elements. Instead, it uses the target attribute to specify whether links open in the
same or a different tab.

 html

<!DOCTYPE html>
<html>
<head>
<title>HTML media Attribute</title>
</head>
<body>
<h2>HTML media Attribute</h2>
<a
href="[Link]
target="_self"
>
Click to open in the same tab
</a>
<br />
<a
href="[Link]
target="_blank"
>
Click to open in a different tab

38
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
</a>
</body>
</html>

Example2: In this example the media attribute specifies conditions (such as screen width)
under which different image sources defined in the <source> element are applied for responsive
design.

 html

<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
</head>

<body>
<picture>
<source
media="(min-width: 900px)"
srcset=
"[Link]
/>
<source
media="(min-width: 600px)"
srcset=
"[Link]
content/uploads/20190809013546/gfg_350X350.png"
/>
<img
src=
"[Link]
style="width: auto"
/>
</picture>
</body>
</html>

39
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.

In HTML there are several semantic elements that can be used to define different parts of a
web page:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

40
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML <section> Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content,


typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content, and contact
information.

<!DOCTYPE html>
<html>
<body>

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working
on issues regarding the conservation, research and restoration of the environment,
formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo to
the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

41
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

<!DOCTYPE html>
<html>
<body>

<h1>The article element</h1>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome
is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has
been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>

</body>
</html>

42
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational
links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)


 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.

<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and
build a future in which humans live in harmony with nature.</p>
</article>

</body>
</html>

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links

43
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
 related documents

You can have several <footer> elements in one document.

<!DOCTYPE html>
<html>
<body>

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="[Link]
</footer>

</body>
</html>

HTML Div Element

The <div> element is used as a container for other HTML elements.

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width,
and comes with line breaks before and after.

<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

Lorem Ipsum <div>I am a div</div> dolor sit amet.

<p>The yellow background is added to demonstrate the footprint of the DIV


element.</p>

44
New L J Institute of Engineering and Technology
Subject: Web Application Development (BE05000281)
Branch: CSE/ CSE(DS) Semester: V
========================================================
</body>
</html>

<div> as a container

The <div> element is often used to group sections of a web page together.

<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>

<p>The yellow background is added to demonstrate the footprint of the DIV


element.</p>

</body>
</html>

45

You might also like