HTML Guide

Contents

• Headings
• Lists
• Links
• Images
• Tables

Headings

Subhead with background colour attribute

Sub-subhead

Etc... all the way up 2 h6

<p style="font-size:36px> is used for paragraphs, this is also font-size 36, font-family courier.

<b>Types the text in bold. <i>This should be italicized. <small>This should be in small. <b><i>Text in bold and italic(dont overlap tags)
<br /> is the tag for a new line

<hr /> is the tag for a horizontal line, it also adds a line above and below it

Lists

<ul> is short for "unordered list" and inserts bullets for each list item.

<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>

• A list item
• Another list item

<ol> is short for "ordered list" and numbers each list item.

<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>

1. First list item
2. Second list item

Links

Links(hypertext reference, <a>: Stands for anchor) - <a href="http://www.html.net/">Here is a link to HTML.net</a> - Here is a link to HTML.net
Can link to a file or a website
"http://" must always be included in URLs.

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link.Under such circumstances a link from page1.htm to page2.htm could look like this:

Example 1:

  <a href="page2.htm">Click here to go to page 2</a>    

If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:

Example 2:

  <a href="subfolder/page2.htm">Click here to go to page 2</a>    

The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:

Example 3:

  <a href="../page1.htm">A link to page 1</a>    

"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".

You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id and the symbol "#".

Use the id attribute to mark the element to which you want to link. For example:

  <h1 id="heading1">heading 1</h1>    

You can now create a link to that element by using "#" in the link attribute. The "#" tells the browser to stay on the same page. The "#" must be followed by the id of the tag you want to link to. For example:

  <a href="#heading1">Link to heading 1</a>    

To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:

Example 4:

  <a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>    

Would look like this in the browser:

The title attribute is used to type a short description of the link. If you - without clicking - place the cursor over the link, you will see the text "Visit HTML.net and learn HTML" appears.

(Note: An id attribut must start with a letter)

You can also make a link to an e-mail address. It is done in almost the same way as when you link to a document: Example 6: Send an e-mail to nobody at HTML.net

  <a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>

Images

Example 1:

  <img src="david.jpg" alt="David" />    
<a href="http://www.google.co.uk";><img src="chavman2.gif" alt="look its packchav!!!!" /></a>

would look like this in the browser:

i have made this packman picture a link to www.google.co.uk by using the coding shown above. the smaller packman is the same as the first, i just used the height and width attributes to change sthe size of it

All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source").

Some browsers let the text of the "alt" attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture.

Tables

Example 1:

<table>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	</tr>    
	<tr>      
		<td>Cell 3</td>      
		<td>Cell 4</td>    
	</tr>  
	</table>

Will look like this in the browser:

• <table> starts and ends the table. Logical.
• <tr>stands for "table row" and starts and ends horizontal rows. Still logical.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

The two attributes colspan and rowspan are used when you want to create fancy tables.

Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:

Example 1:

<table border="1">    
	<tr>
		<td colspan="3">Cell 1</td>   
  </tr>    
	<tr>      
		<td>Cell 2</td>      
		<td>Cell 3</td>      
		<td>Cell 4</td>    
  </tr>  
</table>    

Will look like this in the browser:

As you might already have guessed, rowspan specifies how many rows a cell should span over:

Example 2:

<table border="1">    
	 <tr>     
		 <td rowspan="3">Cell 1</td>    
	     <td>Cell 2</td>    
	 </tr>   
  <tr>
      <td>Cell 3</td>    
  </tr>    
  <tr>      
      <td>Cell 4</td>    
  </tr>  
</table>    

Will look like this in the browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...