GOOD WEB PAGE DESIGN�Images.

CONTENT

• Image inspection.
• Images in a web page.
• Inserting an image into a web page.
• Classroom activity 1.
• Adjusting the size of an image.
• Classroom activity 2.
• Classroom activity 3.
• Solution.

Image inspection

Site one:

http://scientificbeekeeping.com/the-extinction-of-the-honey-bee/

​

Site two:

http://disneyxd.disney.com/

​

Site three:

http://www.shutterstock.com/cat-21-Interiors.html

Images in a web page:

IMPORTANT:

• Images in a web page make the page more interesting.
• Adding images should be to enhance the appearance of your page.
• Make sure your images are clear and fit in with what your page is all about.

Inserting an image in a web page:

Image tag:

<img> </img>

Attribute for an image tag:

src

The value for a link attribute:

=”image name.extention”

The syntax for an image is:

<img src =”image name.extention”>

Example of an image that’s going to be inserted in a html document:

<img src =”blue bull.jpg” alt=”Blue Bull Rugby”> > </img>

The alt attribute is not compulsory. It will appear on the page where the image should be, if the image, for some reason, doesn’t want to load.

The src attribute indicates the source of the image.

Classroom activity 1: Insert an image

• Open the html document CAPE TOWN.html from your CAPE TOWN PAGE folder, in Notepad++.
• Insert the image bay.jpg (also in your CAPE TOWN PAGE folder) into the html document underneath the last break.
• Save and open in your browser.

​

​

IMPORTANT:

If it’s not inside the main web page folder, it will not be able to be used in the web page!!

Adjusting the width and height of an image:

IMPORTANT:

Width and height are measured in “pixels”.

Adding the width and height attributes:

<img src =”image name.extention” width=”pixels” height=”pixels”> </img>

Insert it after the picture name.

Classroom activity 2: Adjust the size of an image.

• Continue in the html document CAPE TOWN.html from your CAPE TOWN PAGE folder, in Notepad++.
• Adjust the size of the image bay.jpg to 150 pixels wide and 150 pixels high.
• Save and refresh in your browser.

Classroom activity 3: Insert and adjust more pictures.

• Now add 4 more pictures to the Cape Town.html document.
• You have to choose from the available pictures in the CAPE TOWN PAGE folder, otherwise the pictures will not show.
• Adjust each picture’s width and height so none of them will be the same size.
• Save and refresh the page in your browser.
• Take a screenshot of the page and paste it in a new word document named Different sizes.docx.
• Now adjust the sizes of all your pictures in the html document to the same size. SAVE and refresh your browser.

TIP: If you add all the images next to each other in Notepad++, it will appear next to each other in the web page.

Solution: CAPE TOWN.html

THE END