SLIDE 1 CS125 Spring 2014 Interim
Visual elements and graphics
- Horizontal rules in HTML
- Borders and padding in CSS
- Graphics
– Picture formats – The HTML img tag – Image links – Background images – Image maps
- Accessibility and best practices
4-1
SLIDE 2 CS125 Spring 2014 Interim
Borders
The CSS border properties allow you to specify the style of an element’s border.
- The border-style property specifies what kind of border to display. Possible values:
none, solid, dashed, dotted, double, groove, ridge, inset, and outset. None of the other border properties will have ANY effect unless the border-style property is set.
- The border-width property is used to set the width of the border. The width is set in
pixels (e.g., 2px), or by using one of the three pre-defined values: thin, medium, or thick.
- The border-color property is used to set the color of the border by name, using the
RGB color scheme, or using the value transparent.
- It is possible to specify a different border for each side, using the properties:
border-top-style , border-top-width , border-top-color, border-right-style , border-right-width , border-right-color, border-bottom-style, border-bottom-width, border-bottom-color, border-left-style , border-left-width , border-left-color.
4-2
SLIDE 3
CS125 Spring 2014 Interim
Border example
<!DOCTYPE html> <head>...</head> <body> <div style="font-family: sans-serif; width: 75%;"> <p style="line-height: 100%; border-style: solid; border-width: 1px;"> First line<br>Second line<br>Third line</p> <p style="line-height: 150%; border-style: dashed; border-width: 5px;"> First line<br>Second line<br>Third line</p> <p style="line-height: 200%; border-style: dotted; border-width: 3px;"> First line<br>Second line<br>Third line</p> <p style="border-top-style: double; border-top-width: 6px; border-right-style: ridge; border-right-width: 12px; border-bottom-style: groove; border-bottom-width: 10px; border-left-style: inset; border-left-width: 12px;"> Line <span style="border-style: solid; border-width: 2px; border-color: #FF0000;"> with a span</span>, which is an inline-level element.</p> <p style="border-style: double ridge groove inset; border-width: 6px 12px 10px 12px;"> Line <span style="border: 2px solid red"> with a span</span>, which is an inline-level element.</p> </div> </body> </html> 4-3
SLIDE 4 CS125 Spring 2014 Interim
Padding
The CSS padding properties define the space between the content of an element and its border. The padding thus clears an area around the content (inside the border) of an
- element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate
- properties. A shorthand padding property can also be used to change all paddings at once.
Possible values of the padding include a fixed value (e.g., 3px) and a percentage of the size of the containing element.
4-4
SLIDE 5
CS125 Spring 2014 Interim
Padding example
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"> <title>padding</title> <style> span { background-color: #000000; color: #FFFFFF; border: 1px solid #FF0000; } span.allaround1 { padding: 10px 10px 10px 10px; } span.allaround2 { padding: 10px; } /* same as above */ span.LR1 { padding-left: 10px; padding-right: 10px; } span.LR2 { padding: 0px 10px; } /* same as above */ </style> </head> <body><p>text <span>plain span</span> text <span class="allaround1">allaround1 span</span> text <span class="allaround2">allaround2 span</span> text <span class="LR1">LR1 span</span> text <span class="LR2">LR2 span</span></p> </body></html>
Rendering:
4-5
SLIDE 6 CS125 Spring 2014 Interim
Graphics
What are the advantages of graphics in web design?
- What are the disadvantages of graphics in web design?
- 4-6
SLIDE 7 CS125 Spring 2014 Interim
Image formats
4-7
SLIDE 8 CS125 Spring 2014 Interim
GIF images
- Graphics Interchange Format
- Maximum of 256 colors
- Best used for sharp-edged line art, and simple images such as clipart and logos
- One color can be configured as transparent (GIF89A format)
- Can be animated
- Uses lossless compression
- Can be interlaced
4-8
SLIDE 9 CS125 Spring 2014 Interim
JPEG images
- Joint Photographic Experts Group (.jpeg or .jpg extension)
- Up to 16.7 million colors
- Best used for photographs
- Uses lossy compression
- JPEG may not be as well suited for line drawings and other textual or iconic graphics
with sharp contrasts between adjacent pixels
- JPEG is also not well suited to files that will undergo multiple edits, since some image
quality will usually be lost each time the image is decompressed/recompressed, e.g., if the image is cropped or shifted
- Cannot be animated
- Cannot be made transparent
- Progressive JPEG is similar to interlaced display
4-9
SLIDE 10 CS125 Spring 2014 Interim
PNG images
- Portable Network Graphics
- Supports millions of colors
- Supports 256 levels of transparency (full alpha channel)
- Supports interlacing
- Uses lossless compression
- Combines the best of GIF and JPEG
- Was designed for the web, not for print media
- Is supposed to replace GIF
- Does not support animation; see MNG (multiple-image) instead
- Older browsers and office applications may not support PNG; support is slowly growing
Note: For situations where an image and its caption are grouped into a <div>, HTML5 introduces the <figure> and <figcaption> elements.
4-10
SLIDE 11 CS125 Spring 2014 Interim
The <img> tag
The <img> tag embeds an image in an HTML page. Note that images are not technically inserted into an HTML page; rather images are linked or referenced inside an HTML
- document. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
- src: This attribute specifies the absolute or relative URL of an image
- alt: This attribute specifies an alternate text for an image, if the image cannot be
displayed (e.g., broken link, slow connection, page is viewed in a screen reader)
Some older browsers display the value of the alt attribute as a tooltip when the img element is moused
- ver. This is not the correct behavior. If you want to create a tooltip for an image, use the title
attribute instead.
The <img> tag has several optional attributes, including:
- width and height specify the size of the image. Without these attributes, the browser
does not know the size of the image and cannot reserve the appropriate space for it. As a result, the page layout will change while the image loads.
- longdesc (next slide)
- usemap (see Slide 4-16)
4-11
SLIDE 12 CS125 Spring 2014 Interim
Accessibility of images
Required:
- Configure the alt attribute
- Alternate text content to convey the meaning/intent of the image, not the file name
- f the image
- Use alt="" for purely decorative images
Optional:
- Set the longdesc attribute when the full meaning of the image cannot be conveyed
adequately by the (short) alt text; the value of this attribute is usually a URL to a Web page with a longer textual description of the image.
4-12
SLIDE 13
CS125 Spring 2014 Interim
Image links
To create an image link use an anchor element to contain an image element. Since some browsers (e.g., Firefox) automatically add a border to image links, you can configure CSS to eliminate the border, as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image links</title> <style> img { border-style: none; } </style> </head> <body> <p><a href="index.html"> <img src="./home.png" alt="Home icon" height="30"> </a> </p> </body> </html>
Rendering with embedded style sheet: Rendering without embedded style sheet:
4-13
SLIDE 14 CS125 Spring 2014 Interim
Background images
We have already seen how to use CSS to change the background color of a web page. You can also use the background-image property to set an image as background for an element or the whole page as follows: body { background-image: url(’yourimage.gif’); } If you do so, make sure that the contrast with the contents of the element is still high. By default, the background-image property repeats the image both horizontally and
- vertically. Some images should be repeated only horizontally or vertically. Some image
should not be repeated at all. Examples:
body { background-image: url(’pic.png’); background-repeat: repeat-x; } body { background-image: url(’pic.png’); background-repeat: no-repeat; background-position: right top; } body { background: #ffff00 url(’img_tree.png’) no-repeat right top; margin-right: 200px; } [see http://www.w3schools.com/css/css_background.asp] 4-14
SLIDE 15
CS125 Spring 2014 Interim 4-15
SLIDE 16 CS125 Spring 2014 Interim
Image maps
- An image-map is an image with clickable areas.
The <map> tag is used to define a client-side image-map. It contains a number of <area> elements that define the clickable areas in the image map. Every map must have a name.
- The <area> tag defines an area (and is always nested) inside an image-map. Useful
attributes include: alt (required), shape, coords, and href.
- The usemap attribute of the <img> tag is used to create a relationship between the
image and the map.
... <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap" id="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> <!-- another possible shape is poly --> </map> [see http://www.w3schools.com/tags/tag_area.asp] 4-16
SLIDE 17 CS125 Spring 2014 Interim
Best practices when using graphics
- When choosing the names of your picture files:
– Use all lowercase letters – Do not use punctuation symbols and spaces – Do not change the standard file extensions (.gif, .jpg, .jpeg, or .png) – Keep your file names short but descriptive
- Put your pictures in one or more separate folders/directories and include the appropriate
path in the value of the src attribute
- Consider the trade-off between image file size and image quality, load time, screen
resolution, contrast and brightness
– Don’t rely on color alone; use high contrast between background and text color – Provide a text equivalent for non-text elements: use the alt and, when appropriate, the longdesc attribute – If your site navigation uses image links, provide simple text links at the bottom of the page.
4-17
