1 / 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.

olina
Download Presentation

Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images

  2. What did we do last week?

  3. HTML pages Last week you should have had something that looked like this

  4. Tags Start tag

  5. Tags End tag

  6. Tags Content

  7. HTML pages <DOCTYPE> for what type of document your page is

  8. HTML pages HTML tags

  9. HTML pages <head> are for the headers

  10. HTML pages <title> for the webpage name

  11. HTML pages <body> tags are for….

  12. HTML pages …everything you want to display on the actual webpage

  13. HTML pages <h1> for Headings

  14. HTML pages <h2> Further Headings

  15. HTML pages <p> for paragraphs

  16. HTML pages <b> for bold

  17. HTML pages <i> for italics

  18. HTML pages <u> for underlined

  19. Spot the difference

  20. The bottom website is easier to read!

  21. Blank Spaces (Indentations) Blank lines

  22. Blank Spaces (Indentations) Indentations (Press the TAB button)

  23. 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!!!

  24. Image Tag

  25. Image Tag No content? No end tag? /> acts as an ending

  26. Image Tag Attributes are inside the tag

  27. Image Tag src= path to the image

  28. 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.

  29. 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!

  30. Image Tag alt= alternate text

  31. Alt text • What if the image can’t be displayed? • Blind people • Slow Internet • You can set alt text by using the “alt” attribute

  32. Image Tag Height and width

  33. 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

  34. More Information • More information @ W3Schools • http://www.w3schools.com/html/html_images.asp • Task • Open up the Images Worksheet presentation

More Related