Scribd
Upload
3 views

HTML Notes

This document provides a comprehensive overview of HTML5, detailing the basic structure of an HTML page, including essential tags like <!DOCTYPE html>, <html>, <head>, and <body>. It explains the differences between block-level and inline elements, the purpose of the <head> and <body> sections, and various HTML tags for formatting text, such as headings, paragraphs, and metadata. Additionally, it covers attributes and examples of using tags like <title>, <style>, <link>, and <script> to enhance web pages.

Uploaded by

athijeganathan11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML Notes

This document provides a comprehensive overview of HTML5, detailing the basic structure of an HTML page, including essential tags like <!DOCTYPE html>, <html>, <head>, and <body>. It explains the differences between block-level and inline elements, the purpose of the <head> and <body> sections, and various HTML tags for formatting text, such as headings, paragraphs, and metadata. Additionally, it covers attributes and examples of using tags like <title>, <style>, <link>, and <script> to enhance web pages.

Uploaded by

athijeganathan11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 152

HTML 5

Basic Construction of an HTML


Page
Basic Construction of an
HTML Page
 These tags should be placed underneath each other at the top of

every HTML page that you create.


 <!DOCTYPE html> — This tag specifies the language you will write

on the page. In this case, the language is HTML 5.


 <html> — This tag signals that from here on we are going to write in

HTML code.
 <head> — This is where all the metadata for the page goes — stuff

mostly meant for search engines and other computer programs.


 <body> — This is where the content of the page goes.
Declaring a DOCTYPE

 All HTML need to have a DOCTYPE declared. The DOCTYPE is

not actually an element or HTML tag. It lets the browser know how

the document should be interpreted, by indicating what version or

standard of HTML (or other markup language) is being used.


 HTML5 Documents
 For HTML5 documents (which nearly all new web documents

should be), the DOCTYPE declaration should be:


<!DOCTYPE html>
HTML Element
Block-level vs inline HTML
elements
By default, an element can be either block-level or an inline element.
 Block-level elements are the elements that always start on a new line
and take up the full width available.
 Inline elements are the elements that do not start on a new line and it
only take up as much width as necessary.
Block-level element:

 These are the elements, which structure main part of web page, by
dividing a page into coherent blocks.
 A block-level element always start with new line and takes the full
width of web page, from left to right.
 These elements can contain block-level as well as inline elements.
 Following are the block-level elements in HTML.

<address>, <article>, <aside> <blockquote>, <canvas>, <dd>, <div>,


<dl>, <dt>, <fieldset> <figcaption>, <figure>, <footer>,
<form>, <h1>-<h6>, <header> <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.
Inline elements:

Inline elements are those elements, which differentiate the part of a given

text and provide it a particular function.


 These elements does not start with new line and take width as per

requirement.
 The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>,

<cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>,

<map>, <object>, <q>, <samp>, <script>, <select>, <small>,

<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.


Example
HTML <body> tag

 HTML <body> tag defines the main content of an HTML document


which displays on the browser. It can contain text content,
paragraphs, headings, images, tables, links, videos, etc.
 The <body> must be the second element after the <head> tag or it
should be placed between </head> and </html> tags. This tag is
required for every HTML document and should only use once in the
whole HTML document.
Attribute
Attribute Value Description
It defines the color of the active link in a document. (Not
alink color
supported in HTML5)
backgrou It determines the background image for the document. (Not
URL
nd supported in HTML5)
It determines the background color of the content. (Not
bgcolor color
supported in HTML5)
It determines the color of the unvisited link. (Not supported in
link color
HTML5)
It determines the color of the text in the document. (Not
text color
supported in HTML5)
It determines the color of the visited link. (Not supported in
vlink color
HTML5)
onload Function call on page loading
onunload Function call when user leaves the page
onfocus Function call when document receives focus by user.
onblur Function call when document loses focus by user.
HTML Head

 The HTML <head> element is used as a container for metadata (data about

data). It is used between <html> tag and <body> tag.


 The head of an HTML document is a part whose content is not displayed in

the browser on page loading. It just contains metadata about the HTML

document which specifies data about the HTML document.


 An HTML head can contain lots of metadata information or can have very less

or no information, it depends on our requirement. But head part has a crucial

role an HTML document while creating a website.


 Metadata defines the document title, character set, styles, links, scripts, and

other meta information.


Metadata
 Following is a list of tags used in metadata:
1. <title>
2. <style>
3. <meta>
4. <link>
5. <script>
6. <base>
HTML title Tag
 The <title> tag in HTML is used to define the title of a web page. This title appears
in the browser’s title bar or tab, and it is also used by search engines as the
clickable headline in search results.

 Important Points

• The title tag is used to give the title to the webpage and it should be the text only.

• You can NOT have more than one <title> element in an HTML document.

• It is recommended to choose a more detailed and descriptive title rather than


opting for a brief one- or two-word title.

• A page’s title, essential for Search Engine Optimization (SEO), impacts how search
engines rank pages in search results.

• Keep titles concise within 50-60 characters for optimal search engine display and
user readability.

• Avoid using just a list of keywords in titles to prevent negative SEO consequences.

• Ensure titles accurately reflect webpage content to enhance user understanding


and search engine optimization.
Title tag
<!DOCTYPE html>
<html>

<head>
<title>Welcome to my blog</title>
</head>

<body>
<h1>Blog Homepage</h1>
<p>This is my homepage of my bolg</p>
</body>

</html>
HTML <style> Element

<!DOCTYPE html>
The HTML <style> <html>
<head>
element is used to style the
<title>This is Page Title</
HTML page. The <style> title>
<style>
element can have CSS body {background-
color: pink;}
properties for that HTML
h1 {color: red;}
page only. If we want to p {color: blue;}
</style>
apply CSS for multiple </head>
<body>
pages then we should use
<h1>This is a Heading</
separate CSS file. h1>
<p>This is a paragraph.</
p>
</body>
HTML <link> Element

