Html 5 and CSS - Image Element

HTML 5 and CSS
The image element
By Kevin Kemp

Purpose of this document
 The purpose of this document is to explain
the HTML Image element
 What it is used for
 How to code it using HTML
 How to style it using CSS
 To demonstrate the use of the image
element, I coded a simple webpage,
including only images with various
formatting, and a more functional webpage
to demonstrate practical examples of
styling.

The Image element
 The Image element has many uses
within websites:
 Banners
 Backgrounds
 Hyperlinks
 Photo Galleries
 Web page layouts

Coding the element
 An Image can be coded as per below:
<img src=“imagename.jpg"/>
 This causes an unformatted image to display in
the webpage
 It will display in the standard image size without
any styling applied
 The image file must be located in the same folder
structure as the HTML document
 Note that because I am coding in HTML 5, the
doctype declaration used is simply
<!DOCTYPE html>

Formatting the element
 Image elements can be formatted in
many ways, within the HTML code
and within CSS. CSS is the preferred
for layouts and in HTML 5 certain
attributes are deprecated, for
example the align attribute now
needs to be coded in CSS.

Alt text, height, width and title
 Alt text is text that will display when an image fails to load.
 Height and width can be defined for an image, in pixels or
in a percentage of the containing element. This can also be
configured in the stylesheet of a webpage instead of coding
for multiple images individually.
 When a title is added to the image element, upon hovering
over the image on the webpage, a popup text will appear.
This can be used to explain the image.
 Below is an example of how these are coded, with the alt,
height, width and title attributes highlighted
<img src="CIT-Logo.jpg" alt="CIT.com.au link"
height="120" width="140" title="This is a title"/>

Alt text, height, width and title
example
 As you can see from the
example, the height and width
have been changed to make the
image smaller than its regular
size.
 When the screenshot was taken,
I was hovering the mouse over
the image and the title “This is a
title” appeared.

Borders
 It is easy to add a border to the
image. In the example below, I
have coded a 5 pixel border around
the image.
 The border attribute is highlighted
below.
 The image border will default to
black but can also be formatted.
 <img src="CIT-Logo.jpg"
alt="CIT.com.au link" height="120"
width="140" align=center
border="5"/>

Hyperlinks
 Images can be used as hyperlinks to other webpages.
 In the example below, I have set the image as a hyperlink
to the CIT website.
 The target attribute defines where the link will open, for
example a new browser window, a new tab or on the same
page.
 The image sits within the a href (hyperlink) element.
 <a target="_blank" href="http://www.cit.edu.au"><img
src="CIT-Logo.jpg" alt="CIT.com.au link" height="120"
width="140" /></a>
 Using CSS, I added a hover effect to the image to make it
more obvious that it was a hyperlink.
 The code I used for this was:
a:hover img {border:1px solid #0000ff;}
 This defined that when hovering over the hyperlink image,
a blue border would appear around it.

Hyperlink and Hover Effect
Example
 In the example on the left,
I am hovering the mouse
over the top image. As a
result, the hover effect
produces a blue border,
and the URL appears in the
bottom left corner of the
screen (using Chrome
browser).
 On the right I am not
hovering over the image.
As a result, the border and
URL do not display.

Alignment
 In older versions of HTML it was
acceptable to align image elements using
the align=“left/center/right/etc” attribute.
 In HTML 5 this has been deprecated and
CSS should now be used to achieve this.
 An example of how to achieve this is to
add classes into your stylesheet eg:
.align-right {float:right; margin: 0 0 15px 15px;}
.align-left {float:left; margin: 0 15px 15px 0;}
 With the CSS above, an image coded with
the class align-right would display on the
right hand side of the browser.

My Webpage
 To demonstrate how images can be used and
how CSS can be applied for styling, I created a
webpage.
 The webpage is based on Manchester United
Football Club, and I have chosen to do a gallery
of the current squad.
 I have designed the page with a header, left
navigation bar, main content area and a footer,
all within a 960 pixel container.
 There is a banner displayed in the header, some
image links in the navigation bar, and an image
gallery in the main content area.

Styling
 To achieve the desired styling I had to code some CSS.
 For the banner, I set the left and right margins to auto, in
order to center the image. I also set the pixel height and
width of the image so it would display nicely within the
page.
 I set the height and width of the thumbnail images in CSS,
so that they do not have to be defined for every HTML
element. This makes it easy if changes every need to be
made.
 I set the left margin to zero for the hyperlink images in the
left navigation bar to ensure they aligned to the left. I also
set the height and width so they would fit nicely within the
nav bar.
 I set a hover effect for the images within the main content
area, with a border appearing when hovering over the
image with the mouse.

Accessibility
 The main accessibility features I had to consider were:
 Text Alternatives: due to images being used, I had to make sure there
were text alternatives available. By using the alt text this provides a
means for other software to interpret the images into text. For example a
text to speech program for the blind could detect what this image was and
communicate this to the user.
 Seizures: the page had to be made in a way that would not cause seizures.
To do this, I ensured that I did not use too many bright, clashing colours.
 Navigatable: because the page was created as if it was part of a larger
site, I had to ensure that most of the links were functional and the site
could be navigated easily. For this reason, I directed all links (except for
the header menu) to external websites. To ensure the image gallery
displayed correctly, I had to set the div to allow scrolling. This caused a
scrollbar to appear when there was too much content and prevented the
images and text from displaying outside the div.
 Readable: when selecting text and background colours, I ensured that
contrasting colours were chosen. I set up some paragraph classes in the
external stylesheet to enable this to be easily coded within the html.

End result
(viewed in google chrome)

Html 5 and CSS - Image Element

Recommended

More Related Content

What's hot (20)

Similar to Html 5 and CSS - Image Element (20)

Html 5 and CSS - Image Element