Scribd
Upload
48 views

HTML - Forms

Uploaded by

WAAD IBRA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

HTML - Forms

Uploaded by

WAAD IBRA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

2/4/2020 HTML - Forms - Tutorialspoint

HTML - Forms

HTML Forms are required, when you want to collect some data from the site visitor. For example, during
user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP
Script or PHP script etc. The back-end application will perform required processing on the passed data
based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST">


form elements like input, textarea etc.
</form>

Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes −

https://www.tutorialspoint.com/html/html_forms.htm 1/14
2/4/2020 HTML - Forms - Tutorialspoint

Sr.No Attribute & Description

1
action

Backend script ready to process your passed data.

2
method
Method to be used to upload data. The most frequently used are GET and POST methods.

3
target
Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.

4
enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends
it to the server. Possible values are −

application/x-www-form-urlencoded − This is the standard method most forms use in simple


scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files
like image, word file etc.

Note − You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

Text Input Controls


There are three types of text input used on forms −

https://www.tutorialspoint.com/html/html_forms.htm 2/14
2/4/2020 HTML - Forms - Tutorialspoint

Single-line text input controls − This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML <input> tag.
Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
Multi-line text input controls − This is used when the user is required to give details that may
be longer than a single sentence. Multi-line input controls are created using HTML <textarea>
tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search boxes or names.
They are created using HTML <input> tag.

Example

Here is a basic example of a single-line text input used to take first name and last name −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>

This will produce the following result −

First name:
Last name:

Attributes

Following is the list of attributes for <input> tag for creating text field.

https://www.tutorialspoint.com/html/html_forms.htm 3/14
2/4/2020 HTML - Forms - Tutorialspoint

Sr.No Attribute & Description

1
type

Indicates the type of input control and for text input control it will be set to text.

2
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

3
value

This can be used to provide an initial value inside the control.

4
size

Allows to specify the width of the text-input control in terms of characters.

5
maxlength

Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also
created using HTML <input>tag but type attribute is set to password.

Example

Here is a basic example of a single-line password input used to take user password −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

https://www.tutorialspoint.com/html/html_forms.htm 4/14
2/4/2020 HTML - Forms - Tutorialspoint

</html>

This will produce the following result −

User ID :
Password:

Attributes

Following is the list of attributes for <input> tag for creating password field.

Sr.No Attribute & Description

1
type

Indicates the type of input control and for password input control it will be set to password.

2
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

3
value

This can be used to provide an initial value inside the control.

4
size

Allows to specify the width of the text-input control in terms of characters.

5
maxlength

Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line
input controls are created using HTML <textarea> tag.

Example

Here is a basic example of a multi-line text input used to take item description −

https://www.tutorialspoint.com/html/html_forms.htm 5/14
2/4/2020 HTML - Forms - Tutorialspoint

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>

This will produce the following result −

Description:

Enter description here...

Attributes
Following is the list of attributes for <textarea> tag.

Sr.No Attribute & Description

1
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

2
rows

Indicates the number of rows of text area box.

3
cols

Indicates the number of columns of text area box

https://www.tutorialspoint.com/html/html_forms.htm 6/14
2/4/2020 HTML - Forms - Tutorialspoint

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using
HTML <input> tag but type attribute is set to checkbox..

Example

Here is an example HTML code for a form with two checkboxes −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>

This will produce the following result −

Maths Physics

Attributes

Following is the list of attributes for <checkbox> tag.

https://www.tutorialspoint.com/html/html_forms.htm 7/14
2/4/2020 HTML - Forms - Tutorialspoint

Sr.No Attribute & Description

1
type
Indicates the type of input control and for checkbox input control it will be set to checkbox..

2
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

3
value
The value that will be used if the checkbox is selected.

4
checked

Set to checked if you want to select it by default.

Radio Button Control


Radio buttons are used when out of many options, just one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to radio.

Example

Here is example HTML code for a form with two radio buttons −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_forms.htm 8/14
2/4/2020 HTML - Forms - Tutorialspoint

