Rev 4.1.

3
September, 2020

Lab 3: Adding visual elements

WEB1201: Web Fundamentals

1 Introduction
This lab is intended to get you to be able to add in visual elements to a web page. The visual
elements you will be exploring are:

1. Adding horizontal lines and borders (and to configure the border using some padding).
This is in Section 5.
2. Adding an image using the img tag. This is in Section 6.
3. Using images in different areas of a web page.

2 Objectives
At the end of this lab, you should be able to:

1. Add and style visual elements to a web page including a coloured background, images,
buttons and icons (for the title).
2. Create your own visual elements (i.e. logos and backgrounds) using a vector graphics
program (e.g. Inkscape).

3 Deliverables, timing and additional notes

The estimated time of completion for this lab is approximately two hours (assuming you have
gone through the theory). This does not include the time you will need to answer the questions.
You are to compile your work after every lab - this includes all codes (and comments where
necessary), documentation, completed tasks and answered questions. You have to submit your
work at the end of this lab.

Note

When you see this icon, , it means that there is an attached file in the PDF. Click on
the icon to open the attachment. If that does not work, and if you are viewing this file from
a browser, it means your PDF plug-in for your browser does not support this feature. Your
mileage will vary when viewing this file using a browser. Open your file in a compatible
reader, e.g. Adobe Acrobat Reader.

