HTML

HTML Introductions
History of HTML
In 1980, The Famous Physicist Tim Berners Lee founded HTML. In 1989, Berners-Lee wrote a
memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote
the browser and server software in late 1990.
Introduction of HTML
HTML Stands for hypertext markup language. It is the standardized system for tagging text files
to achieve font, colour, graphic and hyperlink effects on www that means world wide web pages.
It defines the page layout and elements within the pages.
In other words, HTML is an authoring language which is used to create documents on the world
wide web. It defines the structured and layout of a web page by using tags and attributes.
How it Works
What do you think, how does HTML works? Here we will explain. HTML is used to describe
the visual appearance to displayed the document by the use of internet browser.
These documents are saved in text format and can be easily viewed or edited on operating system
that is able to connect to the internet.
Versions of HTML
Version Released year
HTML Published in 1991
HTML 2.O Published in 1995
HTML 3.2 Published in 1997
HTML 4.0.1 Published in 1999
XHTML Published in 2000
HTML 5 Published in 2014
Next »
HTML Tags
Container Tag
Container tag : These tags are in which we define the text or other tag elements.
These actually consist two tags, a start tag and an end tag, which enclose the text.
Eg i
<html>
</html>
Try it Yourself
In the above Example.
1 container tag is defined.here we can define all the HTML tags inside the given tag.
Eg ii
<html>
<body>
</body>
</html>
Try it Yourself
In the above Example

=> We putting inside the <html>tag.
=> Body tag give all description of the document's layout and structure.
HTML Empty(Non-Container/Blank) tag

Non- container tag/empty tag : These are standalone text do not contain text. Or any other tag
element.
Eg i
<br/>
<hr/>
<input type="text"/>
Try it Yourself
In the above example => The two tags are non-container/empty tags.<br/> line break tag and
<hr/> is used to break the line and display line across the screen. =>These do not hold any text or
any other tags.
HTML Element Property

Most of the HTML element(tag) have some attributes(properties)
Eg i
<h1 align="center" title="Html heading tag is used to define web page

heading">Heading goes here</h1>
Try it Yourself
Output
About HTML Elements

In the above example
=> Body tag and heading tag define inside the HTML tag.
=> The bgcolor attribute is used to set the background color of the body. and Background
attribute is used to set the image on background of a document.
heading tag is used to display headings on web pages. attribute Align with (value="center") are
for alignment of heading on web page.
« Previous Next »
HTML Headings
HTML Headings tag is used to define headings at your web page.
There are 6 types of HTML Headings that you can use at web page
<h1> to <h6>
<h1> Tag defines important headings and <h6> defines the least important heading.
For Example
<h1> Heading 1 </h1>
Try it Yourself
Output
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
In the above example we shows six different level of heading <h1> to <h6>
HTML Heading tag automatically break the lines if you want to put extra space then use
either <br/> or <hr/> Tag
For Example
<h1> Heading 1 </h1><br/>

<h2> Heading 2 </h2><hr/>
Try it Yourself
i) In the first line we declare heading tag <h1> with <br/> tag, br tag is used to break the line.
ii)In the second statement, we use <hr> tag which displays the line across the heading 2.
iii)In third statement <h3> simply used to display sub-heading.
Total Downloads : 95
Login / Register To Download
« Previous Next »
HTML paragraph
This tag is used to write the paragraph at web page.
It is just like a paragraph written in a book.It is always declared in body section.
syntax
<p> Paragraph… </p>

<p> another Paragraph… </p>
Try it Yourself
<p> is the starting of a paragraph </p> is end of paragraph.
Content written in middle of <p> and </p> is paragraph which should be displayed on the web
page in a single line.
align Property(attribute) of paragraph element
align attribute of
tag is used to align the paragraph on the web page.

