Sunday 8 September 2013

HTML Heading Tags

Headings are defined through <h1> to <h6> tags. <h1> represents the largest heading. <h6> represents the smallest heading.
HTML automatically adds an extra blank line after each heading.

Example

<html>
<body>
<h1>This is a heading for h1</h1>
<h2>This is a heading for h2</h2>
<h3>This is a heading for h3</h3>
<h4>This is a heading for h4</h4>
<h5>This is a heading for h5</h5>
<h6>This is a heading for h6</h6>
</body>
</html>

Output

This is a heading for h1

This is a heading for h2

This is a heading for h3

This is a heading for h4

This is a heading for h5

This is a heading for h6

Free xml sitemap generator

Form Fieldset

HTML Form Fieldset

1.The HTML fieldset tag is used for grouping related form elements.

2.The fieldset tag draws a box around the related elements.

3.The <legend> tag defines a caption for the <fieldset> element.

4.By using the fieldset tag and the legend tag, it is very easy to understand for your users.

Example: 1

<form >
      <fieldset>
         <legend>First and Last Name</legend>
         <p>First Name: <input type="text" name="fname"></p>
         <p>Last Name: <input type="text" name="lname"></p>
         <p><input type="submit" name="submit" value="Save Data"></p>
      </fieldset>
</form>

Output

First and Last Name

First Name:

Last Name:

Example: 2

<form>
<fieldset>
<legend>Subscription info</legend>
    <label for="name"> First Name:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail"> Last Name:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for=" submit"> Save Data</label>
    <input type="submit" name="submit" id="submit" />
</fieldset>
</form>

Output

Subscription info First Name:
Last Name:
Save Data

Form Input Element Textarea Code

HTML Form Input Element Textarea Code

<textarea> </textarea> indicates a form field where the user can enter large amounts of text.
Theoretically the user can type unlimited amounts of text into the textarea field. In reality the browser sets the limit no more than 32 K.

Textarea has the following attributes:
name — name of this form field. The name of the variable to be sent to the CGI application.
rows — how many rows.
cols — how many characters wide.
wrap — how to wrap the text. Default is off. You should set wrap to “virtual” or “physical” so that the text wraps in the browser display as the surfer types.
readonly — don't let the user change the contents of the field.
disabled — don't let the user do anything with this field. disabled can be used to disable the element.
tabindex — tab order. tabindex can be used to specify where the element appears in the tab order of the page.
onChange —Script to run when the user has changed the textarea.
onKeyPress — Script to run when a key is pressed.
language — scripting language.
accesskey —can be used to associate a keyboard shortcut to the element.

HTML textarea attributes: name,rows and cols

Example: 1

Output

Form Input Element Submit Button

HTML Form Input Element Submit Button

1.<input type="submit"> creates a submit button for sending web page back to the web server.

2.Every set of Form tags requires a submit button.

3.A submit button is used to send form data to a server.

4.The data is sent to the page specified in the form's action attribute.
When a visitor clicks a submit button, the form is sent to the address specified in the action setting of the <form> tag.

Password boxes use the following attributes

type—submit button.
name—the name of the variable to be sent to the CGI application.
submit—A submit button is used to send form data to a server.

Example: 1

Output

If you type some characters in the text field above,
and click the "Submit" button, the browser will send
your input to a page called " http://aspell.org ".

Form Input Element Password Field

HTML Form Input Element Password Field

1.Password field is used to allow users to entry password.

2.The characters in a Password field are shown as asterisks or bullets instead of characters in a password field.

3.<input type="password" /> defines a Password field.

Password boxes use the following attributes

type—password
size—determines the size of the password in characters.
maxsize—determines the maximum number of characters that the field will accept.
name—the name of the variable to be sent to the CGI application.
value—will display its contents as the default value.

Example: 1

Output

To change the size of text width input box, add another attribute called size.

Example: 2

Output

If you want to limit the amount of characters put in the text box, need another attribute called maxlength.

Example: 3

Output

Form Input Element Text Fields

HTML Form Input Element Text Fields

1.<input type="text" /> defines a one-line input field that a user can enter text into.

2.The input element is used to store user information.

3.An input element can be of type text field, checkbox, password, radio button, submit button, and more.

4.All input controls are represented with the <input> element.
type attribute indicates the type of control you want.

