CIS 1310 – HTML & CSS 4 Visual Elements and Graphics

CIS 1310 – HTML & CSS Learning Outcomes  Create & Format Lines & Borders on Web Pages  Add Graphics to Web Pages  Configure Images as Backgrounds & Hyperlinks  Configure Visual Effects with CSS3  Configure RGBA color with CSS3  Use HTML5 Elements to Caption a Figure  Use the HTML5 Meter & Progress Elements  Follow Web Design Guidelines for Graphics

CIS 1310 – HTML & CSS <hr>  Inserts Plain Line (Horizontal Rule) Across Page Emphasize Divisions & Transitions In Content  Style style=“background-color: #RRGGBB | colorname;” style=“color: #RRGGBB | colorname;” style=“height: number;” style=“width: number;”

CIS 1310 – HTML & CSS Border Properties  border: style width color Shorthand Property Sets All Four Individual Borders Same Format for margin Property

CIS 1310 – HTML & CSS Border Properties  border-style: keyword Keywords none dotted dashed solid double groove ridge inset outset

CIS 1310 – HTML & CSS Border Properties  border-width: thin | medium | thick | #  border-color: value

CIS 1310 – HTML & CSS Border Properties  border-width: thin | medium | thick | #  border-color: value  border-radius: value Configues Rounded Corners for an Element

CIS 1310 – HTML & CSS Padding Properties  White Space Between Content & Border  padding: # | % Shorthand Property Sets All Four Individual Paddings  padding-left | padding-right | padding-top | padding-bottom: # | %

CIS 1310 – HTML & CSS Images  Formats GIF Better for Clip Art Displays Maximum of 256 Colors Interlaced Image that Comes into Focus While it is Being Displayed Non-interlaced Rendering the Image a Line at a Time Transparency One Color Selected to Not Display Animated Composed of Several Different Images Displayed in Rapid Succession

CIS 1310 – HTML & CSS Images  Formats PNG Better for Clip Art Displays More Colors than GIF Allows Transparency Does Not Allow Animation

CIS 1310 – HTML & CSS Images  Formats JPEG Better for Photographs Unlimited Colors Generally Smaller File Size Control Amount of Compression

CIS 1310 – HTML & CSS Images  Formats SVG Scalable Made Up of Lines, Not Dots Created with XML and Can Be Modified by CSS Easily Edited

CIS 1310 – HTML & CSS <img>  Inserts an Image Into a Document Secondary to Content  Attributes alt=“text” Provides Alternative Text that Describes the Image IE Displays ALT Text When User Hovers on Image Users Who Surf With Graphics Turned Off Non-graphical Browsers Alt Text is Displayed in Place of Image Required

CIS 1310 – HTML & CSS <img>  Attributes height=“pixels” Specifies the Image's Height src=“URL” Specifies Location of Image to Place in Web Page Required width=“pixels” Specifies the Image's Width

CIS 1310 – HTML & CSS <img>  Style style=“float: none | left | right;” Place Image on Left / Right & Wrap Text Around It style=“clear: none | left | right;” Display Content After Margin is Clear of Floating Elements style=“margin: top# right# bottom# left#;” style=“border-width: #;” Rendered in Designated Link Color if Image is a Link

CIS 1310 – HTML & CSS Image Maps  Image Map An Image that has Multiple Areas Defined as Links  Hotspot An Area in an Image That is Defined as a Link  Example

CIS 1310 – HTML & CSS Image Maps  Requirements id Attribute for alt Attribute for

CIS 1310 – HTML & CSS & &  … Contains a Self-contained Unit of Content (e.g., image) Along with One Optional figcaption Element  Example <img src="lighthouseisland.jpg" width="250“ height="355" alt="Lighthouse Island“ /> Island Lighthouse, Built in 1870

CIS 1310 – HTML & CSS <meter>  … Displays a Gauge of a Numeric Value Within a Range  Example ,417 Total Visits ,000 Firefox ,800 Internet Explorer ,062 Chrome ,043 Safari Opera other

CIS 1310 – HTML & CSS <progress>  … Displays a Bar of a Numeric Value Within a Range  Example 5000 Progress Towards Our Goal

CIS 1310 – HTML & CSS Background Properties  background-color: colorname | #  background-image: url(imagename.gif)

CIS 1310 – HTML & CSS Background Properties  background-repeat: repeat | repeat-x | repeat-y | no-repeat  background-position: % | length | keyword

CIS 1310 – HTML & CSS Background Properties  background-attachment: scroll | fixed

CIS 1310 – HTML & CSS Background Properties  background-clip: content-box | padding-box | border-box Confines Display of Background Image  background-origin: content-box | padding-box | border-box Displays Background Image Relative to Value  background-size: % | # | cover | contain Resize or Scale Background Image

CIS 1310 – HTML & CSS Multiple Background Images  Example #exampleA { width: 500px; height: 250px; background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); background-repeat: no-repeat; background-position: left top, right bottom, left top; }

CIS 1310 – HTML & CSS Favicon (Favorites Icon)  Square Image Associated with a Web Page  Named favicon.ico  Displayed in Address Bar, Tab, Favorites/Bookmarks  Example

CIS 1310 – HTML & CSS Box Shadows  box-shadow Property Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color  Example #wrapper { box-shadow: 5px 5px 5px #828282; }

CIS 1310 – HTML & CSS Opacity  opacity Property Configure the Opacity of the Background Color 0 = Completely Transparent; 1 = Completely Opaque  Example h1{ background-color: #FFFFFF; opacity: 0.6; }

CIS 1310 – HTML & CSS RGBA Color  rgba Property Red, Green, Blue, Alpha (Transparency) Values for Red, Green, & Blue Must Be From 0 To 255 Alpha Value 0 = Transparent & 1 = Opaque  Example h1{ color: rgba(255, 255, 255, 0.7); font-size: 5em; padding-right: 10px; text-align: right; font-family: Verdana, Helvetica, sans-serif; }

CIS 1310 – HTML & CSS HSLA Color  hsla Property Hue, Saturation, Lightness, Alpha (Transparency) Hue - Actual Color from 0 to 360 (Circle) Red = 0; Green = 120; Blue = 240 Saturation – Intensity from 0% to 100% Lightness - Brightness from 0% to 100% Alpha Value 0 = Transparent & 1 = Opaque  Example h1{ color: hsla(120, 100%, 100%, 1.0); }

CIS 1310 – HTML & CSS Gradients  linear-gradient & radial-gradient Properties  Example #linearBg1 { /* top-bottom */ background: linear-gradient(#000, #400, #800, #c00, #f00); } #linearBg2 { /* left-right */ background: linear-gradient(to right, #000, #500, #a00, #f00); } #linearBg3 { /* diagonal top left-bottom right */ background: linear-gradient(to bottom right, #000, #800, #f00); }