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.
What is a website without images? Boring! We are able to insert images using
<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
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
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.
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.
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).
The last and probably most important tag which we're going to go over today
is the link tag. We insert links using the
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
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:
When you click on the link, ICT.social will be opened in a new tab.
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:
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.
Downloaded 106x (45.91 kB)
Application includes source codes in language HTML
10 messages from 17 displayed. Show all