4 visual elements and graphics

CIS 1310 – HTML & CSS

4

Visual Elements and Graphics


Learning OutcomesLearning 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

<hr><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;”


Border PropertiesBorder Properties

border: style width color

Shorthand Property Sets All Four Individual Borders

Same Format for margin Property



border-style: keyword Keywords

none dotted dashed solid double groove ridge inset outset



border-width: thin | medium | thick | #

border-color: value

border-radius: value Configues Rounded Corners for an Element


ImagesImages

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


ImagesImages

Formats

PNG

Better for Clip Art

Displays More Colors than GIF

Allows Transparency

Does Not Allow Animation


ImagesImages

Formats

JPEG

Better for Photographs

Unlimited Colors

Generally Smaller File Size

Control Amount of Compression


ImagesImages

Formats

SVG

Scalable

Made Up of Lines, Not Dots

Created with XML and Can Be Modified by CSS

Easily Edited

<img><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

<img><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

<img><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

Image MapsImage 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<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>

Image MapsImage Maps

Requirements

id Attribute for <map>

alt Attribute for <area>

<figure> & <figcaption><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>

<meter><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 

<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox 

<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer 

<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome 

<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari 

<meter value="312" min="0" max="14417">312</meter> 312 Opera 

<meter value="200" min="0" max="14417">200</meter> 200 other

<progress><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


Background PropertiesBackground Properties

background-color: colorname | #

background-image: url(imagename.gif)



background-attachment: scroll | fixed


Multiple Background ImagesMultiple 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;}

Favicon (Favorites Icon)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">


Box ShadowsBox Shadows

box-shadow Property

Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color

Example#wrapper {

box-shadow: 5px 5px 5px #828282;

}


OpacityOpacity

opacity Property

Configure the Opacity of the Background Color

0 = Completely Transparent; 1 = Completely Opaque

Exampleh1{ background-color: #FFFFFF; opacity: 0.6; }


RGBA ColorRGBA 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

Exampleh1{

color: rgba(255, 255, 255, 0.7);

font-size: 5em;

padding-right: 10px;

text-align: right;

font-family: Verdana, Helvetica, sans-serif; }


HSLA ColorHSLA 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

Exampleh1{

color: hsla(120, 100%, 100%, 1.0);

}


GradientsGradients

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);

}

4 visual elements and graphics

Documents