it have three possible value: left,right,center
<p align="left"> This is first Paragraph… </p>
<p align="center"> This is 2nd Paragraph… </p>
<p align="right"> This is 3rd Paragraph… </p>
Try it Yourself
Output
This is first Paragraph…
This is 2nd Paragraph…
This is 3rd Paragraph…
Title property(attribute) of paragraph element
Title attribute of
tag is used to show hint box when mouse is hover on paragraph.
<p title="Title will display when mouse is over on the paragraph" > This is first
Paragraph… </p>
Try it Yourself
Output
This is first Paragraph…
« Previous Next »
HTML Hyperlink
HTML Link tag is used to connect a web-page to another web-page.
Anchor <a> tag is used to connect a web-page to each other. Using anchor tag we connect either
a global web page like google, yahoo, Facebook etc or we our won local web page.
If we want to connect with google wep_page in that case we have put completer url of google
like "http://www.goolge.com"
but for our local wep_page only need to give wepageName.extension inside href="" attribute.
Eg
<a href="http://www.google.com" target="_self" > Click here to open google </a >
Try it Yourself
Output
Click here to open google</a >
Hyperlink is declare in an anchor tag <a> ..attribute href of anchor tag with (value=URL) specify
the address of URL.
Another Property target with(value="_self") is open the url at the same page.
A statement is also type in middle of <a> tag to recognize the url name like..google,yahoo.
Open the Google web page in new tab of your browser.
<a href="url" target="_blank">
Click here to open google in new tab
</a>
Try it Yourself
Output
Click here to open google in new tab</a >
if we set the target="_blank".. then url will open in a new tab.
Title Property of anchor tag(hyperlink)
Use title to show hint, title will display when You put mouse on the text.
<a href="http://www.google.com" title="To link with google you need to click

here"
target="_blank">
Click here to open google in new tab
</a>
Try it Yourself
Output
Click here to open google in new tab</a >
How To Make an Image Hyperlink
To make an image hyperlink you have to use both anchor tag and image tag.
First create a hyperlink using anchor tag, now put the image tag in between anchor tag.
like..
<a href="url">
<img src="mypic.jpg" width="100px" height="100px"/>
</a>
Try it Yourself
« Previous Next »
HTML Marquee Tag

HTML marquee tag is used to move the text/image from right to left, left to right, up to down
and down to up. An HTML marquee is a scrolling element of text shown either horizontally
across or vertically down your web-page. This is developed by using HTML marquees tag.
Eg
<marquee > welcome to the world of PhpTponit </marquee>
Try it Yourself
Output
welcome to the world of PhpTponit
in the above example
* A message enclose within marquee tag...
direction of marquee scroll by default is left direction..given message moving to left.
Change moving direction use direction property.
There are four types of marquee direction : up,down,left,right.
<marquee direction="right">
welcome to the world of Phptpoint
</marquee>
Try it Yourself
Output
*in the above example..
we can change the direction of marquee use direction property
if we set the property(direction="right"). text scroll towards right of a web page.
Move your text/image in alternative direction use behavior property.
<marquee direction="right" behavior="alternate">

</marquee>
Try it Yourself
Output
*in the above example..
If set the value of behavior is alternate with direction right..in marquee tag in first statement
then display message direction reverse when it reaches the edge of cell
Stop moving text/image when mouse is over at text/image .
<marquee onmouseover="stop()">
</marquee>
Try it Yourself
Output
*in the above example
marquee have another property(onmouseover)with value("stop()").
It stops the marquee text/message, when the mouse cursor over at the message/text.
Start moving text/image when mouse is out from text/image .
<marquee onmouseover="stop()" onmouseout="start()">
</marquee>
Try it Yourself
Output
We set property,(onmouseover) with(value="start"), (onmouseout) with (value="start") both
together.
Marquee scroll when the mouse cursor is move out.
Maqquee scroll is stop when the mouse cursor is over the text/image.
increase/decrease speed of moving text use scrollamount property
To move at slow motion
<marquee scrollamount="1">
</marquee>
Try it Yourself
Output
Scrollamount property is used to give speed to marquee ,Smaller scrollamount value make scroll
marquee slower
To move at fast motion
<marquee scrollamount="25">
</marquee>
Try it Yourself
Output
Now set the marquee with( scrollamount="25") marquee scroll fast.
as such as we increase or decrease the value of scrollamount, marquee speed becomes vary
« Previous Next »
HTML Quotations
The HTML Quotation elements provides the quoted text in a web page that is different from the
normal text in web page.
HTML <q> Element

The <q> element needs both opening and closing tags. It is used to set a highlighted text inside
the quotation marks.
Let's take an example of <q> Element:
<!DOCTYPE html>
<html>
<body>
<p>wikipedia: <q>Wikipedia is a free online encyclopedia, created and edited by
volunteers around the world and hosted by the Wikimedia Foundation.</q></p>
</body>
</html>
Output:
wikipedia: Wikipedia is a free online encyclopedia, created and edited by
volunteers around the world and hosted by the Wikimedia Foundation.
HTML <blockquote> Element

The <blockquote> element is used to define a text that is taken from another source. Instead of
providing quotation mark, it changes the alignment of text to make it unique. It has also an
opening and closing tag.
Let's take an example of <blockquote> Element:
<!DOCTYPE html>
<html>
<body>
<p>wikipedia: <blockquote> Wikipedia is a free online encyclopedia, created and
edited by volunteers around the world and hosted by the Wikimedia
Foundation.</blockquote></p>
</body>
</html>
Output:
wikipedia:
Wikipedia is a free online encyclopedia, created and edited by volunteers

