Web Design Tutorial

HTML Web Design Tutorial #18

Using Links to Send Visitors to Another Website
In part 17 we showed you how to change the size of the text on your web page. Now we're going to see how to add a hyperlink to our page so visitors can jump to another website from ours.

Often taken for granted, links are probably the most important part of the whole World Wide Web. Without them, surfers would have to type out the exact location, and name of every file they wanted.

If you think about it, links are a courtesy offered to web visitors. They're a way of saying; "I want you to see, do, or have this so much, that I've made it as easy as possible for you." Instead of having to type out a long string, they can just point, and click.

Creating a link is as simple as enclosing the words you want to use as a link inside of anchor tags, and using an attribute to indicate the location. You can see how this is done by watching our next lesson, which can be started by clicking on the "play" button below.

HTML Web Design Tutorial #19

Inserting Images into Your Web Page
Let's face it, there's only so much you can do to a web page with text and colors. Sometimes you need to add some pictures, or images, in order to get the look you want. Today, almost every web browser available will display images on a web page as long as you tell it where the image file is located.

You need to make sure and use the right kind of image though. Since people use different types of web browsers, you should use an image format that is supported by most browsers. Generally the best formats are GIF for high contrast images, and JPEG (a.k.a. JPG) for photographs and other continuous tone images.

Another good image format is PNG. Although some of the more popular web browsers do not completely support it as of yet. The major hang-up has been support for alpha-transparency. If your PNG image doesn't use any transparency then it should be fine to use.

If you don't have any images of your own to use, then you can find some in our free graphics section. We'll show you how to embed them into your web page during this next lesson, which you can begin by clicking on the "play" button below.

HTML Web Design Tutorial #20

Attributes That Should Be Added to All Images
In part 19 you learned how to specify the location of an image, in order to embed it into a web page. Now we'll look into adding three more attributes that should be included in all image tags.

Depending on its dimensions, an image in a web page is going to take up a certain amount of space. If a web browser knows before it draws the page, how much space that's going to be, then it can reserve that space for the image.

However, if it doesn't have the image dimensions ahead of time, then the page may shift a lot while it's loading. This is because other content on the page may have to be redrawn once the image finally loads. To prevent this page shifting, you can tell the browser the image dimensions using the width and height attributes.

Another important attribute for the image tag is the "alt" attribute. It allows you to provide some text as an alternative for the image, in case a visitor cannot, or chooses not, to see images. We will see how to add these attributes in this next lesson. Click on the "play" button below to begin.

HTML Web Design Tutorial #21

Using an Image as a Link to Another Web Page
In part 20 we added three additional attributes to our image tag, to prevent page shifting and to supply alternative text. Now we're going to see how to setup an image, so that visitors can click on it, and use it as a link to another web page.

Images can make great visual links; as long as it's obvious they're supposed to be clicked on. A good type of image to use for this is a graphic that looks like a button. People are used to pushing them in the physical world, so it just seems obvious that's what it would be for on a web page too.

In lesson #21 we will see how to turn an image into a link. If you don't already have some images of your own to use for this exercise, then you can download some from our free graphics section. There are several different color button graphics there similar to the images we use in the tutorial. To begin watching, click on "play" below.

HTML Web Design Tutorial #22

Dividing a Page into Two Columns Using a Table
In part 21 you saw how to use an image as a link to another web page. Next up, we'll be dividing our web page into two separate columns, with a navigation section on the left, and our textual content on the right.

It's often desirable to divide a web page into vertical sections (columns) to be used for different purposes. One way to do this is to place your page inside of a table. A table is kind of like a spreadsheet for web pages. You can use a table to create columns and rows of cells, and then put different sections of your web page into different cells.

In this next lesson, we'll build a very simple two-column one-row table. We'll put our button graphic links in the left cell, creating a navigation section, and then we'll put the rest of our page into the right cell. To see how it's all done, click on the "play" button below.

HTML Web Design Tutorial #23

Checking a Web Page in Different Web Browsers
There are a lot of different web browsers that people use to surf the Internet with. The most popular one is Microsoft® Internet Explorer. Throughout this tutorial series, we have demonstrated viewing our web page using Internet Explorer. It's important that your web page looks good in IE, because that's what most people will use to view it with.

However, you'll also want to make sure your page looks OK in other web browsers too. For this reason it's advisable to install some of the others on your computer, so you can see how your web page will look in them.

In our next lesson, we will see just one example of how different web browsers will render the same web page differently, and what you can do to fix it. To begin watching it, click on the "play" button below.

HTML Web Design Tutorial #24

Putting Your Pages on the Web
In part 23 you saw how the same web page doesn't always look the same in different web browsers. Now we've come to the final lesson in this web design tutorial series. We're going to witness one method you could use to put your pages on the Web.
Important Note: In order for people to see your website on the Internet, your files need to be placed on a web server.

We will show you one method of transferring your web files from your computer to the web server those files will be hosted on. Please be advised that there are different methods for doing this, and your particular web hosting service may have special instructions that differ from what you see here.

If your web hosting service has provided you with instructions on how to upload your files, then we suggest that you follow those instructions instead. What you will see here is just a general method that should work in most situations. To begin your final lesson, click on the "play" button below.