html 5 and css - image element
DESCRIPTION
Assignment for CIT studies on how to code and style image elements in HTML and CSS.TRANSCRIPT
HTML 5 and CSSHTML 5 and CSS
The image elementThe image elementBy Kevin KempBy Kevin Kemp
Purpose of this documentPurpose of this document The purpose of this document is to explain The purpose of this document is to explain
the HTML Image elementthe HTML Image element What it is used for What it is used for How to code it using HTMLHow to code it using HTML How to style it using CSSHow to style it using CSS To demonstrate the use of the image To demonstrate the use of the image
element, I coded a simple webpage, element, I coded a simple webpage, including only images with various including only images with various formatting, and a more functional webpage formatting, and a more functional webpage to demonstrate practical examples of to demonstrate practical examples of styling.styling.
The Image elementThe Image element
The Image element has many uses The Image element has many uses within websites:within websites:
BannersBanners BackgroundsBackgrounds HyperlinksHyperlinks Photo GalleriesPhoto Galleries Web page layoutsWeb page layouts
Coding the elementCoding the element An Image can be coded as per below:An Image can be coded as per below:
<img src=“imagename.jpg"/><img src=“imagename.jpg"/> This causes an unformatted image to display in This causes an unformatted image to display in
the webpage the webpage It will display in the standard image size without It will display in the standard image size without
any styling appliedany styling applied The image file must be located in the same folder The image file must be located in the same folder
structure as the HTML documentstructure as the HTML document Note that because I am coding in HTML 5, the Note that because I am coding in HTML 5, the
doctype declaration used is simply doctype declaration used is simply <!DOCTYPE html><!DOCTYPE html>
Formatting the elementFormatting the element
Image elements can be formatted in Image elements can be formatted in many ways, within the HTML code many ways, within the HTML code and within CSS. CSS is the preferred and within CSS. CSS is the preferred for layouts and in HTML 5 certain for layouts and in HTML 5 certain attributes are deprecated, for attributes are deprecated, for example the align attribute now example the align attribute now needs to be coded in CSS.needs to be coded in CSS.
Alt text, height, width and titleAlt text, height, width and title Alt text is text that will display when an image fails to load. 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 Height and width can be defined for an image, in pixels or
in a percentage of the containing element. This can also be in a percentage of the containing element. This can also be configured in the stylesheet of a webpage instead of coding configured in the stylesheet of a webpage instead of coding for multiple images individually.for multiple images individually.
When a title is added to the image element, upon hovering When a title is added to the image element, upon hovering over the image on the webpage, a popup text will appear. over the image on the webpage, a popup text will appear. This can be used to explain the image.This can be used to explain the image.
Below is an example of how these are coded, with the alt, Below is an example of how these are coded, with the alt, height, width and title attributes highlightedheight, width and title attributes highlighted
<img src="CIT-Logo.jpg" <img src="CIT-Logo.jpg" altalt="CIT.com.au link" ="CIT.com.au link" heightheight="120" ="120" widthwidth="140" ="140" titletitle="This is a title"/>="This is a title"/>
Alt text, height, width and title Alt text, height, width and title exampleexample
As you can see from the As you can see from the example, the height and width example, the height and width have been changed to make the have been changed to make the image smaller than its regular image smaller than its regular size. size.
When the screenshot was taken, When the screenshot was taken, I was hovering the mouse over I was hovering the mouse over the image and the title “This is a the image and the title “This is a title” appeared.title” appeared.
BordersBorders It is easy to add a border to the It is easy to add a border to the
image. In the example below, I image. In the example below, I have coded a 5 pixel border around have coded a 5 pixel border around the image. the image.
The border attribute is highlighted The border attribute is highlighted below.below.
The image border will default to The image border will default to black but can also be formatted.black but can also be formatted.
<img src="CIT-Logo.jpg" <img src="CIT-Logo.jpg" alt="CIT.com.au link" height="120" alt="CIT.com.au link" height="120" width="140" align=center width="140" align=center borderborder="5"/>="5"/>
HyperlinksHyperlinks Images can be used as hyperlinks to other webpages.Images can be used as hyperlinks to other webpages. In the example below, I have set the image as a hyperlink In the example below, I have set the image as a hyperlink
to the CIT website. to the CIT website. The target attribute defines where the link will open, for The target attribute defines where the link will open, for
example a new browser window, a new tab or on the same example a new browser window, a new tab or on the same page.page.
The image sits within the a href (hyperlink) element. The image sits within the a href (hyperlink) element. <a target="_blank" href="http://www.cit.edu.au"><img <a target="_blank" href="http://www.cit.edu.au"><img
src="CIT-Logo.jpg" alt="CIT.com.au link" height="120" src="CIT-Logo.jpg" alt="CIT.com.au link" height="120" width="140" /></a> width="140" /></a>
Using CSS, I added a hover effect to the image to make it Using CSS, I added a hover effect to the image to make it more obvious that it was a hyperlink. more obvious that it was a hyperlink.
The code I used for this was: The code I used for this was: a:hover img {border:1px solid #0000ff;}a:hover img {border:1px solid #0000ff;}
This defined that when hovering over the hyperlink image, This defined that when hovering over the hyperlink image, a blue border would appear around it.a blue border would appear around it.
Hyperlink and Hover Effect Hyperlink and Hover Effect ExampleExample
In the example on the left, In the example on the left, I am hovering the mouse I am hovering the mouse over the top image. As a over the top image. As a result, the hover effect result, the hover effect produces a blue border, produces a blue border, and the URL appears in the and the URL appears in the bottom left corner of the bottom left corner of the screen (using Chrome screen (using Chrome browser).browser).
On the right I am not On the right I am not hovering over the image. hovering over the image. As a result, the border and As a result, the border and URL do not display.URL do not display.
AlignmentAlignment In older versions of HTML it was In older versions of HTML it was
acceptable to align image elements using acceptable to align image elements using the align=“left/center/right/etc” attribute.the align=“left/center/right/etc” attribute.
In HTML 5 this has been deprecated and In HTML 5 this has been deprecated and CSS should now be used to achieve this. CSS should now be used to achieve this.
An example of how to achieve this is to An example of how to achieve this is to add classes into your stylesheet eg:add classes into your stylesheet eg:.align-right {float:right; margin: 0 0 15px 15px;}.align-right {float:right; margin: 0 0 15px 15px;}
.align-left {float:left; margin: 0 15px 15px 0;}.align-left {float:left; margin: 0 15px 15px 0;} With the CSS above, an image coded with With the CSS above, an image coded with
the class align-right would display on the the class align-right would display on the right hand side of the browser. right hand side of the browser.
My Webpage My Webpage To demonstrate how images can be used and To demonstrate how images can be used and
how CSS can be applied for styling, I created a how CSS can be applied for styling, I created a webpage.webpage.
The webpage is based on Manchester United The webpage is based on Manchester United Football Club, and I have chosen to do a gallery Football Club, and I have chosen to do a gallery of the current squad. of the current squad.
I have designed the page with a header, left I have designed the page with a header, left navigation bar, main content area and a footer, navigation bar, main content area and a footer, all within a 960 pixel container. all within a 960 pixel container.
There is a banner displayed in the header, some There is a banner displayed in the header, some image links in the navigation bar, and an image image links in the navigation bar, and an image gallery in the main content area.gallery in the main content area.
StylingStyling To achieve the desired styling I had to code some CSS.To achieve the desired styling I had to code some CSS. For the banner, I set the left and right margins to auto, in 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 order to center the image. I also set the pixel height and width of the image so it would display nicely within the width of the image so it would display nicely within the page.page.
I set the height and width of the thumbnail images in CSS, I set the height and width of the thumbnail images in CSS, so that they do not have to be defined for every HTML so that they do not have to be defined for every HTML element. This makes it easy if changes every need to be element. This makes it easy if changes every need to be made.made.
I set the left margin to zero for the hyperlink images in the 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 left navigation bar to ensure they aligned to the left. I also set the height and width so they would fit nicely within the set the height and width so they would fit nicely within the nav bar.nav bar.
I set a hover effect for the images within the main content I set a hover effect for the images within the main content area, with a border appearing when hovering over the area, with a border appearing when hovering over the image with the mouse.image with the mouse.
CSS UsedCSS Used
AccessibilityAccessibility The main accessibility features I had to consider were:The main accessibility features I had to consider were: Text Alternatives: due to images being used, I had to make sure there 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 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 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 text to speech program for the blind could detect what this image was and communicate this to the user.communicate this to the user.
Seizures: the page had to be made in a way that would not cause seizures. 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. 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 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 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 could be navigated easily. For this reason, I directed all links (except for the header menu) to external websites. To ensure the image gallery 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 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 scrollbar to appear when there was too much content and prevented the images and text from displaying outside the div.images and text from displaying outside the div.
Readable: when selecting text and background colours, I ensured that Readable: when selecting text and background colours, I ensured that contrasting colours were chosen. I set up some paragraph classes in the contrasting colours were chosen. I set up some paragraph classes in the external stylesheet to enable this to be easily coded within the html. external stylesheet to enable this to be easily coded within the html.
End result End result (viewed in google chrome)(viewed in google chrome)
EndEnd