1. HTML Boot Camp: Rules and Images
4/22/2017
HTML Boot Camp
Chapter 5
Rules and Images
Kirkwood Continuing Education
© Copyright 2015, Fred McClurg All Rights Reserved
Introduction to Web Programming

2. HTML Boot Camp: Rules and Images
4/22/2017
The <hr> Tag
Description: Inserts a horizontal rule. HTML Syntax: <hr> XHTML Syntax: <hr />
Chapter 05 > Hr Tag
Introduction to Web Programming

3. HTML Boot Camp: Rules and Images
4/22/2017
The <hr> Tag
Syntax: <hr attribute="value">
Attribute
Value
align
left, right, center
size
Rule thickness (e.g. 5px)
width
Rule length (e.g. 25%)
noshade
2D non-shaded rule
Introduction to Web Programming

4. HTML Boot Camp: Rules and Images
4/22/2017
Image Formats
Only a few image formats are supported on the web:
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
SVG (Scalable Vector Graphics)
Introduction to Web Programming

5. HTML Boot Camp: Rules and Images
4/22/2017
GIF Format Advantages
Graphics Interchange Format (GIF)
Advantages:
Compatible with most browsers
Compression is “lossless”
Supports interlacing
Supports transparency (GIF89a)
Supports animation (GIF89a)
Introduction to Web Programming

6. GIF Format Disadvantages
HTML Boot Camp: Rules and Images
4/22/2017
GIF Format Disadvantages
Graphics Interchange Format (GIF)
Disadvantages:
Supports maximum of 256 colors (8-bit)
Uses patented compression technology
Introduction to Web Programming

7. HTML Boot Camp: Rules and Images
4/22/2017
PNG Format Advantages
Portable Network Graphics (PNG) History: In 1993 Unisys decided to enforce patent on compression technology and collect royalties. Working group lead by Thomas Boutell developed PNG as an open alternative.
Introduction to Web Programming

8. JPEG Format Advantages
HTML Boot Camp: Rules and Images
4/22/2017
JPEG Format Advantages
Joint Expert Group (JPEG)
Advantages:
Non-proprietary format
16 million colors (24-bit)
Compression can be specified
Recommended use:
Photographs
Introduction to Web Programming

9. JPEG Format Disadvantages
HTML Boot Camp: Rules and Images
4/22/2017
JPEG Format Disadvantages
Joint Expert Group (JPEG)
Disadvantages:
Does not support transparency
Compression is “lossy”
Does not support animation
Introduction to Web Programming

10. HTML Boot Camp: Rules and Images
4/22/2017
PNG Format Advantages
Portable Network Graphics (PNG)
Advantages:
Non-proprietary format
16 million colors (24-bit)
Compression is “lossless”
Supports 2D interlacing
Supports transparency
Introduction to Web Programming

11. PNG Format Disadvantages
HTML Boot Camp: Rules and Images
4/22/2017
PNG Format Disadvantages
Portable Network Graphics (PNG)
Disadvantages:
Does not support animation
Introduction to Web Programming

12. HTML Boot Camp: Rules and Images
4/22/2017
The <img> Tag
Description:
Displays an image
HTML Syntax:
<img src="image.png">
XHTML Syntax:
<img src="image.png" />
<img src="image.png"></img>
Chapter 05 > Img Tag
Introduction to Web Programming

13. <img> Tag Attributes
HTML Boot Camp: Rules and Images
4/22/2017
<img> Tag Attributes
Common Attributes:
Attributes
Description
alt
Used when images are disabled or unavailable. Also used by screen reader (accessibility)
title
Displayed as popup text upon hover
align
Controls how image is positioned in relation to text (left, right, center) (not HTML5)
Introduction to Web Programming

14. <img> Tag Attributes
HTML Boot Camp: Rules and Images
4/22/2017
<img> Tag Attributes
Common Attributes:
Attributes
Description
border
Renders margin around image
width
Sets the image width
height
Sets the image height
align
Controls how the image is positioned in relation to text (left, right, center) (not HTML5)
src
URL of image
Introduction to Web Programming

15. Improving Image Display
HTML Boot Camp: Rules and Images
4/22/2017
Improving Image Display
The images on your page will often be the single most network-bandwidth hog. There are several things you can do to speed up the display of images.
Reuse images (especially icons)
Divide large documents into smaller pages
Link large a image via a thumbnail
Specify the image height and width
Introduction to Web Programming

16. HTML Boot Camp: Rules and Images
4/22/2017
The <svg> Tag
Your first SVG image:
<svg height="200" width="200">
<circle cx="100" cy="100"
r="80" stroke="black"
stroke-width="4"
fill="red" />
You should see a red circle.
No SVG support in browser.
</svg>
Chapter 05 > Svg Tag
Introduction to Web Programming

17. HTML Boot Camp: Rules and Images
4/22/2017
SVG Advantages
SVG format has some advantages over traditional raster formats:
Scalable: Can be scaled to any resolution without degradation of quality because it is a vector format.
Smaller: Smaller file size mean faster download time.
Scripting: The capability for dynamic and animated images exist.
Interactive: Images can be “clickable”.
Text Format: SVG language is written in plain text.
Introduction to Web Programming

18. HTML Boot Camp: Rules and Images
4/22/2017
More SVG Advantages
Other SVG format advantages include:
Styling: SVG files can be changed with CSS (e.g. font, color, etc.)
Selectable Text: Text in image can be selected, copied, and pasted.
Searchable Text: Text content can be searched and displayed in multiple languages.
Accessible: Screen reader can process text for disabled or sight impaired users.
Open Standard: SVG standard is an open format being developed by multiple industries in the consortium.
Introduction to Web Programming

19. <body> “bgcolor” Attributes
HTML Boot Camp: Rules and Images
4/22/2017
<body> “bgcolor” Attributes
Description: Sets the background color of the document (not HTML5).
Example:
<body bgcolor="lemonchiffon"
text="blue">
...
</body>
Chapter 05 > bgcolor Attribute
Introduction to Web Programming

20. <body> “background” Attributes
HTML Boot Camp: Rules and Images
4/22/2017
<body> “background” Attributes
Description: Specifies a background image (not HTML5).
Example:
<body background="images/brick.png">
...
</body>
Chapter 05 > background Attribute
Chapter 05 > background Horiz Ramp
Chapter 05 > background Vert Ramp
Introduction to Web Programming

21. <body> “link” Attributes
HTML Boot Camp: Rules and Images
4/22/2017
<body> “link” Attributes
Description: The link attributes control the colors of links (not HTML5).
link: a link not yet visited
vlink: a link already visited
alink: an active link (e.g. link selected by user when mouse is pressed
Example:
<body link="red"
vlink="magenta"
alink="green">
Introduction to Web Programming