Lesson 3 - Images and links in HTML

HTML and CSS First website 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

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

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

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, Tables in HTML, we're going to introduce you to tables and lists. The code worked on in this lesson is available for download below.


 

Download

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

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
2 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.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
Previous article
Basic HTML tags
Thumbnail
All articles in this section
Make your first website, step by step!
Activities (9)

 

 

Comments

Avatar
NWACHUKWU EZEKIEL EBUBE:6. March 17:05

This lesson wa of great importanca. thanks admin

 
Reply 6. March 17:05
Avatar
Prinz_Div
Member
Avatar
Prinz_Div:16. March 12:04

I need help please, after putting the attribute for my image it just refused to upload even after trying different ways like using jpeg instead of png. Really need assistance
<p>
<img src="images/ken­dric.jpeg" alt="HoBi the programmer" />
</p>

 
Reply 16. March 12:04
Avatar
David Capka
ICT.social team
Avatar
Replies to Prinz_Div
David Capka:17. March 3:57

Your code looks fine. Did you put the image in the images folder?

Reply 17. March 3:57
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
Prinz_Div
Member
Avatar
Prinz_Div:17. March 7:12

I created a sub-folder in the folder I put my link and named it images, I also put only one image there in order not to mix things up.

 
Reply 17. March 7:12
Avatar
David Capka
ICT.social team
Avatar
Replies to Prinz_Div
David Capka:17. March 9:29

You can try using our image which can be downloaded from the archive below the article. If it'll work, your problem is in the name of your file. If it won't, your problem is in the code.

Reply 17. March 9:29
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
Prinz_Div
Member
Avatar
Replies to David Capka
Prinz_Div:18. March 6:01

wow it sure worked.....really happy, the problem was from my code I used "jpeg" instead of "jpg" as the file format. After i changed it Lo and Behold the image came in its glory.
Thanks a lot.

 
Reply 18. March 6:01
Avatar
Adewale Damilola:19. May 9:19

its wonderful

 
Reply 19. May 9:19
Avatar
Ardouin Best Saint Jean:4. July 15:04

<!DOCTYPE>

<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 webpages. I'm still learning how to script, but i think i'm getting good at it.</p>

<p><img src="images/AR­DOUIN.jpg" alt="ARDOUIN" /></p>

<h2> About me.</h2>
<p>My name is Ardouin Saint Jean and i'm 20 years old. I went to school to the United States.</p>
<p>I like to read sometimes, but i kind of let it now, mainly now i feel bored so i walked a lot.</p>
<p>My Plan is full , I would like to do a little bit of all, But certainly all is up to GOD.</p>

<h3> Skill</h3>
<p>I like helping people whenever i feel like it, i speak a litte bit of english, french, Mainly creole.</p>

</body>

</html>

 
Reply 4. July 15:04
Avatar
IT Man
Member
Avatar
Replies to Ardouin Best Saint Jean
IT Man:5. July 1:13

Everything looks good, except DOCTYPE, the first tag. It should be:

<!DOCTYPE html>
Reply  +1 5. July 1:13
Don't be silly, smile!
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

9 messages from 9 displayed.