Maths Physics

Attributes
Following is the list of attributes for radio button.

Sr.No Attribute & Description

1
type

Indicates the type of input control and for checkbox input control it will be set to radio.

2
name
Used to give a name to the control which is sent to the server to be recognized and get the
value.

3
value

The value that will be used if the radio box is selected.

4
checked
Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of
drop down list, from where a user can select one or more options.

Example

Here is example HTML code for a form with one drop down box

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>

https://www.tutorialspoint.com/html/html_forms.htm 9/14
2/4/2020 HTML - Forms - Tutorialspoint

<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>

This will produce the following result −

Maths

Attributes

Following is the list of important attributes of <select> tag −

Sr.No Attribute & Description

1
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

2
size
This can be used to present a scrolling list box.

3
multiple

If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag −

https://www.tutorialspoint.com/html/html_forms.htm 10/14
2/4/2020 HTML - Forms - Tutorialspoint

Sr.No Attribute & Description

1
value

The value that will be used if an option in the select box box is selected.

2
selected
Specifies that this option should be the initially selected value when the page loads.

3
label

An alternative way of labeling options

File Upload Box


If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also
known as a file select box. This is also created using the <input> element but type attribute is set to file.

Example

Here is example HTML code for a form with one file upload box −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>

This will produce the following result −

Choose File No file chosen

https://www.tutorialspoint.com/html/html_forms.htm 11/14
2/4/2020 HTML - Forms - Tutorialspoint

Attributes

Following is the list of important attributes of file upload box −

Sr.No Attribute & Description

1
name

Used to give a name to the control which is sent to the server to be recognized and get the
value.

2
accept

Specifies the types of files that the server accepts.

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button. The type attribute can take the following values −

Sr.No Type & Description

1
submit

This creates a button that automatically submits a form.

2
reset

This creates a button that automatically resets form controls to their initial values.

3
button

This creates a button that is used to trigger a client-side script when the user clicks that button.

4
image

This creates a clickable button but we can use an image as background of the button.

Example

Here is example HTML code for a form with three types of buttons −

Live Demo
<!DOCTYPE html>
<html>

https://www.tutorialspoint.com/html/html_forms.htm 12/14
2/4/2020 HTML - Forms - Tutorialspoint

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>

</html>

This will produce the following result −

Submit Reset OK

Hidden Form Controls


Hidden form controls are used to hide data inside the page which later on can be pushed to the server.
This control hides inside the code and does not appear on the actual page. For example, following hidden
form is being used to keep current page number. When a user will click next page then the value of
hidden control will be sent to the web server and there it will decide which page will be displayed next
based on the passed current page.

Example

Here is example HTML code to show the usage of hidden control −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />

https://www.tutorialspoint.com/html/html_forms.htm 13/14
2/4/2020 HTML - Forms - Tutorialspoint

<input type = "submit" name = "submit" value = "Submit" />


<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>

This will produce the following result −

This is page 10

Submit Reset

https://www.tutorialspoint.com/html/html_forms.htm 14/14
2/4/2020 HTML - Embed Multimedia - Tutorialspoint

HTML - Embed Multimedia

Sometimes you need to add music or video into your web page. The easiest way to add video or sound to
your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to
include controls for the multimedia automatically provided browser supports <embed> tag and given
media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You
could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single
JPG image if browser does not support <embed> tag.

Example

Here is a simple example to play an embedded midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>

</html>

The <embed> Tag Attributes


Following is the list of important attributes which can be used with <embed> tag.

Note −The align and autostart attributes deprecated in HTML5. Do not use these attributes.

https://www.tutorialspoint.com/html/html_embed_multimedia.htm 1/5
2/4/2020 HTML - Embed Multimedia - Tutorialspoint

Sr.No Attribute & Description

1
align

Determines how to align the object. It can be set to either center, left or right.

2
autostart
This boolean attribute indicates if the media should start automatically. You can set it either true
or false.