The HTML <link> element is


<!DOCTYPE html>
used to link an external style <html>
sheet to your webpage. The <head>
<title>This is title</title>
<link> element contains <link rel="stylesheet" href="s
tyle.css">
main two attributes which </head>
<body>
are "rel" and "href". The rel
<h2>Web-
attribute indicates that it is a page with external CSS</h2>
<p>This is looking a cool pag
stylesheet, and href gives e</p>
</body>
the path to that external file.
</html>
HTML <meta> Element

 The HTML <meta> element is used to specify the character set, page
description, keywords, authors and other metadata on the webpage.
 Metadata is mainly used by browsers, search engines, and other web services
to rank your webpage better.

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript"
>
<meta name="author" content="Ashwin">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="10; url=https://
HTML <base> Element
 The HTML <base> element is used to specify the base URL
and base target for all relative URLs in a page.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://www.infosyst.net/images" target="_blank">
</head>
<body>
<img src="banner.png">
</body>
</html>
HTML <script> element
HTML <script> 1.<!DOCTYPE html>
2.<html>
element is used to apply 3.<head>
client side JavaScript for 4. <script>
the same page or to add 5. function fun() {
an external JavaScript 6. document.getElementById("p").style.color="green";
7. }
file to current page. 8. </script>
9.</head>
10.<body>
11.<h2>Script within Head element</h2>
12.<p id="p">This will change the color</p>
13.<button type="button" onclick="fun()">Click me</button>
14.</body>
15.</html>
Heading Tag <h1>…
<h6>
 The heading tag to prepare heading in different level, the biggest
heading is <h1> and least heading is <h6>.

 <h1> Heading 1 </h1>


 <h2> Heading 2 </h2>
 <h3> Heading 3 </h3>
 <h4> Heading 4 </h4>
 <h5> Heading 5 </h5>
 <h6> Heading 6 </h6>
Paragraph tag <p>
 <p> tag to make proper paragraph with alignment, intent, new line

 Attribute
 Align
The align attribute to make alignment of paragraph such as left,
right, center and justify.
By default is left alignment.

<p> text…..</p>
<p align=“justify”>text……</p>
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. There are almost 14 options available that how text appears in

HTML and XHTML.


 In HTML the formatting tags are divided into two categories:

• Physical tag: These tags are used to provide the visual appearance to

the text.

• Logical tag: These tags are used to add some logical or semantic

value to the text.


Element Description
name
<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.
HTML <p> Tag

 HTML <p> tag defines the paragraph and is used to give structure
to text content within a webpage. It is a block-level element & used
to add the space or margins after and before the element this is
done by browsers by default.

<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>
HTML Headings

 HTML headings are used to


define the titles and subtitles of <html>
sections on a webpage. They help <body>
<h1>This is the Main
organize the content and create a Heading</h1>
structure that is easy to navigate. <h2>This is a Subheading</h2>

<h3>This is a Smaller
Proper use of headings enhances
Subheading</h3>
readability by organizing content <h4>This is a
into clear sections. Sub-Subheading</h4>
<h5>This is a Minor
 Search engines utilize headings to Subheading</h5>
understand page structure, aiding <h6>This is the Smallest
Heading</h6>
in SEO. </body>
</html>
HTML Marked formatting

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

<h2> I want to put a <mark> Mark</


mark> on your face</h2>

I want to put a Mark on your face


Strike Text

 Anything written within <strike>.......................</strike> element is


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

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Write Your First Paragraph with strikethrough.


Monospaced Font

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

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></


p>

Hello Write Your First Paragraph in monospaced font.


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.

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></


p>

Hello Write Your First Paragraph in superscript.


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.

<p>Hello <sub>Write Your First Paragraph in subscript.</


sub></p>

Hello Write Your First Paragraph in subscript.


Deleted Text
 Anything that puts within <del>..........</del> is displayed
as deleted text.

<p>Hello <del>Delete your first paragraph.</


del></p>

Hello Delete your first paragraph.


Inserted Text
 Anything that puts within <ins>..........</ins> is displayed
as inserted text.

<p> <del>Delete your first paragraph.</


del><ins>Write another paragraph.</
ins></p>

Delete your first paragraph.Write another paragraph.


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.

<p>Hello <big>Write the paragraph in larger font.


</big></p>

Hello Write the paragraph in larger font.


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.

<p>Hello <small>Write the paragraph in smaller font.</


small></p>

Hello Write the paragraph in smaller font.


HTML Anchor

 The HTML anchor tag defines a hyperlink that links one

page to another page. It can create hyperlink to other web

page as well as files, location, or any URL.


 The syntax of HTML anchor tag is given below.

<a href = "...........“ target=“_blank|_self|_parent|_top|framename”/>


Link Text </a>

The href attribute is used to define the


address of the file to be linked. In other
words, it points out the destination page.
Attribute Values

Value Description

_blank Opens the linked document in a new window or


tab
_self Opens the linked document in the same frame as
it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the


window
framenam Opens the linked document in the named iframe
e
1. !DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.
infosyst.net" target="_blank"> this-link </a>to go on
Infosystem site .</p>
8. </body>
9. </html>
HTML Phrase tag
 The HTML phrase tags are special purpose tags, which defines the structural

meaning of a block of text or semantics of text. Following is the list of phrase

tags, some of which we have already discussed in HTML formatting.


• Abbreviation tag : <abbr>
• Acronym tag: <acronym> (not supported in HTML5)
• Marked tag: <mark>
• Strong tag: <strong>
• Emphasized tag : <em>
• Definition tag: <dfn>
• Quoting tag: <blockquote>
• Short quote tag : <q>
• Code tag: <code>
• Keyboard tag: <kbd>
• Address tag: <address>
Text Abbreviation tag
 This tag is used to abbreviate a text. To abbreviate a text,
write text between <abbr> and </abbr> tag.

<p>An <abbr title = "Hypertext Markup language">HTML </


abbr>language is used to create web page
Definition tag:

 When you use the <dfn> and </dfn> tags, it allow to specify the
keyword of the content. Following is the example to show how to
definition element.
Example
<p><dfn>HTML </dfn> is a markup language. </p>
Quoting text:
 The HTML <blockquote> element shows that the enclosed content is
quoted from another source. The Source URL can be given using the cite
attribute, and text representation of source can display using

<cite> ..... </cite>element.

<blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>?
The first step toward success is taken when you refuse to be a captive of the e
nvironment in which you first find yourself.?</p></blockquote>
<cite>-Mark Caine</cite>
Short Quotations:

 An HTML <q> ....... </q> element defines a short quotation. If you will put
any content between <q> ....... </q>, then it will enclose the text in

<p>Steve Jobs said: <q>If You Are Working On Something That You Really C
are About, You Don?t Have To Be Pushed. The Vision Pulls You.</q></p>
Code tags
The HTML <code> </code> element is used to display the part of
computer code. It will display the content in monospaced font.

<p>First Java program</p>


<p><code>class Simple{ public static void main(String args[])
{
System.out.println("Hello Java"); }} </code>
</p>
Keyboard Tag

In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from
keyboard.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></


kbd> to restore page on chrome.</p>
Address tag

 An HTML <address> tag defines the contact information about the author of
the content. The content written between <address> and </address> tag,
then it will be displayed in italic font.

<address> You can ask your queries by contact us on <a href="">example123


@newdomain.com</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address>
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Attributes of HTML img tag


The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describe the image in words. The alt attribute is considered good for SEO
prospective.
HTML Image Attributes
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height
It is the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.

5) Border
It is an optional attribute which is used to show the border around the image
 Use of height and width Example:
attribute with img tag
<img src="animal.jpg" height="180" width="300"
You have learnt about how alt="animal image">
to insert an image in your <!DOCTYPE html>
web page, now if we want <html>
to give some height and
width to display image <head>
<title>Using Image in Webpage</title>
according to our </head>
requirement, then we can
set it with height and width <body>
attributes of image. <p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test
Image" />
</body>

</html>
Set Image Border
 By default, image will have a border around it, you can specify border
thickness in terms of pixels using border attribute. A thickness of 0
means, no border around the picture.

Example

<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
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

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.
It specifies a group of one or more columns in a table
<colgroup>
for formatting.
It is used with <colgroup> element to specify
<col>
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.


Table Attributes
Attribute Value Description
Deprecated − Specifies an abbreviated version of
abbr abbreviated_text
the content in a cell.
right
left
align center Deprecated − Visual alignment.
justify
char
rgb(x,x,x)
Deprecated − Specifies the background color of
bgcolor #hexcode
the table.
colorname
Deprecated − Specifies the border width. A value
border pixels
of "0" means no border.
Deprecated − Specifies the space between the cell
cellpadding pixels or %
borders and their contents.
cellspacing pixels or % Deprecated − Specifies the space between cells.
Table Attributes
Attribu
Value Description
te
void
above
below
hsides Deprecated − Used in conjunction with the border attribute,
frame lhs specifies which side of the frame that makes up the border
rhs surrounding the table is displayed.
vsides
box
border
none
groups
Deprecated − Used in conjunction with the border attribute,
rules rows
specifies which rules appear between the cells of the table.
cols
all
summa
text Deprecated − Specifies the summary of the content.
ry
width pixels or % Deprecated − Specifies the width of the table.
<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
</head>

<body>
<table border = "1">
<tr>
<th>Team</th> Team Ranking
<th>Ranking</th>
</tr> India 1
<tr>
<td>India</td>
South Africa 2
<td>1</td>
</tr> Australia 3
<tr>
<td>South Africa</td>
<td>2</td>
</tr>

<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Table Caption
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Table Cell Spacing
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Table Cell Padding
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Column and Row Span
Attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
Background for Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Height and Width of the
Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Table Header, Body, and
Footer
<table>
<thead>
<tr>
<th colspan="2">October</th>
<th colspan="2">November</th>
</tr>
</thead>

<tbody>
<tr>
<td>Sales</td>
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
<tr>
<td>$200,00</td>
<td>$50,00</td>
<td>$300,000</td>
<td>$70,000</td>
</tr>
</tbody>

<tfoot>
<tr>
<th colspan= "4">November was more produstive</th>
</tr>
</tfoot>
</table>
Frame Attributes
<!DOCTYPE html> <table frame="vsides">
<html> <tr>
<th>NAME</th>
<head> <th>AGE</th>
<title> <th>BRANCH</th>
HTML table frame Attribute </tr>
</title> <tr>
</head> <td>BITTU</td>
<td>22</td>
<body> <td>CSE</td>
<h1>Table Example</h1> </tr>
</table>
<h2>HTML table frame Attribute</h2> <br>
<table frame="hsides">
<table frame="box"> <tr>
<tr> <th>NAME</th>
<th>NAME</th> <th>AGE</th>
<th>AGE</th> <th>BRANCH</th>
<th>BRANCH</th> </tr>
</tr> <tr>
<tr> <td>BITTU</td>
<td>BITTU</td> <td>22</td>
<td>22</td> <td>CSE</td>
<td>CSE</td> </tr>
</tr> </table>
</table> </body>
<br>
</html>
Frame Attributes
<!DOCTYPE HTML >
<html>
<head>
<title> Example of HTML frame attribute with table
</title>
</head>
<body>
<table frame="border">
<tr>
<th>Employee code </th>
<th>Salary</th>
</tr>
<tr>
<td>EM001</td>
<td>Rs. 50000</td>
</tr>
<tr>
<td>EM002</td>
<td>Rs. 75000</td>
</tr>
</table>
</body>
</html>
Frame Attributes
<table border="10" frame="ABOVE" rules="NONE">
<table border="10" frame="BELOW" rules="NONE">
<table border="1" frame="BOX" rules="NONE">
<table border="8" frame="HSIDES" rules="NONE">
<table border="8" frame="LHS" rules="NONE">
<table border="8" frame="RHS" rules="NONE">
<TABLE BORDER="2" FRAME="VOID" RULES="ALL">
<TABLE BORDER="8" FRAME="VSIDES" RULES="NONE">
HTML summary attribute
<!DOCTYPE HTML >
<html>
<head>
<title>Example of HTML summary attribute with table element</title>
</head>
<body>
<table border="1" summary="This is table of country and their capitals. First
column describes country and the second column describe capital." >
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>UK</td>
<td>London</td>
</tr>
</table>
</body>
</html>
HTML - Lists

 HTML offers web authors three ways for specifying lists of


information. All lists must contain one or more list elements. Lists
may contain −

 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers
to list your items.
 <dl> − A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
HTML Unordered Lists

 An unordered list is a collection of related items that have no


special order or sequence. This list is created by using HTML <ul>
tag. Each item in the list is marked with a bullet.

 The type Attribute

 You can use type attribute for <ul> tag to specify the type of bullet
you like. By default, it is a disc. Following are the possible options

1. <ul type = "square">


2. <ul type = "disc">
3. <ul type = "circle">
Unorder list Example
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists

 The start Attribute


 You can use start attribute for <ol> tag to specify the starting point of

numbering you need. Following are the possible options −

1. <ol type = "1" start = "4"> - Numerals starts with 4.

2. <ol type = "I" start = "4"> - Numerals starts with IV.

3. <ol type = "i" start = "4"> - Numerals starts with iv.

4. <ol type = "a" start = "4"> - Letters starts with d.

5. <ol type = "A" start = "4"> - Letters starts with D.


HTML Ordered Lists
 If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will

be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one

for each successive ordered list element tagged with <li>.

 The type Attribute

 You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a

number. Following are the possible options −

1. <ol type = "1"> - Default-Case Numerals.

2. <ol type = "I"> - Upper-Case Numerals.

3. <ol type = "i"> - Lower-Case Numerals.

4. <ol type = "A"> - Upper-Case Letters.

5. <ol type = "a"> - Lower-Case Letters.


Order List Example
<!DOCTYPE html> <ol type = "A">
<html> <li>Beetroot</li>
<li>Ginger</li>
<head> <li>Potato</li>
<title>HTML Ordered List</title> <li>Radish</li>
</head> </ol>
<ol type = "a">
<body> <li>Beetroot</li>
<ol type = "1"> <li>Ginger</li>
<li>Beetroot</li> <li>Potato</li>
<li>Ginger</li> <li>Radish</li>
<li>Potato</li> </ol>
<li>Radish</li> <ol type = "i" start = "4">
</ol> <li>Beetroot</li>
<ol type = "I"> <li>Ginger</li>
<li>Beetroot</li> <li>Potato</li>
<li>Ginger</li> <li>Radish</li>
<li>Potato</li> </ol>
<li>Radish</li> </body>
</ol>
<ol type = "i"> </html>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
HTML Definition Lists

 HTML and XHTML supports a list style which is called definition lists
where entries are listed like in a dictionary or encyclopedia. The definition
list is the ideal way to present a glossary, list of terms, or other
name/value list.

 Definition List makes use of following three tags.

 <dl> − Defines the start of the list


 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
HTML Definition Lists

<!DOCTYPE html>
<html>

<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>

</html>
Marquee HTML

 The Marquee HTML tag is a non-standard HTML element which is


used to scroll a image or text horizontally or vertically.
 In simple words, you can say that it scrolls the image or text up,
down, left or right automatically.
 Marquee tag was first introduced in early versions of Microsoft's
Internet Explorer. It is compared with Netscape's blink element.
HTML Marquee Attributes

Attribute Description

It facilitates user to set the behavior of the marquee to one of the


behavior
three different types: scroll, slide and alternate.

defines direction for scrolling content. It may be left, right, up and


direction
down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamou
defines scroll amount in number.
nt
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.
HTML Scroll Marquee

 It is a by default property. It is used to scroll the text from right to


left, and restarts at the right side of the marquee when it is reached
to the end of left side. After the completion of loop text disappears.

<marquee width="100%" behavior="scroll" bgcolor="pink">


This is an example of a scroll marquee...
</marquee>
HTML Slide Marquee

 In slide marquee, all the contents to be scrolled will slide the entire length
of marquee but stops at the end to display the content permanently.

<marquee width="100%" behavior="slide" bgcolor="pink"> This is an


example of a slide marquee... </marquee>

HTML Alternate Marquee


 It scrolls the text from right to left and goes back left to right.

<marquee width="100%" behavior="alternate" bgcolor="pink">


This is an example of a alternate marquee...
</marquee>
Direction in HTML marquee

 This is used to change the direction of scrolling text. Let's take an


example of marquee scrolling to the right. The direction can be left,
right, up and down.

<marquee width="100%" direction="right">


This is an example of a right direction marquee...
</marquee>
 Nested marquee example

<marquee width="400px" height="100px" behavior="alternate" style="


border:2px solid red">
<marquee behavior="alternate">
Nested marquee...
</marquee>
</marquee>
HTML Div Tag

 The HTML <div> tag is used to group the large section of HTML elements
together.
 We know that every tag has a specific purpose e.g. p tag is used to specify
paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag
is just like a container unit which is used to encapsulate other page
elements and divides the HTML documents into sections.
 The div tag is generally used by web developers to group HTML elements
together and apply CSS styles to many elements at once. For example: If
you wrap a set of paragraph elements into a div element so you can take
the advantage of CSS styles and apply font style to all paragraphs at once
instead of coding the same style for each paragraph element.
div Tag example
<!DOCTYPE html>
<html>
<head>
<title>The Div Tag</title>
</head>
<body>
<h1> Div Tag </h1>
<div>
<p>We use the div tag to group two paragraphs for applying a background
to the text, and to add color to this
word we place it within spantag.</p>
<p> Pay attention, that the div tag is a block-level element, so a line break
is placed before and after
it.</p>
</div>
</body>
</html>
HTML iframes
 HTML Iframe is used to display a nested webpage (a webpage within a webpage).
The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline
frame.
 An HTML iframe embeds another document within the current HTML document in
the rectangular region.
 The webpage content and iframe contents can interact with each other using
JavaScript.
 Attributes
 src

 height

 width

 name
Attributes of <iframe>
Attribute
Value Description
name
allowfullscre
If true then that frame can be opened in full screen.
en
It defines the height of the embedded iframe, and the
height Pixels
default height is 150 px.
It gives the name to the iframe. The name attribute is
name text
important if you want to create a link in one frame.
It defines whether iframe should have a border or not.
frameborder 1 or 0
(Not supported in HTML5).
It defines the width of embedded frame, and default
Width Pixels
width is 300 px.
The src attribute is used to give the path name or file
src URL
name which content to be loaded into iframe.

This attribute is used to apply extra restrictions for the


content of the frame
It allows submission of the form if this keyword is not
allow-forms
used then form submission is blocked.
sandbox
It will enable popups, and if not applied then no popup
allow-popups
will open.
Attributes of <iframe>
Attribute
Value Description
name
The srcdoc attribute is used to show the
HTML content in the inline iframe. It
srcdoc
overrides the src attribute (if a browser
supports).

It indicates that browser should provide a


scroll bar for the iframe or not. (Not
supported in HTML5)
scrolling
Scrollbar only shows if the content of
auto
iframe is larger than its dimensions.
yes Always shows scroll bar for the iframe.
no Never shows scrollbar for the iframe.
HTML iframes
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe
:</p>
<iframe src="https://www.infosyst.net/" height="300" width="400">
</iframe>
</body>
</html>
HTML iframes
<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>


<iframe height="300px" width="100%" src="new.html" name=“myfram
e">
</iframe>
<p><a href="https://www.infosyst.net" target=“myframe">Infosystem
IT Solutions</a></p>
<p>The name of iframe and link target must have same value else link
will not open as a frame. </p>

</body>
</html>
HTML Layouts
 HTML layouts provide a way to arrange web
pages in well-mannered, well-structured, and
in responsive form or we can say that HTML
layout specifies a way in which the web pages
can be arranged. Web-page layout works with
arrangement of visual elements of an HTML
document.
 Web page layout is the most important part to
keep in mind while creating a website so that
our website can appear professional with the
great look. You can also use CSS and
JAVASCRIPT based frameworks for creating
layouts for responsive and dynamic website
designing.
HTML Layout

 <header>: It is used to define a header for a document or a section.


 <nav>: It is used to define a container for navigation links
 <section>: It is used to define a section in a document
 <article>: It is used to define an independent self-contained article
 <aside>: It is used to define content aside from the content (like a
sidebar)
 <footer>: It is used to define a footer for a document or a section
 <details>: It is used to define additional details
 <summary>: It is used to define a heading for the <details> element
HTML - Layouts

 HTML Layout - Using Tables


 The simplest and most popular way of creating layouts is using
HTML <table> tag. These tables are arranged in columns and rows,
so you can utilize these rows and columns in whatever way you
like.
 Example
 For example, the following HTML layout example is achieved using
a table with 3 rows and 2 columns but the header and footer
column spans both columns using the colspan attribute −
Example
<!DOCTYPE html>
<html> <td bgcolor = "#eee" width = "100"
<head> height = "200">
<title>HTML Layout using Tables</title> Technical and Managerial
</head> Tutorials
</td>
<body> </tr>
<table width = "100%" border = "0"> <tr>
<td colspan = "2" bgcolor =
<tr> "#b5dcb3">
<td colspan = "2" bgcolor = "#b5dcb3"> <center>
<h1>Infosystem</h1> Copyright © 2007 Infosyst.net
</td> </center>
</tr> </td>
<tr valign = "top"> </tr>
<td bgcolor = "#aaa" width = "50">
<b>Courses Offered</b><br /> </table>
HTML<br /> </body>
PHP<br /> </html>
JAVA
</td>
HTML Layouts - Using DIV,
SPAN
 The <div> element is a block level element used for grouping HTML elements.
While the <div> tag is a block-level element, the HTML <span> element is used
for grouping elements at an inline level.
 Although we can achieve pretty nice layouts with HTML tables, but tables weren't
really designed as a layout tool. Tables are more suited to presenting tabular
data.
 Note − This example makes use of Cascading Style Sheet (CSS), so before
understanding this example you need to have a better understanding on how
CSS works.
Example
 Here we will try to achieve same result using <div> tag along with CSS,
whatever you have achieved using <table> tag in previous example.
Example
<!DOCTYPE html> </div>
<html> <div style = "background-
<head> color:#eee; height:200px;
<title>HTML Layouts using DIV, width:350px; float:left;" >
SPAN</title> <p>Technical and
</head> Managerial Tutorials</p>
</div>
<body> <div style = "background-
<div style = "width:100%"> color:#aaa; height:200px;
width:100px; float:right;">
<div style = "background-color:#b5dcb3; <div><b>Right
width:100%"> Menu</b></div>
<h1>Infosystem</h1> HTML<br />
</div> PHP<br />
PERL...
<div style = "background-color:#aaa; </div>
height:200px; width:100px; float:left;"> <div style = "background-
<div><b>Main Menu</b></div> color:#b5dcb3; clear:both">
HTML<br /> <center>
PHP<br /> Copyright © 2007
JAVA infosyst.net
</center>
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 you want to collect some data from of 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.
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML form Attribute

