4 visual elements and graphics
DESCRIPTION
4 Visual Elements and Graphics. 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 - PowerPoint PPT PresentationTRANSCRIPT
CIS 1310 – HTML & CSS
4
Visual Elements and Graphics
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
<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;”
CIS 1310 – HTML & CSS
Border PropertiesBorder Properties
border: style width color
Shorthand Property Sets All Four Individual Borders
Same Format for margin Property
CIS 1310 – HTML & CSS
Border PropertiesBorder Properties
border-style: keyword Keywords
none dotted dashed solid double groove ridge inset outset
CIS 1310 – HTML & CSS
Border PropertiesBorder Properties
border-width: thin | medium | thick | #
border-color: value
border-radius: value Configues Rounded Corners for an Element
CIS 1310 – HTML & CSS
Padding PropertiesPadding 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
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
CIS 1310 – HTML & CSS
ImagesImages
Formats
PNG
Better for Clip Art
Displays More Colors than GIF
Allows Transparency
Does Not Allow Animation
CIS 1310 – HTML & CSS
ImagesImages
Formats
JPEG
Better for Photographs
Unlimited Colors
Generally Smaller File Size
Control Amount of Compression
CIS 1310 – HTML & CSS
ImagesImages
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>
<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><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><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 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>
CIS 1310 – HTML & CSS
Image MapsImage Maps
Requirements
id Attribute for <map>
alt Attribute for <area>
CIS 1310 – HTML & CSS
<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>
CIS 1310 – HTML & CSS
<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<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> 312 Opera<br />
<meter value="200" min="0" max="14417">200</meter> 200 other<br />
CIS 1310 – HTML & CSS
<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
CIS 1310 – HTML & CSS
Background PropertiesBackground Properties
background-color: colorname | #
background-image: url(imagename.gif)
CIS 1310 – HTML & CSS
Background PropertiesBackground Properties
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-position: % | length | keyword
CIS 1310 – HTML & CSS
Background PropertiesBackground Properties
background-attachment: scroll | fixed
CIS 1310 – HTML & CSS
Background PropertiesBackground 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 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;}
CIS 1310 – HTML & CSS
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">
CIS 1310 – HTML & CSS
Box ShadowsBox Shadows
box-shadow Property
Specify Horizontal Offset, Vertical Offset, Blur Radius, & Color
Example#wrapper {
box-shadow: 5px 5px 5px #828282;
}
CIS 1310 – HTML & CSS
OpacityOpacity
opacity Property
Configure the Opacity of the Background Color
0 = Completely Transparent; 1 = Completely Opaque
Exampleh1{ background-color: #FFFFFF; opacity: 0.6; }
CIS 1310 – HTML & CSS
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; }
CIS 1310 – HTML & CSS
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);
}
CIS 1310 – HTML & CSS
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);
}