1
4 Materials and Equipment
1. A computer with a web browser.
2. A text editor (Visual Studio Code (preferred as it is full featured and free), Sublime,
Notepad++, Vi, Vim, etc.).
You could use an extension like: HTML preview. Note: Use at own risk as the extension
changes and the output may not be what you expect.
3. Inkscape
You can get it from their official website. If you are using this on the lab computers, you
may already find it installed. Otherwise, please download a portable version (typically
called Zip or 7z version).
4. Files from “Lab 2 - CSS”.
5. Some graphics resource files:
Note: There are a few versions of the attached file depending on the software you are
using to read this PDF document as it is based on the software’s security setting. For
Adobe Acrobat, you can refer to this blacklisted file extensions.
• If you are using a PDF reader with less strict security (e.g. SumatraPDF), download
the resource file as a *.zip file (See Note of what this icon means)
• If you want to download the file as a ZIP archive using Adobe Acrobat, download
the resource file with a extension which is not blacklisted, i.e. as a *.zipfile .
Either open the file with an archive browser (7z, WinZip, etc.) or rename the file
extension from “zipfile” to “zip”. Once the extension is renamed, most operating
systems will have built-in support to handle Zip files.
• If you want to downlaod the file as a 7z archive which is not blocked (but will
require additional software to support 7zip files, download the resource file in the
7zip format .
• Create a observation file. You will use this file to record your observations from the
experiments. Microsoft OneNote is recommended for this purpose but you are free
to choose your own platform/software. All submissions at the end are to be in PDF
format.

Note

Have a logbook to write down notes for labs. This will help you revise and reflect on the
work you have done in the lab. The lab is not intended as a typing exercise but one that
requires you to reflect and think about what you have done and learnt.

2
5 Visual elements - Horizontal Line and Borders

5.1 Horizontal Line

The horizontal line is added using the hr tag. Just like the br tag, you add it where you want to
see a horizontal line.

5.2 Borders

You can add borders around elements by using the border property in your CSS declaration.
1 // This is an example of adding a border to h2 elements
2 h2 {border: 3px solid #FF0000}
3 ↑ ↑ ↑
4 width style color

The border property is a shorthand (i.e. a shortened version, in this case the command to add a
border to an element) that consists of three sub-properties: width, style and color. These can be
accessed directly using the three properties:

1. border-width
2. border-style
3. border-color

Therefore, the same border that was configured using the shorthand in the earlier example can
be declared as:
1 h2 {border-width: 3px;
2 border-style: solid;
3 border-color: #FF0000;}

The size of the border is dependent on what kind of element it is added to. When added to
a block element, the border extends to the browser’s border. When added to an inline display
element, it closely outlines the element content.

The border specification described earlier adds a border to ALL sides of an element. Specific
sides of a border can be configured or specified by adding a positional reference to the border
shorthand:

1. -bottom (to become: border-bottom)

2. -left (to become: border-left)
3. -right (to become: border-right)
4. -top (to become: border-top)

3
 margin-top
border-top
padding-top

padding-right

margin-right
padding-left

border-right
margin-left
border-left
Content

padding-top
border-bottom
margin-bottom

width

Figure 1: Relationship between padding, border and margins with the property names.

5.3 Padding

Empty space can be added around a HTML element using the padding property. Like border,
padding too is a shorthand that configures four padding areas:
1 {padding: <top> <right> <bottom> <left>}

The easiest way to remember this padding shorthand sequence is using ordinals (N, E, S, W)
or start from 12 and move clockwise. These padding areas are also accessible using their direct
properties: (as with borders)

1. -bottom (to become: padding-bottom)

2. -left (to become: padding-left)
3. -right (to become: padding-right)
4. -top (to become: padding-top)

The padding affects space between the border and the element. Note that the padding and
borders properties are independent of each other, i.e. you don’t have to use padding together
with a border property. You can refer to Figure 1 for the relationship and properties of the
padding, border and margins.

Task 1: Adding a border to an element

In this task, you will try adding borders to different HTML elements using the embedded CSS
style with classes.

1. Create a basic HTML page with a single h1 heading and one paragraph. Fill the heading
and paragraph with whatever text you please.
2. Using the embedded CSS method, add in a border to the heading. For that border, do the

4
 following:
(a) Adjust the three sub-properties of border, namely width, style and color.
(b) Adjust the border to only show the top and bottom border
3. Adjust the padding to add some space between the words and the border.
(a) Try different padding values. What units did you use to specify the padding?
(b) Add padding to only the top and bottom.
4. (Challenge) Now, try adding four different borders to the four sides of the paragraph
element. Vary each border in terms of width, style and/or colour. Here is an example.
Border width style colour

Left 1 solid Red

Bottom 2 ?? Blue
Right 4 ?? Green
Top 8 ?? Purple

5. Record all your observations and discuss them. In your conclusion, summarize what you
have learnt and how you can apply it.

6 The image element

In this section, we will look at how you can add images to a web page. The image element (img)
configures or places graphics on a web page. These graphics can be photographs, banners,
company logos, navigation buttons, etc. The element is a void element (i.e. an element that
does not require a closing tag). The attributes for the img tags are given in Table 1. An example
of how this element is used:

1 <img src="logo.gif" height="200" width="400" alt="The company logo">

Question(s) 1

1. Identify each of the img tag and determine what they do.
2. In the given example for using the img tag, determine the file name and file extension.
3. Explain if the ‘src defined is a relative or absolute link.
4. What does the values of the height and width represent?

Task 2: Adding an image to a web page

In this task, you are going to add an image to a web page.

5
 1. Download an image from the web. One way to do this is to search for a particular keyword
in Google and go to “images”. You will have to go to the original source of the image,
right-click on the image and choose to save the image. (The exact name or steps will
differ depending on the browser you used).
2. Using the img tag, add the image to your web page. Ensure that your src has:
• the correct path (relative or absolute)
• the corect filename
• the correct file extension
If you run into problems (e.g. the image does not appear), refer to Section 6.1.
1 // Remember to change yourfilename.ext
2 // Include the path if not in the same directory/folder
3 <img src="yourfilename.ext" height="400" width="800" alt="Some image
I downloaded">

3. Record your observation.

Table 1: List of src attributes.

Attribute Value
src The URL or file name of the image.
height Height of image in pixels.
width Width of image in pixels.
alt Text phrase that describes the image. This is important for text readers for the
visually impaired.
title A text phrase containing advisory information about the image; typically
more descriptive than the alt text.
Obsolete attributes:
vspace Amount of space, in pixels, that is blank above and below the image.
Obsolete. Use the CSS padding property instead.
align right, left (default), top, middle, bottom
Obsolete. Use CSS float or position property.
border Image border size in pixels. border="0" prevents the border of an image
hyperlink from being displayed.
Obsolete. Use CSS border property instead.
hspace Amount of space, in pixels, that is blank to the left and right of the image.
Obsolete. Use the CSS padding property instead.
id Text name: in alphanumeric; beginning with a letter, no spaces. The value
must be unique and not used for other id values on the smae web page docu-
ment.
name Text name: in alphanumeric, beginning with a letter, no spaces. This attribute
names the images so that it can be easily accessed by client side scripting
languages such as JavaScript.
Obsolete. Use the id attribute.

6
 (a) Does the image that appears on your web page the same as what you downloaded?
(b) Why do you think that is so?
4. In this step, we are going to experiment and observe the effects of including and excluding
the height and width attribute.
(a) How will you set this experiment up?
(b) What are the different cases you will test?
For this task, you will be given an example of the type of cases that you will test. You will
be expected to come up with the test cases in other tasks (in this lab sheet and others).
Test case width (px) height (px) Description

1 400 800 The first case tried.

2 200 200 Changing the width and height value.
3 200 1000 Modifying the height value.
4 1000 200 Modifying the width value.
5 200 not set Setting only the width.
6 not set 200 Setting only the height.
7 not set not set Both width and height not set.
Note: To be able to observe the outcomes and to compare the images you can add the
same image multiple times using the different attributes. You do not have to carry each
case one at a time.
5. For each test case, record your observation.
Note: If it is not already apparent, the observation is best presented in a table.
6. Discuss your observation and conclude.
Note: What this means is to ask yourself a series of questions about your observation.
Here are a few examples (but not limited to these):
(a) How can I explain what I just observed?
(b) How did the images change when I changed the different parameters of my experi-
ment? (in this task, you changed the different values of width and height.
(c) Do I need to add more test cases to be able to explain my observation?
(d) What have I learnt from my observations?
(e) How can I apply what I have learnt?
7. As with any lab exercise, you will need to have a log (this will be an electronic file for
this lab) to record everything. Record your observations, discussions and conclusion into
your observation file.

7
6.1 Problems linking image files?

6.1.1 Check your file extensions

If you are having issues with displaying your images, perhaps you might have used the wrong
file extension for your file. In Windows, to view your file extensions, go to your File Explorer,
on the view tab, check the box "File name extensions" to view the file extensions. See Figure 2.

Figure 2: Show file extensions in Windows by checking “File name extensions” under the
“View” tab of Windows File Explorer.

6.1.2 Check your links

Chances are, there is something wrong with your linking. Ensure your screen font size is
sufficiently large for you to clearly see everything that you are typing. It is not a contest of
who can read the smallest font size.

Here are some tips:

• Checking links:
In Visual Studio Code, you can (Ctrl + Left-click) on links to images to open them. If
you can’t open them, an error will pop-up on the lower right hand corner of the window
telling you what path they tried to access.

• Relative links:
As you are linking to your own website or homepage and do not have your own domain
name, you will be using relative links (as opposed to absolute links). Refer to Table 2 for
some info and tips on relative links.

6.2 Image aspect ratio

One thing you will notice is that depending on your original image dimensions, using the height
and width attributes will not produce a correct looking logo. This has to do with the aspect ratio
and when you specify both the height and width you are resizing the image disregarding the
original aspect ratio. This means that the image width and height will be stretched or squeezed
into the size you specified distorting the original image. There are a few ways around this:

8
 Table 2: Relative links commands

Char Explanation
/ (a forward slash) always replaces the entire pathname of the base URL. As this
replaces any drive letters used, this will not work when working with local files
but will work when working with a web server. Do not use this at the beginning
of your URI for local files (which are not accessed through a web server). You
can try running a local web server using something like XAMPP which supports
multiple operating systems. Also, use forward slash. Backslashes are used to escape
characters.
// (double forward slash) always replaces everything from the hostname onwards.
Again, not useful for working with your local files.
. (single period) refers to the current directory.
.. (double periods) A special directory name that refers to the directory above it. Ev-
erytime you enter a ../ you traverse the directory above your current directory (i.e.
where your file is located). This essentially strips off everything up to the previous
slash in the base URI (up to the directory your file is currently located). Note that
this only has meaning inside the pathname, so you cannot use this notation to go up
higher than the root directory.
Take this example of a 1. For file 2.html to link to a file 1.html in
directory tree: dir 1.0, you will need to use “../file 1.html”
base_dir Explanation: file 2.html currently resides in
dir 1.1 and file 1.html is in dir 1.0. Using the
dir 1.0
first “../” moves you from dir 1.1 to dir 1.0,
file 1.html where file 1.html is found.
dir 1.1 2. For file 2.html to link to file 3.html in dir 2.0,
file 2.html you will need to use “../../dir 2.0/file 3.html”
dir 2.0 Explanation: The first two “../../” moves
you up to the base_dir which you then
file 3.html
change directory to dir 2.0.
file 4.html

1. Specify only the height OR width, NOT both.

This will resize your image to the exact pixel size but the problem is what happens when
you resize your viewport1 - the image will not scale with the viewport since it has a fixed
width.
2. Apply a CSS style to the img element.
If you recall, CSS can be applied to any HTML element. In a similar manner, we can do
the same here. You can apply a class or id to the img element. Sample style (using id):
1 #theImage{
2 width: 100%;
1
I will not go in-depth into viewports as we will be visiting that when we look at responsive web design. You
are however, encouraged to read about it.

9
 3 height: auto;
4 }

Note: You can add it using the other methods of adding CSS to an element. Can you
recall what these methods are?

Question(s) 2

As we explore images, there are a few terms and concepts that you should familiarize
yourselves with to better understand what is being said.

1. What is resolution and how is it measured?

2. Describe the difference between screen and printed resolution.
3. Describe how a colour image is formed on the screen vs how a colour image
is produced on a printed media (e.g. paper). Your explanation should include
(but is not limited to) the following terms:
• additive vs subtractive colour
• RGB and CMYK (and perhaps also Spot and Pantone)
• colour space
4. What resolution is typically used for images on the web?
5. Explain the reason for this resolution being used.
6. Describe the difference between vector and raster images.
7. Give an example of FOUR (4) file formats for each of the image types.
i.e. 4 vector file formats and 4 raster file formats.
8. Give examples where each image type is used.
9. Explain when the two image types (vector or raster) will be used on the web.
Note: For a question like this, if there are multiple scenarios, your explanation
should be related to each scenario.

Task 3: Creating and adding your own logo

In this task, rather than using a downloaded image, you will create your own logo or image
using Inkscape. You will get the software from the link given in Section 4. Depending on your
familiarity with using vector drawing programs, this task may take some time as you will be
learning how to use the tool as well. Alternatively, if you have access to Adobe Illustrator or
CorelDraw! you can use those too.

1. Using a tool of your choice, create a background. Preferably, do this in a vector graphics

10
 program like Inkscape. This will help you export at whatever resolution you want later
on but for the web you will typically only export at one resolution.
Note: To fully understand this task, you will need to understand the concept of resolution
and what it means. You have probably heard about it when used to describe the number
of pixels on a screen as “screen resolution”. If you are having problems understanding
this step or subsequent ones, you will want to refer to “Question(s) 1” to read up on the
topic prior to attempting this task.
2. Draw a logo and export it (as a PNG file). You can refer to the video in Figure 4 to have
a quick overview in how to draw using Inkscape.
3. Add your logo (in PNG) to a web page. To use the SVG file directly you can refer to this
link on using SVG files.
4. In the export window - take note of your logo size (i.e. the dimensions).
If you are using the SVG file, you should set the dimensions of the width and height based
on this. You can find AND SET the dimensions from within Inkscape. You can do this
from within Inkscape by looking at the top bar as shown in Figure 3.

Figure 3: Screenshot of the location of the selected object(s) size. You can change the size of
the object from here as well. (The screehshot is based on version 0.92. The version you are
using could have a slightly different interface)

5. Add your logo multiple times to the web page and each time set the dimensions (in the
HTML file - not create logos with these dimensions) to the following sizes:

11
 height (px) width (px) height (px) width (px)
100 100 100 not set
50 100 not set 100
100 50 1000 not set
200 50 not set 1000
1000 50
It is recommended that you label each of the images for you identify them later on.

Note: In Inkscape, the SVG is saved with the document size, not the object size. There-
fore, in most cases, you will have to resize your document to the object size. Do this
by pressing (Ctrl+Shift+R). This will resize your document to the objects (if nothing is
selected) or to the selected object(s).
6. What you should obtain is a web page with your logo or image replicated for as many
sizes given on ONE web page. Feel free to add more sizes if you want to observe the
results to come to a conclusion. To record your observation, take a screenshot. Compare
the outputs of the different dimensions and how it relates to the specified dimensions.
7. Repeat Steps 4 and 5 for an SVG file (not PNG).
8. Record your observations, discussions and conclusion into your observation file. Here
is a guide that you can use to guide your thoughts for this task. (You should have some
guiding thoughts for the other tasks).
(a) What is the original size of your created image?
(b) (In a table) Describe the observations for each image size.
(c) What conclusion can you draw from your observations?
(d) How can you apply what you have learnt?
i.e. (only for this question) How will you set image sizes for the images on your
web page?
Will you...
i. create a raster image the size you need it to be?
A. If so, how will you determine “the size it needs to be?”
B. Is there a way to automatically determine this required size?
ii. create a tiny raster image (e.g. 25x25 pixels) and scale it to whatever size is
needed?
iii. create a large raster image (e.g. 2500x2500 pixels) and scale it to whatever size
is needed?
For each of these questions, explain if the same answer applies to vector images.

12
Figure 4: Video of how you can use Inkscape. You will have to use an external program like
Adobe Acrobat (or the Reader)

Controls
 
Space Play/Pause
   
m Mute/Unmute
   
← → Seek backwards/forwards

  
  

↓ ↑ Decrease/increase volume
   

Now that you know how to place images and scale them, we will next look at how you can use
them as clickable links.

7 Image Hyperlinks
Image hyperlinks allows you to use an image as a link. In an earlier lab, you have learnt how
to use the anchor element to create a hyperlink and applied it to a text that is enclosed by the
anchor tags.

To create an image link (i.e. use an image as a link), you do the same as with creating a text
link but this time, you replace the text with an image. In other words, surround your image
element with anchor tags. When you do this, you are merely replacing the text that normally
sits in-between the anchor tags to an image. For example to place a link around an image called
“home.gif”, use the following HTML code:
1 // Anchor with text (in red) as the link

13
 2 <a href="index.html">
3 Link text
4 </a>
5 // Anchor using an image (in red)
6 <a href="index.html">
7 <img src="home.gif" height="19" width="85" alt="Home">
8 </a>

When an image is used as a hyperlink, the default look on some browsers is to show a blue
outline or border around the image. To hide this outline, set border=“0” (shown in red).
1 <a href="index.html">
2 <img src="home.gif" height="19" width="85" alt="Home" border="0">
3 </a>

8 Background images
Previously, we configured the background colour with the CSS background-color property. To
add a background image, we use a similar property: background-image. For example, if we
want to add background image called “bg.png” located in the same folder as the web page file:
(refer to the sections on absolute and relative links)
1 body{background-image: url("bg.png");}

Often, you will need to define the size of the image being used using the background-size
property. If you are using Visual Studio Code, pressing Ctrl+Spacebar will bring up the
various value options.

9 Combining background colour and image

You can configure both a background-color and background-image. First the background
colour will display, next the image specified as the background will be displayed.

1. If the background image does not load (for some reason), the background colour will still
have the expected contrast with your text colour.
2. If the background image is smaller than the web browser window and the web page is
configured with CSS not to automatically tile (repeat the image), the background colour
of the page will display in areas not covered by the background image.

1 body{background-color: #99CCCC;
2 background-image: url("bg.png");}

2
Taken from Mozilla background-size

14
 Table 3: Values for the background-size property.2

Value Description
contain Scales the images as large as possible without cropping or stretching the
image.
cover Scales the image as large as possible without stretching the image. If
the proportions of the image differ from the element, it is cropped either
vertically or horizontally so that no empty space remains.
auto Scales the background image in the corresponding direction such that
its intrinsic proportions are maintained.
<length> Stretches the image in the corresponding dimension to the specified
length. Negative values are not allowed.
<percentage> Stretches the image in the corresponding dimension to the specified per-
centage of the background positioning area. The background position-
ing area is determined by the value of background-origin (by default,
the padding box). However, if the background’s background-attachment
value is fixed, the positioning area is instead the entire viewport. Nega-
tive values are not allowed.

10 Browser display of a background image

You may think that a graphic created to be the background of a web page would always be the
size of the browser window viewport. However, the dimensions of the background image are
often much smaller than the typical viewport. The shape of a background image is often either
a thin rectangle or a small rectangular block which is replicated across the page (like wall paper
or tiled carpet). Unless otherwise specified in a style rule, by default, browsers repeat, or tile,
these images to cover the page’s background. See Figure 5 for some examples. This allows the
browser to use a small image (as the background) rather than a large image. A smaller raster
image (or more accurately, one with a lower number of pixels) has a smaller file size that can
be quicker to download over an image with more pixels.

This is the code that adds in the background image over a default black background. If the
image cannot be found, the black background will show instead.
1 body{background-color: #000000;
2 background-image: url("bg.png");
3 background-size: 100%}

Question(s) 3

1. What is the relationship between resolution and the number of pixels?

2. What does a large or small raster image mean?
3. How do you specify the size of a raster image?

15
 4. Explain if you can specify the size of a vector image. If so, how.

Task 4: Creating your own background

In this task, you will create your own background by determining a few parameters for your
background, for example:

• What size should your background be?

• What format should it be in? Raster or vector?

Let’s start creating a background of your choice.

1. Create a background using a vector graphics program like Inkscape (or Adobe Illustrator
or CorelDraw!). Note: Your background should not be something complex as it will be
distracting.
2. Export images (for your background) with the following dimensions:

height (px) width (px) height (px) width (px)

10 10 10 2000
10 20 100 50
10 200 100 100
Note: You do this by changing the object size from the top bar of the Inkscape window as
“W” and “H”. Remember to change the unit to “px” (pixels). You can refer to Figure 3.
3. Apply these backgrounds to the body of a web page. For each of the backgrounds you
have created, include and remove the property background-size: 100% which was used
in the given examples.
Note: In this step, you will have added 12 different backgrounds, 6 with and 6 without
the property background-size.
4. In this step, you will use the SVG file as the background image. Based on what you know:
(a) Explain if you include testing with and without the background-size property. If
yes, what sizes should be tested?
5. Record your observations into your observation file (from an earlier task). Use guiding
questions as has been shown in Task 3 and determine what you have learnt from this task
and how you can apply it.

Question(s) 4

1. Based on the work you have done, explain if the background image should be
raster or vector.

16
 2. Explain under what circumstances you would use either type.
3. Explain which size you think is the optimal size (in terms of the pixel dimen-
sions) for a background image.
4. What is the effect of including and excluding the property background-size?
What do you think it does to your code and how can you use it?

11 Repeating the background: background-repeat

As just discussed, the default behavior of a browser is to repeat, or tile, background images to
cover the entire element’s background. This behavior also applies to other elements, such as
backgrounds for headings, paragraphs, and so on. You can modify this tiling behavior with the
CSS background-repeat property with values such as:

• repeat (default)
• repeat-y (vertical repeat)
• repeat-x (horizontal repeat)
• no-repeat (no repeat)

12 Positioning the background: background-position

You can specify other locations for the background image besides the default top left location
by using the background-position property. Valid values include percentages; pixel values; or
left, top, center, bottom, and right.

Task 5: Applying your background to more than just the body

and using the background-repeat property
In this task, you are going to apply the different sizes of backgrounds to more than just the body.
After which, you are going to change the position of the background for that element using the
background-position property.

1. Using the 100 × 100 background image that you created earlier, apply this to a level 1
heading (h1).
You can try adding other background images of your choice and from the file “starter.zip”
(which is attacked to this PDF).
2. Depending on what you drew, you may need to turn off repetition of the background.
3. Use the background-position property to adjust the position of the background image
to make it look the way you want it to.

17
(a) The background image. (b) The background image applied as the background-image.
Note the repeated pattern (by default).

(c) The background image. (d) The background image applied as the background-image.

(e) The background image. (f) The background image applied as the background-image.
Note the repeated pattern (by default).

(g) The background image. (h) The background image applied as the background-image.

Figure 5: Example of backgrounds long and thin rectangles and small blocks.

18
 4. Record your observation.

Task 6: Styling your web site

You are now to turn your attention to your website. Refer to Figure 6 for how it should look
like. To help you, here are some hints:

• A copy of the screenshot can be found here . This is to allow you to use the tools in a
graphics manipulation program (Paint (the one that comes with Windows), GIMP, Adobe
Photoshop, etc.) or even Microsoft PowerPoint to extract the different colours.
(Hint: Eyedropper tool)

• Use the provided graphics resource files to help with the logo.

General Instructions

1. Change the colour of your website to match what you see in Figure 6. Do not worry about
the content on the page. Our focus is the look of the page.
2. Add any graphics elements as you see fit.
Note: While there are some files given for things like the button, try making them into
vector format (e.g. redrawing using a software like Inkscape) or using any other method
you know.
3. Refer to the slides given here for help:
Here are some properties that you might need (this is NOT exhaustive and not in any
particular order):
• background-image
You will need to add images as a “background-image” to include them in styles.
• background-repeat
You will need to turn off repeat for some of the images you add.
• background-position
• background-origin
• padding-left
You will need to move your <h2> later on after you have added the logo on the
left.
4. Ensure all images are in one folder.

Note

Feel free to experiment with different colour schemes for your web site.

19
 Figure 6: Final page outlook.

13 Summary
In this lab, you will have done the following:

1. Changing CSS styles for your web site.

2. Add styling elements like lines and borders to HTML elements.
3. Adding images and background to your website.
4. Learning how to use Inkscape to draw vector illustrations and to export them as PNG
files.

And by answering the question(s) learn the following:

1. What resolution is and how it applies to screen and print.

2. The difference between raster and vector, where you will use either one and the ability to
identify each image type based on the file extensions.
3. The difference between different colour types and spaces.

14 References
1. Understanding relative links.
2. Mozilla background-size

20
Submission
In your submission archive, you should have the following files/folders:

1. your report file.

2. your entire website folder called website_ve in a single .zip file. (Standard Zip format
using DEFLATE)
(the ve stands for visual elements, which is what this lab is about)
3. Observations: a single observation file in PDF format.
Filename: <studentID>_observations.pdf, where <studentID> is to be replaced with
your own Student ID.
Example:
If your StudentID is: 11223344, the filename will be “11223344_observations.pdf”.
4. Answers to questions: an answers file in PDF format.
Filename: <studentID>_answers.pdf, where <studentID> is to be replaced with your
own Student ID.

Ensure the following:

1. The file is correctly named and in the correct format.

2. The file name is <studentID>_Lab3.zip where <studentID> is your student ID
without the angled brackets.
3. The file you submit must be the zip format. Do not use any other file or archive type.
If you are using your laptop and do not have that software, you can download a free zip
archive creator from the 7zip download page. If you are using 7zip, remember to change
the archive format to ZIP. For Mac users, you can use Keka.

The submission link will be found on eLearn. Adhere to the guidelines and instructions on
eLearn.

21
 Note

As this is an official submission, you must not submit work that is NOT yours. Prevailing
academic malpractice rules apply. Please refer to your student handbook what they are.

Your web site folder structure should look like this: (Icons are included for easier identification
of files and folders.)

Legend:
: These are folders/directories.
: These are files. No special formatting.

<studentID>_Lab3.zip . . . . . . . . . . . This folder/directory holds all your web site

files.
<studentID>_observations.pdf This is the PDF file where you record all your
observations. Replace the <studentID> with
your own sans the angled brackets.
screenshot_file.ext . . . . . . . . . . . . . This is the screenshot that you saved from an
earlier task. Filename and the file format does
not matter. The file extension would be what-
ever you saved it as, typically JPEG or PNG.
Just make sure it’s an image file.
<studentID>_answers.pdf . . . . . This is the PDF file with the answers to the
questions in this lab. Replace the <studentID>
with your own sans the angled brackets.
website_ve . . . . . . . . . . . . . . . . . . . . This folder/directory holds all your web site
files.
css . . . . . . . . . . . . . . . . . . . . . . . . . This folder/directory contains all CSS files.
website_css.css . . . . . . . . . . This is your common CSS file for the whole
website. All other files should point to this CSS
file.
images . . . . . . . . . . . . . . . . . . . . . This folder/directory contains all your figures
files. Feel free to create more sub-folders to or-
ganize your images.
index.html . . . . . . . . . . . . . . . . . . This is your home page.
contact.html . . . . . . . . . . . . . . . . This is your contact page.
services.html . . . . . . . . . . . . . . . . This is your services page.

22
Changelog
• Version: 4.1.3
Date: 8 Sep 2020
1. Updated: Removed parts that requests observations be done in a text file. (Stage 2)
2. Added: Instruction regarding Inkscape document size.
• Version: 4.1.2
Date: 6 Sep 2020
1. Updated: Submission instructions.
2. Updated: Removed parts that requests observations be done in a text file.
3. Added: Part on creating an observation file
• Version: 4.1
Date: 12 May 2020
1. Updated: Information on the attached file..
• Version: 4.0
Date: 11 May 2020
1. Corrected: Some instructions within the task.
2. Updated: LaTeX class sheet and newtask commands.
3. Updated: Download of Inkscape (version 1.0) is now available.
• Version: 3.2
Date: 13 Sept 2019
1. Correction to the border command. Section 5.2
• Version: 3.1
Date: 13 Sept 2019
1. Added another Task 1 (borders). Original Task 1 is now Task 2.
2. Added explanations and questions.
• Version: 3.0
Date: 12 Sept 2019
1. Added Task 1. Original Task 1 is now Task 2.
2. Rearranged material to hopefully better make sense of it.
3. Added an Inkscape screenshot on changing sizes.
• Version: 2.4.1
Date: 11 Sept 2019
1. Reworded Task 2.

23
 2. Highlighted some text in brown to differentiate them using a newcommand “code”.
• Version: 2.4
Date: 11 Sept 2019
1. Made further corrections to Task 1.
2. Added some guide questions to help student understand what tasks are for.
3. Moved Question(s) 1 to before Task 1.
4. Changed Task 1 instructions - added more resolutions and SVG.
• Version: 2.3
Date: 10 Sept 2019
1. Changed the links to cyan for better visibility.
2. Changed tasks heading to red colour.
3. Changed submission instructions.
4. Changed default TT font to CMVTT.
5. Changed links for Inkscape from the portableapps website to the official Inkscape
site as the 7z portable version has been made available.
6. Changed Task 1 instructions.
7. Added Question(s) 1 after Task 1 and 2
8. Added items to the “Summary”.

24