5.The <input type="text"> tag is a text box, while <input type="submit"> creates a submit button for sending web page back to the web server.

6.Used to provide input fields for text, phone numbers, dates, etc.

7.The default width of a text field is 20 characters.

Textboxes use the following attributes

type—text,checkbox, password, radio button, submit button, and more.
size—determines the size of the textbox in characters. Default = 20 characters.
maxsize—determines the maximum number of characters that the field will accept.
name—the name of the variable to be sent to the CGI application.
value—will display its contents as the default value.
submit—A submit button is used to send form data to a server.

Example: 1

Output

To change the size of text input box, add another attribute called size.

Example: 2

If you want to limit the amount of characters put in the text box, need another attribute called maxlength.

Example: 3

Output

The user can only enter 5 characters.

If you want to populate the box with some text, you need value attribute.

Example: 4

Output

Form Tutorial

HTML Form Tutorial

Introduction to Form

1.HTML forms are used to pass data to a server.

2.The form element has no formatting attributes.

3.To create an HTML form, use the <form> </form> tags.

4.The rest of the forms elements must be inserted in between the form tags.

5.A form contains input tag, text tag, textarea tag,label tag, fieldset tag, legend tag, select list tag, optgroup tag, checkboxes tag, radio-buttons tag, submit button tag and more.

Tag Description

<form> —Defines an HTML form for user input
<input /> —Defines an input control
<textarea> —Defines a multi-line text input control
<label> —Defines a label for an input element
<fieldset> —Defines a border around elements in a form
<legend> —Defines a caption for a fieldset element
<select> —Defines a select list (drop-down list)
<optgroup> —Defines a group of related options in a select list
<option> —Defines an option in a select list
<button> —Defines a push button

Iframe Tutorial

HTML Iframe Tutorial

iframe element stands for inline frame.
iframe element uses as a target frame for a Link.
iframe element is used to display a web page within a web page.
The target attribute of a link must refer to the name attribute of the iframe.

Syntax:
<iframe>...</iframe>
<iframe src="URL" width="px" height="px"></iframe>

Attributes:
src="(URL of initial iframe content)"
name="(name of frame, required for targeting)"
longdesc="(link to long description)"
width=(frame width)
height=(frame height)
align=[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use comma)
frameborder=[ 1 | 0 ] (frame border, default is 1)
marginwidth=(margin width, in pixels)
marginheight=(margin height, in pixels)
scrolling=[ yes | no | auto ] (ability to scroll)

src attribute provides the location of the frame content, typically an HTML document.
The URL points to the location of the separate page.
The height and width attributes are used to specify the height and width of the iframe.

The frameborder attribute specifies whether or not to display a border around the iframe. The default value is 1 results a border.
The value "0" removes or suppresses the border.

The scrolling attribute specifies whether or not to display a scrollbars around the iframe.
The default value is auto results scrollbars only when necessary.
The value yes provides scrollbars at all times, and the value no removes or suppresses the scrollbars.

Email Link

HTML Email Link

If you want to allow visitors send mail from your web site to you, you can use mailto keyword.

Example

</head>
<body>

Output

Send Mail

Hyperlinks href

HTML Hyperlinks href

1.A hyperlink (or link) is a word, group of words, or Image.
The "Link text" doesn't have to be text. It can be an image or any other HTML element.
2.Hyperlink links are defined with the <a> tag.
3.Creating a text hyperlink use <a> </a> tag.
4.Text between <a> and </a> is link text which allow to user to click on it to go to destination page.
5.When you click on the hyperlink, you will jump to a specified document or a new section within the current document.
6.href indicates the URL being linked to. href makes the anchor into a link.
7.If you set the target attribute to "_blank", the link will open in a new browser window.
The target attribute specifies where to open the linked document.

The <a> tag can be used in two ways:
1.To create a hyperlink to another document, by using the href attribute
2.To create a bookmark inside a document, by using the name attribute
Syntax:
<a href="url">Link text</a>
url=> Uniform Resource Locator
The href attribute specifies the destination of a link.

Example: 1

<a href="http://www.aspell.org">Click here to visit Aspell</a>

</body>
</html>

Output

Click here to visit Aspell