3
loop
Specifies if the sound should be played continuously (set loop to true), a certain number of
times (a positive value) or not at all (false)

4
playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are
usiong IE.

5
hidden
Specifies if the multimedia object should be shown on the page. A false value means no and
true values means yes.

6
width
Width of the object in pixels

7
height
Height of the object in pixels

8
name
A name used to reference the object.

9
src
URL of the object to be embedded.

10
volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

https://www.tutorialspoint.com/html/html_embed_multimedia.htm 2/5
2/4/2020 HTML - Embed Multimedia - Tutorialspoint

Supported Video Types

You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside
embed tag.
.swf files − are the file types created by Macromedia's Flash program.
.wmv files − are Microsoft's Window's Media Video file types.

.mov files − are Apple's Quick Time Movie format.


.mpeg files − are movie files created by the Moving Pictures Expert Group.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>

</html>

This will produce the following result −

Background Audio

You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is
supported by Internet Explorer only and most of the other browsers ignore this tag. It downloads and plays
an audio file when the host document is first downloaded by the user and displayed. The background
sound file also will replay whenever the user refreshes the browser.

https://www.tutorialspoint.com/html/html_embed_multimedia.htm 3/5
2/4/2020 HTML - Embed Multimedia - Tutorialspoint

Note − The bgsound tag is deprecated and it is supposed to be removed in a future version of HTML. So
they should not be used rather, it's suggested to use HTML5 tag audio for adding sound. But still for
learning purpose, this chapter will explain bgsound tag in detail.

This tag is having only two attributes loop and src. Both these attributes have same meaning as explained
above.
Here is a simple example to play a small midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>

</html>

This will produce the blank screen. This tag does not display any component and remains hidden.

Internet Explorer can also handle only three different sound format files − wav, the native format for PCs;
au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme.

HTML Object tag

HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion.
The <object> element allows HTML authors to specify everything required by an object for its
presentation by a user agent.

Here are a few examples −

Example - 1

You can embed an HTML document in an HTML document itself as follows −

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">


alt : <a href = "data/test.htm">test.htm</a>
</object>

Here alt attribute will come into picture if browser does not support object tag.

Example - 2

You can embed a PDF document in an HTML document as follows −

https://www.tutorialspoint.com/html/html_embed_multimedia.htm 4/5
2/4/2020 HTML - Embed Multimedia - Tutorialspoint

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">


alt : <a href = "data/test.pdf">test.htm</a>
</object>

Example - 3

You can specify some parameters related to the document with the <param> tag. Here is an example to
embed a wav file −

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">


<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>

Example - 4

You can add a flash document as follows −

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"


codebase = "someplace/swflash.cab" width = "200" height = "300">

<param name = "movie" value = "flash/penguin.swf" />


<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

Example - 5

You can add a java applet into HTML document as follows −

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"


width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>

The classid attribute identifies which version of Java Plug-in to use. You can use the optional codebase
attribute to specify if and how to download the JRE.

https://www.tutorialspoint.com/html/html_embed_multimedia.htm 5/5
2/4/2020 HTML - Marquees - Tutorialspoint

HTML - Marquees

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your
webpage depending on the settings. This is created by using HTML <marquees> tag.

Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use
JavaScript and CSS to create such effects.

Syntax

A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>


One or more lines or text message or image
</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.

https://www.tutorialspoint.com/html/html_marquees.htm 1/4
2/4/2020 HTML - Marquees - Tutorialspoint

Sr.No Attribute & Description

1
width

This specifies the width of the marquee. This can be a value like 10 or 20% etc.

2
height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.

3
direction
This specifies the direction in which marquee should scroll. This can be a value like up, down,
left or right.

4
behavior
This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and
alternate.

5
scrolldelay
This specifies how long to delay between each jump. This will have a value like 10 etc.

6
scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.

7
loop
This specifies how many times to loop. The default value is INFINITE, which means that the
marquee loops endlessly.

8
bgcolor
This specifies background color in terms of color name or color hex value.

