BEST TUTORIAL FOR AtoZ

Saturday, October 20, 2012

Chapter 11

HTML Tables with Headers

Example 10:

<html>

<body>

<h4>Table headers:</h4>

<tr>

<th>First Name</th>

<th>Gender</th>

<th>school</th>

</tr>

<tr>

<td>Stefen</td>

<td>yyyyyyy</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<tr>

<th>First Name:</th>

<td>Stefen</td>

</tr>

<tr>

<th>Gender</th>

</tr>

<tr>

<th>School</th>

<td>yyyyyyy</td>

</tr>

</table>

</body>

</html>

Output is:

Table headers:

First Name	Gender	school
Stefen	Male	yyyyyyy

Vertical headers:

First Name:	Stefen
Gender	Male
School	yyyyyyy

Chapter 10

Table Without Borders

Example :9

<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output is:

This table has no borders:

100	200	300
400	500	600

Friday, October 19, 2012

Chapter 9

How to create tables in an HTML document.

HTML Tables:

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

Example :8

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<tr>

<td>ATOZ4TUTORIALS</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<tr>

<td>TUTORIALS</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<tr>

<td>TUTORIALS</td>

</tr>

<tr>

<td>TUTORIALS</td>

</tr>

</table>

</body>

</html>

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

ATOZ4TUTORIALS

One row and three columns:

ATOZ

TUTORIALS

Two rows and three columns:

ATOZ	4	TUTORIALS
ATOZ	4	TUTORIALS

--------------****************--------------------*************--------------

Example :9

<html>

<body>

<tr>

<td>

<p>This is a paragraph</p>

<p><font color=red>ATOZ4TUTORIALS</font></p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td><font color=red>ATOZ4TUTORIALS</font></td>

</tr>

</table>

</body>

</html>

Output is:

This is a paragraph
ATOZ4TUTORIALS
This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

ATOZ4TUTORIALS

HTML Image

Chapter 8

Example :7

<html>

<body>

<h2>Sandy Land</h2>

</body>

</html>

Output is:

Sandy Land

Thursday, October 18, 2012

Link Tags and Image Tag

Chapter 7

Some HTML elements for your practice try it

HTML head Elements:

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

HTML Link

Chapter 6 Extra Formatting Tags in HTML

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text

"Computer Code" Output Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<q>	Defines an inline (short) quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term

HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

Example :6

<html>

<body>

<a href="http://atoz4tutorials.blogspot.in/" target="_blank">Visit atoz4tutorials.blogspot.in</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>

</html>

Output is:

Visit atoz4tutorials.blogspot.in

Wednesday, October 17, 2012

HTML Formatting Tag

Chapter 5 HTML Formatting Tags

HTML uses tags like <b> , <i> and <u> for formatting output, like bold ,italic,and underline text.

These HTML tags are called formatting tags.

Example :5

<html>
<body>

<p><b>This is bold</b></p>
<p><strong>This is strong</strong></p>
<p><i>This is italic</i></p>
<p><u>This is underline</u></p>
<p><em>This is emphasized</em></p>
<p><code>This is computer output code format</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Output is:

This is bold

This is strong

This is italic

This is underline

This is emphasized

This is computer output code format

This is_subscript and ^superscript

BEST TUTORIAL FOR AtoZ

Saturday, October 20, 2012

HTML Table Tag 3

Chapter 11

Table headers:

Vertical headers:

HTML Table Tag 2

Chapter 10

This table has no borders:

Friday, October 19, 2012

HTML Table Tag

Chapter 9

HTML Tables:

One column:

One row and three columns:

Two rows and three columns:

HTML Image

Chapter 8

Sandy Land

Thursday, October 18, 2012

Link Tags and Image Tag

Chapter 7

HTML head Elements:

HTML Images - The <img> Tag and the Src Attribute

HTML Link

Chapter 6

Extra Formatting Tags in HTML

"Computer Code" Output Tags

HTML Citations, Quotations, and Definition Tags

HTML Link Syntax

Wednesday, October 17, 2012

HTML Formatting Tag

Chapter 5

HTML Formatting Tags