Inserting Images

9–11 MINS READ

Agenda

  1. HTML Images
  2. Image Attributes
  3. Types of Web Page Image
  4. Absolute vs. Relative URL
  5. Image CSS Properties
  6. background Properties

HTML Images

  • In HTML, images are defined using <img /> tag.
  • The <img /> tag creates a holding space for the referenced image.
  • The <img /> tag is empty, it contains attributes only, and does not have a closing tag.

HTML Image Attributes

  • The src attribute specifies the path (URL) to the image.
  • The alt attribute provides an alternate text for an image, if the user for some reason cannot view it.
  • The value of the alt attribute should describe the image.
  • It is important to take note of the file type of the image (.jpg, .png, .gif).
<body>
  <img src="images/html.png" alt="HTML logo" />
</body>

Types of Web Page Images

  • Graphics Interchange Format (.gif) use for images with few colors (<256) and allows transparent backgrounds. It uses compression techniques called LZW compression, to make it smaller to download on the Web.
GIF example 1GIF example 2GIF example 3
  • Portable Network Graphics (.png) newest format for images that supports multiple colors and resolutions. The PNG format is patent-free.
PNG example 1PNG example 2
  • Joint Photographic Experts Group (.jpg) is a graphic image saved using a lossy compression techniques that discards some data during compression process. JPEG file format supports images with many colors (>256), such as photographs.
JPG example 1JPG example 3JPG example 2

Absolute and Relative Image URL

  • ABSOLUTE URL is a uniform resource locator (web address) that begins with http:// and then specifies a website, possibly a folder and a then a filename.
  • RELATIVE URL is a uniform resource locator that is relative to the current HTML page location. The relative URL will specify the image location (rather that the complete site).

Absolute URL

<body>
  <img 
    src="https://onlinejpgtools.com/images/examples-onlinejpgtools/sunflower.jpg" 
    alt="Sunflower" 
  />
</body>

Relative URL

<body>
  <img src="images/sunflower.jpg" alt="Sunflower" />
</body>

CSS Properties


The width and height property

  • We can use the style attribute to specify the width and height of an image.
  • Resizing is ideal for large-sized images.
  • Checking the actual size of the images is important when resizing to determine the new image size ratio.
  • The width and height attributes always define the width and height of the image in pixels.
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="width: 300px; height: 200px;"
  />

  <!-- or you can use the attributes width and height -->
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    width="300"
    height="200"
  />
</body>

The border property

  • The CSS border shorthand property allows users to specify the width, style and color of an element’s border.
    • border-width
    • border-style (required)
    • border-color
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black;"
  />
</body>

The broder-style property

  • The border-style property specifies what kind of border to dispay.
  • The width can be set as a dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden.

A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value
A ridge border. The effect depends on the border-color value
An inset border. The effect depends on the border-color value
An outset border. The effect depends on the border-color value
No border.
A hidden border.
A mixed border.

The border-width property

  • The border-width property specifies the width of the four borders.
  • The width can be set as a specific size (in px, pt, cm, em) or by using one of the three pre-defined values: thin, medium, or thick.
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: 5px;"
  />
</body>

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick;"
  />
</body>

The border-color property

  • The border-color property is used to set the color of the four borders.
  • The border-color property can have from one to four values.
    1. top border
    2. right border
    3. bottom border
    4. left border
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick; border-color: red;"
  />
</body>

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick; border-color: red blue green yellow;"
  />
</body>

The border-radius property

  • The border-radius property is used to add rounded borders to an element.
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; border-radius: 10px;"
  />
</body>

The display and margin property

  • The display property specifies if/how an element is displayed. Giving a value of block on the display property will let the element take the whole line on its own.
  • The margin property is used to create space around elements. Giving a value of auto to the margin property gives the element equal amounts of spaces on the left and right side making it appear in the center.
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; border-radius: 10px; display: block; margin: auto;"
  />
</body>

The float property

  • The CSS float property specifies how an element should float.
  • The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
  • The float property can have left, right, none, or inherit value.
<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; float: right;"
  />
</body>

CSS background properties


The background-image property

  • The background-image property specifies an image to use as the background of an element.
  • By default, the image is repeated so it covers the entire element.
<body style="background-image: url(images/mickey.png);">
  <!-- contents here -->
</body>

The background-repeat property

  • The background-repeat property repeats an image both horizontally and vertically.
  • The value can be horizontally repeated (repeat-x), vertically repeated (repeat-y), or no-repeat.
<body style="background-image: url(images/mickey.png); background-repeat: no-repeat;">
  <!-- contents here -->
</body>

The background-attachment property

  • The background-attachment property specifies whether the background image should scroll or be fixed.
<body style="background-image: url(images/mickey.png); 
             background-repeat: no-repeat; 
             background-attachment: fixed;"
>
  <!-- contents here -->
</body>

The background-position property

  • The background-position property is used to specify the position of the background image.
<body style="background-image: url(images/mickey.png); 
             background-repeat: no-repeat; 
             background-attachment: fixed;
             background-position: top right;"
>
  <!-- contents here -->
</body>

The background-size property

  • The CSS background-size property allows you to specify the size of background images.
  • The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
<body style="background-image: url(images/mickey.png); 
             background-repeat: no-repeat; 
             background-attachment: fixed;
             background-position: top right;
             background-size: 379px 391px;"
>
  <!-- contents here -->
</body>

The background property

  • The CSS background property sets all the background properties in one declaration.
  • When using the shorthand property the order of the property values is:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right;">
  <!-- contents here -->
</body>

<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right; 
             background-size: 379px 391px;">
  <!-- contents here -->
</body>

HTML Favicon

  • A favicon is a small image displayed next to the page title in the browser tab.
  • To add a favicon to your website, use the <link /> element within the head section of your HTML document.
  • The <link /> tag defines the relationship between the current document and an external resource.
  • The <link /> element is an empty element; it contains attributes to perform its function.
  • The rel is required attribute that specifies the relationship between the current document and the linked document. (icon)
  • The type attribute specifies the media type of the linked document. (image/icon)
  • The href attribute specifies the location of the linked document.

HTML Favicon

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/icon" href="images/mickey.png" />
  <title>Inserting Images</title>
</head>

Summary Table

AttributesDefinition
srcSpecifies the path (URL) to the image.
altProvides an alternate text for an image, if the user for some reason cannot view it. The value of the alt attribute should describe the image.
width and heightAlways define the width and height of the image in pixels.
relRequired attribute that specifies the relationship between the current document and the linked document. (icon)
typeSpecifies the media type of the linked document. (image/icon)
hrefSpecifies the location of the linked document.

Credits

This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.