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

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

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

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

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

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

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

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

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

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

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

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

<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

<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

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

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

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

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

<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

<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

<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