LEARNING HTML AND CSS

THE DIVING CLUB – USING IMAGES ON YOUR WEB SITE

It’s time to grow the diving site a little by adding a new page - a simple image gallery.

Before we start looking at the images themselves, we need to adjust the existing website files slightly to accommodate the new page.

  1. Open the file index.html and find the navigation section and add another link to your list of links as shown below:

<div id="navigation">

<ul>

<li<a href="index.html">Home</a</li>

<li<a href="about.html">About Us</a</li>

<li<a href="contact.html">Contact Us</a</li>

<li<a href="gallery.html">Image Gallery</a</li>

</ul>

</div>

  1. Save index.html and repeat the steps above for about.html and contact.html.
  1. View the file index.html in your browser. The navigation section should appear as shown below:

  1. Open the file contact.html and save as gallery.html. This will create an identical copy of contact.html.
  1. Open gallery.html and change the level 2 heading (h2) to “ImageGallery”.
  1. Remove the single paragraph that appears below the heading and replace it with the following:

<p>Below are some of the great views that club members havecaptured on film (or digital memory) on various divetrips.</p>

<p>Please do drop me a line (that's Bob) if you would like to<a href="mailto:">submit an image</a> tothis gallery.</p>

  1. Change the <title> content to ImageGallery – Underwater Photography from Bubble Under’s members.
  1. Save the file gallery.html and check the display in your browser.

  1. Open gallery.html and add the following code immediately below the paragraphs added previously:

<p<img src="images/turtle-bite.jpg" width="400" height="258"alt="A turtle swims comfortably among the coral, despite itsold injury - a large shark bite on one side"/</p>

  1. Save the file gallery.html and view the page in your browser.

The size of the photo is sensible: at a width of 400pixels - it fits quite well on thepage without any further adjustment.

A common mistake that many people make when building image galleries, is to use a graphics program to create borders around their images. We can use CSS for border effects. How about a reasonably thick, white border?

  1. Open the CSS file style1.css and add the following style rule:

img {

border: 15px solid white;

}

  1. Save the CSS file and view gallery.html in your browser:

Note: If you go to the index.html now, the image of the divers in a circle will also have a thick white border around it. We did ask for all images to have a white border. If you’d rather have the white borders just around the images on the gallery page, you’ll have to be more specific with your selector so that the rule will only take effect on particular images.

  1. Open gallery.html and remove the opening and closing paragraph tags that surround thepicture of the turtle and replace them using <div class="galleryphoto"> and</div> tags instead:

<div class="galleryphoto">

<img src="images/turtle-bite.jpg" width="400" height="258" alt="A turtle swims comfortably among the coral, despite its old injury - a large shark bite on one side"/>

</div>

  1. Add a paragraph after the image (but inside the containing div)as shown below:

<div class="galleryphoto">

<img src="images/turtle-bite.jpg" width="400" height="258" alt="A turtle swims comfortably among the coral, despite its old injury - a large shark bite on one side"/>

<p>This turtle was spotted swimming around the Great BarrierReef (Queensland, Australia) quite gracefully, despitehaving had a large chunk taken out of its right side,presumably in a shark attack. [Photographer: IanLloyd]</p>

</div>

  1. Finally, add a span element around the photo credit part of the caption sothat we can style it differently as shown below:

<p>This turtle was spotted swimming around the Great Barrier Reef (Queensland, Australia) quite gracefully, despite having had a large chunk taken out of its right side, presumably in a shark attack. <span class="photocredit">[Photographer: Ian Lloyd]</span</p>

  1. Save gallery.html and view your page in your browser:

It’s common for a picture caption to be displayed in a different font to that of thedocument’s main body text. This may also include a different fontweight and size as well. This is the first aspect we’ll change.

Secondly, the gap between the text and thephoto is a little too big and we will fix that using the margin property.

Finally; we will add a stylistic touch beneath the captionthat will help us once we add more photos to the gallery.

  1. Open the CSS file style1.css and add the following style rule to the file:

.galleryphoto p {

font-size: 65%;

font-weight: bold;

margin-top: 0;

width: 430px;

line-height: 1.4em;

}

This markup makes the necessary changes to the font, reduces the width of thecaption to make it easier to read, removes the spacing immediately above theparagraph that describes the photo and reduces the spaces between the lines tobe more suitable.

  1. Save the CSS file style1.css and view gallery.html in your browser.

  1. Open the CSS file style1.css and add the following style rule:

.photocredit {

font-weight: normal;

color: gray;

}

This will affect the text contained in the span element only.

  1. Save the CSS file style1.css and view gallery.html in your browser.

Currently the white gallery photo borders are being applied to all the images on the web site. We now have a very simple way to deal with this issue. The <img> tag for the gallery photo now resides within a div element with the class galleryphoto. We can use that class name in the selector of the rule that applies the border.

  1. Open the CSS file style1.css and amend the img style rule as shown below:

.galleryphoto img {

border: 15px solid white;

}

Only the gallery.html photos will now have the white border.

Lastly, we’re going to add some style declarations to the .galleryphotorule in order to apply some layout adjustments to the div that contains the image and associatedtext. This class will be used to help separate the many different photos thatthis page will eventually display.

  1. Open the CSS file style1.css and add the style rule as shown below:

.galleryphoto {

padding-bottom: 20px;

border-bottom: 1px solid navy;

margin-bottom: 10px;

}

  1. Save the CSS file style1.css and view gallery.html in your browser.

We can now easily finish off this simple gallery.

  1. Open the file gallery.html and add the following code:

<div class="galleryphoto">

<img src="images/turtle-bite.jpg" width="400" height="258" alt="A turtle swims comfortably among the coral, despite its old injury - a large shark bite on one side"/>

<p>This turtle was spotted swimming around the Great BarrierReef (Queensland, Australia) quite gracefully, despitehaving had a large chunk taken out of its right side,presumably in a shark attack.<spanclass="photocredit">[Photographer: Ian Lloyd]</span</p>

</div>

<div class="galleryphoto">

<img src="images/jellyfish.jpg" width="400" height="300"alt="A jellyfish flanked by smaller fish"/>

<p>Jill was just snorkelling when she took this picture – thejellyfish was only a couple of feet under the surface,hence the light is excellent. Jill assures us that thejellyfish had no "nasty, stingy, dangly bits"!<span class="photocredit">[Photographer: JillSmith]</span</p>

</div>

<div class="galleryphoto">

<img src="images/turtle-face.jpg" width="400" height="300"alt="A close-up, straight-on shot of a turtle feeding on thecoral"/>

<p>"I was right next to him as he bit chunks of coral off fordinner - what a sound!" So describes club member Paul whotook this shot in Fiji. <spanclass="photocredit">[Photographer: Paul Spencer]</span</p>

</div>

<div class="galleryphoto">

<img src="images/what-a-star.jpg" width="400" height="318"alt="Black and white patterned starfish"/>

<p>You're a star - and don't let anyone tell you any different!<span class="photocredit">[Photographer: HelenCranfield]</span</p>

</div>

<div class="galleryphoto">

<img src="images/reef2.jpg" width="400" height="285"alt="Another beautiful example of the Great Barrier Reef"/>

<p>Another cracking shot of the reef from Mark.<span class="photocredit">[Photographer: MarkWillams]</span</p>

</div>

  1. Save the file gallery.html and view the page in your browser.

This is a simple example of an image gallery. As you add more images, the page will take longer and longer to download. For this reason, most people opt for a two-step design - a page containing thumbnails, which are small, thumbnail-sizedcopies of the image which are linked to full-size versions.

If you think that your site’s image gallery has the potential to grow beyond allmanageability, you might want to look into an automated system of some kind. Many are available, and plenty just happen to be free services!

A search for “free thumbnail gallery generator”will produce many results.

A good collection is listed at

We are now going to set a background image for our navigation area.

  1. Open the CSS file style1.css and find the #navigation style rule. Amend this style rule as shown below:

#navigation {

width: 180px;

height: 484px;

background: #7da5d8 url(images/nav-bg.jpg) no-repeat;

}

  1. Save the CSS file style1.css and view index.html in your browser:

The tag line under the main heading performs its task efficiently, but is a little simple and, perhaps, too blocky. One way to reduce this chunky look is to apply a background image using a smoothing effect. Let’s use the graduated fade shown in the image (tagline-fade.jpg) shown below:

For the effect we’re after, the image should be locked to the right-hand edge of the tag line paragraph. This can be achieved easily using CSS:

  1. Open the CSS file style1.css and edit the #tagline p style rule as shown below:

#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

padding-top: .2em;

padding-bottom: .2em;

padding-left: .8em;

margin: 0;

background: #bed8f3 url(images/tagline-fade.jpg) repeat-y right;

}

The position keyword right is all you need to use to keep the image hugging thetag line’s right-hand side. repeat-y ensures that the image will repeat downwards(vertically) if the font size is increased - thereby boosting the size of the tag lineoverall.

  1. Save the CSS files style1.css and view the page in your browser.

We are now going to see how the main header (h1) can be livened up a little. Once again, the image is going to beattached to the right-hand side. This time, though, it’s not a fade, and it can’t berepeated. Instead, it’s the image shown below but only a part of it will bevisible in the header.

The image is tonally dark (ensuring that the BubbleUnder.com white text will belegible on top) and the left edge fades out nicely to match the navy backgroundcolour that the h1 headings use.

We’ve used an image that’s taller than the main page heading; this ensures that thepage displays well if users resize their fonts causing the height of the container togrow.

  1. Open the CSS file style1.css and find the h1 style rule. Amend the style rule as follows;

h1 {

font-size: x-large;

color: white;

padding-top: 2em;

padding-bottom: .2em;

padding-left: .4em;

margin: 0;

background: navy url(images/header-bg.jpg) repeat-y right;

}

  1. Save the CSS files style1.css and view the page index.html in your browser.

References:

Sitepoint HTML Reference (

Sitepoint HTML Reference - img (

Dive Into Accessibility (

WebAIM Screen Reader Simulation (

JAWS for Windows Screen Reading Software (

Picasa - Free photo editing software from Google (

Lemkesoft GraphicConvertor (

iStockphoto (

Fotosearch - Stock Photography and Stock Footage (

Flickr – Share your photos (

Flickr – Share your photos – Scuba (

A - Learning HTML and CSS -The Diving Club - Using Images on Your Website.docVersion 3

Page 1 of 14