Introduction to HTML – Part 2
HTML (Hyper Text Markup Language) is the core of designing websites. Part two of this introduction covers the Hyperlinks, Pictures and Lists.
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.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Hyperlinks
HTML uses a concept called hyperlinks to link one HTML page to another. The code for these is straight forward:
|
1 |
<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.
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:
|
1 |
<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:
|
1 2 3 4 5 |
<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.