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.
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.
Landing Pages & Email
PowerPoint & Keynote
Sans Serif, Script & More
Icons, Vectors & More
Shopify, Tumblr & More
Logos, Print & Mockups
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>
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:
<img src="pictures/flower.jpg" alt="Flower" />
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.
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:
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
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.