HTML action attribute


 The action attribute of <form> element defines the process to be performed on form
when form is submitted, or it is a URI to process the form information.
 The action attribute value defines the web page where information proceed. It can
be .php, .jsp, .asp, etc. or any URL where you want to process your form.
HTML method attribute
 The method attribute defines the HTTP method which browser used to submit the form.
The possible values of method attribute can be:
 post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.
 get: The get value of method attribute is default value while submitting the form. But this
is not secure as it displays data in URL after submitting the form.
HTML form Attribute

<form action="action.html" method="post">


HTML target attribute
 The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.
 _self: If we use _self as an attribute value, then the response will display in current page
only.
 _blank: If we use _blank as an attribute it will load the response in a new page.
HTML autocomplete attribute
 The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an
input field to complete automatically. It can have two values "on" and "off" which enables
autocomplete either ON or OFF. The default value of autocomplete attribute is "on".

 <form action="action.html" method="get" autocomplete="on">


HTML form Attribute

 HTML enctype attribute


 The HTML enctype attribute defines the encoding type of form-content while
submitting the form to the server. The possible values of enctype can be:
 application/x-www-form-urlencoded: It is default encoding type if the
enctype attribute is not included in the form. All characters are encoded
before submitting the form.
 multipart/form-data: It does not encode any character. It is used when our
form contains file-upload controls.
 text/plain (HTML5): In this encoding type only space are encoded into +
symbol and no any other special character encoded.
<form action="action.html" method="post" enctype="application/x-www-form-
urlencoded" >
HTML form Attribute

HTML novalidate attribute HTML5


 The novalidate attribute is newly added Boolean attribute of
HTML5. If we apply this attribute in form then it does not perform
any type of validation and submit the form.
<form action = "action.html" method = "get" novalidate>
HTML Form Tag
Tag Description
It defines an HTML form to enter inputs by the
<form>
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.
It defines a group of related options in a drop-
<optgroup>
down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML 5 Form Tags

Tag Description
<datalis It specifies a list of pre-defined
t> options for input control.
<keygen It defines a key-pair generator
> field for forms.
<output It defines the result of a
> calculation.
HTML Form Input Types
 In HTML <input type=" "> is an important element of HTML form.
The "type" attribute of input element can be various types, which
defines information field. Such as <input type="text" name="name">
gives a text box.
type=" " Description
text Defines a one-line text input field
password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a


task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.


HTML5 added new
types
type=" " Description
color Defines an input field with a specific color.

date Defines an input field for selection of date.

datetime-local Defines an input field for entering a date without time zone.

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL


week Defines a field to enter the date with week-year, without time zone.

search Defines a single line text field for entering a search string.

tel Defines an input field for entering the telephone number.


Attributes
ATTRIBUTE VALUE DESCRIPTION

name text Name of the input element.


value text Value of the input element.
id identifier Defines a unique identifier for the input.
class classnames Sets one or more CSS classes to be
applied to the input.
style CSS-styles Sets the style for the input.
data-* value Defines additional data that can be used
by JavaScript.
hidden hidden Specifies whether the input is hidden.
title text Sets a title that displays as a tooltip.
tabindex index Sets a tab sequence relative to the other
elements.
checked checked For types: checkbox or radio. Makes the
option checked or chosen.

placeholder text Short hint which describes expected value


