WebSG - HTML Email Newsletters
Your SlideShare is downloading.
×
Check these out next
More Related Content
Slideshows for you (20)
Similar to Html 5 and CSS - Image Element (20)
Html 5 and CSS - Image Element
- 1. HTML 5 and CSS The image element By Kevin Kemp
- 2. 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.
- 3. The Image element The Image element has many uses within websites: Banners Backgrounds Hyperlinks Photo Galleries Web page layouts
- 4. 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>
- 5. 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.
- 6. 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"/>
- 7. 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.
- 8. 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"/>
- 9. 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.
- 10. 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.
- 11. 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.
- 12. 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.
- 13. 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.
- 14. CSS Used
- 15. 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.
- 16. End result (viewed in google chrome)
- 17. End
