OIM3690 - Web Technologies

Working with Images

Types of Image Files

• Images typically are one of the following types:
  • .jpg or .jpeg (Joint Photographic Expert Group image)
  • .png (Portable Network Graphics)
  • .svg (Scalable Vector Graphics)
  • .gif (Graphics Interchange Format)
  • .webp (Web Picture format)
• Avoid using these image files
  • .bmp (Bitmap)

HTML <img> Tag

• Syntax

  <img src="URL" alt="some text" title="some text" />
  

• Attributes for a HTML tag

  • src, alt, and title are attributes
  • The text you provide for each attribute is the attribute’s value.
  • The value is always in straight quotes.
  • The attribute-value pair is separated by a blank space.

src Attribute

<img src="URL" … />

• URL can be a local file
  • Example: <img src="picture.jpg" alt="picture of me"/>
  • This image file, picture.jpg, must be in the same folder as the webpage file that is displaying it
• URL can be an external file
  • Example:

    <img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Stephen_Curry_Shooting_%28cropped%29.jpg"
    alt="Steph Curry"/>
    

Size Attributes

<img src="URL" alt="some text" title="some text" width="300" height="200" />

• width and height are in pixels
• If one is provided, the other is adjusted based on the proportion of the original image.
• Example:
  • If the original image is 2" by 3", the proportion is 2/3 or 3/2. So, if width is specified as "200", height is automatically computed as "300".

Providing Credit for Images

• If an image is not your own, you should give credit to its source/owner. Examples:
  • "Photo courtesy of <photographer’s or company’s name with appropriate link>"
  • "Credit: <photographer’s or company’s name with appropriate link>"
• You can find high-quality free images without worrying about copyright infringement from
  • Unsplash
  • Pixabay
  • Pexels
• Be sure to check the user agreement or terms of service of any website before using their images.

Exercise - Extending ex01.html

1. Add an Image
   • Insert an image above the first paragraph using the <img> tag.
2. Add an External Link
   • Add a link at the end to an image related to your hobby using the <a> tag.
3. Save and Test
   • Save the file and preview it in your browser.
4. Create Index Page
   • Copy ex01.html and rename it to index.html.

Why index.html?

• The first page of a website opens automatically without specifying its name.
• Also called the home page or index page.
• Search engines index and save this page.
• Common names:
  • index.html (most common)
  • default.html, home.html (less common)
• We will always use index.html.