Contents  >

Working with Images

IBAT Next Course

Learning Goals

At the end of this Tutorial you will be able to:

You can view a finished version of this project by clicking the image below.

GitHub image

Contents

About bitmap and vector images

Where to find copyright-free images

Your work files: tourism.html and tourism.css

Images and web browser resets

Adding images to your web page

Adding heading and background colours

Updating the <head> of your web page

Adding the privacy pop-up code and message

Validating your web page

Validating your stylesheet

Uploading your files to GitHub

About bitmap and vector images

Two different types of images can be displayed in web pages:

The illustration below is from Bitmaps versus Vectors: Graphics files and formats, by the School of Computer Science and Information Technology, University College Cork.

Project Animation Google Fonts

On web pages, vector images are displayed in SVG format. Bitmap images are typically displayed in JPG or PNG format (see below). In this Tutorial, we will focus only on bitmap images.

JPG format images

This format (pronounced jay-peg) is the best choice for displaying photographs that contain lots of colours and colour gradations. It is not recommended for images containing text, line drawings or areas of solid colour.

Image files in this format end with the filename extension .jpg or .jpeg. You can see some examples of typical JPG-format images below.

Project Animation Google Fonts

PNG format images

This format (pronounced pea-n-g) is typically used for images that contain areas of solid colour, for logos and icons, and for line drawings.

Below are some examples of images suited to this file format. Such files end with the extension .png.

Project Animation Google Fonts

Photographic images can also be saved in PNG-format and will display in a web page with the same quality as if they were JPGs. But the image file sizes will be larger and, as a result, the web page will take longer to load.

Project Animation Google Fonts

Where to find copyright-free images

A wide range of so-called stock photography websites exists from which you can download, modify and use copyright- and royalty-free images, whether for your personal, not-for-profit or commercial web projects.

In most cases, you do not need to credit the image’s creator, but it is good practice and courteous to do so.

Here are some popular sources of general-purpose stock images:

Here are some online libraries that offer less generic and more stylised photography:

For online business-themed images, check out this free gallery from e-commerce giant Shopify:

The Internet’s largest collection of free online images is the one below. It includes vintage photography and reproductions of classic works of art:

For illustrations rather than photographs, here are four open-source collections of vector images. Files can be downloaded as bitmap images in PNG-format.

Your work files: tourism.html and tourism.css

In this Tutorial you will work with the following web page and stylesheet:

These are new files you will download and edit. You will also download five new image files in JPG format for inserting into your tourism.html file.

Download the HTML file

Follow these steps to download the HTML file to your websites folder.

  1. In your web browser, open the following web page:
    tourism.html
  2. Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox). Project Contact The source of the web page now opens in a new tab of your web browser.
  3. In web browser tab that displays the web page source, right-click anywhere on the page and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox).  Project Contact
  4. In the File name: box, change the name of the file to tourism.html. Project Contact
  5. In the Save as type: dropdown list, change from the default setting from Webpage, Complete to Web Page, HTML Only. Project Contact
  6. Save the file as tourism.html file in your websites folder.

Download the CSS file

Next: download this CSS file to your websites folder.

  1. In your web browser, go to the following web address:
    tourism.css
  2. Right-click on the displayed CSS file and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Project Contact There is no need to change the suggested File Name: or Save as type: value when downloading a CSS file with your web browser. Project Contact
  3. Save the tourism.css file in your websites folder.

Download the five image files

And finally: download the following five image files to your websites folder.

  1. In your web browser, display the following image:
    https://ibat-web-dev.github.io/guinness-storehouse.jpg
  2. Right-click on the image and choose Save image as… (Chrome) or Save Image As… (Mozilla Firefox). Project Contact
  3. Save the guinness-storehouse.jpg file in your websites folder.
  4. Repeat the above steps for these four other image files:   https://ibat-web-dev.github.io/book-of-kells.jpg   https://ibat-web-dev.github.io/cliffs-of-moher.jpg   https://ibat-web-dev.github.io/dublin-zoo.jpg   https://ibat-web-dev.github.io/national-aquatic-centre.jpg

You should now have all five images stored in your websites folder.

Images and web browser resets

Before you add any images to your web pages, you will want to change the default way in which images are displayed by web browsers. You can do this by adding two new rules to your CSS stylesheet file.

To ensure your images appear as fluid, block elements, add the following rule to the web browser resets at the beginning of your tourism.css file.


  img { display: block; width: 100%; height: auto }

Adding images to your web page

Follow the steps below to insert the five supplied image in your web page.

  1. For all web pages that contain images, the linked stylesheet file should include a CSS reset rule which ensures images are displayed as block-level and fluid elements.   With your text editor, open the tourism.css file and add the final line below to the web browser resets section.
    
    /* ==== BROWSER RESETS  ==== */
    * { padding: 0; margin: 0; border: 0; font-weight: normal; font-size: 16px }
    body, html { height: 100% } 
    body { max-width: 1600px; margin: 0 auto }
    img { display: block; width: 100%; height: auto }
    
    Save your tourism.css file. You can now begin to insert images in your web page
  2. With your text editor, open the tourism.html file.
  3. Click at the beginning of the <p> text paragraph under the <h2> heading of ‘Guinness Storehouse, Dublin.’ Project Contact Press the ENTER key three times to open up three lines of blank space.
  4. Type the following code on one of the blank lines:
    
      <img src="guinness-storehouse.jpg" alt="Guinness Storehouse">
    
  5. Save your tourism.html file and view the web page in your web browser. It should look as shown below. Project Contact
  6. Repeat the above steps to insert the four other images under the appropriate <h2> headings in your web page.   The four lines of HTML code are as shown below.
    
      <img src="cliffs-of-moher.jpg" alt="Cliffs of Moher">
    
    
      <img src="dublin-zoo.jpg" alt="Dublin Zoo">
    
    
      <img src="national-aquatic-centre.jpg" alt="National Aquatic Centre">
    
    
      <img src="book-of-kells.jpg" alt="Book of Kells">
    
  7. Save your tourism.html file and view the web page in your web browser. All five inserted images should now be displayed.
  8. Notice that there is some vertical spacing above each image. This is the result of the margin-bottom property for the <h2> heading.   To add some spacing beneath the images, switch to your tourism.css file in your text editor.   At the end of the file, add the following new CSS rule for the img selector.
    
    /* ==== IMAGES  ==== */
    img { margin-bottom: 22px }
    
  9. When finished, save your tourism.css file and view the web page in your web browser. Your images should now have some white space beneath them.

Images and Alternative Text

If as the result of a slow connection or other reason, an image on a web page cannot be displayed, HTML offers an attribute named alt, a short form of ‘alternative.’

In the above example, all five inserted images each include a short alternative description.

If you omit the alternative text for any image on a web page, the official HTML Validator will show an error. See the example below.

Project Contact

Adding heading and background colours

In a final step, you will add colours to your headings and to the web page background. Colours and web pages are covered in detail in the Tutorial named Colours and Web Design.

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your tourism.html file.

GitHub image

Adding the privacy pop-up code and message

Your need to add the ‘pop-up‘ privacy code and message to your web page. You can find the instructions for generating this code here.

Near the end of this code is the sample web address of https://username.github.io/privacy.html.

Change this to the web address of the privacy page on your own website.

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Tutorial RWD: Media Queries
  3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate. Tutorial RWD: Media Queries
  4. Click the Check button.
  5. If you see any errors, return to your tourism.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.   In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Tutorial RWD: Media Queries
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your tourism.css file in your text editor, fix the errors, save the file, and copy the entire file again. Tutorial RWD: Media Queries
  6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your files to GitHub

After validating your web page and stylesheet, you are now ready to upload them along with your five images to your account on GitHub.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. Select or drag-and-drop the following seven files to upload them to your GitHub account. Project Animation Google Fonts
  5. After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/tourism.html

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.