34
IMAGES
IMAGES
What did we do last week?
HTML pages
Last week you should have had something that looked like this
Tags
Start tag
Tags
End tag
Tags
Content
HTML pages
<DOCTYPE> for what type of document your page is
HTML pages
HTML tags
HTML pages
<head> are for the headers
HTML pages
<title> for the webpage name
HTML pages
<body> tags are for….
HTML pages
…everything you want to display on the actual webpage
HTML pages
<h1> for Headings
HTML pages
<h2> Further Headings
HTML pages
<p> for paragraphs
HTML pages
<b> for bold
HTML pages
<i> for italics
HTML pages
<u> for underlined
Spot the difference
The bottom website is easier to read!
Blank Spaces (Indentations)
Blank lines
Blank Spaces (Indentations)
Indentations (Press the TAB button)
Saving Images
All images on your site need to be saved in your images folder
You can create sub folders to organise your images For example an animals folder for all animal
pictures You can display all the common image
types such as .JPG, .GIF and .PNG
Chose a PNG image over any other type!!!
Image Tag
Image Tag
No content?No end tag?
/> acts as an ending
Image Tag
Attributes are inside the tag
Image Tag
src = path to the image
Destination Paths
How do we set the image we want to display?
Open up the folder explorer and go to where your web page is
Write down which folder(s) you’d need to go into to find your saved image
Separate each folder with a / For example my cat picture is saved in
the “images” folder.
This is why we make sure all our webpages are in the top folder, and all our images are
in a sub folder!
Imagine the mess if we didn’t have any structure!
Image Tag
alt= alternate text
Alt text
What if the image can’t be displayed? Blind people Slow Internet
You can set alt text by using the “alt” attribute
Image Tag
Height and width
Height and Width
Your image might be way too big to fit nicely on the webpage
Can set the height and width in pixels Good practice
The browser will reserve space for the images If you don’t reserve space, the layout will
change as the images display
More Information
More information @ W3Schools http://www.w3schools.com/html/
html_images.asp Task
Open up the Images Worksheet presentation
