Putting it all together


Congratulations on getting this far. Hopefully HTML is now as a clear as a bell!! Now it is time to put all together. Below is the some HTML for a website that is based upon a HTML table. Copy and paste it into your text editor, save the document as a .html document, and open it up with your web browser to see what happens.


<html>

<body>

<table align="center" border=1 cellspacing=2 cellpadding=10 width=85% >

<tr>

<td colspan=2 bgcolor=#d2b48c><h1 align="center">My First Web Page Using a HTML Table</h1></td>

</tr>

<tr>

<td width=25% bgcolor=#ffe4b5 >

<p>This first column set at 25% width of the table is a great place to put your navigation links.</p>

</td>

<td width=75% bgcolor=#fffaf0>

<p>This right hand column, set at 75% of the table width is where you would put the main information on your website. It has been coloured so that you can see the format of the table easily. You will see that the table heading spans the 2 columns. This was achieved by using the colspan= attribute within the <td> element.</p>

<p>Your knowledge of HTML is crucial to designing a great website. art4arts8 recommended that use you a basic text editor like Notepad2. This was done on purpose so that you get to understand the basic code. However, there are some software packages out there, like Dreamweaver and MS Expression, that do the job for you. These packages are not the be-all-and-end-all and the knowledge gained here will allow you to tweak and amend your website, as required.

</td>

</tr>

<tr>

<td width=25% bgcolor=#ffe4b5 >

<p><a href="http://www.art4arts8.co.uk">art4arts8</a> recommends Firefox as the best Internet browser around. Did you know that Firefox is now more popular that Internet Explorer? You can download it at this link:</p><a href="http://en-gb.www.mozilla.com/en-GB"/><img src="firefox.jpg" alt="firefox" title="Firefox Logo" border="0"/></a>

</td>

<td width=75% bgcolor=#fffaf0>

<p style= "color: #8b0000; font-family: verdana, garamond; font-size:1em"> In the tutorial you learned how to change the colours and sizes of the different fonts. This is a great way to put you touch to the website. Be aware though that some folk kind it difficult to read text on a dark background. </p>

<p style= "color: #2f4f4f; font-family: garamond, verdana, arial; font-size:1.4em"> In order to improve the accessibility of your website, art4arts8 recommendes that you describe fnt sizes either in terms of percentage or em (emphasis). You also learned how to make text <b>bold</b>, <i>italicised</i> or <u>underlined</u>. </p>

</td>

</tr>

<tr>

<td colspan=2 bgcolor=#d2b48c><p align="right">This is a cool place to put some more links</p></td>

</tr>

</table>

</body>

</html>


See the Example.




>>Next - HTML Summary>>



Summary of HTML Tips so far


Use small letters throughout your HTML code

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.

Use percentage or the em method to define font sizes.

Use <br /> tags to create whitespace.

Use <td></td> tags to create a blank table cell.

Use &nbsp; to create a horizontal space within text.

Use target="_blank" on a link for it to open up in a new window.

Use id= to place a 'marker' to a heading.

Use href=mailto: to create a link to an email address.

Use <img src="image" /> to insert an image.

Align an image to the top, middle or bottom.

Float an image to avoid white space.

Use width= and height= to adjust the size of images.

Use alt= to provide text in case the image does not load.

Improve accessibility of your website by using title= for images.

Use border="0" to remove the link border from an image.


Summary of HTML Tags


<a>

Anchor Tag for creating links.

<a href=

Reference to other website or web page

align=

Used to align images top, middle or bottom relative to text.

<b>

Bold tag.

<body>

Designates the body of the web page. Must come after the </html> tag.

border=

Used to define the border width around an image or in a table.

<br />

Break tag.

<caption>

Adds a caption to a Table.

<h1>

Heading tag number from 1 to 6, with h1 having the largest font.

height=

Used within the <img> tag to adjust the height of images.

<html>

Designates the document as a web page.

<i>

Italics tag.

id=

Refers to section within HTML document

<img src>

Inserts an image.

mailto:

used to create a link to an email address.

&nbsp;

Non-breaking space

<p>

Paragraph tag.

style=

Used within the <p> tag to define font type, colour and size.

title=

Used within the <img> tag to improve accessibility of your website.

<table>

Adds a Table to the web page.

<td>

Table data in the table cell.

<th>

Table heading.

<tr>

Defines a Table row.

<u>

Underline tag.

width=

Used within the <img> tag to adjust the width of images.