Lesson 3 - Images and links in HTML

In the previous lesson, Basic HTML tags, we learned how to emphasize text and use headings. We created the first page for our simple website, to which we are going to add more content today.

Images

What is a website without images? Boring! We are able to insert images using the <img> tag. This is the first tag we will use that requires attributes. An attribute is additional information that is included in a tag. In this case, - the src attribute is used to specify the path to the image file, and - the alt attribute is used to add an image description. We write attributes in the angle brackets after the tag's name, followed by an equal sign and the attribute content in quotes. To keep things nice and simple, keep all of your website's images in a single folder. That way they won't mix with other contents. Create a subfolder in the folder you put your website in and name it "images". Here, add an image that you want your website to display. You can download and use this test image if you want. Save it in the newly created folder, and add it in a new paragraph.

The code would look something like this:

<p>
    <img src="images/avatar.png" alt="HoBi the programmer" />
</p>

Beware: Remember that once you upload your website to the Internet, it will take a while for you to be able to download the image. That is why, we use image formats with added compression, such as JPEGs and PNGs. Meaning that the resulting image will have a smaller size. JPEGs are mostly used for high-resolution images and photos. Whereas, PNGs are used for icons, blueprints, and images with surfaces of a single color. Do not use BMPs! Mainly because they are not compressed whatsoever, nor GIFs, which corrupt the color palette.

The alt attribute is often omitted, however, doing so is a mistake. It is very important for image search engines (Google Images) or text-to-speech readers to function optimally.

Result:

HTML tutorial – images - Make Your First Website, Step by Step!

An image's width and height can be set using the width and height attributes. We can specify values using numbers (e.g. width="64") which would represent a size in pixels, or by percent (e.g. width="50%"). If only one attribute is set, the second one is calculated in a way that helps keep the aspect ratio. Again, remember that website image should always be the same size that we need it to be displayed at. We could make it smaller in GIMP. We should never upload an image to a website that is larger than what is needed and then resize it in HTML. A browser would then have to download the entire large image, resize it and only then would it be able to display it (which would take some time for sure).

Links

The last and probably most important tag which we're going to go over today is the link tag. We insert links using the <a> tag. The <a> tag is paired and it wraps the text that is formatted to be a link. It requires the href attribute which contains the target address of where the link goes. Sometimes it's useful to make the links open in a new browser tab. In which case we add the target attribute with a "_blank" value.

Example code with a link:

<a href="http://www.google.com">link to Google</a>

We are not limited to linking to websites, we are able to link to files as well. The file would then be downloaded when the link is clicked.

Example code with a link to a file:

<a href="http://www.myweb.com/file.zip">Download file.zip</a>

Elements in HTML are either inline or blocks. The difference is that block elements can contain both kinds, but inline elements can only contain inline elements. A link is an inline tag, just like every other tag which we've encountered so far, other than headings. Meaning that we are able to insert an image into a link, but not a heading.

When we put everything that we went over today together and add it to our website, our code would look something like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>My first website</title>
</head>

<body>
    <h1>My first website</h1>
    <p>Welcome to my first web page. I'm still learning how to script, but I think I'm getting good at it.</p>

    <p><img src="images/avatar.png" alt="HoBi the programmer" /></p>

    <h2>About me</h2>
    <p>My name is Jack Bittner and I'm 20 years old. I go to school in the United States.       </p>
    <p>I like to read and sometimes, mainly in summer, play sports.</p>
    <p>My main hobby, which I eventually plan on making a full career, is <strong>programming</strong>!</p>

    <h2>Skills</h2>
    <p>First, I started out using PASCAL. I grew tired of it, and started looking for more modern languages on the Internet which is how I found ICT.social! Here, I'm learning to code in <strong>C#</strong> and <strong>Java</strong>. I am able to develop simple applications so far.</p>

    <p>This website is based on HTML tutorials from <a href="http://www.ict.social" target="_blank">ict.social</a>.</p>
</body>

</html>

Here is the result:

HTML tutorial – Basic HTML tag - Make Your First Website, Step by Step!

When you click on the link, ICT.social will be opened in a new tab.

Navigation

Last, of all, let's add a simple navigator to our website. Create a new HTML file in Notepad++, a contact page, or sorts, and link to it from the homepage (index.html). We will also add a link to the home page in the contacts page in case we want to go back.

The contact page's code will be as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Contact me</title>
</head>

<body>
    <h1>Contact me</h1>
    <p><img src="images/email.png" alt="email" /></p>
    <p>
    Need to talk to me about something? Email me at <strong>hobi (at) hobi (dot) com or use the form below.</strong>
    </p>

    <p><a href="index.html">Return to home page</a></p>
</body>

</html>

Now, save the page as contact.html in the same folder you put index.html. You can find the email image (icon) on http://www.iconfinder.com and thousands more for your websites. Icons are free, but each license is a little bit different and is shown for each icon. Some icons can be used unconditionally, and others require credits to the original author(s). Throughout the course, I'll give you several more websites of the sort that will help you with designing your website.

Now that that's out of the way, open the contact.html file in your browser. It will look something like this:

HTML tutorial -Contact page - Make Your First Website, Step by Step!

Once we click on the link below, we'll be redirected back to the home page. To complete the navigator, we will add a link to the contact page to the home page (possibly in the "about-me" paragraph):

<p>My name is Jack Bittner and I'm 20 years old. I go to school in the United States. You can contact me in the <a href="contact.html">contact page</a>.</p>

The bidirectional navigation part of our website is now complete. In the next lesson, Solved tasks for HTML and CSS lessons 1-3, we're going to introduce you to tables and lists. The code worked on in this lesson is available for download below.

In the following exercise, Solved tasks for HTML and CSS lessons 1-3, we're gonna practice our knowledge from previous lessons.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 120x (45.91 kB)
Application includes source codes in language HTML

Article has been written for you by David Capka Hartinger

User rating:

5 votes

The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.

David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.

Activities