around the world and hosted by the Wikimedia Foundation.

HTML <cite> Element

It provides an italic/Emphasized text to a title of work.
Let's take an example of <cite> Element:
<!DOCTYPE html>
<html>
<body>
<p><cite>Education</cite> is the passport to the future, for tomorrow belongs to
those who prepare for it today.</p>
</body>
</html>
Output:
Education is the passport to the future, for tomorrow belongs to those who
prepare for it today.
HTML <address> Element

The <address> element is used to define a contact information of a document. It has also an
opening and closing tag.
Let's take an example of <address> Element:

<!DOCTYPE html>
<html>
<body>
<address>
H-73, Sector-63,<br>
Noida(Opposite Electronic City Metro Station)<br> ,India
</address>
</body>
</html>
Output:
H-73, Sector-63,
Noida(Opposite Electronic City Metro Station)
,India
HTML </bdo> Element

The </bdo> element is used to override the current text and it helps to change the direction. It has
also an opening and closing tag.
Let's take an example of </bdo> Element:
<!DOCTYPE html>
<html>
<body>
<p>This is normal text.</p>
<bdo dir="rtl">This text changes direction from right to left</bdo>
</body>
</html>
Output:
This is normal text.
This text changes direction from right to left

« Previous Next »
HTML Iframes
An iframe in HTML is used to display an inline frame. It helps to nested a webpage
within a webpage. It provides scrollbars and borders in which a separate document is
displayed by the browser. The 'iframe' tag is used to embeds another documents within
the current HTML document.
To embed the webpage you need ‘src’ attribute to specify the URL of the new
document.
Syntax: <iframe src="URL"></iframe>
Setting Height and Width in Iframe

To specify the height and width of the iframe you can use height and width attributes.
By default the height and width are specified in pixels.
Let's take an example of height and width of iframe:
<!DOCTYPE html>
<html>
<body>
<h2>Set the height and width of Iframes</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400"></iframe>
</body>
</html>
Output:
Set the height and width of Iframes
Iframe –Removing the border
By default an Iframe consist border around it. To remove the border you need to add
style and use the CSS border property.
Let's take an example of removing the border in Iframe:
<!DOCTYPE html>
<html>
<body>
<h2>Remove the border in Iframes</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400"
style="border:none;"></iframe>
</body>
</html>
Output:
Remove the border in Iframes
Iframe –Target for a link
You can use the iframe as the target frame for a link. The target attribute of the link
must refer to the name attribute of the iframe.
Let's take an example of target link:

<!DOCTYPE html>
<html>
<body>
<h2>Target the link</h2>
<iframe src="https://www.phptpoint.com" height="200" width="400"
style="border:none;"></iframe>
<p><a href="https://www.phptpoint.com" target="iframe_a">phptpoint.com</a></p>
</body>
</html>
Output:
Target the link
phptpoint.com
« Previous Next »
HTML Images
HTML provides you <img> tag to add images to your webpages. Only using texts in website, it
made them appear quite boring and uninteresting. So, <img> tag is used to add images in
webpages. It helps you to improve the designs and appearance of web pages.
<img> tag is also known as empty tag because there is no closing tags. It contains attributes only.
Attributes of HTML <img> tags are:
1. Src- It is necessary attribute, it describes the path/source of the image. It instructs the browser
where to look for the image to display in webpages. May be the image location is on same folder
or another server.
2. Alt- It describes the alternate text for the image. If image can’t be displayed, the value of alt
attributed describe the image in text.
3. Width- You can use width attributes to set the width of the image. But now you can set width by
using CSS.
4. Height- Height attribute is used to set the height of the images, if you want. In this, you can use
CSS to set the height of the image.
Let's take an example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting an image</title>
</head>
<body>
<img src= "https://cdn140.picsart.com/315857494228201.jpg?
type=webp&to=crop&r=256&q=70"
alt="Img">
</body>
</html>
Output:
Setting Height and width of the image: The attributes height and width value are specified in
pixels by default.
Let's take an example of setting the height and width of the image:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src= "https://cdn140.picsart.com/315857494228201.jpg?
type=webp&to=crop&r=256&q=70"
alt="Img" height="300" width="300">
</body>
</html>
Output:
Adding animated Images: you can also add animated image in webpages. But it is necessary to
use the extension of the image .gif.
Let's take an example of adding animated images:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="1.gif"
alt="phptpoint.gif" height="300" width="300">
</body>
</html>
Output:
« Previous
HTML Font Tag