9
hspace
This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.

10
vspace
This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

https://www.tutorialspoint.com/html/html_marquees.htm 2/4
2/4/2020 HTML - Marquees - Tutorialspoint

Below are few examples to demonstrate the usage of marquee tag.

Examples - 1

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>

This will produce the following result −

This is basic example of marquee

Examples - 2

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>

</html>

This will produce the following result −

This e

https://www.tutorialspoint.com/html/html_marquees.htm 3/4
2/4/2020 HTML - Marquees - Tutorialspoint

Examples - 3

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>

</html>

This will produce the following result −

This text will scroll from left to right

Examples - 4

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>

</html>

This will produce the following result −

Thi t t ill ll f b tt t

https://www.tutorialspoint.com/html/html_marquees.htm 4/4
2/4/2020 HTML - Header - Tutorialspoint

HTML - Header

We have learnt that a typical HTML document will have following structure −

Document declaration tag


<html>

<head>
Document header related tags
</head>

<body>
Document body related tags
</body>

</html>

This chapter will give a little more detail about header part which is represented by HTML <head> tag.
The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>,
<script>, and <noscript> tags.

The HTML <title> Tag

The HTML <title> tag is used for specifying the title of the HTML document. Following is an example to
give a title to an HTML document −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Title Tag Example</title>
</head>

<body>
<p>Hello, World!</p>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_header.htm 1/6
2/4/2020 HTML - Header - Tutorialspoint

Hello, World!

The HTML <meta> Tag


The HTML <meta> tag is used to provide metadata about the HTML document which includes information
about page expiry, page author, list of keywords, page description etc.

Following are few of the important usages of <meta> tag inside an HTML document −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Meta Tag Example</title>

<!-- Provide list of keywords -->


<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

<!-- Provide description of the page -->


<meta name = "description" content = "Simply Easy Learning by Tutorials Point">

<!-- Author information -->


<meta name = "author" content = "Tutorials Point">

<!-- Page content type -->


<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

<!-- Page refreshing delay -->


<meta http-equiv = "refresh" content = "30">

<!-- Page expiry -->


<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">

</head>

<body>
<p>Hello, World!</p>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_header.htm 2/6
2/4/2020 HTML - Header - Tutorialspoint

Hello, World!

The HTML <base> Tag

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means
all the other URLs will be concatenated into base URL while locating for the given item.
For example, all the given pages and images will be searched after prefixing the given URLs with base
URL http://www.tutorialspoint.com/ directory −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>

<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>

</html>

This will produce the following result −

HTML Tutorial

But if you change base URL to something else, for example, if base URL is
http://www.tutorialspoint.com/home then image and other given links will become like
http://www.tutorialspoint.com/home/images/logo.png and http://www.tutorialspoint.com/html/index.htm

The HTML <link> Tag

https://www.tutorialspoint.com/html/html_header.htm 3/6
2/4/2020 HTML - Header - Tutorialspoint

The HTML <link> tag is used to specify relationships between the current document and external
resource. Following is an example to link an external style sheet file available in css sub-directory within
web root −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>

<body>
<p>Hello, World!</p>
</body>

</html>

This will produce the following result −

Hello, World!

The HTML <style> Tag


The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an
example to define few style sheet rules inside <style> tag −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />

<style type = "text/css">


.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>

<body>

https://www.tutorialspoint.com/html/html_header.htm 4/6
2/4/2020 HTML - Header - Tutorialspoint

<p class = "myclass">Hello, World!</p>


</body>

</html>

This will produce the following result −

Hello, World!

Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css

The HTML <script> Tag

The HTML <script> tag is used to include either external script file or to define internal script for the HTML
document. Following is an example where we are using JavaScript to define a simple JavaScript function
−

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />

<script type = "text/JavaScript">


function Hello() {
alert("Hello, World");
}
</script>
</head>

<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>

</html>

This will produce the following result, where you can try to click on the given button −

OK

