The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section will discuss Hyperlinks, Pictures and Lists.

Hyperlinks

HTML uses a concept called hyperlinks to link one HTML page to another. The code for these is straight forward:

<a href="page2.html">Go to Page 2</a>

The page2.html part is the file which you would like to link to. The Go to Page 2 part is the text which the visitor will click on to follow the link. Generally, a website has a navigation bar – close to the top of the page – which is made up of a collection of hyperlinks to allow visitors to navigate through the website. Some more tutorials cover this in our navigation category.

Images and Pictures

Pretty pictures are a vital part of a website, and graphical content can draw in users and provide extra information. The tag to add a picture is very straight forward, but you must remember two important things. You need to note which folder you put the picture and link to it correctly, and all image filenames are case sensitive. To link to a file called flower.jpg in a directory (folder) called pictures, you would use the following:

<img src="pictures/flower.jpg" alt="Flower" />

The src part shows the folder and filename of the image, and the alt part gives a description of the picture for people who aren’t able to view images in their web browser.

Lists

HTML can use two different types of lists. These are bulleted, or ‘unordered’ lists and numbered, or ‘ordered’ lists. These is a different piece of code to display each one, but in essence they are identical. One will result in a bullet being displayed next to each item, the other a number going up by one each time. The code you would use is:

<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

The <ul> part states this is an unordered list, and the <li> part denotes each item in the list. You can probably guess which part you would change if you want a numbered, ordered list – you simply use <ol> in place of <ul>. Lists are very easy to use in HTML, and can also be combined with CSS to create navigation menus which look great. The final part of this tutorial will look at using tables and forms in HTML, for displaying tabular data or taking input from the visitor by means of a form.

Introduction to HTML Part 3 – Tables and Forms