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!

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.

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!

CSS stands for Cascading Style Sheets, because a CSS file defines visual styles for elements within an HTML page. A style defined for a an element is inherited by any elements that are nested within that element (hence, cascading).

Using CSS

Did you do your homework from the HTML Basics Lesson? If so, your code should look like this:

<!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>
My First HTML Page!</title>
</head>
<body>
<p>
This is my first HTML page. I know how to make words <em>italic</em> and <strong>bold</strong>...
</p>
<p>
and create seperate paragraphs.
</p>
</body>
</html>


Let’s build on this page with some CSS. Create a new file called styles.css in the same folder that your HTML document is. In this file, paste the following code:

body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
p {
background-color: #424242;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}

Now, go back to your HTML document and add this line right before the closing head tag:

<link rel="stylesheet" type="text/css" href="styles.css" />

The Breakdown

There are a couple of things to note here before we look at the result. First, let’s talk about the CSS code. We began by typing body {, which is how we tell the browser that we are now going to define some styles for the body element and everything within it. We set the background color, the fonts to use, and the color of the text. If you’re confused by the way our colors look, that’s because they are hex values. Hex values are a way of defining precise colors for the web. #000000 means black, and #FFFFFF means white. Don’t worry, you don’t have to memorize all of the possible hex values, we will go over some tools for getting them in a later lesson. Also, you can see that we defined a few different fonts. The browser will start at the beginning of the list and if the viewer of the HTML page has that font, it will be used. If they don’t have that font, it will move on to the next one. The last one is “sans-serif” which tells the browser that if it gets to that, just use whatever the default sans-serif font is on the viewer’s machine.

Next, we closed the body styles with a right curly brace ( } ), and began some styles for the p element. We also set a background color here, as well as some other styles. Padding puts space between the contents of the element and the edges of it, for example:

no padding

with 10px padding

We also defined a few styles for the border. It will be one pixel wide, white, and solid (as opposed to dash, dotted, double, groove, inset, or hidden).

Another thing that you may have noticed is that we did not include a closing tag to the link element, where we linked to your stylesheet in the HTML page. This is because the link element is a self-closing element, which is written slightly differently. Instead of including a closing tag, we simply added a slash before the greater than symbol: <link ... />

Here is what your page should look like now:

There are many more styles in CSS. Here is a link to a complete reference of them: CSS Reference

Homework

Experiment with some different styles, and for now you can also use this website to get the hex values of many different colors: Hex Value Color Chooser

Happy coding, and see you next lesson!

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: