Learn how to create your own website using HTML and CSS

Creating Our Photo Gallery

Well, that was a lot of information. It might seem like trying to take a sip from a fire hose at first, but the more you familiarize yourself with HTML by using it, and the more you apply styles to your HTML with CSS, the easier it becomes. If you just play around with it a little bit regularly you will find yourself remembering more and more of how to use the HTML elements and CSS properties without having to look them up. In the meantime use whatever resource you have handy. Check out our HTML and CSS tutorials as a reference guide if you like.

Now it is time to learn a little more on the HTML side of things. What we're going to do is make another page for our website. This will be a small photo gallery. We will use an HTML table to lay our images out in a neat manner. For this portion of the tutorial you will need to create another folder in your main project folder and name it "images". Your current project structure should look something like:

You will need 4 pictures for this part of the tutorial. Ideally, the images size should be 350 pixels wide. If you have a way to resize them then please do. It is always better to display images of the correct size than to have the browser have to download a huge image file and then display it as a small thumbnail. It makes your site faster too.

Put the 4 images in the folder you created named "images". I will be using image1.jpg, image2.jpg, etc.. on my end during the example. You can change the files names or change the HTML code to the images names in your folder. Just be sure that the filenames don't have any spaces " " in them. This can mess up the way they are requested by the web browser. Any file that could be requested on the web shouldn't have spaces in its name!

Creating a HTML Table

HTML tables are used to display data or content in a neat and orderly fashion. Some years back it was the common practice to layout the entire web page using HTML tables. The standards have moved us away from this, thankfully.

A good way to think about tables is as easy as this. A table has rows, a row has cells, cells have content in them. We create a table element with the "<table>" tag. Table rows are created with the "<tr>" tag, and table cells are created with the "<td>" tag. Lets take a look at our table:

As you can see, we have a "table" element, which contains 2 table row (tr) elements. Each table row contains 2 table cell (td) elements. Right now our table cells are empty.

Lets create our "photos.html" page. Open up the "template.html" file in your text editor and "Save As" (following rules we discussed) "photos.html".

Inside your "contentWrapper" div add the following:

Now you have your heading and the table layout there. All we have to do now is tell the browser what we want in the table cells. In this case its going to be images. The image tag (<img />) is one of those HTML tags, similar to the "link" tag that we used in the head, that doesn't use a separate closing tag, but rather gets all its needed info from the attributes of the tag itself and then uses a slash at the end instead of there being a closing "</img>" tag.

Make the following changes to your table. Change the image file names to reflect the image names in your "images" folder.

Ok, so notice that id added an "id" attribute to the "table" element naming it "photos". That way we can adjust its style properties a little more easily. Inside each table cell We have added an image element. The image element should have 2 attributes. The source "src" attribute tells the browser where to find the image. In this case it says "look in the same folder I am in for a folder named images, then look for this specific file". The "alt" attribute is required for the page to be valid XHTML 1.0, and is used in case the file cannot be found or people are using screen readers.

If you where unable to resize your images, add an attribute named "width" with a value of "350px" to each image element. It would then look like this:

This will cause the browser to download the full sized image and limit its max dimensions to the value set. You can do the same with height using the "height" attribute. If you use both width and height attributes you need to make sure the values are the same ratio as the original image or else the browser will distort you photos. Its really best to get some image resizing software and resize them to the desired dimensions.

To make the layout of the images table a little better looking, lets add some CSS to the bottom of our "styles.css" file. Open that file up now and add these lines after our other stuff.

As you can probably guess by now, we are giving our "photos" table a width of 100% so that it will be as wide as its container. We have also added 10 pixels of margin to the top and bottom and 0 pixels right/left around it to give it some space from other content on the page.

Then we are giving all the cells in the table padding on top and bottom to get some visual space from the cells above/below, as well as using the "text-align : center;" setting to make the images show up in the middle of the cell rather than the default left. Next give the images a border of blue to frame them a bit.

After saving both your files you should be able to reload your "photos.html" page and now view your photos. If it doesn't work, check the files names and locations and make sure it matches the "src" attributes value.

Now, try clicking on the "Home" link on the navigation menu. Now go back to your photos by clicking that link. Wow, you officially have your own website with links and all. It took a bit of work at the beginning, but as you can see from building this page, once you have your basic site structure in HTML and site design in CSS, it's easy to add more pages to your site.