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>


<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

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


Non-interlaced


Rendering the Image a Line at a Time
Transparency


Image that Comes into Focus While it is Being Displayed
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>


<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


Hotspot


An Image that has Multiple Areas Defined as Links
An Area in an Image That is Defined as a Link
Example
<img src=“filename.ext” usemap=“#mapname” />
<map id=“mapname”>
<area shape=“rect” coords=“x1,y1, x2,y2” href=“url” />
<area shape=“circle” coords=“x,y,r” href=“url” />
<area shape=“poly” coords=“x1,y1, x2,y2, ...” href=“url” />
</map>
CIS 1310 – HTML & CSS
Image Maps

Requirements

id Attribute for <map>

alt Attribute for <area>
CIS 1310 – HTML & CSS
<figure> & <figcaption>


<figure>…<figure>

Contains a Self-contained Unit of Content (e.g., image)

Along with One Optional figcaption Element
Example
<figure>
<img src="lighthouseisland.jpg"
width="250“ height="355"
alt="Lighthouse Island“ />
<figcaption>
Island Lighthouse, Built in 1870
</figcaption>
</figure>
CIS 1310 – HTML & CSS
<meter>

<meter>…</meter>


Displays a Gauge of a Numeric Value Within a Range
Example
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total Visits<br />
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br />
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer<br />
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br />
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br />
<meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp; 312 Opera<br />
<meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200 other<br />
CIS 1310 – HTML & CSS
<progress>

<progress>…</progress>


Displays a Bar of a Numeric Value Within a Range
Example
<progress value="5000" max="10000">5000</progress> 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


background-origin: content-box | padding-box
| border-box


Confines Display of Background Image
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
<link rel="icon" href="favicon.ico">
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);
}
CIS 1310 – HTML & CSS