Lesson 5: Inserting images in pages

Now that we can construct web pages with hyperlinks, and style them attractively, we'll see how to add some useful extra elements.

Images

• Web documents can include digital images (if they are displayed with a graphic browser).
• Images must be stored separately from the document that includes them.
• HTML source code contains instructions for where to obtain the image.
• An image is similar to a hyperlink, but the image is fetched immediately and incorporated into the rendered document.
• A document that contains multiple images must send multiple requests to fetch them all
• images do not have to be on the same computer as the HTML document.

Image formats

• There are many different ways, called image formats, to store the information for producing the image.
• There are three formats commonly used for web images:
  • GIF - Graphics Interchange Format, patented by CompuServe
  • JPG or JPEG - created by the Joint Photographic Experts Group
  • PNG - Portable Network Graphics - developed especially as a standard for web graphics by the W3C.

The img element

• Images are included in a document using the img element
• The img tag is not a container
• the closing slash (/) must be included in the same tag
• basic format is: <img src="URL locating the image" alt="alternative text" />
• there must not be any space after the closing /
• The img element has several attributes (properties), including src and alt.

The src attribute

• the src attribute tells where to obtain the image
• src for an image is similar to href for a hyperlink
• the value of src can be a full or partial URL

The alt attribute

• provides text to be used if the browser cannot display the image
  • the browser is not a graphic one
  • the user has images disabled
  • the src URL is incorrect;
  • the user has a very slow internet connection
  • the image file is defective or missing
• is an essential attribute
• is required by the XHTML standard
  

Example

The tag:

    <img src="http://wyrd.hood.edu/~dong/it581/s2015/graphics/lesson05/sunset.jpg" 
           alt="Sunset" />

The result:

Image dimensions in style rules

• images are always a rectangle.
• displayed height and width can be specified with style rules
• height and witdth are frequently given in pixels
• a style rule for img will apply to all images in the document.
• to make exceptions for some images, you can use ids or classes.

Example

        <style type="text/css">
                img {
                   width:100px;
                   height:200px; 
                   }
                #wide_pic {
                   width:450px;
	                  height:75px; 
                   }
                img.small_pic {
                   width:15px;
                   height:20px; 
                   }
         </style>

• all images in the document will be displayed 100 pixels wide by 200 pixels high in size, unless otherwise specified
• the single image whose ID is wide_pic will be displayed 450 pixels wide by 75 pixels high.
• any image with class="small_pic" will be displayed 15 pixels wide by 20 pixels high.

Inline style rules

• style rules can be specified right in the image tag, this is called an inline style rule
• an inline style is specified as the value of the style attribute:
  <element style="style rules">
• examples:
  • <p style="background-color: red">
  • <h2 style="font-size: 110%; font-weight: normal">
  • <img src="http://wyrd.hood.edu/~dong/it581/s2015/graphics/lesson05/sunset.jpg"
    alt="Sunset"
    style="width:200px; height: 79px " />
• you can have both <style type="text/css">...</style> sections and inline style rules in the same document.
• inline style rules take precedence

Inline image dimensions

• different images in a document may have different dimensions
• inline styles provide a convenient way to give individual images different dimensions
• however a general rule is preferable if several images have the same dimensions

<img src="http://wyrd.hood.edu/~dong/it581/s2015/graphics/lesson05/sunset.jpg"
          alt="Sunset"
          style="width:200px; height: 50px;" />
          
<img src="http://wyrd.hood.edu/~dong/it581/s2015/graphics/lesson05/sunset.jpg"
          alt="Sunset "
          style="width:100px; height: 100px;" />
          

Note: To see the true dimensions of an image, right-click on the image and then choose "Properties" from the popup menu.

Effects of displaying an image smaller/greater than the original

• the original image file is stored on the web server, it can be displayed in different dimensions from the original
• the original is not changed, only the display
• if it is displayed smaller than the original size, the file takes the same time to download
• if you want to improve download time by using smaller images, you have to change the size with a graphics editor and save the edited file.
• Effects of displaying an image larger than the original

Images and links

• If an image tag is contained within an anchor, the image will be clickable as part of the link.
• the alt text should be changed to reflect the link rather than just the picture.
• if the image is unavailable, the meaning of the link will still be reasonably clear.

Example

<a href="http://www.hood.edu/">
    <img src="http://wyrd.hood.edu/~dong/it581/s2015/graphics/lesson05/hood.jpg "
         alt="Hood College" ></a>

How images are displayed

• browsers normally display images as inline elements
• the image is treated just like a letter or symbol in the text.
• if the image is in a paragraph or other block, it follows the alignment rules for the block

Example - inline image

<p style="text-align: center">... image tag here ...</p>

... ...

Example 5.1 - inline images

• This linked example shows several inline images
• each image is treated like a large character in the text.
• adjust the window to different sizes to see the effect
• be sure to view the source code

The float property

• the float property applies to blocks, possible values are right, left, and none
• when a block is floated, it is positioned as far to the side as possible.
• all the content that comes after the block will fill in beside it (flow up into the space).
• to "wrap" text around an image use a style rule that floats the image.
  • for example img { float: right }

Example 5.2 - floated images

• This linked example shows several floated images
• it is the same as example 5.1 with one exception
• it uses the rule img { float: right }
• each image is positioned as far to the right as possible
• the following text and images flow up around it
• adjust the window to different sizes to see the effect
• be sure to view the source code

Borders

• Sometimes you want to
  • display an image with a border around it
  • suppress the colored border that shows when an image is used as a link. (The previous example does not have that border because these class notes have been designed to suppress it.)
  • outline a paragraph or heading with a border
• CSS lets you specify several aspects of borders
• a border has 3 main properties
  • border-style
  • can be solid, dotted, double, ridge, and several others
  • can also be none
  • the default is none
  • if you do not specify a style, there is no border
  • Different browsers may interpret some of the border-style types slightly differently.
  • border-width
    • can be thin, medium, or thick
    • can be a length in px, %, or other units.
  • border-color
    • can be any color value

Example

<style type="text/css">  
   img { border-style: double;  
         border-width: 20px;          
         border-color: teal; }  
</style>

the border will look like:

Variation

The three parts can be combined one border property rule. The individual values are separated by spaces.

        <style type="text/css">
            img { border: double 20px teal; }
        </style>

Example 5.3 - borders

You can add a border style to paragraphs and other elements too.

<style type="text/css">  
        body {margin: 20px;
              background-color: #FFFF00;
              border: dotted 30px red;}
        h1 {border: ridge 8px  #00FFFF}
        h2 {border: double thick silver}
        strong { border: solid medium #00FFFF; }
        p { margin: 25px; }
</style>

Complete example page

Example 5.4 - Floating Other elements

• you can float paragraphs and other blocks too.
• the width of the block must be less than the full page
• the class index page uses floated blocks to make columns.

      <style type="text/css">    
         body {background-color: white; color: black}
         img {float: right }
         p.first { 
               width: 250px; 
               float:left; 
               border: solid thin red;}
      </style>

Complete example page

Examples

Here's a real site with a larger image, showing the wrapping technique used in a page. margins keep the text from bumping up against the image.

Guidelines

• Always provide ALT text for an image. If there is no suitable text, make it blank ("").
• Always give dimensions for images, including if they are the same as the true image dimensions.
• Use a rule in the stylesheet if you have several images that are to be shown the same dimensions.
• Use classes or inline style rules if images are all different dimensions.
• Specify margins on the sides where an image is next to text. It helps readability.