TUTORIAL: Pictures

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

• The <img> tag does not have a closing tag.
• The <img> tag has two required attributes:
• • src - Specifies the path to the image
  • alt - Specifies an alternate text for the image (if people are visually impaired, they have a browser that reads what's on the page so this would describe the image)

Note: in our webpage project we won't add the alt description or the closing slash. 

• The most common photo type/extension = .jpg
• If it doesn't work, check the file type - you can see the type in the folder. Other common extensions/types = .png / .gif

You can use the width and height attributes. It's best to just use one or the other so your image stays proportional (doesn't get stretched or squished).

• If you're working from home using w3schools, you will skip the next page of instructions.
• Instead of saving the pictures to your computer, you will use links to the images.
• While you won't be saving them into a folder, as you search, make sure you're finding the right type of pictures:
• • Bottom pics = horizontal/wide type of picture
  • Side Pics = vertical/square type of picture

In a new tab in Chrome, search for a picture for your first topic. 

•  When you find a picture you like, click on the thumbnail and see how it looks in the preview. Make sure it's clear, not blurry!
• The other thing is the size. Is it big enough? Check the first #:
• • wide/horizontal type of picture = at least 500px width
  • tall/vertical/square type of picture = at least 250px width

When you found a picture you want to use, right-click on the preview and “Copy image address”.

In your code, paste the image address (CTRL+V) between the quotation marks.

• Make sure it's not a super long link (if it is, make sure you are copying the preview, not the thumbnail which = search page). 
• If it is, undo (CTRL+Z) and try another one
• The link should end with "jpg" or "png" or "gif".