Font tag is used to text specification. Face attribute of <font> tag is used to set the font of the
text. Size attribute is used to specify the size of text. Color attribute of <font> tag is used to
specify the color of text.
Eg of font color property
<font color="green">
welcome user
</font>
Output
welcome user
in the above example we set color value( green) ,the statement (welcome user) written between
the tag will be green because the value of color is green.
Change the font face of the text
<font color="green" face="Calibri">
welcome user
</font>
Output
welcome user
in the above example we set face value("calibri") with color value("green") and output of the text
statement(welcome user) with calibri face.
Change the font size of the text
<font color="green" face="Calibri" size="+2">

welcome user
</font>
Output welcome user

in the above example if we set the size with (value=+2). it will increase the size of text statement.
Maximum font size can set "+7"
« Previous Next »
HTML List
« Previous Next »
HTML Attributes
HTML Attributes are the modifier of the elements and have provide additional information about
an element. It is placed inside the opening tag of the element. Each element and tag can have
attribute. By using attribute you can also set the height and width.
The attributes name and values are always written in Lowercase and are case sensitive.
HTML attributes consist two parameters:
1. Name
2. Value
Syntax:
<element attribute_name="attribute_value">
The src Attribute

src attribute are always written inside <img> tag to display the images in the web page. Src
attributes are used to specify the address of the image inside the double quotes.
Let's take an example of src attribute:
<!Doctype html>
<html>
<head>
<title>Attribute</title>
</head>
<body>
<img src="1.png" alt="img">
</body>
</html>
Output:
The href attribute

href attribute is used to provide hyperlink and the link address which specified that link. It is
used inside the anchor tag <a>.
Let's take an example of href attribute:
<!Doctype html>
<html>
<head>
</head>
<body>
<a href="https://www.phptpoint.com">This is a link</a>
</body>
</html>
Output: This is a link
The alt attribute

The alt attribute is used to display the alternative text, when an Image cannot be displayed in the
web page.
Let's take an example of alt attribute:
<!DOCTYPE html>
<html>
<body>
<img src="1.png" alt="phptpoint" >
</body>
</html>
Output:
The style Attribute

The style attribute is used to styling of an element, like color, background-color, font-size,
border, etc.
Let's take an example of style attribute:
<!DOCTYPE html>
<html>
<body>
<p style="color:blue">This is a paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
« Previous Next »
HTML Table
« Previous Next »
Create HTML Table

HTML Tables is used to preset data in rows and columns format. A Table is the collection of rows and
rows is the collection of columns. <tr> stands for table rows.To add a row in a table table row tags are
used. <TD> is used to put the column inside the row. Syntax
<table>
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
Try it Yourself
HTML Table rows
<tr> tag represents html table rows. Eg
<table>
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
Try it Yourself
HTML Table columns

<td> or <th> tag represents html table columns .<td> means table data and <th> means table head Eg
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>phptpoint@gmail.com</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@gmail.com</td>
</tr>
</table>
Try it Yourself In the above example a table is created have 3 rows and 6 columns where each row
contains 2 column. <tr> tag is used to create a row while <td> or <th> is used to create column. <tr>
comes in between <table> tag while <td> or <th> comes in between <tr>.
How to merge table column

When you want to merge 2 or more then 2 column(cell) , use colspan Property of <td colspan="2"> or
<th colspan="2"> Eg
<table border="1">
<tr>
<th colspan="2"> User Details</th>
</tr>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>phptpoint@gmail.com</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@gmail.com</td>
</tr>
</table>
Try it Yourself
How to merge table rows

When you want to merge 2 or more then 2 rows in a single row , use rowspan Property of <td
rowspan="2"> or <th rowspan="2"> Eg
<table border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Try it Yourself
Nested Table
Nested table means how to use table inside a table. Multiple times you need to use table inside a table.
when you want to use a table inside a table write the syntax of table in between your cell i.e eighter
<td> or <th> .
<html>
<body>
<table border="1" bgcolor="gray" width="200" height="200">
<tr>
<th>
<table align="center" border="1" bgcolor="#F8F8F8" width="100" height="100">
<tr>
<th>Inner Table</th>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
Try it Yourself
« Previous Next »
HTML Form
« Previous Next »
HTML Form with all possible fields

An HTML Form is the collection of different input elements like text fields, password fields, checkboxe,
radio-buttons, submit buttons and many more.
Syntax :
<form method="get" action="output.php">

Enter your name<input type="text"/>
Enter your email<inpt type="email"/>
<input type="submit"/>
</form>
Try it Yourself
Submit
Output Enter your name Enter your email
HTML Forms TextField

HTML Forms TextField is used to take input from users like user's name , father's name etc. Syntax :
Enter your name<input type="text"/>
Try it Yourself
phptpoint
Output
HTML Forms Password Field

HTML Forms Password type is used for input fields that should contain Password in encrypted
format. Syntax :
Enter your Password<input type="password"/>
Try it Yourself
*********
Output
HTML Forms Email Field
HTML Forms email type is used for input fields that should contain an e-mail address Syntax :
Enter your Email <input type="email"/>
Try it Yourself
Output
HTML Forms Number Field

HTML Forms number type is used for input fields that should contain number Syntax :
Enter your Mobile Number <input type="number"/>
Try it Yourself
Output
HTML Forms radio-button Field

HTML Forms radio button type is used for single selection amongst multiple like your gender. Syntax :
select your gender

male <input type="radio" name="g" value="male" checked="checked"/>
female <input type="radio" name="g" value="female"/>
Try it Yourself
Output male female
HTML Forms checkbox Field

HTML Forms checkbox type is used for multiple selection like hobbies. Syntax :
select your hobbies

reading <input type="checkbox" value="reading" />
swimming <input type="checkbox" value="swimming" />
singing <input type="checkbox" value="singing" />
Try it Yourself
Output reading swimming singing
HTML Forms textarea Field

HTML Forms textarea is used to take heavy input like resume or address etc. Syntax :
Enter your Address<textarea></textarea>
Try it Yourself
Output
HTML Forms file Field

HTML Forms file type field is used to upload the document like resume, image etc. Syntax :
Upload your resume <input type="file" />
Try it Yourself
Output
HTML Forms select Field(Combo box)

HTML Forms select field is used to select input from drop down like select your country from drop
down. Syntax :
Select your country

<select>
<option value=""> select your country </option>
<option> india </option>
<option> pakistan </option>
<option> china </option>
</select>
Try it Yourself
Output
HTML Forms submit button

HTML Forms submit button is used to submit your HTML form . Syntax :
<input type="submit" value="Save My Data" />
Try it Yourself
Sa ve My Data
Output
HTML Forms reset button

HTML Forms reset button is used to reset your HTML form's data . Syntax :
<input type="reset" value="reset all Data" />
Try it Yourself
rese t all Da ta
Output
« Previous Next »
Registration Form in HTML 5

Registration form have various types are used intensively on preregistration of website to allow
for user or visitor can create their own profile on your website.
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<form method="" action="">
<table border="1" align="center" width="400" bgcolor="#CCCCCC" >
<caption>Registration form</caption>
<tr>
<th>Enter your first name</th>
<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first
name" placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Enter your last name</th>
<td><input type="text"/></td>
</tr>
<tr>
<th>Enter your password</th>
<td><input type="password"/></td>
</tr>
<tr>
<th>ReEnter your password</th>
</tr>
<tr>
<th>Enter your email</th>
<td><input type="email"/></td>
</tr>
<tr>
<th>Enter your mobile</th>
<td><input type="number"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="8" cols="20"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>
</td>
</tr>
<tr>
<th>Select your hobbies</th>
<td>
hobby1<input type="checkbox" name="x[]" value="h"/>
hobby2<input type="checkbox" name="x[]" value="h2"/>
hobby3<input type="checkbox" name="x[]" value="h3"/>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your
country</option>
<option value="1">India</option>
<option value="2">Pakistan</option>
</select>
</td>
</tr>
<tr>
<th>Upload your pic</th>
<td><input type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Save My Data"/>
<input type="reset" value="Reset Data"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
Try it Yourself
We start our program with html tag. first create table with border=1, align=center. declare twelve
different field . inside first field we define <input type="text"> with property maxlength="10"
and a placeholder, a password is define inside <input> tag with type=password it takes every
input in password form(****). Now create email field inside <input> tag type="email" it takes
string input form. create mobile no with <input> type="number". create an address field : define
inside textarea in which cols=20 and row=8. its generate a address area(multiple lines). Now
generate a gender selection field. input type="radio" radio button is used to select the gender.
from radiobox with value=male or female. Another field to create select the hobbies. checkbox
button is used because it allows multiple selection of values Create another field (Date of birth)
D-O-B. here type="date" define inside <input> it automatically generate a callender. Create field
of dropdown list : start with <select> tag of 2 different option with value=(india, pakistan) are
defined inside <option> tag. At last an upload field is define. using <input> tag with type="file".
it allow you to upload file. Now create two buttons first of type="submit",and second of
type="reset" inside <input> type.now close all tags one by one. output will create a complete
registration form.
« Previous Next »
Login Form in HTML5