Note − To learn about how JavaScript works, kindly check a separate tutorial available at javascript
https://www.tutorialspoint.com/html/html_header.htm 5/6
2/4/2020 HTML - Header - Tutorialspoint

https://www.tutorialspoint.com/html/html_header.htm 6/6
2/4/2020 HTML - Layouts - Tutorialspoint

HTML - Layouts

A webpage layout is very important to give better look to your website. It takes considerable time to
design a website's layout with great look and feel.
Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with
responsive and dynamic websites but you can create a good layout using simple HTML tables or division
tags in combination with other formatting tags. This chapter will give you few examples on how to create a
simple but working layout for your webpage using pure HTML and its attributes.

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 −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Layout using Tables</title>
</head>

<body>
<table width = "100%" border = "0">

<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>

<td bgcolor = "#eee" width = "100" height = "200">


Technical and Managerial Tutorials

https://www.tutorialspoint.com/html/html_layouts.htm 1/5
2/4/2020 HTML - Layouts - Tutorialspoint

</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>

</table>
</body>

</html>

This will produce the following result −

This is Web Page Main title


Main Menu Technical and Managerial Tutorials
HTML
PHP
PERL...

Copyright © 2007 Tutorialspoint.com

Multiple Columns Layout - Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in
middle column and you can use left column to use menu and right column can be used to put
advertisement or some other stuff. This layout will be very similar to what we have at our website
tutorialspoint.com.

Example

Here is an example to create three column layout −

Live Demo
<!DOCTYPE html>
<html>
https://www.tutorialspoint.com/html/html_layouts.htm 2/5
2/4/2020 HTML - Layouts - Tutorialspoint

<head>
<title>Three Column HTML Layout</title>
</head>

<body>
<table width = "100%" border = "0">

<tr valign = "top">


<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>

<td bgcolor = "#b5dcb3" height = "200" width = "60%">


Technical and Managerial Tutorials
</td>

<td bgcolor = "#aaa" width = "20%">


<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>

<table>
</body>

</html>

This will produce the following result −

Main Menu Technical and Managerial Tutorials Right Menu


HTML HTML
PHP PHP
PERL... PERL...

HTML Layouts - Using DIV, SPAN


https://www.tutorialspoint.com/html/html_layouts.htm 3/5
2/4/2020 HTML - Layouts - Tutorialspoint

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.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>

<body>
<div style = "width:100%">

<div style = "background-color:#b5dcb3; width:100%">


<h1>This is Web Page Main title</h1>
</div>

<div style = "background-color:#aaa; height:200px; width:100px; float:left;">


<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>

<div style = "background-color:#eee; height:200px; width:350px; float:left;" >


<p>Technical and Managerial Tutorials</p>
</div>

<div style = "background-color:#aaa; height:200px; width:100px; float:right;">


<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>

<div style = "background-color:#b5dcb3; clear:both">


<center>
Copyright © 2007 Tutorialspoint.com
</center>

https://www.tutorialspoint.com/html/html_layouts.htm 4/5
2/4/2020 HTML - Layouts - Tutorialspoint

</div>

</div>
</body>

</html>

This will produce the following result −

This is Web Page Main title


Main Menu Right Menu
HTML Technical and Managerial Tutorials HTML
PHP PHP
PERL... PERL...

Copyright © 2007 Tutorialspoint.com

You can create better layout using DIV, SPAN along with CSS. For more information on CSS, please refer
to CSS Tutorial.

https://www.tutorialspoint.com/html/html_layouts.htm 5/5
2/4/2020 HTML - Backgrounds - Tutorialspoint

HTML - Backgrounds

By default, your webpage background is white in color. You may not like it, but no worries. HTML provides
you following two good ways to decorate your webpage background.
HTML Background with Colors
HTML Background with Images

Now let's see both the approaches one by one using appropriate examples.

Html Background with Colors


The bgcolor attribute is used to control the background of an HTML element, specifically page body and
table backgrounds.

Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.

Following is the syntax to use bgcolor attribute with any HTML tag.

