HTML Formatting

Headings

    HTML provides six levels of headings. Usage of these headings helps us in ensuring a uniform look and feel for the document. We can format our pages with different levels of header tags. Various levels of headings are H1, H2 .... H6.

<H1> ... </H1>:
This is the first level of heading offered by HTML. This heading is most important when compared to other levels and this heading is the highest - level of headings. This tag inserts a line break before and after the text enclosed with in these two tags.
 
<H2> ... </H2>:
This is the second level of heading provided by HTML.

<H3> ... </H3>:
This is the third level of heading provided by HTML.

<H4> ... </H4>:
This is the forth level of heading provided by HTML.

<H5> ... </H5>:
This is the fifth level of heading provided by HTML.

<H6> ... </H6>:
This is the sixth level of heading provided by HTML.
 
Note: H1 tag is mainly used for main headings and mostly it is used once in a page. H2 to H6 can be used as many times as required.
    
    A line space automatically is inserted before and after a heading (that is, an entire line is skipped between a heading and any text before and after it).

Code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output of the code:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold

       Bold tag in html is used to highlight marked portion of the text in bold. Bold tag differentiates the marked area from the rest.

    Bold tag have one starting <b> tag and one ending </b> tag.
 
Code:
<b>This text is bold.</b>
Output of the code:
This text is bold.

Italics

    We can display text in italic format with an html page by using <i> tag. Inside a webpage the area we want to be italic should be within one starting and one ending italic tag.
    
    Italic text has different uses at different places. Within the body of the page we can mark some special type of text in italic to say they are different than normal text. In this site we used italic text to declare a variable or a function of the script. 

Code:
<i>This text is italicised.</i>
Output of the code: This text is italicised.

Underline

    This tag will underlines the text inside the tag.

Code:
<u>Underlined Text</u>
Output of the code:
Underlined Text

Line Breaks

    Line breaks in html pages can be given by using <br> tag.It does not have any end tags and it can be used at any place within the body tags of the page.

Code:
<p>Here is a...<br />line break.</p>
Output of the code:
Here is a
line break.

Horizontal Rule

    To separate sections in a document, you can insert a horizontal rule tag <hr>. 

Code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Output of the code:
Here's a horizontal rule...
...that was a horizontal rule :)

Lists

There are two types of lists that you can make in HTML. 

1. Dotted 
2. Numbered

    The <li></li> tags are used to denote a list item within either the ordered or unordered list.

 
Unordered (Unnumbered) List

    Unordered lists are also referred to as Bulleted Lists. Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with <li> tag. The list is ended with the ending tag </ul>

Code:

<ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

Output of the code:
    * List item 1
    * List item 2
    * List item 3

Ordered (numbered) List

    Ordered lists are also referred to as Numbered Lists. Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).

Code:  

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Output of the code:
   1. List item 1
   2. List item 2
   3. List item 3

  Fonts

This tag is used to change the format of the text in the web page. This tag has two important attributes:

1. face: The type of font used for the text. Common ones include "Time New Roman", "Verdana", and "Helvetica." 
2. size: This indicates the size of the text. Size can be absolute or relative.
3. color: This indicates the color of the text. Either the color name or the six-character color code may be used to specify color.  

Code:

<font size="+5" face="Verdana" color=AA5088>Illustrates the attributes of the font tag.</font>

Output of the code:

This illustrates the attributes of the font tag. 

Paragraph 

    The <p> tag is used to insert a new paragraph. Paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag. The HTML paragraph element should not contain tables and other block elements. Using this tag places a blank line above and below the text of the paragraph. 

Code:

<p>The contents of the paragraph.</p>

 

Strong 

An alternative to Bold tag. 

Code:

<strong>Text in Bold</strong>

Output of the code:

Text in Bold

Strike Through 

Used for striking through the text. 

Code:

<strike>This is struck through text</strike>

Output of the code:

This is struck through text

BASEFONT

    Used for setting the size of the text on the entire page. The sizes range from 1 to 7, with 7 being the biggest. The default is size 3.

Code:
<basefont face="cursive, serif" color="#ff9900" size="4"/> 

 

SMALL 

    
    Makes text smaller, usually by one size below the default, or the BASEFONT, if specified: 

Code:

<small>Text which is in small font</small>

Output of the code:

Text which is small font

BIG 

    Makes text bigger, usually by one size above the default, or the BASEFONT, if specified:
 
Code:
<big>Text which is in big font</big>
Output of the code:
Text which is in big font

CENTER

    You can center text, images and headings with the center tag.

Code:
<center>This is a centered sentence</center>
Output of the code:
This is a centered sentence 

SUPERSCRIPT

    Superscript text appears half a character above the baseline.


Code:
2³
Output of the code:
2³

SUBSCRIPT 

Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas and mathematical equations.

Code:
H₂O 
Output of the code:
H₂O. 

BLOCKQUOTE 

    

    The blockquote tag is used to highlight a directly quoted section of text. Typically, blockquote will cause the block of text to be indented. 

Code:
<blockquote>
<p>Here is a long quotation</p>
</blockquote>
Output:

Here is a long quotation

    The HTML blockquote element may contain other block elements such as headers, paragraphs, preformat blocks and tables. 

HTML Anchor Tag

The anchor tag defines either a link or an anchor in a document.

To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.

If you are just linking to a page in the same directory as your current page, you don't need the domain, just the page name. If you have a page called contactme.html, you can use the code <a href="what-is-aspnet.html"> ASP.Net</a>.

HTML Abbreviation

<ABBREV> - New HTML tag available with HTML3.0 which allows you to abbreviate words on your web page automatically.


Example:
<ABBREV>Contained words will be abbreviated.</ABBREV>

<ACRONYM> - Like ABBREV, also a new command with HTML 3.0 that displays the text acronym when mouse is highlighted over text.

Example:
<ACRONYM TITLE="Free computer help and support">Computer Hope</ACRONYM>

Preview:

Desibindaas

HTML Link

<A> -HTML tag that which allows aspects of your web page to be anchored, such as a link <A HREF= "Http://www.computerhope.com">

Example:
<a href="http://www.desibindaas.com/">Desibindaas.com<a>

Preview:
Desibindaas.com

HTML Elements

Elements

HTML element is complete sequence of a start tag, optional parameters called attributes, optional embedded HTML content, and an end tag.

Example:<h1>This is a heading element</h1>

Tags that don't have an end tag are the element.

Example: <img src="images/sky.jpg" />

Elements can also have other elements within them.

Example:

<p>Here is a <a href="http://www.google.com">link</a> </p>

HTML Attributes

Attributes

An attribute is used to define the characteristics of an element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a valve.

• Name is the property you want to set. For example, the element in the example carries an attribute whose name is face, which you can use to indicate which typeface you want the text to appear in.
• The value is what you want the value of the property to be. The first example was supposed to use the Arial typeface, so the value of the face attribute is Arial.

The value of the attribute should be put in double quotation marks, and is separated from the name by the equals sign.

Example: <font face = "arial" color = "#cc0000">

HTML First Page

How to Create an HTML Page
1. Open Notepad, go to Start-->Programs-->Accesories-->Notepad
2. HTML always begin and end with the HTML tag .
3. Add the head, title and body tags
4. Save the html file in a folder
a. Go to File-->Save As
b. Navigate to the folder
c. Change the "Save as type" to All Files
d. Name the file with the extension .htm

View HTML Page in a browser
1. Open the Browser
2. Go to File-->Open and then click Browse
3. Find your HTML file inside your folder on your disk and click Open.