It is possible to use an image instead of text as link. To do this, replace link text between <a> and </a> with an <IMG> tag.

Example: 2

</head>
<body>

</body>
</html>

Output

If you click "Next" button, you will redirect to Aspell.org web site.

To link to open a page in a new window use the target="_blank" in the <a href> tag.

<a href="http://www.aspell.org" target="_blank">Go to Aspell </a>

Note: The link address is specified in the href attribute.

Nested List

HTML Nested List

Creating sub menu, we need nested list.

Example: 1

Nested Unordered List

<li>HTML</li>
<li>List
<ul type="circle">
<li>Unorder List</li>
<li> Order List </li>
<li> Definition List </li>
</ul>
</li>

<li>Last list item</li

Output

HTML

List

Unorder List
Order List
Definition List

Last list item

Example: 2

Nested Ordered List

<li>HTML</li>

<li>List
<ol type="a">
<li>Unorder List</li>
<li> Order List </li>
<li> Definition List </li>
</ol>
</li>
<li>Last list item</li>

Output

HTML

List

Unorder List
Order List
Definition List

Last list item

Definition List

HTML Definition List

To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.
The <dl> tag stands for a definition list.
The <dt> tag stands for a definition term.
The <dd> tag stands for a definition description.
The <dl> tag is used in conjunction with <dt>.

<dt> tag, definition term, followed by a <dd> tag which is a definition description.
There doesn't have to be one <dt> followed by one <dd>, there can be any number of either.
One word meaning various different terms, there might me several <dd>, i.e.definition description.

Example

<h1>Some Networking Term</h1>
<dl>
<dt>HSRP</dt>
<dd>Hot Standby Router Protocol.</dd>
<dt>WCCP</dt>
<dd>Web Cache Communication Protocol.</dd>

<dt>VMPS</dt>
<dd>VLAN Management Policy Server.</dd>
<dd>VLAN Membership Policy Server</dd>
<dt>MPLS</dt>
<dd>Multi-Protocol Label Switching </dd>
<dt>SSTP</dt>
<dd>Secure Socket Tunneling Protocol</dd>
<dt>CDMA</dt>
<dd>Code Division Multiple Access</dd>
<dt>GPRS</dt>
<dd>General Packet Radio Service</dd>
<dt>IPsec</dt>
<dd>Internet Protocol Security </dd>
<dt>LDAP</dt>
<dd>Lightweight Directory Access Protocol </dd>
<dt>IMAP</dt>
<dd>Internet message access protocol </dd>
</dl>

Output

Ordered List

HTML Ordered List

An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items are marked with numbers.

Example: 1

</head>
<body>

<ol >
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

There are five types of numbers in ordered list:
a)Numeric
b)Lower Alpha
c)Upper Alpha
d)Lower Roman
e)Upper Roman

Type	Numbering Style
1	Numeric	1, 2, 3,
a	Alphabetic Lower	a, b, c,
A	Alphabetic Upper	A, B, C,
i	Roman Lower	i, ii, iii,
I	Roman Upper	I, II, III,

a)Numeric

Example: 2

</head>
<body>

<ol type="1">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

b)Lower Alpha

Example: 3

</head>
<body>

<ol type="a">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

c)Upper Alpha

Example: 4

</head>
<body>

<ol type="A">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

d)Lower Roman

Example: 5

</head>
<body>

<ol type="i">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

e)Upper Roman

Example: 6

</head>
<body>

<ol type="I">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

Special case

It is needed to change the starting number.For example,in situation where list number is separated by image or text.

Example: 7

</head>
<body>

<ol type="i">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ol>

<p>Number start with four </p>

<ol type="i" START="4">
<li>perl</li>
</ol>

</body>
</html>

Output

Home
PHP
HTML

Number start with four

perl

Unordered List

HTML Unordered List

Items in unordered list(ul) start with a list mark such as a bullet. i.e. The list items are marked with bullets
Browsers will automatically change the list mark.
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.

Example: 1

Output

Home
HTML
PHP

There are three types of bullets in unordered list:
a)Disc (default)
b)Circle
c)Square

a)Disc (default):

Example: 2

Output

Home
HTML
PHP

b)Circle

Example: 3

</head>
<body>

<ul type="circle">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ul>

</body>
</html>

Output

Home
PHP
HTML

