Web Development Design Foundations with HTML 5 CHAPTER

Learning Outcomes In this chapter, you will learn how to. . . ◦ ◦ ◦ ◦ ◦ Create and format lines and borders on web pages Apply the image element to add graphics to web pages Optimize an image for web page display Configure images as backgrounds on web pages Configure images as hyperlinks Configure visual effects with CSS 3 including multiple background images, rounded corners, box shadow, text shadow, opacity, and gradients Configure RGBA and HSLA color with CSS 3 Use HTML 5 elements to caption a figure Find free and fee-based graphics sources Follow recommended web design guidelines for graphics on web pages Copyright © Terry Felke-Morris http: //terrymorris. net 2

Horizontal Rule Element Configures a horizontal line. Semantically it represents a thematic break. <hr>

CSS border Property Configures a border on the top, right, bottom, and left sides of an element. Consists of ◦ border-width ◦ border-style ◦ border-color Can be done with shorthand: h 2 { border: 2 px solid #ff 0000 } Copyright © Terry Felke-Morris http: //terrymorris. net

CSS Borders: Block / Inline Elements �When used with block display element ◦ Default width of element content extends to browser margin (or specified width) �When used with inline display element ◦ Border closely outlines the element content h 2 { border: 3 px solid #ff 0000; } img { border: 3 px solid #ff 0000; } Copyright © Terry Felke-Morris http: //terrymorris. net

Browser Display Can Vary Chrome Firefox This used to be difference in 2016, but

CSS padding Property Configures empty space between the content of the HTML element and the border. h 2 { border: 2 px solid #ff 0000; padding: 5 px; } No padding property configured: Image with padding and border: Copyright © Terry Felke-Morris http: //terrymorris. net

Configuring Specific Sides… Note: you can configure specific sides for borders and margins. EXAMPLES BELOW: h 2 { border-bottom: 2 px solid #ff 0000 } h 2 { … padding-left: 5 px; padding-bottom: 10 px; padding-top: 10 px; } Copyright © Terry Felke-Morris http: //terrymorris. net

CSS padding Property Shorthand Requires 4 numeric values or percentages ◦ Configure top, right, bottom, and left padding h 2 { … padding: 30 px 10 px 5 px 20 px; } Copyright © Terry Felke-Morris http: //terrymorris. net

Types of Graphics Graphic types commonly used on web pages: ◦ GIF ◦ JPG

About GIFs Background color configured to be transparent Background color – no transparency �Best used for line art and logos �Maximum of 256 colors �One color can be configured as transparent �Can be animated �Uses lossless compression Copyright © Terry Felke-Morris http: //terrymorris. net 11

About JPEG �Best used for photographs �Up to 16. 7 million colors �Use lossy

PNG • Support millions of colors • Support multiple levels of transparency (but most browsers do not -so limit to one transparent color for Web display) • Use lossless compression • Combines the best of GIF & JPEG Copyright © Terry Felke-Morris http: //terrymorris. net 13

HTML Image Element Configures graphics on a web page <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“dog. jpg” alt=“Dog at

HTML Image Element Configures graphics on a web page <img src=“dog. jpg” alt=“Dog at computer” height=“ 100” width=“ 100”> src Attribute ◦ File name of the graphic alt Attribute ◦ Configures alternate text description height Attribute ◦ Height of the graphic in pixels width Attribute ◦ Width of the graphic in pixels Copyright © Terry Felke-Morris http: //terrymorris. net 14 14

Image Optimization The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size. Photographs taken with digital cameras are not usually optimized for the Web Copyright © Terry Felke-Morris http: //terrymorris. net 15

Optimize An Image for the Web Image Optimization ◦ Reduce the file size of the image ◦ Reduce the dimensions of the image to the actual width and height of the image on the web page. Image Editing Tools: ◦ GIMP (free, but must download) ◦ Adobe Photoshop $$$ ◦ http: //www. pixlr. com/editor ◦ https: //www. photopea. com Copyright © Terry Felke-Morris http: //terrymorris. net 16

Organizing Your Site • Place images in their own folder • Code the path

Time to code! Copyright © Terry Felke-Morris http: //terrymorris. net 18

CSS background-image Property Configures a background-image By default, background images tile (repeat) body { background-image: url(background 1. gif); } Copyright © Terry Felke-Morris http: //terrymorris. net

CSS background-repeat Property Copyright © Terry Felke-Morris http: //terrymorris. net

Using background-repeat trilliumbullet. gif: h 2 { background-color: #d 5 edb 3; color: #5 c 743 d; font-family: Georgia, "Times New Roman", serif; padding-left: 30 px; background-image: url(trilliumbullet. gif); background-repeat: no-repeat; } Copyright © Terry Felke-Morris http: //terrymorris. net

Home Image Link �To create an image hyperlink use an anchor element to contain an image element <a href="index. html"><img src="home. gif" height="19" width="85" alt="Home"></a> �Some browsers automatically add a border to image links. �Configure CSS to eliminate the border img { border-style: none; } Copyright © Terry Felke-Morris http: //terrymorris. net 22

CSS 3 box-shadow Property Configure the horizontal offset, vertical offset, blur radius, and valid color value Example: #wrapper { box-shadow: 5 px 5 px #828282; } Optional keyword: inset Copyright © Terry Felke-Morris http: //terrymorris. net 23

We will stop here for now Copyright © Terry Felke-Morris http: //terrymorris. net 24

The next slide shows how we will handle the rest of the chapter Copyright

Cover on Feb 20 & 22 • CSS 3 prefixes. Use? www. Caniuse. com • (revisit) Shadow, also inset • Border radius; see other examples • Figure; figure caption • Thumbnails • RGBA – applies to property, such as background-color: rgba(50, 50, . 6); • Opacity – applies to entire selector , such as #wrapper {opacity: 0. 6); Skip • Link image to webpage o Thumbnail links (wait ‘til chap 7) • Sources of Pics & copyright o HTML 5 Meter • Accessibility o HTML 5 Progress bar • Guidelines of images o Multiple backgrounds • Image maps o Sprites o HSLA o Background Clip o Background Origin Assign for Student Presentations v Favicons v Gradients Copyright © Terry Felke-Morris http: //terrymorris. net 26

HTML 5 Figure and Figcaption Elements Figure Element: contains a unit of content that is selfcontained, such as an image, along with one optional figcaption element. <figure> <img src="lighthouseisland. jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure> Copyright © Terry Felke-Morris http: //terrymorris. net 27

Thumbnail Image A small image configured to link to a larger version of that image. <a href=“big. jpg”><img src=“small. jpg” alt=“country road” width=“ 200” height=“ 100”></a> Copyright © Terry Felke-Morris http: //terrymorris. net 28

About Copyright Law (From Chapter 10) �Copying someone else's image may not be ethical or lawful. �Only publish your own images or those you have right or licenses to use �Assume that all published images are copyrighted, even if there is no copyright symbol or date. �Creative commons licenses informs others exactly what they can do and cannot do with creative work �Fair use doctrine allows us to use images under certain conditions, e. g. practicing Copyright © Terry Felke-Morris http: //terrymorris. net 29

Sources for Graphics �Create them yourself using a graphics applications �Download graphics from a free site. Browse through this article �Purchase/download professional-quality graphics �Take digital photographs �Scan your photographs or drawings �Hire a graphic designer to create graphics Copyright © Terry Felke-Morris http: //terrymorris. net 30

Guidelines for Using Images § Reuse images § (Optimize) Consider image file size with image quality § Consider image load time § Use appropriate resolution § Specify dimensions § Be aware of brightness and contrast Copyright © Terry Felke-Morris http: //terrymorris. net 31

Images and Accessibility Don't rely on color alone. ◦ Some visitors may have color perception deficiencies. Use high contrast between background and text color. Provide a text equivalent for non-text elements. ◦ Use the alt attribute on your image elements If your site navigation uses image links, provide simple text links at the bottom of the page. Copyright © Terry Felke-Morris http: //terrymorris. net 32

CSS 3 Rounded Corners border-radius property ◦ Configures the horizontal radius and vertical radius of the corner ◦ Numeric value(s) with unit (pixel or em) or percentage Example h 1 { border-radius: 15 px; } Copyright © Terry Felke-Morris http: //terrymorris. net 33

Examples of Rounded Corners One value for border-radius configures all four corners Example: border-radius: 15 px; Four values for border-radius configure each corner separately Ordered by top left, top right, bottom left Example: border-radius: 15 px 30 px 100 px 5 px; Copyright © Terry Felke-Morris http: //terrymorris. net 34

CSS 3 opacity Property Configure the opacity of the element Opacity range: ◦ 0 Completely Transparent ◦ 1 Completely Opaque horizontal offset, vertical offset, blur radius, and valid color value Example: h 1{ background-color: #FFFFFF; opacity: 0. 6; } Copyright © Terry Felke-Morris http: //terrymorris. net 35

RGBA Color Four values are required: red color, green color, blue color, and alpha(transparency) ◦ The values for red, green, and blue must be decimal values from 0 to 255. ◦ The alpha value must be a number between 0 (transparent) and 1 (opaque). Example: h 1 { color: #ffffff; color: rgba(255, 0. 7); font-size: 5 em; padding-right: 10 px; text-align: right; font-family: Verdana, Helvetica, sans-serif; } Copyright © Terry Felke-Morris http: //terrymorris. net 36