Attributes
ATTRIBUTE VALUE DESCRIPTION
maxlength number Maximum number of characters allowed
required no value Sets the input to required field
readonly readonly Make input read only
disabled disabled Disables input element
autofocus no value Sets the focus on the element after page
loads
autocomplete on | off Presents the user with previously entered
values
form form-id Refers to the id of the form the <input>
element belongs to
formaction URL For types: submit image. URL or path of
the file the submitted data will be
processed
formtarget _blank For types: submit and image. Indicates
_self where the response should be displayed
_parent
_top
framename
Attributes
ATTRIBUTE VALUE DESCRIPTION
formnovalidat formnovalidate Avoids the form being validated after submission
e
accept file-extension For type: file. Indicates what file types user can pick to
audio/* upload
video/*
image/*
media_type
min Number, date Minimum value
max Number, date Maximum value
step number Interval between legal numbers
any
multiple multiple Allows users to choose more than one value from
selection
pattern regexp Regular expression that an <input> element's value is
checked against
size number Input control's width in number of characters
width pixels Width of the input element in pixels. Used by image
input types.
height pixels Height of element in pixels. Used by image input types
list datalist-id <datalist> element that contains pre-defined options
for an <input> element
Example - text
<!DOCTYPE html>
<html>
<body>
<h3>Input "text" type:</h3>
<p>The <strong>"text"</strong>field defines a sinlge line input text field. </p>
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p><strong>Note:</strong>The default maximum character lenght is 20.</p>
</form>
</body>
</html>
Example - password
<!DOCTYPE html>
<html>
<body>
<h3>Input "password" type:</h3>
<p>The <strong>"password"</strong>field defines a sinlge line input password
field to enter the password securely. </p>
<form>
<label>Enter User name</label><br>
<input type="text" name="firstname" ><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
</body>
</html>
Example Reset
<!DOCTYPE html>
<html>
<body>
<h3>Input "reset" type:</h3>
<form>
<label>User id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
<p>Try to change the input values of user id and password, then when you click on
reset, it will reset input fields with default values. </p>
</body>
</html>
Example –Radio Button
<!DOCTYPE html>
<html>
<body>
<h3>Input "radio" type</h3>
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
<input type="submit" value="submit">
</form>
</body>
</html>
Example –Checkbox
<!DOCTYPE html>
<html>
<body>
<h2>Input "checkbox" type</h2><br>
<h3>Registration Form</h3>
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favorite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>
<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Example –Button
<!DOCTYPE html>
<html>
<body>
<h2>Input "button" type.</h2>
<p>Click the button to see the result: </p>
<form>
<input type="button" value="Yes" onclick="alert('You press Yes button')">
<input type="button" value="Click me" onclick="alert('You press Clickme')">
</form>
</body>
</html>
Example –File
<!DOCTYPE html>
<html>
<body>
<h2>Input "file" type.</h2>

<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
</body>
</html>
Example –Date
<!DOCTYPE html>
<html>
<body>
<h3>Input "date" type</h3>
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
</body>
</html>
Example –Email
<!DOCTYPE html>
<html>

<body>
<h3>Input "email" type</h3>
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or
whitespace as following: </p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>

</body>
</html>
Example –Color input
<!DOCTYPE html>
<html>
<body>
<h3>Input "color" types:</h3>
<form>
Pick your Favorite color: <br><br>
<input type="color" name="upclick" value="#a52a2a"> Up-
click<br><br>
<input type="color" name="downclick" value="#f5f5dc"> Down-click
</form>
<p><strong>Note:</strong>The default value of "color" type is
#000000 (black). It only supports color value in hexadecimal
format.</p>
</body>
</html>
Example - email
<!DOCTYPE html>
<html>

<body>
<h3>Input "email" type</h3>
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email addresses
separating by comma or whitespace as following: </p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>

</body>
</html>
Example - Month
<!DOCTYPE html>
<html>

<body>
<h3>Input "month" type:</h3>
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
</body>
</html>
Example - Number
<!DOCTYPE html>
<html>
<body>
<h3>Input "number" type</h3>
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
<p><strong>Note:</strong>It will allow to enter number in range of 50-
80. If you want to enter number other than range, it will show an
error.</p>
</body>
</html>
Input Type Hidden

 The <input type="hidden"> defines a hidden input field (not visible


to a user).
 A hidden field lets web developers include data that cannot be seen
or modified by users when a form is submitted.
 A hidden field often stores what database record that needs to be
updated when the form is submitted.
 Note: While the value is not displayed to the user in the page's
content, it is visible (and can be edited) using any browser's
developer tools or "View Source" functionality. Do not use hidden
inputs as a form of security!
Input –hidden example
<!DOCTYPE html>
<html>
<body>

<h1>A Hidden Field (look in source code)</h1>

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The hidden field is not shown to the user, but the data is
sent when the form is submitted.</p>

</body>
</html>
HTML <input type="range">

 The <input type="range"> defines a control for entering a number


whose exact value is not important (like a slider control).
 Default range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the attributes below.
 max - specifies the maximum value allowed
 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
HTML <input type="range">

<!DOCTYPE html>
<html>
<body>
<h1>Display a Range Field</h1>
<form >
<label for="vol">Volume (between 0 and 100):</label>
<input type="range" id="vol" name="vol" min="0" max="100" step="5">
<input type="submit">
</form>
</body>
</html>
A range control with hash
marks
 This range control is using a list attribute specifying the ID of a <
datalist> which defines a series of hash marks on the control. There
are eleven of them, so that there's one at 0% as well as at each
10% mark. Each point is represented using an <option> element
with its value set to the range's value at which a mark should be
drawn.
Example
<html>
<head><title> Tick Marks </title>
</head>
<body>
<h1> Example of Tick Marks Range </h1>
<br>
<br>
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
</body>
The <select> Element
<!DOCTYPE html>
 <html>
The <select> element defines a
<body>
drop-down list: <h2>The select Element</h2>
<p>The select element defines a
 The <option> elements defines drop-down list:</p>
<form action="/action_page.php">
an option that can be selected.
<label for="cars">Choose a
 By default, the first item in the car:</label>
<select id="cars" name="cars">
drop-down list is selected. <option
 value="volvo">Volvo</option>
To define a pre-selected option,
<option
add the selected attribute to the value="saab">Saab</option>
<option value="fiat"
option: selected>Fiat</option>
<option
value="audi">Audi</option>
</select>
<!DOCTYPE html>
<html>
<body>
<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>
Allow Multiple Selections:
<!DOCTYPE html>
<html>
<body>
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple
options.</p>
</body>
</html>
The <textarea> Element
<!DOCTYPE html>
 The <textarea> <html>
<body>
element defines a
<h2>Textarea</h2>
multi-line input field (a <p>The textarea element defines
text area): a multi-line input field.</p>
 The rows attribute <form
specifies the visible action="/action_page.php">
number of lines in a <textarea name="message"
text area. rows="10" cols="30">The cat
 The cols attribute was playing in the
specifies the visible garden.</textarea>
<br><br>
width of a text area.
<input type="submit">
</form>
</body>
</html>
The <fieldset> and
<legend> Elements
 The <fieldset> element is used to group related data in a form.
 The <legend> element defines a caption for the <fieldset> element.
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related
data in a form, and the legend element defines a
caption for the fieldset element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Enter Your Name:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form></body></html>
The <datalist> Element
 The <datalist> element specifies a list <html>
of pre-defined options for an <input> <body>
element. <h2>The datalist Element</h2>
 Users will see a drop-down list of the <p>The datalist element specifies a
pre-defined options as they input data. list of pre-defined options for an input
 The list attribute of the <input> element.</p>
element, must refer to the id attribute of <form action="/action_page.php">
the <datalist> element. <input list=“browserlist"
name="browser">
<datalist id="browserlist">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
HTML <optgroup> Tag
 The <optgroup> tag is used to group related options in a <select> element (drop-down list).
 If you have a long list of options, groups of related options are easier to handle for a user.
<html>
<body>
<h1>The optgroup element</h1>
<form >
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<input type="submit" value="Submit">
</form> </body> </html>
HTML Entities

 HTML character entities are used as a replacement of reserved


characters in HTML. You can also replace characters that are not
present on your keyboard by entities.
 These characters are replaced because some characters are
reserved in HTML. HTML entities provide a wide range of
characters which can allow you to add icons, geometric shapes,
mathematical operators, etc.
 For example: if you use less than (<) or greater than (>) symbols in
your text, the browser can mix them with tags that's why character
entities are used in HTML to display reserved characters.
HTML Entities
Entity
Result Description Entity Name
Number
non-breaking space &nbsp; 160
< less than &lt; 60
> greater than &gt; 62
& ampersand &amp; 38
" double quotation mark &quot; 34
single quotation mark
' &apos; 39
(apostrophe)
¢ cent &cent; 162
£ pound &pound; 163
¥ yen &yen; 165
€ Euro &euro; 8364
© copyright &copy; 169

® registered trademark &reg; 174


HTML <video> Tag

 The <video> tag is used to embed video content in a document,


such as a movie clip or other video streams.
 The <video> tag contains one or more <source> tags with different
video sources. The browser will choose the first source it supports.
 The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
 There are three supported video formats in HTML: MP4, WebM,
and OGG.
Optional Attributes
Attribute Value Description
Specifies that the video will start playing as soon as it
autoplay autoplay
is ready
Specifies that video controls should be displayed (such
controls controls
as a play/pause button etc).
height pixels Sets the height of the video player
Specifies that the video will start over again, every
loop loop
time it is finished
Specifies that the audio output of the video should be
muted muted
muted
Specifies an image to be shown while the video is
poster URL
downloading, or until the user hits the play button
auto
Specifies if and how the author thinks the video should
preload metadata
be loaded when the page loads
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Example
<!DOCTYPE html>
<html>
<body>
<h1>The video poster attribute</h1>
<video width="320" height="240" poster=“rose.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML <audio> Tag

 The <audio> tag is used to embed sound content in a document,


such as music or other audio streams.
 The <audio> tag contains one or more <source> tags with different
audio sources. The browser will choose the first source it supports.
 The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.
 There are three supported audio formats in HTML: MP3, WAV, and
OGG.
Attiributes
Attribute Value Description
Specifies that the audio will start playing as soon as it
autoplay autoplay
is ready

Specifies that audio controls should be displayed


controls controls
(such as a play/pause button etc)

Specifies that the audio will start over again, every


loop loop
time it is finished

muted muted Specifies that the audio output should be muted

auto
Specifies if and how the author thinks the audio should
preload metadata
be loaded when the page loads
none

src URL Specifies the URL of the audio file


Example
<!DOCTYPE html>
<html>
<body>

<h1>The audio preload attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls preload="none">


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>
HTML YouTube Videos

 To play your video on a web page, do the following:


 Upload the video to YouTube
 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the
player
 Add any other parameters to the URL (see below)
Example
<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345"


src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>
YouTube Autoplay + Mute

 You can let your video start playing automatically when a user visits
the page, by adding autoplay=1 to the YouTube URL. However,
automatically starting a video is annoying for your visitors!
 Add mute=1 after autoplay=1 to let your video start playing
automatically (but muted).

 <iframe width="420" height="315"


src="https://www.youtube.com/embed/tgbNymZ7vqY?
autoplay=1&mute=1">
</iframe>
YouTube Loop

 Add loop=1 to let your video loop forever.


 Value 0 (default): The video will play only once.
 Value 1: The video will loop (forever).

YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTube Controls

 Add controls=0 to not display controls in the video player.


 Value 0: Player controls does not display.
 Value 1 (default): Player controls display.
 YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
HTML Canvas Graphics
 The HTML <canvas> element is used to draw graphics on a web page.
 The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient

rectangle, a multicolor rectangle, and a multicolor text.

What is HTML Canvas?


 The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
 The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the

graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples
 A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
 The markup looks like this:
 <canvas id="myCanvas" width="200" height="100"></canvas>
 Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to

define the size of the canvas. To add a border, use the style attribute.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>
HTML SVG Graphics

 SVG defines vector-based graphics in XML format.


What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation
The HTML <svg> Element
 The HTML <svg> element is a container for SVG graphics.
 SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.
Example
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">


<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
Example
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" /> </svg>

<svg width="400" height="180">


<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<svg width="300" height="200">


<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Example
<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">


<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="50" fill="url(#grad1)" />
<text fill="#ffffff" font-size="20" font-family="Verdana"
x="45" y="80">Infosystem</text>
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
Differences Between SVG
and Canvas
 SVG is a language for describing 2D graphics in XML.
 Canvas draws 2D graphics, on the fly (with a JavaScript).
 SVG is XML based, which means that every element is available within the
SVG DOM. You can attach JavaScript event handlers for an element.
 In SVG, each drawn shape is remembered as an object. If attributes of an
SVG object are changed, the browser can automatically re-render the
shape.
 Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it
is forgotten by the browser. If its position should be changed, the entire
scene needs to be redrawn, including any objects that might have been
covered by the graphic.
Comparison of Canvas and
SVG
Canvas SVG

•Resolution dependent •Resolution independent


•No support for event handlers •Support for event handlers
•Poor text rendering capabilities •Best suited for applications with
•You can save the resulting image as large rendering areas (Google Maps)
.png or .jpg •Slow rendering if complex (anything
•Well suited for graphic-intensive that uses the DOM a lot will be slow)
games •Not suited for game applications

You might also like