HTML5 website coding

In the CAT curriculum, we use one folder to organise all of our website files. This is seldom the case on a real-world web server: files are usually organised in an arrangement of folders and sub-folders and even on different servers.

In this post:

  1. Reorganise
  2. Break it
  3. Fix it
  4. CDNs

Reorganise

The root folder of a website is often called something like public_html, but in previous posts, we have named our root folder website so I will maintain that convention. In your website folder, you have a set of HTML files, index.html etc. as well as one or more image files.

Your files may currently be organised something like this:

  • website (folder)
    • index.html
    • data.html
    • bibliography.html
    • logo.gif
    • ice-cream-garden-route-map.png

Should you wish to demonstrate this skill in your PAT website, a good starting point is to place all of your image files into a subfolder of your main, or root website folder and then include them in your webpages from there.

Following the steps below:

  1. Create a sub-folder in the website folder called images.
  2. Move all your images into this images folder.

Your files and folders should now be arranged like this:

  • website (folder)
    • index.html
    • data.html
    • bibliography.html
    • images (folder)
      • logo.gif
      • ice-cream-garden-route-map.png

Break it

If you open your website in a browser, your images will not be displaying (they will be “broken”).

Webpage with "broken" image.Webpage with image.

Fix it

To fix this, you must recode the src attribute of all your <img> tags as follows:

An image that was coded so:

<img src="ice-cream-garden-route-map.png" />

must now be coded like this:

<img src="images/ice-cream-garden-route-map.png" />

CDNs

Most websites end up having separate folders for images, CSS files, Javascript files, etc. Modern websites also often use a Content Delivery Network (“CDN”) to host various assets, particularly images and videos, to speed up the time it takes for their web pages to load.

If I used a CDN, the code to include an image from the CDN on this website would look something like this:

<img src="http://cdn.stylus.co.za/ice-cream-garden-route-map.png" />

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.