This next part would be how to incorporate CSS in HTML. As you know, CSS is an external document that’s being linked to HTML so it can apply various aesthetic attributes to elements in HTML. To be able to apply a stylesheet in HTML, we must first create the stylesheet document itself. We do this by creating a file in any normal text editor and save it with a .css file extension. In our example, we’ve already specified the name of our CSS document as stylesheet.css.
Think of CSS as a predefined element attribute value chart. A typical CSS document would look like this:
1img {
2width:150px;
3height:150px;
4}
5
6table, td {
7borders: 2px #70b8ff solid;
8{
As you can see from our example CSS document above, the <img> element’s attribute and value is defined by enclosing the values inside curly brackets. In line 5 lies a whitespace; an empty space separating one element from the next. In line 6, the values of the next element’s attributes are defined; also within curly brackets.
What our CSS document basically says is all <img> elements should have a width and a height attribute of 150 pixels, while tables <table> and its cells <td> should have a border that’s 2 pixels in thickness, blue-colored, and should be a solid line. Remember how we noticed earlier that our table element has no style attribute whatsoever? This is because we need not put the attribute in HTML at all. We just have to define them in CSS so that every time we call that particular element, it would automatically have the attributes and values that are defined in the stylesheet.
Let’s now go ahead and put some images on the HTML code of our online photo album:
1<!DOCTYPE html>
2<html>
3<head>
4<link type="text/css" rel="stylesheet" href="stylesheet.css" />
5<title>My Online Photo Album</title>
6</head>
7<body>
8 <table>
9 <thead>
10 <th colspan="3">
11 My Online Photo Album
12 </th>
13 </thead>
14 <tbody>
15 <tr>
16 <td><img src="http://globe-views.com/dcim/dreams/ball/ball-05.jpg" /></td></td>
17 <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsHqXNU44I9YlWNH7I8brwLiUk3ILNeJxWlysCZ9oB3mPv2sGQ" /></td>
18 <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuLELPmhlEGO0Xz8x2k6baC64diYVmYcNl2qf7VzjeyUTqahE8DQ" /></td>
19 </tr>
20 <tr>
21 <td><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTsqE_k994Afwh_Fd81pr6XPwFJj1cmxt14hfrRqJhU-7zq3SvcaA" /></td>
22 <td><img src="http://www.salsc.org/files/50.jpg" /></td>
23 <td><img src="http://www.toysrus.com/graphics/tru_prod_images/3-Mini-Sports-Balls——pTRU1-6355189dt.jpg" /></td>
24 </tr>
25 <tr>
26 <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkgFL5hoFq50LBiEmnA5414t8dYaJneeSiILFBs7OzDc7cTvrsCg" /></td>
27 <td><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTqAGgWXynsHjBOSBZo3Cf3E6m7SOh4A-LAUiBMdmo_T6TbkFCCw" /></td>
28 <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQTa23jDZk3Xxgp3DD8pbKleAr0Y7ZbTNtn9eqcQ3RDA0vxoM-Nvw" /></td>
29 </tr>
30 </tbody>
31 </table>
32</body>
33</html>
To better understand our photo album HTML code now that we’ve placed images, let’s go ahead and see how this is rendered in the browser:
Again, we can see the power of nesting in HTML. To be able to place images within the cell containers of our table, we have to nest the images inside the table data/cell elements. That is exactly what we did in our example. If you take a look at all the image sources one-by-one, you’ll find that the images are of different sizes. How did we manage to make them all have the same dimension? We did it with the use of CSS of course.
If you remember our last CSS document example, we’ve already defined the width and height attribute values for the <img> element. So every time we declare an <img> element in HTML, it’ll automatically have the attributes and values defined in CSS. This is what makes styling content in HTML easy.
You’ll also notice that our table <table> element and its individual cells <td> have a blue-colored, solid border that’s 2 pixels in thickness. That’s because we’ve also predefined the attribute values of our table and cell elements in CSS.
Of course any online photo album wouldn’t be complete without clickable pictures. There are a lot of reasons for a web designer to want to make the pictures inside an online album clickable. Either they want to redirect the user to a page which houses the high resolution version of the picture being clicked, or they want to redirect the user to next picture in the album. Whatever the reason may be, making pictures clickable is the way to go.
We’re going to make the pictures in our album clickable just like the way we converted an image into a hyperlink in the previous chapter; by enclosing the image element inside the anchor tag that has a href attribute.
Here’s our photo album HTML code with clickable images:
1<!DOCTYPE html>
2<html>
3<head>
4<link type="text/css" rel="stylesheet" href="stylesheet.css" />
5<title>My Online Photo Album</title>
6</head>
7<body>
8 <table>
9 <thead>
10 <th colspan="3">
11 My Online Photo Album
12 </th>
13 </thead>
14 <tbody>
15 <tr>
16 <td><a href=”www.google.com”><img src="http://globe-views.com/dcim/dreams/ball/ball-05.jpg" /></a></td>
17 <td><a href=”www.yahoo.com”><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsHqXNU44I9YlWNH7I8brwLiUk3ILNeJxWlysCZ9oB3mPv2sGQ" /></a></td>
18 <td><a href=”www.xlibris.com”><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuLELPmhlEGO0Xz8x2k6baC64diYVmYcNl2qf7VzjeyUTqahE8DQ" /></a></td>
19 </tr>
20 <tr>
21 <td><a href=”www.youtube.com”><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTsqE_k994Afwh_Fd81pr6XPwFJj1cmxt14hfrRqJhU-7zq3SvcaA" /></a></td>
22 <td><a href=”www.facebook.com”><img src="http://www.salsc.org/files/50.jpg" /></a></td>
23 <td><a href=”www.essays.ph”><img src="http://www.toysrus.com/graphics/tru_prod_images/3-Mini-Sports-Balls——pTRU1-6355189dt.jpg" /></a></td>
24 </tr>
25 <tr>
26 <td><a href=”www.vimeo.com”><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkgFL5hoFq50LBiEmnA5414t8dYaJneeSiILFBs7OzDc7cTvrsCg" /></a></td>
27 <td><a href=”www.hotmail.com”><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTqAGgWXynsHjBOSBZo3Cf3E6m7SOh4A-LAUiBMdmo_T6TbkFCCw" /></a></td>
28 <td><a href=”www.gmail.com”><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQTa23jDZk3Xxgp3DD8pbKleAr0Y7ZbTNtn9eqcQ3RDA0vxoM-Nvw" /></a></td>
29 </tr>
30 </tbody>
31 </table>
32</body>
33</html>
If you look at lines 16 through 28 of our code, you’ll see that we’ve enclosed the images within anchor tags that have URL href attributes. All-in-all, we’ve basically nested an image element, within an anchor element, within a cell element, within an HTML table element. If you render our photo album code in a browser, you’ll notice that your mouse pointer now turns into a hand, which indicates that the images are now clickable.
This is fantastic. After what we’ve discussed from chapter 1 up to this point, you’re now able to create a fantastic-looking online photo album. We’ve combined creating a table with rows and columns, put images inside the table’s cells and make them clickable, and apply aesthetic attributes such as image dimensions, and border color and types to create our very own online photo album.
From this point onwards, feel free to try out new things such as increasing the number of images or create two separate albums within one page. You’re only limited by your own imagination. HTML is also about experimenting and discovering new things.