c)Square

Example: 4

</head>
<body>

<ul type="square">
<li>Home </li>
<li>PHP </li>
<li>HTML </li>
</ul>

</body>
</html>

Output

Home
PHP
HTML

List Style Type

HTML List Style Type

There are four kinds of list.
1. Unordered list(ul)
2. Ordered list(ol)
3. Definition list(dl)
4. Nest List
<Ll> tag stands for "list item".

HTML List Tags

Tag Description
<ol> — Defines an ordered list
<ul> — Defines an unordered list
<li> — Defines a list item
<dl> — Defines a definition list
<dt> — Defines an item in a definition list
<dd> — Defines a description of an item in a definition list

Tool Tip

HTML Tool Tip

Tool tip is a popup menu box appears when anybody hover on any link. The title attribute is used for creating tool tip.

Example: 1

</head>
<body>

<a href="http://www.aspell.org/" > Awesome Web Tutorials </a>

</body>
</html>

Output

Awesome Web Tutorials

If you put mouse on the hyperlink, there is no change. But if we add title attribute, tool tip will appear.

Example: 2

</head>
<body>

<a href="http://www.aspell.org/" title="Awesome Web Tutorials"> Awesome Web Tutorials </a>

</body>
</html>

Output

Awesome Web Tutorials

Table Caption

HTML Table Caption

1.A Table caption allows to specify a line of text that will appear centered above or below the table.

2.The <caption> tag acts like a title for the table.

3.The <caption> tag must be the first element in the <table> tag.

4.By default, the table caption is center-aligned above a table.

5.The <caption> tag has one attribute ALIGN that can be either TOP (above the table) or BOTTOM (below the table).

Example: 1

<html>
<head>
</head>
<body>
<table border="1">
<caption>Menu Description</caption>
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</body>
</html>

Output

Menu Description
Home	HTML	PHP
Java Script	Subnet	Contact

Example: 2 Align="top" attribute

<html>
<head>
</head>
<body>
<table border="1">
<caption align="top">Top Caption Example</caption>
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</body>
</html>

Output

Top Caption Example
Home	HTML	PHP
Java Script	Subnet	Contact

Example: 2 Align="bottom" attribute

<html>
<head>
</head>
<body>
<table border="1">
<caption align="bottom">Bottom Caption Example</caption>
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</body>
</html>

Output

Bottom Caption Example
Home	HTML	PHP
Java Script	Subnet	Contact

Table Cellpadding

HTML Table Cellpadding

Cellpadding attribute is used to add space around the inner content of table cells(in th and td elements).
Cellpadding attribute places spacing around data within each cell.

Syntax:
<table cellpadding="pixels">

Table without cellpadding:

Example: 1

<html>
    <body>
        <table border="1" >
            <tr>
                <th colspan="2">Student</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Roll</th>
            </tr>
            <tr>
                <td>Alex</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Susie</td>
                <td>11</td>
            </tr>
        </table>
    </body>
</html>

Output

Student
Name	Roll
Alex	10
Susie	11

Table with cellpadding:

Example: 2

<html>
   <body>
        <table border="1" cellpadding="5">
            <tr>
                <th colspan="2">Student</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Roll</th>
            </tr>
            <tr>
                <td>Alex</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Susie</td>
                <td>11</td>
            </tr>
        </table>
    </body>
</html>

Output

Student
Name	Roll
Alex	10
Susie	11

Table Colspan

HTML Table Colspan

Colspan defines the number of columns spanned by an individual column definition.
Colspan to ensure that each row is equivalent to the number of cells that would ordinary appear in the row.
Colspan spans columns that is specified.

Syntax
<ElementName colspan="value">..............</ElementName>

Example: 1

    </head>
    <body>
        <table border="1">
            <tr>
                <th colspan="2">Student</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Roll</th>
            </tr>

            <tr>
                <td>Alex</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Susie</td>
                <td>11</td>
            </tr>
        </table>
    </body>
</html>

Output

Student
Name	Roll
Alex	10
Susie	11

Note:The table basically consists of two columns. "Student" data spans two columns. Also, table header "Name" and "Roll" are bold and centered and corresponding data are plain text.

Example: 2

