HTML Notes PDF
Uploaded by
bhagadeakshay97HTML Notes PDF
Uploaded by
bhagadeakshay97HTML 5
Basic Tutorials
By Akshay Bhagade
Contents
HTML Introduction
----------------------------------------------------------------------------------- 2
HTML Quotation and Citation Elements
----------------------------------------------------- 17
HTML Colors
------------------------------------------------------------------------------------------ 19
HTML Links-------------------------------------------------------------------------------------------- 35
HTML Images
----------------------------------------------------------------------------------------- 40
HTML Tables
------------------------------------------------------------------------------------------ 43
HTML Lists--------------------------------------------------------------------------------------------- 48
HTML Block and Inline Elements
--------------------------------------------------------------- 52
HTML The class Attribute
------------------------------------------------------------------------- 53
HTML The id Attribute
----------------------------------------------------------------------------- 57
My Header--------------------------------------------------------------------------------------------- 57
HTML Iframes
----------------------------------------------------------------------------------------- 59
HTML File Paths
-------------------------------------------------------------------------------------- 61
HTML Head-------------------------------------------------------------------------------------------- 62
HTML Symbols
--------------------------------------------------------------------------------------- 65
HTML Forms
------------------------------------------------------------------------------------------- 69
HTML Form Elements
------------------------------------------------------------------------------ 74
HTML Input Types
----------------------------------------------------------------------------------- 78
HTML Input Attributes
----------------------------------------------------------------------------- 86
1
By Akshay Bhagade
HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
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 are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
Browsers do not display the HTML tags, but use them to render the content
of the page
2
By Akshay Bhagade
Example Explained
The <!DOCTYPE declaration defines this document to be HTML5
The element
html> is the root element of an HTML page
<html>
The element
<head> contains meta information about the document
The element specifies a title for the document
<title>
The element contains the visible page content
<body>
The <h1>element defines a large heading
The <p>element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted
before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
3
By Akshay Bhagade
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1>
to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading:
4
By Akshay Bhagade
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Links
HTML links are defined with the <a> tag:
5
By Akshay Bhagade
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text ( alt), width, and height are provided as
attributes:
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol>(ordered/numbered list) tag, followed by <li> tags (list items):
6
By Akshay Bhagade
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break):
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
7
By Akshay Bhagade
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but
recommends lowercase in HTML, and demands lowercase for stricter document
types like XHTML.
8
By Akshay Bhagade
HTML Text Formatting Elements
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<u> - Underline text
<mark> - Marked text
<small> - Small text
<big>- Big Text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
9
By Akshay Bhagade
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
HTML links are defined with the<a> tag. The link address is specified in the href
attribute:
Example
<a href="https://www.....com">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
The width and height Attributes
HTML images also havewidth and height attributes, which specifies the width and
height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
The width and height are is specified in pixels by default; so width="500" means
500 pixels wide.
You will learn more about images in our HTML Images chapter.
The alt Attribute
The alt attribute specifies an alternative text to be used, if an image cannot be
displayed.
10
By Akshay Bhagade
The value of the alt attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image cannot be displayed (e.g. if it does not
exist):
The style Attribute
The style attribute is used to specify the styling of an element, like color, font,
size etc.
Example
<p style="color:red">This is a paragraph.</p>
You will learn more about styling later in this tutorial, and in our CSS Tutorial.
The lang Attribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and
search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two more
letters (US).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title attribute
will be displayed as a tooltip when you mouse over the paragraph:
11
By Akshay Bhagade
Example
<p title="I'm a tooltip"> This
is a paragraph.
</p>
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.
recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
We Suggest: Quote Attribute Values
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written without quotes:
Bad
<a href=https://www.....com>
Good
<a href="https://www.....com">
recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.
Sometimes it is necessary to use quotes. This example will not display the title
attribute correctly, because it contains a space:
Example
<p title=About >
Using quotes are the most common. Omitting quotes can produce errors.
At we always use quotes around attribute values.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
12
By Akshay Bhagade
In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<p title='Jk "Jitendra" '>
Or vice versa:
<p title="Jk 'Jitendra' ">
13
By Akshay Bhagade
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove any extra spaces and extra lines when the page is
displayed:
Problem
This poem will display on a single line:
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
and it preserves both spaces and line breaks:
14
By Akshay Bhagade
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value. You
will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property defines the background color for an HTML
element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
15
By Akshay Bhagade
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1> <p
style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
16
By Akshay Bhagade
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSStext-align property defines the horizontal text alignment for an HTML
element:
Example
<h1 style="text-align:center;">Centered Heading</h1> <p
style="text-align:left;">left paragraph.</p>
HTML Quotation and Citation Elements
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
17
By Akshay Bhagade
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote>
For 50 years, WWF has been protecting the future of nature. The
world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems
and search-engines.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a
document or an article.
The <address> element is usually displayed in italic. Most browsers will add a line
break before and after the element.
18
By Akshay Bhagade
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> element defines the title of a
work. Browsers usually display <cite> elements in
italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
19
By Akshay Bhagade
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p
style="background-color:Tomato;">Lorem ipsum...</p>
20
By Akshay Bhagade
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1
style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
Same as color name "Tomato":
rgb(255, 99, 71)
21
By Akshay Bhagade
#ff6347
hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:
00, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0
and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)
22
By Akshay Bhagade
Example
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Shades of gray are often defined using equal values for all the 3 light sources:
Example
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
23
By Akshay Bhagade
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
Example
#ff0000
#0000ff
#3cb371
24
By Akshay Bhagade
#ee82ee
#ffa500
#6a5acd
Shades of gray are often defined using equal values for all the 3 light sources:
Example
#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
25
By Akshay Bhagade
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full
color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is
white
Example
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
26
By Akshay Bhagade
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Lightness
The lightness of a color can be described as how much light you want to give the
color, where 0% means no light (black), 50% means 50% light (neither dark nor
light) 100% means full lightness (white).
27
By Akshay Bhagade
Example
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Shades of gray are often defined by setting the hue and saturation to 0, and adjust
the lightness from 0% to 100% to get darker/lighter shades:
Example
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
28
By Akshay Bhagade
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel -
which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
29
By Akshay Bhagade
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel -
which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files.
However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.
30
By Akshay Bhagade
Tip: You can learn much more about CSS in our CSS Tutorial.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
31
By Akshay Bhagade
With an external style sheet, you can change the look of an entire web
site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML
page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Fonts
The CSScolor property defines the text color to be used.
The CSSfont-family
property defines the font to be used.
The CSS font-size property defines the text size to be used.
32
By Akshay Bhagade
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element:
Example
p{
border: 1px solid powderblue;
}
CSS Padding
The CSSpaddingproperty defines a padding (space) between the text and the
border:
Example
p{
border: 1px solid powderblue;
padding: 30px;
}
33
By Akshay Bhagade
CSS Margin
The CSS marginproperty defines a margin (space) outside the border:
Example
p{
border: 1px solid powderblue;
margin: 50px;
}
The id Attribute
To define a specific style for one special element, add anid attribute to the
element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is
used to select one unique element!
The class Attribute
To define a style for special types of elements, add aclass attribute to the
element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
p.error {
color: red;
}
34
By Akshay Bhagade
External
References
External style sheets can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web
site:
Example
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as the current page:
Example
<link rel="stylesheet" href="styles.css">
You can read more about file paths in the chapter HTML File Paths.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML
element.
35
By Akshay Bhagade
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address
(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you might
generate two requests to the server. Many servers will automatically add a forward
slash to the end of the address, and then create a new request.
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without
https://www....).
Example
<a href="html_images.asp">HTML Images</a>
HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the default colors, by using CSS:
Example
<style>
a:link {
color: green;
36
By Akshay Bhagade
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Links are often styled as buttons, by using CSS:
This is a link
Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
37
By Akshay Bhagade
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab 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
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Tip: If your webpage is locked in a frame, you can use oftarget="_top" to break out
the frame:
Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial"style="width:42px;height:42px;border:0;"> </a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border
around the image (when the image is a link).
Link Titles
The title attribute specifies extra information about an element. The information
is most often shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
38
By Akshay Bhagade
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML tutorial</a>
39
By Akshay Bhagade
HTML Images
<img src="img_girl.jpg" alt="Girl in a jacket">
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader).
The value of the alt attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="wrongname.gif" alt="Flowers in Chania">
Note: Thealt attribute is required. A web page will not validate correctly without
it.
Width and Height, or Style?
The width, height, and style attributes are valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
40
By Akshay Bhagade
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Image as a Link
To use an image as a link, put the <img>tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;"> </a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border
around the image (when the image is a link).
Image Floating
Use the CSSfloat property to let the image float to the right or to the left of a
text:
Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;"> The
image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
41
By Akshay Bhagade
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable
areas.
In the image below, click on the computer, the phone, or the cup of coffee:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
The name attribute of the <map> tag is associated with the <img>'s usemap attribute
and creates a relationship between the image and the map.
The <map> element contains a number of <area> tags, that define the clickable
areas in the image-map.
42
By Akshay Bhagade
HTML Tables
HTML Table Example
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
43
By Akshay Bhagade
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-
collapse property:
Example
table, th, td {
border: 1px solid black;
44
By Akshay Bhagade
border-collapse: collapse; }
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
45
By Akshay Bhagade
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspanattribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
46
By Akshay Bhagade
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
47
By Akshay Bhagade
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSSlist-style-type property is used to define the style of the list item
marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items will be marked with numbers by default:
48
By Akshay Bhagade
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
49
By Akshay Bhagade
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: List items can contain new list, and other HTML elements, like images and
links, etc.
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting
from a specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
Example
50
By Akshay Bhagade
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
51
By Akshay Bhagade
HTML Block and Inline Elements
Every HTML element has a default display value depending on what type of
element it is.
The two display values are: block and inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Example
<div>Hello World</div>
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>
<p> <pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.
This is an inline <span> element inside a paragraph.
Example
<span>Hello World</span>
Inline elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button>
<cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label>
<map> <object> <output> <q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
52
By Akshay Bhagade
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <div> element can be used to style blocks of
content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <span> element can be used to style parts of
the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML The class Attribute
Using The class Attribute
The HTML class attribute is used to define equal styles for elements with the same
class name.
So, all HTML elements with the same class attribute will get the same style.
Here we have three <div> elements that point to the same class name:
53
By Akshay Bhagade
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
54
By Akshay Bhagade
Using The class Attribute on Inline Elements
The HTML class attribute can also be used on inline elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Select Elements With a Specific Class
In CSS, to select elements with a specific class, write a period (.) character,
followed by the name of the class:
Example
Use CSS to style all elements with the class name "city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
55
By Akshay Bhagade
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Multiple Classes
HTML elements can have more than one class name, each class name must be
separated by a space.
Example
Style elements with the class name "city", also style elements with the class name
"main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
In the example above, the first<h2> element belongs to both the "city" class and
the "main" class.
Different Tags Can Share Same Class
Different tags, like<h2> and <p>, can have the same class name and thereby share
the same style:
Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
56
By Akshay Bhagade
HTML The id Attribute
Using The id Attribute
The id attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document).
The id value can be used by CSS and JavaScript to perform certain tasks for the
element with the specific id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed
by the id of the element:
Example
Use CSS to style an element with the id "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
Result:
My Header
Tip: The id attribute can be used on any HTML element.
Note: The id value is case-sensitive.
Note: The id value must contain at least one character, and must not contain
whitespace (spaces, tabs, etc.).
Difference Between Class and ID
An HTML element can only have one unique id that belongs to that single element,
while a class name can be used by multiple elements:
57
By Akshay Bhagade
Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to
it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
58
By Akshay Bhagade
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Using The id Attribute in JavaScript
JavaScript can access an element with a specified id by using
the getElementById() method:
Example
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
HTML Iframes
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
59
By Akshay Bhagade
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
The height and width can also be specified in percent:
Example
<iframe src="demo_iframe.htm" height="100%" width="100%"></iframe>
Or you can use CSS to set the height and width of the iframe:
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS
border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to thenameattribute of the iframe:
60
By Akshay Bhagade
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
HTML File Paths
Path Description
<img src="picture.jpg"> picture.jpg is located in the same folder as
the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder
in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder
at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level
up from the current folder
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files like:
Web pages
Images
Style sheets
JavaScripts
Absolute File Paths
An absolute file path is the full URL to an internet file:
61
By Akshay Bhagade
Example
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Relative File Paths
A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder located at the root
of the current web:
Example
<img src="/images/picture.jpg" alt="Mountain">
In this example, the file path points to a file in the images folder located in the
current folder:
Example
<img src="images/picture.jpg" alt="Mountain">
In this example, the file path points to a file in the images folder located in the
folder one level above the current folder:
Example
<img src="../images/picture.jpg" alt="Mountain">
HTML Head
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.
The following tags describe
metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
62
By Akshay Bhagade
The HTML <title> Element
The <title> element defines the title of the document, and is required in all HTML
documents.
The <title> element:
defines a title in the browser tab
provides a title for the page when it is added to favorites
displays a title for the page in search engine results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element is used to link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
63
By Akshay Bhagade
The HTML <meta> Element
The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines
(keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta>tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and
will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
64
By Akshay Bhagade
A <meta> viewport element gives the browser instructions on how to control the
page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.
Here is an example of a web page without the viewport meta tag, and the same
web page with the viewport <meta>tag:
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
Example
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
The HTML <base> Element
The <base>element specifies the base URL and base target for all relative URLs in
a page:
Example
<base href="https://www.w3schools.com/images/" target="_blank">
HTML Symbols
HTML Symbol Entities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal
keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
65
By Akshay Bhagade
If no entity name exists, you can use an entity number, a decimal, or hexadecimal
reference.
Example
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
Will display as:
I will display € I
will display € I
will display €
Some Mathematical Symbols Supported by
HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
66
By Akshay Bhagade
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ ∋ CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Full Math Reference
Some Greek Letters Supported by HTML
Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
67
By Akshay Bhagade
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Some Other Entities Supported by HTML
Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ ♠ BLACK SPADE SUIT
68
By Akshay Bhagade
♣ ♣ ♣ BLACK CLUB SUIT
♥ ♥ ♥ BLACK HEART SUIT
♦ ♦ ♦ BLACK DIAMOND SUIT
HTML Forms
The <form> Element
The HTML <form>element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
69
By Akshay Bhagade
<input type="radio"> Defines a radio button (for selecting one
of many choices)
<input type="submit"> Defines a submit button (for submitting
the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
70
By Akshay Bhagade
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
The Submit Button
<input type="submit"> defines a button for submitting the form data to a
form-
handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit
The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.
Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.
In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the form
data:
71
By Akshay Bhagade
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the current
window.
To make the form result open in a new browser tab, use the value "_blank":
Example
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", " _top", or a name representing the name of an
iframe.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data:
Example
<form action="/action_page.php" method="get">
or:
Example
<form action="/action_page.php" method="post">
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page
address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
72
By Akshay Bhagade
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google
When to Use POST?
Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.
Notes on POST:
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with <fieldset>
The <fieldset>element is used to group related data in a form.
The <legend>element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
73
By Akshay Bhagade
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
This is how the HTML code above will be displayed in a browser:
Personal information: First name:
Mickey
Last name:
Mouse
Submit
HTML Form Elements
This chapter describes all HTML form elements.
The <input> Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Example
<input name="firstname" type="text">
If the type attribute is omitted, the input field gets the default type: "text".
All the different input types are covered in the next chapter.
The <select> Element
The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
74
By Akshay Bhagade
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select 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>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<select 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>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
75
By Akshay Bhagade
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
The <button> Element
The <button>element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:
Click Me!
Note: Always specify the type attribute for the button element. Different browsers
may use different default types for the button element.
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
<output>
Note: Browsers do not display unknown elements. New elements that are not
supported in older browsers will not "destroy" your web page.
76
By Akshay Bhagade
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed by
a script).
Example
Perform a calculation and show the result in an <output>element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
77
By Akshay Bhagade
HTML Input Types
This chapter describes the different input types for the <input> element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Input Type Text
<input type="text"> defines a one-line text input field:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
78
By Akshay Bhagade
Input Type Password
<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-
handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to
their default values:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
79
By Akshay Bhagade
If you change the input values and then click the "Reset" button, the form-data will
be reset to the default values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:
80
By Akshay Bhagade
HTML5 Input Types
HTML5 added several new input types:
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
New input types that are not supported by older web browsers, will behave
as <input type="text">.
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
You can also use the minand maxattributes to add restrictions to dates:
81
By Akshay Bhagade
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no
time zone.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail
address.
Depending on browser support, the e-mail address can be automatically validated
when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.
82
By Akshay Bhagade
Example
<form>
Select a file: <input type="file" name="myFile">
</form>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value
from 1 to 5:
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
disabled Specifies that an input field should be disabled
83
By Akshay Bhagade
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value
from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
84
By Akshay Bhagade
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 min, max,
and step attributes:
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone
number.
Example
<form>
Telephone:
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
85
By Akshay Bhagade
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL
address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to
match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>
HTML Input Attributes
The value Attribute
The value attribute specifies the initial value for an input field:
86
By Akshay Bhagade
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
The readonly Attribute
The readonly attribute specifies that the input field is read only (cannot be
changed):
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
The disabled Attribute
The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent
when submitting the form:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
The size Attribute
The size attribute specifies the size (in characters) for the input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
87
By Akshay Bhagade
The max length Attribute
The maxlengthattribute specifies the maximum allowed length for the input field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
With a maxlength attribute, the input field will not accept more than the allowed
number of characters.
The maxlength attribute does not provide any feedback. If you want to alert the
user, you must write JavaScript code.
Note: Input restrictions are not foolproof, and JavaScript provides many ways to
add illegal input. To safely restrict input, it must be checked by the receiver (the
server) as well!
HTML5 Attributes
HTML5 added the following attributes for <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
and the following attributes for <form>:
autocomplete
novalidate
88
By Akshay Bhagade
The autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values
based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
The autocomplete attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on (and off for one input field):
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Tip: In some browsers you may need to activate the autocomplete function for this to
work.
The novalidate Attribute
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when
submitted.
Example
Indicates that the form is not to be validated on submit:
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
89
By Akshay Bhagade
The autofocus Attribute
The autofocus attribute specifies that the input field should automatically get focus
when the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
First name:<input type="text" name="fname" autofocus>
The form Attribute
The formattribute specifies one or more forms an <input> element belongs to.
Example
An input field located outside the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
The formaction Attribute
The formaction attribute specifies the URL of a file that will process the input
control when the form is submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
Example
An HTML form with two submit buttons, with different actions:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
90
By Akshay Bhagade
value="Submit as admin">
</form>
The formenctype Attribute
The formenctype attribute specifies how the form data should be encoded when
submitted (only for forms with method="post").
The formenctype attribute overrides the enctype attribute of the <form> element.
The formenctype attribute is used with type="submit" and type="image".
Example
Send form-data that is default encoded (the first submit button), and encoded as
"multipart/form-data" (the second submit button):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
The formmethod Attribute
The formmethod
attribute defines the HTTP method for sending form-data to the
action URL.
The formmeth attribute overrides the method attribute of the <form>element.
The od attribute can be used with type="submit" andtype="image"
.
Example
formmeth
od
The second submit button overrides the HTTP method of the form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
91
By Akshay Bhagade
The formnovalidate Attribute
The formnovalidate attribute overrides the novalidate attribute of
the <form>element.
attribute can be used with type="submit".
The formnovalidate
Example
A form with two submit buttons (with and without validation):
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
The formtarget Attribute
The formtarget attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
Example
A form with two submit buttons, with different target windows:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
The height and width Attributes
The height and width attributes specify the height and width of an <input
type="image"> element.
Always specify the size of images. If the browser does not know the size, the page
will flicker while images load.
92
By Akshay Bhagade
Example
Define an image as the submit button, with height and width attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
The list Attribute
The list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The min and max Attributes
The min and max attributes specify the minimum and maximum values for
an <input> element.
The min and max attributes work with the following input types: number, range,
date, datetime-local, month, time and week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
93
By Akshay Bhagade
The multiple Attribute
The multiple attribute specifies that the user is allowed to enter more than one
value in the <input>
element.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
Select images: <input type="file" name="img" multiple>
The pattern Attribute
The pattern attribute specifies a regular expression that the <input> element's
value is checked against.
The pattern attribute works with the following input types: text, search, url, tel,
email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special
characters):
Country code: <input type="text" name="country_code" pattern="[A-Za- z]
{3}" title="Three letter country code">
The placeholder Attribute
The placeholder attribute specifies a hint that describes the expected value of an
input field (a sample value or a short description of the format).
The hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url,
tel, email, and password.
94
By Akshay Bhagade
Example
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">
The required Attribute
The required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input type="text" name="usrname" required>
The step Attribute
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to
create a range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">
95
You might also like
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pages
- HTML Is The Standard Markup Language For Creating Web PagesNo ratings yetHTML Is The Standard Markup Language For Creating Web Pages28 pages
- Editors: Write HTML Using Notepad or TexteditNo ratings yetEditors: Write HTML Using Notepad or Textedit53 pages
- What Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesNo ratings yetWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages52 pages
- Do Not Skip Step: Easiest Facebook Hacking. (TAGLISH)No ratings yetDo Not Skip Step: Easiest Facebook Hacking. (TAGLISH)3 pages
- Sycs Web Technology Practical Manual Semester - IiiNo ratings yetSycs Web Technology Practical Manual Semester - Iii26 pages
- Full Stack Web Development Complete GuideNo ratings yetFull Stack Web Development Complete Guide56 pages
- Site Report For WWW - Dialog.lk: Netcraft ExtensionNo ratings yetSite Report For WWW - Dialog.lk: Netcraft Extension7 pages
- A Project of Computer Science Weather Forecasting Python ProgrammingNo ratings yetA Project of Computer Science Weather Forecasting Python Programming11 pages
- Problem 6:form Validation Using JS: Program CodeNo ratings yetProblem 6:form Validation Using JS: Program Code3 pages
- عملي ومراجعة ثان ع ت 2 لغات منقول لجروب فريق اصدقاء الكمبيوترNo ratings yetعملي ومراجعة ثان ع ت 2 لغات منقول لجروب فريق اصدقاء الكمبيوتر9 pages
- Creating A Fiori Overview Page (Ovp) With The Northwind Odata ServiceNo ratings yetCreating A Fiori Overview Page (Ovp) With The Northwind Odata Service5 pages
- The Best Wordpress Plugins For Web Designers PDFNo ratings yetThe Best Wordpress Plugins For Web Designers PDF16 pages
- UTS Station QR Code For All Mumbai Stations (ActiNo ratings yetUTS Station QR Code For All Mumbai Stations (Acti5 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
- HTML Is The Standard Markup Language For Creating Web PagesHTML Is The Standard Markup Language For Creating Web Pages
- What Is HTML?: HTML Is The Standard Markup Language For Creating Web PagesWhat Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
- Do Not Skip Step: Easiest Facebook Hacking. (TAGLISH)Do Not Skip Step: Easiest Facebook Hacking. (TAGLISH)
- Sycs Web Technology Practical Manual Semester - IiiSycs Web Technology Practical Manual Semester - Iii
- Site Report For WWW - Dialog.lk: Netcraft ExtensionSite Report For WWW - Dialog.lk: Netcraft Extension
- A Project of Computer Science Weather Forecasting Python ProgrammingA Project of Computer Science Weather Forecasting Python Programming
- عملي ومراجعة ثان ع ت 2 لغات منقول لجروب فريق اصدقاء الكمبيوترعملي ومراجعة ثان ع ت 2 لغات منقول لجروب فريق اصدقاء الكمبيوتر
- Creating A Fiori Overview Page (Ovp) With The Northwind Odata ServiceCreating A Fiori Overview Page (Ovp) With The Northwind Odata Service