WE'RE WEB DEVELOPERS IN CAPE TOWN, SOUTH AFRICA

From the Blog

Feb
20

HTML lesson 2: Links, images, and lists in html.

Posted by robventer on February 20th, 2012 at 10:33 am

For the next lesson in html, you are going to learn how to make a list, how to make your own link and insert your own image into a page!

FIRST THINGS FIRST

Do you still have your webpage.html? If not you should check out our first html lesson.

WHERE TO PUT YOUR CODE

All of the code in this lesson should be put between the <body> and </body> tags.

HOW TO MAKE A LINK IN HTML

The most important thing when making a link is to have somewhere to link to, so first we will make a copy of our webpage.html, changing the copy’s name to otherpage.html and putting it on the desktop (or in the same folder as webpage.html).
So if I wanted to make a link to our clients page it would look like this: Clients.
Now that you’ve done that you can link from your first webpage to it’s copy, and this is done using the <a> and </a> tags:

<a href=”otherpage.html”>Click here…</a>

href=”” is called an “attribute” of the link. A link can also have other attributes other than href=””, which we’ll get to later. Now, inside these quotations href=””: is where you tell the browser where to find the webpage you want to link to, and the Click here… are the words you want to be displayed in the browser as the link text, and can be anything you like.

HOW TO INSERT AN IMAGE IN HTML

First you need an image, for the example I am going to use a screenshot of one our recent websites. You should always try not to use large images unless they are a necessary part of your website’s appearance, so for the example I will use a smaller version of my chosen image:

Now how can you do it? First thing you need is to have an image, then you need to know where it is in relation to your saved webpage.html file. So for this example I recommend you put the image file on the desktop with your webpage.html file (or in the same folder).

Now you know where your image is you can try to insert it in your webpage, this is done using the <img> tag. This is what you want your <img> tag to look like:

<img src=”myimage.jpg” />

src=”myimage.jpg” is an attribute of the <img> tag. Inside the quotation marks src=”” is where you tell the browser where to look for the image and what the name of the image it’s looking for is. This information is in relation to where the browser finds the webpage.html file which is why you put the image on the desktop (or in the same folder) with your webpage file, and the name of the image file is whatever you called your image.

Now if you’re wondering why there is a “/” inside the <img> tag, it’s because the <img> tag is it’s own closing tag and it is considered a good practice to close it with a “/”. For more on opening and closing tags read our first html lesson.

HOW TO MAKE A LIST IN HTML

What you want your list to look like:

Shopping List:

  • Apples
  • Bread
  • Butter
  • Cheese

Choose a spot between your <body> tags and type this in:

Shopping List:<ul>
<li>Apples</li>
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ul>

You have now got a list on your web page! And now that you know how it’s done you can make whatever kind of list you like. Interestingly, lists are usually used to create the main navigation menus on websites – with a little styling added to make them more attractive and interactive. We’ll get to that in a future lesson.

THAT’S IT FOR THIS LESSON

You can now add a few more interesting things to your webpage, to learn more about lists, links, and images you can visit www.w3schools.com. Don’t forget to follow us on twitter . And please comment to let us know if you liked this lesson or have a question.

Leave a Reply

  1.  

    |