Through this tutorial you learn how to create a Login Form using HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="345" border="1" bgcolor="#99CC00">
<tr>
<th height="34">Enter your username</th>
<td><input type="email"/></td>
</tr>
<tr>
<th height="33">Enter your passowrd</th>
</tr>
<tr>
<th height="39" colspan="2"><input type="submit" value="SignIn"/>
<a href="#">SignUp</a></th>
</tr>
</table>
</body>
</html>
Output
Try it Yourself
We begin our program with start of HTML script. body tag embedded inside the <html> tag.
where we create our table. set width attribute of table tag with (value="345"),another attribute
bgcolor is used to set background color. Create a textbox of user name field. first create row
using(<tr>). set table heading(<th>), and a column (<tr>) inside this we create a textbox using
<input> script. we create another textbox of password field within inside <td> tag. create a
submit button using <input type="submit"> tag. merge two column using colspan=2. and signup
declare inside anchor <a> tag to make it link. close body (</body>) tag and HTML (</html>)
tag. and output will become
« Previous Next »
HTML Attributes
HTML Attributes are the modifier of the elements and have provide additional information about
an element. It is placed inside the opening tag of the element. Each element and tag can have
attribute. By using attribute you can also set the height and width.
The attributes name and values are always written in Lowercase and are case sensitive.
HTML attributes consist two parameters:
1. Name
2. Value
Syntax:
<element attribute_name="attribute_value">
The src Attribute
src attribute are always written inside <img> tag to display the images in the web page. Src
attributes are used to specify the address of the image inside the double quotes.
Let's take an example of src attribute:
<!Doctype html>
<html>
<head>
</head>
<body>
<img src="1.png" alt="img">
</body>
</html>
Output:
The href attribute

href attribute is used to provide hyperlink and the link address which specified that link. It is
used inside the anchor tag <a>.
Let's take an example of href attribute:
<!Doctype html>
<html>
<head>
</head>
<body>
<a href="https://www.phptpoint.com">This is a link</a>
</body>
</html>
Output: This is a link
The alt attribute

The alt attribute is used to display the alternative text, when an Image cannot be displayed in the
web page.
Let's take an example of alt attribute:

<!DOCTYPE html>
<html>
<body>
<img src="1.png" alt="phptpoint" >
</body>
</html>
Output:
The style Attribute

The style attribute is used to styling of an element, like color, background-color, font-size,
border, etc.
Let's take an example of style attribute:
<!DOCTYPE html>
<html>
<body>
<p style="color:blue">This is a paragraph.</p>
</body>
</html>
Output:
« Previous Next »
HTML Formatting
HTML Formatting provides different types of text tags for better look and feel without using
CSS.
There are many formatting tags in HTML.
1. <i> - Italic text

2. <em> - Emphasized text
3. <b> - Bold text
4. <strong> - Important text
5. <mark> - Marked text
6. <small> - Small text
7. <ins> - Inserted text
8. <del> - Deleted text
9. <sub> - Subscript text
10. <sup> - Superscript text
HTML text Italic or Emphasized
The HTML text italic and emphasized text both are used to define italic text but the difference is
emphasized tag added semantic importance to make the text italic. Both tags are need an opening
tag and closing tag.
Let's take an example of HTML Italic or Emphasized:
<!DOCTYPE html>
<html>
<body>
<p>Normal text</p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Output:
Normal text
This text is italic.
This text is emphasized.
HTML text bold or strong

The HTML bold and strong text both are used to highlight the text but the difference is strong tag
added semantic importance to make the text strong. Both tags are need an opening tag and
closing tag.
Let's take an example of HTML Text bold or strong:
<!DOCTYPE html>
<html>
<body>
<p>Normal text</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
Output:
Normal text
This text is bold.
This text is strong.

HTML <mark> Element
HTML <mark> element is used to highlight and mark the text. It provides the yellow
background color to the specified text.
Let's take an Example of <mark> element:
<!DOCTYPE html>
<html>
<body>
<p>Welcome to<mark>phptpoint</mark>.</p>
</body>
</html>
Output:
Welcome to phptpoint.
HTML <small> Element

HTML <small> element provides the smaller text. It also needs an opening and closing tag.
Let's take an Example of <small> element:
<!DOCTYPE html>
<html>
<body>
<p>It Provides <small>smaller</small> text</p>
</body>
</html>
Output:
It Provides smaller text.
HTML <ins> Element

HTML <ins> element helps to added/inserted a new text to the page. It also needs an opening tag
and closing tag.
Let's take an Example of <ins> element:
<!DOCTYPE html>
<html>
<body>
<p>My Favorite place is <ins>Noida</ins></p>
</body>
</html>
Output:
My Favorite place is Noida
HTML <del> Element

HTML <del> Element is used to strike through the marking the part as deleted or removed text.
It also needs an opening tag and closing tag.
Let's take an Example of <del> element:
<!DOCTYPE html>
<html>
<body>
<p>My Favorite place is <del>Noida</del> Delhi.</p>
</body>
</html>
Output:
My Favorite place is Noida Delhi.
HTML <sub> or <sup> Element

The <sub> or <sup> element is used to subscript or superscript a text. Subscript provide the
specified text placed at the bottom of the text and Superscript provide the specified text placed at
the top of the text.
Let's take an example of <sub> or <sup> Element:
<!DOCTYPE html>
<html>
<body>
<p>This is Normal Text : X2</p>
<p>This is subscript: X<sub>2</sub></p>
<p>This is superscript:X<sup>2</sup></p>
</body>
</html>
Output:
This is Normal Text : X2
This is subscript: X2
This is superscript: X2
« Previous Next »
HTML Styles
HTML style is used to add the style on Existing Element. It helps to provide a better look to the
web page. You can use style in any HTML tag.
Syntax:<tagname style= "property: value" >
Text Color
By using CSS color property, you can change the color of the text as you want that is displayed
to the web page.
Let's take an example of text color:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">This is a heading</h1>
<p style="color:orange;">This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
Background Color
By using CSS background-color property, you can change the background-color for a HTML
element that is displayed to the web browser.
Let's take an example of Background color:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:green; color:#fff;">PHPTPOINT</h1>
</body>
</html>
Output:
PHPTPOINT
Text Size
You can change the size of the text, by using the property font-size to the specified element.
Let's take an example of text size:
<!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-size:22px;">Text with font-size property. </p>
</body>
</html>
Output:
Normal Text
Text with font-size property.
Fonts
By using the property font-family you can change the font of the specified HTML element that
can be displayed to the web page.
Let's take an Example of Fonts:
<!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-family:CASTELLAR;">Text with font-family property. </p>
</body>
</html>
Output:
Normal Text
Text with font-family property.
Text Alignment
Text-align property helps you to align the text left, right or center. You can Horizontally move
the HTML elements. By default text is displayed to the left.
Let's take an Example of Text Alignment:
<!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="text-align:center;">Text with text-align:center property. </p>
<p style="text-align:right;">Text with text-align:right property. </p>
</body>
</html>
Output:
Normal Text
Text with text-align:center property.
Text with text-align:right property.
« Previous Next »
HTML Tutorial For Beginners
HTML is an abbreviated form of hypertext markup language and it is considered as the most
widely used language used for the website development.
HTML was founded in 1991 and this language was created by Berners-Lee, however, HTML 2.0
was the first known among the users.
A known version was HTML 4.01 and nowadays we are making use of HTML 5 version and that
is an extended version. It was first recognized in 2012.
In this HTML tutorial, we will teach you from the absolute beginning that how to build your
first website, what should be the layout of page, how to add image and text, how to add tables
and headings much more. this is the best HTML tutorial for beginners who want to learn it
step by step in a easy way.
HTML Introduction
HTML stands for Hypertext markup language. HTML is the client-side scripting language i.e,
used to design a static web page.
Here every single word has its own meaning i.e. Hyper means reference link, text means data,
mark-up means predefined, language means something that needs to communicate.
Every web page designed is HTML has an extension ".html or .htm". Editor used to design the
HTML static web page are notepad or notepad++. Every HTML script will be executed in any
web browser.
Why learning HTML is important ?

In the beginning, HTML developed just to define documents structural layout, headings,
paragraphs, list and much more.
However, in the present time, HTML is being used on a large platform and across the globe to
create web pages with the help of tags accessible in HTML language.
Nowadays HTML has turned important for students as well as for professionals which helps in
turning you in to a software engineer. Here is a small description of the benefits of learning
HTML:
Make a website : design a website or you can customize any web template if you have learned
HTML very well.
Work as a professional web designer : if you are looking to be a web designing professional
then it’s important to be skilled in HTML and CSS designing.
Learn web : if you know HTML very well, you are able to optimize your website successfully
and definitely you get good results.
Know other languages : if you have knowledge of basics of HTML then understanding other
technologies like javascript, PHP or Angular become easy to understand.
Benefits associated with HTML

As we have described above, HTML is used to its utmost level over the web and few of these
benefits are mentioned here:
Web Pages Development : HTML is one such language used on the web and you’ll find every
page including HTML tags mention its details in the browser.
Internet Navigation : With the help of HTML tags one person is able to navigate from one page
to another and most widely used in internet navigation.
Responsive UI : nowadays HTML pages work successfully on all the platforms like mobile,
tablets, laptops, PCs, as the language helps in creating a responsive web design.
Offline support : if you have created the HTML pages, no worries, you have an option to access
them offline.
Game development : HTML5 is a wonderful option capable in offering the users a wonderful
experience as it can be used successfully in gaming development also.
Audience
With the help of HTML tutorial, one can create the page and it offers an opportunity for web
designers and developers with the complete understanding of HTML.
The tutorial offers you the complete overview, practical examples and here you get the complete
information begins from basic to practical example.
In this tutorial you get complete mix of details to give a start to HTML that helps you in taking
yourself to a new level of expertise.
Requirements:
Before you head on with this tutorial, it is necessary to have the basic knowledge with Windows
or Linux operating system; you need to aware of the following:
 Must have hands-on experience with notepad, notepad++, or Edit plus, etc.
 Should have knowledge of creating directories, files on your PC.
 Knowledge of navigation to different directories.
 Must know about how to type content and saving process on a PC.
 Knowledge about images in various formats like JPEG, PNG format, etc.
HTML Section
Basically HTML is divided into two sections i.e. Head section and Body section. Head part
contains the title of the page. Body part contains other tags of the web page like title, headings,
image, table,etc. Head section :HTML include pair of tags, and to identify the heading and title
of a document. The tag appear in this section. Body section : The body of HTML contains the
text that will show up on web page.The Body section enclosed within and tags. It gives
document layout and structure.
HTML Tutorial Index

Sr.No. Topics
1 HTML Introduction
2 HTML Tags
3 HTML Headings
4 HTML Paragraph
5 HTML Hyperlink
6 HTML Marquee
7 HTML Font
8 HTML List
9 HTML Table
10 HTML Form
11 HTML Registration Form
12 HTML Login Form
13 HTML Attributes
14 HTML Tutorial PDF
15 HTML Formatting
16 HTML Styles
17 HTML Quotations
18 HTML Iframes
19 HTML Images
Next »

HTML

Uploaded by

Copyright:

Available Formats

You might also like

HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML Introductions

In the above Example

HTML Empty(Non-Container/Blank) tag

HTML Element Property

<h1 align="center" title="Html heading tag is used to define web page

About HTML Elements

<h1> Heading 1 </h1><br/>

In the above example

iii)In third statement <h3> simply used to display sub-heading.

Login / Register To Download

It is just like a paragraph written in a book.It is always declared in body section.

<p> Paragraph… </p>

align Property(attribute) of paragraph element

tag is used to align the paragraph on the web page.

<p align="left"> This is first Paragraph… </p>

<p align="center"> This is 2nd Paragraph… </p>

<p align="right"> This is 3rd Paragraph… </p>

This is 2nd Paragraph…

This is 3rd Paragraph…

Title property(attribute) of paragraph element

tag is used to show hint box when mouse is hover on paragraph.

Open the Google web page in new tab of your browser.

<a href="url" target="_blank">

Click here to open google in new tab

Title Property of anchor tag(hyperlink)

<a href="http://www.google.com" title="To link with google you need to click

Click here to open google in new tab

How To Make an Image Hyperlink

<img src="mypic.jpg" width="100px" height="100px"/>

HTML Marquee Tag

<marquee > welcome to the world of PhpTponit </marquee>

There are four types of marquee direction : up,down,left,right.

welcome to the world of Phptpoint

Move your text/image in alternative direction use behavior property.

<marquee direction="right" behavior="alternate">

Stop moving text/image when mouse is over at text/image .

welcome to the world of PhpTponit

Start moving text/image when mouse is out from text/image .

<marquee onmouseover="stop()" onmouseout="start()">

welcome to the world of PhpTponit

Marquee scroll when the mouse cursor is move out.

increase/decrease speed of moving text use scrollamount property

To move at slow motion

welcome to the world of Phptpoint

welcome to the world of Phptpoint

HTML <q> Element

Let's take an example of <q> Element:

HTML <blockquote> Element

Let's take an example of <blockquote> Element:

Wikipedia is a free online encyclopedia, created and edited by volunteers

HTML <cite> Element

Let's take an example of <cite> Element:

HTML <address> Element

Let's take an example of <address> Element:

HTML </bdo> Element

Let's take an example of </bdo> Element:

This text changes direction from right to left