Web Design Lessons

In a previous HTML lesson, we learned how to create text anchors (or links). In another previous lesson, we learned how to add images to your HTML page. If you do not know how to do either of these, please read those lessons before moving on to this one (don’t worry, they’re very short). From creating a regular text link and adding an image to a web page to making your images link is a very short jump, so let’s dive in!

Follow the same folder guidelines as in the adding images post, unless you’re using an absolute to a remote image.

Code:
<a href="http://www.webdesign-lessons.com">
<img src="your-image-filename.jpg" alt="my messy boy!" />
</a>

Output:

The Breakdown:
You have created an anchor (or link) just like you learned in the HTML links lesson. You have created an image just like you learned in the HTML images lesson. The only thing that you have done differently is nested your image element inside of your anchor element, which tells the browser to use the image as a link. It’s really that simple!

First, create a folder on your desktop and name it whatever you want. This is where you will hold all of your files for this lesson. Now you will need to find the image that you want to use. Copy the image that you selected into the newly created folder. When you create your HTML page, save it into this folder also. Now, create an HTML page including this code:

Code:
<img src="your-image-filename.jpg" alt="my messy boy!">

Output:

The Breakdown:
The first thing that we should take note of is that your image element is self-closing, meaning that, unlike something like a p element, which uses and opening (<p>) and closing (</p>) tags, an image element uses just one tag that closes itself with a ‘/’ at the end. Think about it this way… when you create a paragraph, you need to first tell the paragraph that you are starting a paragraph, then type all of the content for the paragraph, and then tell the browser that the paragraph is over. With an image, all that you need to do is tell the browser that you want a particular image placed on the page, so there is no need to open and close it – it stands on its own.

Now, how did we tell the browser which image we wanted to place? The answer is the src attribute. We simply set the src attribute to the location of the image. Since we saved our HTML page and image in the same folder, we need only to specify the name of the image. If instead we created a folder named “my_folder”, and saved our HTML file in there, then created a folder called “images” inside of the “my_folder” folder, then our src would be “images/image.jpg”.

You can also specify an absolute image src by entering the full URL of the image, for example:
<img src="http://www.webdesign-lessons.com/images/your-image-filename.jpg" alt="my messy boy!">
This is useful when the image is not on the same website as the HTML file.

Lastly, let’s talk about the alt attribute. The purpose of this attribute is to tell the browser what to show in case the image can’t be found (maybe it was accidentally deleted or moved). It is also useful for text-only browsers. Alt attributes are also read by search engines, but most importantly, alt attributes are read by screen readers which read the content of a website out loud for the visually impaired, so make sure that you include alt tags for relevant images that describe what the image represents for those who can’t see it.

I bet you didn’t that there was that much involved in just adding an image! We covered a lot of ground here, though, and I’m sure that you’re super-excited that you can now add more than boring old text to your web pages.

A link in a website is an element that you can click on that will take you to another page or file. Most of the time you will link a bit of text to another web page. By default, these links are blue, underlined text – I’m sure that you’ve seen them. Let’s create our own!

First, you will need to create an HTML page that you will be adding your link into. If you don’t know how to do this, see the HTML Basic lesson.

Now, where are you supposed to add all of the content for your page? That’s right, between the body tags. Here is the code to add:

<a href="http://www.webdesign-lessons.com">Web Design Lessons!</a>

Output:

Web Design Lessons!

When you click your link it should take you to the homepage of this website. Now, let’s break it down. This element is called a link element or an anchor element (hence the ‘a’). Most web designers will simply refer to this as an ‘a’ element, though. This, like almost all other elements, requires an opening tag (<a href="http://www.webdesign-lessons.com">), and a closing tag (</a>). The content between the two tags is what will appear on the page, which you can click to navigate to the link.

href is what is called an attribute. Different elements have different attributes depending on their functions. Since an anchor element needs to take the user somewhere, we need to tell it where to go. We put that URL in between the quotes after href=. The URL is the value of the attribute. It is important to put your attribute values in quotes, so that the browser doesn’t think that you’re trying to create another attribute.

That’s it! Congratulations, you can now create multiple pages and allow your users to move between them!

What is HTML?

HTML is the language that the web is written in. It puts all of the information that you see on a website into a structure that your browser can understand. It also internally links to resources that enhance that information, such as CSS files for visual styling and JavaScript for logic and interactivity.

What does HTML look like?

The atomic building blocks of HTML are called tags. A tag always begins with a less than symbol (<) and ends with a greater than symbol. In between goes the type of tag. For example, the <strong> tag is a very commonly used tag to create bold text elements. Each opening tag generally requires a closing tag, to tell the browser when your element ends.

Code:

<strong>I am a bold sentence!</strong>

Output:

I am a bold sentence!

What you need to write HTML

To write HTML and create websites, you don’t need much. For now, if you are using windows, notepad will be sufficient, but if you would like something a more advanced, check out HTMLKit. For Mac users, TextEdit is fine, for a more advanced editor, check out TextWrangler.

Your First HTML Page

Fire up the text editor of your choice, as we just discussed, and create a new file. Enter the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
</head>
<body>
</body>
</html>

This is the basic structure that we begin with for an HTML page. I will give you a quick explanation of its parts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This piece of code tells the browser what kind of page it is loading and how to parse it by referencing what is called its DTD or Document Type Declaration. We are using XHTML 1.0 Strict because this is the most progressive doctype out there right now.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

This gives the browser further instructions about text encoding and begins the <head> element. The head element of a document is where you put a lot of code that does not need to be visible to the user, but that the browser uses to make your website work properly. It is also where the title element lives:

<title>
</title>
</head>

The title element is the name of the page. This is what shows up at the top of the browser window and the link that comes up on search engines when your page is listed. The title element is very important for letting users know where they are on the website, as well as helping search engines index your website properly. We have also closed the head element here.

<body>
</body>
</html>

Here, we create the body element, and close the html element. The body is where everything that you want to be visible to the user goes. We will be primarily concerned with this area of the document.

Homework

You are going to use this basic page structure to create your own HTML page. You will use the strong, em (italic), and p (paragraph) elements in order to create a page that resembles the following: