Logo

Hyper Text Markup Language.

HTML stand for Hyper Text Markup Tanguage. This language is developed by W3C & WHATWG. This language is tag based and each tag has its open and close tag. It describe the structure of web page.

Installation

There is no specific software to install & execute html tags. All browser are fully supported to render html tags. What you need is just create a new file with extension .html and open in any text editor like notepad, notepad++, wordpad, dreamweaver etc.

Create HTML File

Create a new file new_file with extension .html as new_file.html Open a file in any editor & write anything and save it. Let's suppose we write "Hello Sani!" in it.

new_file.html
Hello Sani!

To check output. Open file in any browser like googlechrom, firefox or internet explorer. It'll show following output.

Hello Sani!

You are done. You have started writing your websites. Let's start developing websites using TAGS.

TAG

A tag is a keyword or term assigned to a piece of information. This kind of metadata helps describe an item and allows it to be found again by browsing or searching

Tag is start with < then write the tag name and then > sign.

e.g: <TAGENAME>

To close tag we use sign just before the > sign.

e.g: </TAGENAME>

Text is being written in between the tags.

e.g: <TAGENAME>SOME TEXT WILL GOES HERE....</TAGENAME>

Some tags does not have their closing tags. So we close them like this.

e.g: <TAGENAME />

DOCTYPE

Veryfirst tag we write in html page is DOCTYPE.This tag tell the browser that document being rendered is of what type. We are going to work in HTML so doctype tell the browser that HTML document is being render. It works as hidden tag.

new_file.html

<!DOCTYPE html>

Here is a list of some dooctype we have used.

HTML 5 <!DOCTYPE html>
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

You do not have to worry about these doctypes. Just just latest one.

HTML

HTML tell you browser that how you must format and display the content. It works as hidden tag.

new_file.html

<!DOCTYPE html>
<html>
Hello Sani!
</html>

Output:

favicon
- x
Hello Sani!

Each tag might have their attributes. Let's define attribe for html tag. which defined HTML standards to browser.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
Hello Sani!
</html>

HEAD

head tag is use to include scripting, style sheets, meta for SEO and for many other purpose. We'll discuss it later. It works as hidden tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
Hello Sani!
</head>
</html>

Output:

favicon
- x
Hello Sani!

HEAD TAGS

There are some tages used inside head tags.

TITLE

TITLE tag is use to show title text on web browser along with favicon.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>My page title</title>
</head>
</html>


Output:

favicon My page title
- x
Hello Sani!

There are alots of tags used inside head tag. Here is a list a few of them.

  • Title
  • Meta
  • Script
  • Style
  • link

How to use them?

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>


BODY TAGS

BODY

All html tags which are not acting as hidden will goes under body tag. Let's write Hello Sani! in proper way.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Hello Sani!
</body>


Output

favicon My page title
- x
Hello Sani!

There are two types of tags.

  • Singular Tags
  • Paired Tags

SINGULAR TAGS

A tag which does not have its closing tag is called singular tags or stand alone tag. e.g Or

BR (Break Row)

Sometimes you need to start specific text from new line. To do that we use BR tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

HR (Horizontal Row)

Sometimes you need to put horizontal line on web page. To do this we use HR tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <hr /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

IMG (IMAGE)

Sometimes you need to show an image on web page. To do this we use IMG tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<img src='http://go4smart.com/assets/images/book.png' />
</body>


Output

favicon My page title
- x

PAIRED TAGS

A tag which have paire of opening and closing tag is called paired tags. e.g

P (Paragraph)

P stand for paragraph. P tag specificies that this is a paragraph text. Let's write some dummy text inside paragraph tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</body>


Output

favicon My page title
- x

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Here you can see that every new text starting in new P tag considered as paragraph tag.

<!-- -->

Sometimes you need to pass comments on any section and you do not want to show it on web page. To do so, we put these comments in comment tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<!-- This section is for dummy entry -->Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

BIG

If you want to show your font a bit bigger. You may use BIG tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <BIG>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </BIG> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

CENTER

If you want to show your text in center of the page. You may use CENTER tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <CENTER>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </CENTER> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

B / STRONG

If you want to bold your font. You may use B or EM tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <b>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </b> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only <strong>five centuries</strong>, but also the leap into electronic typesetting, remaining essentially unchanged.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

A (ANCHOR)

Sometimes you need to put hyper link on web page. To do this we use A tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<a href='http://www.google.com' >google.com</a>
</body>


Output

favicon My page title
- x

FONT (ANCHOR)

If you want to play with fonts, its family & its size, You'll use FONT tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Tesing <font face='Times New Roman' size='12' > font family and size</font> today
</body>


Output

favicon My page title
- x
Testing font family and size today

H1 / H2 / H3 /H4 / H5 / H6 (HEADING)

If you want to play with fonts size, You'll use heading tags like H1 / H2 / H3 /H4 / H5 / H6.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<h2> Font size 1</h1> <h2> Font size 2</h3> <h3> Font size 3</h4> <h4> Font size 4</h5> <h5> Font size 5</h6> <h6> Font size 6</h7>
</body>


Output

favicon My page title
- x

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5
Font size 6

MARQUEE

If you want to have moving text on web page. You'll use marquee tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<marquee>My moving text</marquee>
</body>


Output

favicon My page title
- x
My moving text

DIV

If you want to divide your text into different blocks on web page. You'll use div tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

IFRAME

If you want to divide your text into different blocks on web page. You'll use div tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<iframe src='https://www.google.com/' allowtransparency='true' frameborder='0' scrolling='yes' width='100%' height='300'></iframe>
</body>


Output

favicon My page title
- x

PRE

If you want to preformatting text on web page. You'll use PRE tag. It does't let the browsers to eliminate white-spaces.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<pre> Lee Jullie Hyne John Nathan Sani Donald Mark Trump </pre>
</body>


Output

favicon My page title
- x

Lee 		Jullie		Hyne
John		Nathan		Sani
Donald		Mark		Trump

DL , DT , DD

Sometimes we have a topic to describe with some definition title and their detail. To do that we use DL, DT, DD tags.

We'll starts with DD tag. which will describe that description is going to start here. We'll use TL inside DL to tell that title is going to start. leading to DD tag which will tell that detail is going to start.

  • DL (Description List)
    • DT (Description Title/Term)
    • DD (Description Detail)
new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<dl>
   <dt>Election</dt>
   <dd>A stable subatomic particle with a charge of negative electricity, found in all atoms and acting as the primary carrier of electricity in solids.</dd>
   <dt>Neutron</dt>
   <dd>A subatomic particle of about the same mass as a proton but without an electric charge, present in all atomic nuclei except those of ordinary hydrogen.</dd>
</dl>


</body>


Output

favicon My page title
- x
Election
A stable subatomic particle with a charge of negative electricity, found in all atoms and acting as the primary carrier of electricity in solids.
Neutron
A subatomic particle of about the same mass as a proton but without an electric charge, present in all atomic nuclei except those of ordinary hydrogen.

I / EM

If you want to have italic text on web page. You'll use I or EM tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<i>Italic text using i tag</i> and <em>Italic text using em tag</em>
</body>


Output

favicon My page title
- x
Italic text using i tag and Italic text using i tag

SUP

If you want to super script your text on web page. You'll use SUP tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
a<sup>2</sup>+b<sup>2</sup> = 2ab
</body>


Output

favicon My page title
- x
a2+b2 = 2ab

SUB

If you want to sub script your text on web page. You'll use SUB tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
H<sup>2</sup>O = Water
</body>


Output

favicon My page title
- x
H2O = Water

STRIKE

If you want to show cut-off /deleted text on web page. You'll use STRIKE tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
My normal text and <strike>My deleted text</strike>
</body>


Output

favicon My page title
- x
My normal text and My deleted text

BLOCKQUOTE (Block of Quotation : Long)

Sometimes as have to quote some text in discussed subject. To do that we use BLOCKQUOTE tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Q (Quotation : Short)

Q stand for quote. It is similar to blockquote but it deals with short quotations.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <q>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</q> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>


Output

favicon My page title
- x
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

TABLE

If you want to show text tabular form on web page. You'll use Table tag.

It starts with with table tag. It have three sections. Heading, Content and Footer.

  • thead
  • tbody
  • tfooter

For heading text we use head tag and for content text we use body tag and for footer content we use footer tag. For each row we use tr tag. For each content we use th tag for heading and td tag for content.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<table>
<thead>
<tr>
<th>Sr #</th> <th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td>Math</td>
</tr>
<tr>
<td>1</td> <td>Biology</td>
</tr>
<tr>
<td>1</td> <td>Chemistry</td>
</tr>
</tbody>
<tfooter>
<tr>
<th>Sr #</th> <th>Subject</th>
</tr>
</tfooter>
</table>

</body>


Output

favicon My page title
- x
Sr # Subject
1 Math
1 Biology
1 Chemistry
Sr # Subject

FORM

If you want to post some data. You'll use FORM tag.

new_file.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My page title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript" ></script>
   <link rel="stylesheet" HREF="PATH TO CSS FILE" />
   <script> </script>
</head>
<body>
<form></form>
</body>


Output

favicon My page title
- x