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
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-width , border-top-color , border-top-style 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
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
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
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
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
CS125 Spring 2014 Interim Image formats • GIF • JPEG • PNG 4-7
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
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
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
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 over. 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
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 of 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
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: Rendering with <!DOCTYPE html> <html lang="en"> embedded style <head> sheet: <meta charset="utf-8"> <title>Image links</title> <style> img { border-style: none; } </style> </head> <body> Rendering <p><a href="index.html"> without <img src="./home.png" alt="Home icon" embedded style height="30"> sheet: </a> </p> </body> </html> 4-13
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
CS125 Spring 2014 Interim 4-15
Recommend
More recommend