<tagname bgcolor = "color_value"...>

This color_value can be given in any of the following formats −

<!-- Format 1 - Use color name -->


<table bgcolor = "lime" >

<!-- Format 2 - Use hex value -->


<table bgcolor = "#f1f1f1" >

<!-- Format 3 - Use color value in RGB terms -->


<table bgcolor = "rgb(0,0,120)" >

Example

Here are the examples to set background of an HTML tag −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Background Colors</title>
https://www.tutorialspoint.com/html/html_backgrounds.htm 1/5
2/4/2020 HTML - Backgrounds - Tutorialspoint

</head>

<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>

<!-- Format 2 - Use hex value -->


<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>

<!-- Format 3 - Use color value in RGB terms -->


<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

This background is yellow


This background is sky blue
This background is green

Html Background with Images

The background attribute can also be used to control the background of an HTML element, specifically
page body and table backgrounds. You can specify an image to set background of your HTML page or
table.

Note − The background attribute deprecated in HTML5. Do not use this attribute.

https://www.tutorialspoint.com/html/html_backgrounds.htm 2/5
2/4/2020 HTML - Backgrounds - Tutorialspoint

Following is the syntax to use background attribute with any HTML tag.

Note − The background attribute is deprecated and it is recommended to use Style Sheet for
background setting.

<tagname background = "Image URL"...>

The most frequently used image formats are JPEG, GIF and PNG images.

Example

Here are the examples to set background images of a table.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Background Images</title>
</head>

<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>

</html>

This will produce the following result −

This background is filled up with HTML image.

Patterned & Transparent Backgrounds

https://www.tutorialspoint.com/html/html_backgrounds.htm 3/5
2/4/2020 HTML - Backgrounds - Tutorialspoint

You might have seen many pattern or transparent backgrounds on various websites. This simply can be
achieved by using patterned image or transparent image in the background.

It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest
dimensions possible even as small as 1x1 to avoid slow loading.

Example

Here are the examples to set background pattern of a table −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Background Images</title>
</head>

<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>

<!-- Another example on table background using pattern -->


<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_backgrounds.htm 4/5
2/4/2020 HTML - Backgrounds - Tutorialspoint

This background is filled up with a pattern image.

This background is filled up with a pattern image.

https://www.tutorialspoint.com/html/html_backgrounds.htm 5/5
2/4/2020 HTML - Colors - Tutorialspoint

HTML - Colors

Colors are very important to give a good look and feel to your website. You can specify colors on page
level using <body> tag or you can set colors for individual tags using bgcolor attribute.

The <body> tag has following attributes which can be used to set different colors −
bgcolor − sets a color for the background of the page.

text − sets a color for the body text.


alink − sets a color for active links or selected links.

link − sets a color for linked text.

vlink − sets a color for visited links − that is, for linked text that you have already clicked on.

HTML Color Coding Methods

There are following three different methods to set colors in your web page −

Color names − You can specify color names directly like green, blue or red.

Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the
color.

Color decimal or percentage values − This value is specified using the rgb( ) property.

Now we will see these coloring schemes one by one.

HTML Colors - Color Names

You can specify direct a color name to set text or background color. W3C has listed 16 basic color names
that will validate with an HTML validator but there are over 200 different color names supported by major
browsers.

Note − Check a complete list of HTML Color Name.

W3C Standard 16 Colors

Here is the list of W3C Standard 16 Colors names and it is recommended to use them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

https://www.tutorialspoint.com/html/html_colors.htm 1/7
2/4/2020 HTML - Colors - Tutorialspoint

Example

Here are the examples to set background of an HTML tag by color name −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "blue" bgcolor = "green">


<p>Use different color names for for body and table and see the result.</p>

<table bgcolor = "black">


<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

</html>

HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next
two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or
MS Paint.

Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list of few colors using
hexadecimal notation.

https://www.tutorialspoint.com/html/html_colors.htm 2/7
2/4/2020 HTML - Colors - Tutorialspoint

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example

