When I looked once more for Gatsby he had vanished, and I was alone again in the unquiet darkness.
Last week you should have had something that looked like this.
-
Upload
bennett-boyd -
Category
Documents
-
view
221 -
download
0
Transcript of Last week you should have had something that looked like this.
![Page 1: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/1.jpg)
IMAGES
![Page 2: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/2.jpg)
What did we do last week?
![Page 3: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/3.jpg)
HTML pages
Last week you should have had something that looked like this
![Page 4: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/4.jpg)
Tags
Start tag
![Page 5: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/5.jpg)
Tags
End tag
![Page 6: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/6.jpg)
Tags
Content
![Page 7: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/7.jpg)
HTML pages
<DOCTYPE> for what type of document your page is
![Page 8: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/8.jpg)
HTML pages
HTML tags
![Page 9: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/9.jpg)
HTML pages
<head> are for the headers
![Page 10: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/10.jpg)
HTML pages
<title> for the webpage name
![Page 11: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/11.jpg)
HTML pages
<body> tags are for….
![Page 12: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/12.jpg)
HTML pages
…everything you want to display on the actual webpage
![Page 13: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/13.jpg)
HTML pages
<h1> for Headings
![Page 14: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/14.jpg)
HTML pages
<h2> Further Headings
![Page 15: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/15.jpg)
HTML pages
<p> for paragraphs
![Page 16: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/16.jpg)
HTML pages
<b> for bold
![Page 17: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/17.jpg)
HTML pages
<i> for italics
![Page 18: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/18.jpg)
HTML pages
<u> for underlined
![Page 19: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/19.jpg)
Spot the difference
![Page 20: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/20.jpg)
The bottom website is easier to read!
![Page 21: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/21.jpg)
Blank Spaces (Indentations)
Blank lines
![Page 22: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/22.jpg)
Blank Spaces (Indentations)
Indentations (Press the TAB button)
![Page 23: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/23.jpg)
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!!!
![Page 24: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/24.jpg)
Image Tag
![Page 25: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/25.jpg)
Image Tag
No content?No end tag?
/> acts as an ending
![Page 26: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/26.jpg)
Image Tag
Attributes are inside the tag
![Page 27: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/27.jpg)
Image Tag
src = path to the image
![Page 28: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/28.jpg)
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.
![Page 29: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/29.jpg)
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!
![Page 30: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/30.jpg)
Image Tag
alt= alternate text
![Page 31: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/31.jpg)
Alt text
What if the image can’t be displayed? Blind people Slow Internet
You can set alt text by using the “alt” attribute
![Page 32: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/32.jpg)
Image Tag
Height and width
![Page 33: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/33.jpg)
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
![Page 34: Last week you should have had something that looked like this.](https://reader035.fdocuments.us/reader035/viewer/2022062322/56649ea95503460f94bacd74/html5/thumbnails/34.jpg)
More Information
More information @ W3Schools http://www.w3schools.com/html/
html_images.asp Task
Open up the Images Worksheet presentation