Images

transcript

IMAGES

What did we do last week?

HTML pages

Last week you should have had something that looked like this

Start tag

End tag

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

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

Images

Documents