Here are the examples to set background of an HTML tag by color code in hexadecimal −

Live Demo

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">


<p>Use different color hexa for for body and table and see the result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

</html>

HTML Colors - RGB Values

https://www.tutorialspoint.com/html/html_colors.htm 3/7
2/4/2020 HTML - Colors - Tutorialspoint

This color value is specified using the rgb( ) property. This property takes three values, one each for red,
green, and blue. The value can be an integer between 0 and 255 or a percentage.

Note − All the browsers does not support rgb() property of color so it is recommended not to use it.

Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Example

Here are the examples to set background of an HTML tag by color code using rgb() values −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by RGB code</title>
</head>

<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">


<p>Use different color code for for body and table and see the result.</p>

<table bgcolor = "rgb(0,0,0)">


<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.
background
</td>
</tr>
https://www.tutorialspoint.com/html/html_colors.htm 4/7
2/4/2020 HTML - Colors - Tutorialspoint

</table>
</body>

</html>

Browser Safe Colors

Here is the list of 216 colors which are supposed to be safest and computer independent colors. These
colors very from hexa code 000000 to FFFFFF and they will be supported by all the computers having
256 color palette.

https://www.tutorialspoint.com/html/html_colors.htm 5/7
2/4/2020 HTML - Colors - Tutorialspoint

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

https://www.tutorialspoint.com/html/html_colors.htm 6/7
2/4/2020 HTML - Colors - Tutorialspoint

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

https://www.tutorialspoint.com/html/html_colors.htm 7/7
2/4/2020 HTML - Fonts - Tutorialspoint

HTML - Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability.
Font face and color depends entirely on the computer and browser that is being used to view your page
but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a
<basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any
of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will
remain changed until you close with the </font> tag. You can change one or all of the font attributes within
one <font> tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future
version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate
your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to
7(largest). The default size of a font is 3.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Size</title>
</head>

<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

</html>

https://www.tutorialspoint.com/html/html_fonts.htm 1/6
2/4/2020 HTML - Fonts - Tutorialspoint

This will produce the following result −

Font size = "1"


Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"

Relative Font Size


You can specify how many sizes larger or how many sizes smaller than the preset font size should be.
You can specify it like <font size = "+n"> or <font size = "−n">

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Relative Font Size</title>
</head>

<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_fonts.htm 2/6
2/4/2020 HTML - Fonts - Tutorialspoint

Font size = "-1"


Font size = "+1"
Font size = "+2"
Font size = "+3"
Font size = "+4"
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the
font installed, they will not be able to see it. Instead user will see the default font face applicable to the
user's computer.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_fonts.htm 3/6
2/4/2020 HTML - Fonts - Tutorialspoint

Times New Roman


Verdana
Comic Sans MS
WildWest
Bedrock

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is
possible to specify two or more font face alternatives by listing the font face names, separated by a
comma.

<font face = "arial,helvetica">


<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

When your page is loaded, their browser will display the first font face available. If none of the given fonts
are installed, then it will display the default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts .

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either
the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes .

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Color</title>
</head>

<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>

</html>

https://www.tutorialspoint.com/html/html_fonts.htm 4/6
2/4/2020 HTML - Fonts - Tutorialspoint

This will produce the following result −

This text is in pink


This text is red

The <basefont> Element


The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the
document that are not otherwise contained within a <font> tag. You can use the <font> elements to
override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative font setting by
giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>

<p><font size = "+2" color = "darkgray">


This is darkgray text with two sizes larger
</font>
</p>

<p><font face = "courier" size = "-1" color = "#000000">


It is a courier font, a size smaller and black in color.
</font>
</p>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_fonts.htm 5/6
2/4/2020 HTML - Fonts - Tutorialspoint

This is the page's default font.

Example of the <basefont> Element


This is darkgray text with two sizes larger
It is a courier font, a size smaller and black in color.

https://www.tutorialspoint.com/html/html_fonts.htm 6/6

You might also like