Web Designing Tutorials: HTML

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). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

This Code	Would Display
<table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>	row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

This Code

Would Display

row 1, cell 1

row 1, cell 2

and....

This Code

Would Display

row 1, cell 1

row 1, cell 2

Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will only be writing what goes between the <body> tags. Type in the following:

<tr>

<td>Tables can be used to layout information</td>

</tr>

</table>

Save your page as mytable1.html and view it in your browser.

Headings in a Table

Headings in a table are defined with the <th> tag.

This code

Would Display

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr>

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together

This Code

Would Display

some text	some text
some text	some text

Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table columns
<col>	Defines the attribute values for one or more columns in a table

The Image Tag and the Src Attribute

The <img> tag is empty, which means that it contains attributes only and it 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 on your page. The syntax of defining an image:

This Code	Would Display
<img src="graphics/chef.gif">

Not only does the source attribute specify what image to use, but where the image is located. The above image, graphics/chef.gif, means that the browser will look for the image name chef.gif in a graphics folder in the same folder as the html document itself.

	src="chef.gif" means that the image is in the same folder as the html document calling for it.
	src="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
	src="../chef.gif" means that the image is in one folder up from the html document that called for it.
	src="../../chef.gif" means that the image is two folders up from the html document that called for it.
	src="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.
	src="../../../other/images/chef.gif" means this goes multiple layers up.

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an alternate text for an image. The value of the alt attribute is author-defined text:

The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the alt attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers or use screen readers.

Image Dimensions

When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a space for the image, then loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

Open the file mypage2.html in your text editor and add code highlighted in bold:

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1 align="center">My First Web page</h1>

<p>Welcome to my first webpage. I am writing this page using a text editor and plain old html.</p>

<p>By learning html, I'll be able to create web pages like a pro....<br>

which I am of course.</p>

</body>

</html>

Save your page as mypage5.html and view it in your browser.

Web Designing Tutorials

Thursday, June 13, 2013

Tables

HTML Images