<html>
  <body>
    <h4>Cell that spans two columns:</h4>
      <table border="1">
       <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
       </tr>
     <tr>
         <td>Harry</td>
         <td>555 77 854</td>
         <td>555 77 855</td>
   </tr>
    </table>
    </body>
</html>

Output

Cell that spans two columns:

Name	Telephone
Harry	555 77 854	555 77 855

Example: 3

<html>
  <body>
    <h4>Cell that spans two rows:</h4>
      <table border="1">
       <tr>
        <th>First Name:</th>
           <td>Harry</td>
       </tr>
       <tr>
        <th rowspan="2">Telephone:</th>
          <td>555 77 854</td>
       </tr>
       <tr>
        <td>555 77 855</td>
       </tr>
     </table>
</body>
</html>

Output

Cell that spans two rows:

First Name:	Harry
Telephone:	555 77 854
Telephone:	555 77 855

Table Header

HTML Table Header

1.Header information in a table are defined with the <th> tag.

2.<th> tag stands for table header.

3.Table data can also be represented by the th element which results the contents centered and bold texts.

Example

<th>Table header:1</th>
<th>Table header:2</th>
<th>Table header:3</th>

</tr>

<tr>
<td>Data for header:1</td>
<td>Data for header:2</td>
<td>Data for header:3</td>
</tr>

<tr>
<td>Data for header:1</td>
<td>Data for header:2</td>
<td>Data for header:3</td>
</tr>
</table>

</body>
</html>

Output

Table header:1	Table header:2	Table header:3
Data for header:1	Data for header:2	Data for header:3
Data for header:1	Data for header:2	Data for header:3

Note: First row is the table header now. Contents of table header are bold and centered.

Table Border

HTML Table Border

1.Tables are defined with the <table> tag.
Each table starts with a <table> tag.

2.Table consists of rows and columns.
A table is divided into rows (with the <tr> tag) and
each row is divided into data cells (with the <td> tag).

3.A <td> tag can contain text,links, images, lists, forms, other tables, etc.

4.<tr> tag stands for table row.
Each table row with a <tr> tag.

5.<td> tag stands for table data and and holds the content of a data cell.
Each table data starts with a <td> tag.

6.<th> tag stands for table header.

7.Attributes and attribute values are case-insensitive.

HTML Table without border

Example: 1

<table>
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>

</body>
</html>

Output

Home	HTML	PHP
Java Script	Subnet	Contact

Note: If you do not specify a border attribute, the table
will be displayed without borders. When browse this code, there will be not seen any table, but two lines of code. In fact table is there but you cannot see it. Hidden tables hold graphic images and text in their places in these pages.

Table with border
To display a table with borders, specify the border attribute.

Example: 2

<table border="1">
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>

</body>
</html>

Output

Home	HTML	PHP
Java Script	Subnet	Contact

Note: We add attribute border ="1". Border is 1 pixel thick and easier to see whole table’s rows and columns.

Example: 3

<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>

<h4>With a thick border:</h4>
<table border="4">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With a very thick border:</h4>
<table border="10">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
</body>
</html>

Output

With a normal border:

First	Row
Second	Row

With a thick border:

First	Row
Second	Row

With a very thick border:

First	Row
Second	Row

Table Attribute List

HTML Table Attribute List

1.border=pixels (border width)

2.width=length (table width)

3.align=[ left | center | right]

4.bgcolor=color

5.cellspacing= length (spacing between cells)

6.cellpadding= length (spacing within cells)

7.summary=text

Image Resize

HTML Image Resize

If the image is very large, set height attribute to shrink actual image. But, it takes extra time or bandwidth to download the image, because actual big image will load and then shrink. So, it is good idea that resize big image through image editor like Photoshop.

Example: 1

Output

If you want to resize the image, like height or width, you need to specify only height attribute.

Example: 2

Output

Here “height=100” indicates 100 pixels.

Image

HTML Image Link Code

Syntax:
<img src="url" alt="some_text"/>
1.In HTML, images are defined with the <img> tag.
In order to add an image to web page, you need to specify the image location with <img> tag. Also you have to specify the extension of image name, like jpg, gif, jpeg, png.
The browser displays the image where the <img> tag occurs in the document. If an image tag is put between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
2.To display an image on a page, it needs to use the src attribute. Src stands for "source".
The URL points to the location where the image is stored. An image named "image1.gif", located in the "images" directory on "www.aspell.org" has the URL: http:// www.aspell.org /images/image1.gif.
3.The alt attribute specifies an alternate text for an image, if the image cannot be displayed. It also helps in SEO.
The text of the alt attribute should be meaningful for SEO.

Example: 1

Output

I have inserted 2 animated gif file here.

Add an image as a link to a web page.

Example: 2

Output

Space Between Text

HTML Space between Text

Browser does not allow more than one space between two words even if anyone have entered a hundred spaces between text in html code. If it need to enter more than one blank character between two words, then write " " in the text.
In html a new line counts as one space.

Example

<html>
<head>
<title>Space between text</title>
</head>
<body>

Here I have inserted 5       extra spaces.

</body>
</html>

Output

Here I have inserted 5 extra spaces.

HTML Font Size

We can change the size of the text through the headline tag<h1>.
If we use <h1> tag, all the text will be changed and there will be a paragraph breaks before and after the text.
So if we need to change portion of the text then we can not use <h1> tag ,instead we can use font size tag.
To change font size text, <font size=n>...,</font>
n is font size. Font size is a number between 1 and 7. Default font size is 3.

Example: 1

Output

Font size of this text is 1
Font size of this text is 2
Font size of this text is 3
Font size of this text is 4
Font size of this text is 5
Font size of this text is 6
Font size of this text is 7

Example: 2

<html>
<head>
<title>Font Size</title>
</head>
<body>
Frustration and anxiety indicates <font size=5> our distance from God. </font>
Whenever I feel anxious I will turn to prayer. I will bring myself closer to God.
</body>
</html>

Output

Frustration and anxiety indicates our distance from God. Whenever I feel anxious I will turn to prayer. I will bring myself closer to God.

Font color

HTML Font color

Format of color number is RRGGBB.
Each color is a combination of three main colors: Red,Green and Blue.
In color format ,RR represents for red ,GG is for green and BB is for blue
component. Colors are described in hexadecimal (hex) code.Hex codes always start with a # sign.
Two digit hexadecimal number can be anything between 00 to FF i.e.
0 to 255 in decimal format.
We can change text color by changing color number.

Example: 1

<html>
<head>
<title>Font Color</title>
</head>
<body>
<font color="#ff0000">This text is red color.</font><br>
<font color="#00ff00">This text is green color.</font><br>
<font color="#0000ff">This text is blue color.</font><br>
</body>
</html>

Output

This text is red color.
This text is green color.
This text is blue color.

Background Color

HTML Background Color

Attributes never stand alone. Instead, they always appear inside a body tag. So bgcolor and text attributes are placed in <body> tag.

Example: 1

<html>
<head>
<title>Page with Back Color</title>
</head>
<body bgcolor="#00ff00">
The color of the Page is green and text is default color(black).
</body>
</html>

Output

Example: 2

<html>
<head>
<title>Color Page</title>
</head>
<body bgcolor="#00ff00" text="#ff0000">
The color of the Page is green and text is red.
></body>
</html>

Output

Blockquote

HTML Blockquote Element

1.The blockquote element represents "Paragraph quotation" or “block quotation of text” .
2.The blockquote element defines a block quotation.
3.Browser will render blockquote element in an appropriate way, for example by slightly indenting the text, or by italicizing it.
4.The blockquote element typically forces white space both before and after the quotation.

blockquote align Attributes:
align ="center" (center alignment)
align ="left" (left alignment, this is default)
align ="right" (right alignment)
align ="justify" (left-right justification)

Example

<html>
<head>
<title>blockquote</title>
</head>
<body>
<p>
Frustration and anxiety indicates our distance from God.<br/> Whenever I feel anxious I will turn to prayer. I will bring myself closer to God.
</p>

<blockquote>
Frustration and anxiety indicates our distance from God. <br/>Whenever I feel anxious I will turn to prayer. I will bring myself closer to God.
</blockquote>

</body>
</html>

Output

Notice that the difference between Paragraph and Blockquote.

Adscend

Sunday 8 September 2013

This is a heading for h1

This is a heading for h2

This is a heading for h4

This is a heading for h6

Cell that spans two columns:

Cell that spans two rows:

With a normal border:

With a thick border:

With a very thick border: