Transcript html
The Web Wizard’s Guide to HTML Chapter One World Wide Web Basics Chapter Objectives Show how Web page authors and computers work together Look behind the scenes when a browser displays a Web page Explain what HTML is and how Web pages use HTML Demonstrate how to create Web pages with nothing more than a text editor and a browser Explore the role of HTML standards on the Web To View the World Wide Web You Need An Internet-ready computer An Internet access account A Web browser To Create a Web Site You Need An Internet-ready computer A text editor (or Web page construction kit) An Internet access account A password-protected account on a Web server Uniform Resource Locator (URL) All Web pages are addressed with URLs The URL specifies – A server name – A directory path – A filename URLs are part of the HTTP (Hypertext Transfer Protocol) communications protocol. Web Page Displays All browsers are designed to display .html and .htm files Browsers have to rework their page displays whenever a browser window is resized Web pages can look a little different on different computers Web page authors cannot completely control their page displays The Hypertext Markup Language (HTML) HTML formatting commands control Web page displays All HTML formatting is achieved with HTML elements All HTML elements are based on HTML tags and tag-pairs HTML files can be created with text editors A HTML TagTemplate <html> <head> <title> (insert text for the browser’s title bar here) </title> </head> <body> (insert visible Web page elements here) </body> </html> HTML Editors Pros – Offer lots of useful features – Help you avoid tagging errors – Can save time Cons – Can interfere with HTML mastery – Can be intimidating for beginners Industry Standards Most HTML tags are in the official HTML standard All HTML-compliant browsers recognize the standard HTML tag set The World Wide Web Consortium (W3C) sets the industry standard for HTML Non-Standard HTML Some HTML tags are browser-specific extensions to HTML Netscape Navigator and Internet Explorer do not always recognize each other’s HTML extensions Web pages that use non-standard HTML may not display well for all users Browser manufacturers create their own HTML extensions to influence the industry standard HTML Validation Services A validation service on the Web can check an HTML file for you A validation service can be used to identify tagging errors and HTML extensions Some HTML tagging errors are difficult to locate by manual inspection If you don’t use an HTML editor, a validation service can be very helpful The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting Chapter Objectives Show how to create heading and paragraphs for Web pages Explain how to control a variety of features associated with text Learn how to add three types of lists to a Web page Explore the layout and white-space controls for blocks of text Heading Elements Headings come in six sizes <h1> </h1> is the largest heading <h6> </h6> is the smallest heading Headings break up text with titles and subtitles Tag Attributes Most HTML tags support their own set of tag attributes Each attribute contains an attribute name and an attribute value E.g. you can center a heading with an alignment attribute: <h1 align=“center”> Breaking Up Text The paragraph element <p> begins a block of text after an empty line The break element <br> begins a block of text on a new line The horizontal rule element <hr> inserts a horizontal line to emphasize a break in the text Standard Type Face Options <font face=“Arial”> </font> It is best to specify type faces in groups since different computers use different type fonts: face=“Arial, Geneva, Helvetica” face=“Times New Roman, Times” face=“Courier New, Courier” Other useful font attributes include color and size Three Types of Lists Ordered list <ol> <li> </li> Unordered list <ul> </ol> <li> </li> Definition list <dl> </ul> <dt> </dt> <dd> </dd> </dl> White Space Management Browsers are programmed to ignore extraneous blank spaces and empty lines Controlling white space on a Web page requires special HTML elements: <br> <pre></pre> <blockquote></blockquote> The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics Chapter Objectives Demonstrate how to add colors to a Web page Explain how to add background patterns How how to add images to a Web page Explain the use of relative addresses for image files Investigate the interplay between design decisions and bandwidth consumption Background Colors The bgcolor attribute inside the body tag is used to specify a Web page’s background color: <body bgcolor=“black”> Bgcolor values can also be expressed in hexadecimal notation: <body bgcolor=“#AA33CC”> Web-safe Colors Different computers and computer monitors may display the same hexadecimal color very differently 216 color codes are “safe” in the sense that they are displayed identically or almost identically on all computers Background Patterns The background attribute inside the body tag is used to specify a background pattern: <body background=“water.jpg”> All background patterns are repeated like tiles to fill up a Web page’s background Inline Images The src attribute inside the img tag is used to add an image to a Web page: <img src=“donut.gif”> GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats Image Attributes The align attribute positions the image and enables text to flow around an image The height and width attributes scale the image to any size you like The alt attribute allows you to describe the image in text for browsers that can’t display the image Flowing Text Use the align attribute to make text flow alongside an image: <img src=“donut.gif” align=“left”> positions the image on the left side of the page and allows text to run down its right side Relative Paths The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: <img src=“donut.gif”> If you want to retrieve an image from a different directory, you can add path information to the file name: <img src=“pix/donut.gif”> Bandwidth Limitations Image files consume more bandwidth than text files Users who access the Internet via telephone lines will have to wait for image files that are 100KB or larger Whenever possible, use image files no larger than 30-40KB Battling Bandwidth Limitations Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading Don’t put any large images at the top of a Web page Use interlaced GIFs and progressive JPGs Use the 1x1 image trick (with caution) The Web Wizard’s Guide to HTML Chapter Four All About Hyperlinks Chapter Objectives Introduce three types of hyperlinks Explain how to add absolute URLs Explain how to add relative URLs Explain how to add named anchors Examine the problem of link maintenance Different Types of Hyperlinks Absolute URLs point to Web pages on other Web servers Relative URLs point to Web pages on the same Web server Named Anchors point to a different location on the current Web page All Hyperlinks Have Two Parts The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) The Link Destination is the location that the link takes you to when you click on the link Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors Anchor Tags All hyperlinks are created with the anchor tag: <a>this is a link label</a> The href attribute is used to specify the link destination: <a href=“destination.html”> Absolute URLs All absolute URLs use complete URL addresses for their link destinations: <a href=“http://www.umass.edu/”>UMass-Amherst</a> Any Web page can be referenced by an absolute URL as long as you have its correct address Relative URLs A relative URL need only specify a file name for its link destination: <a href=“treehouse.html”>tree houses</a> This assumes the destination file is in the same directory as the HTML file containing the link If the file is in a different directory, pathing information must be added to the href value Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute <a href=“#lumber”>Some Good Lumber</a> <a name=“lumber”>some good lumber</a> The href value is prefaced with the # character but the name value is not Named Anchors Combined with Other Links A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor <a href=“treehouse.html#lumber”>Some Good Lumber</a> Just add a # followed by the anchor’s name to the end of the file name in the href value Link Maintenance An absolute link that works today may not work tomorrow Dead links frustrate visitors and detract from your Web pages To keep all of your links operational, you have to test them periodically and update any that have died Automated Link Checkers If you have a large number of links, you should automate the process of link testing You can subscribe to a Web-based service for link testing and weekly or monthly link reports You can obtain your own link testing software and run it yourself The Web Wizard’s Guide to HTML Chapter Five Working with Images Chapter Objectives Explain when to employ the GIF, JPEG, and PNG file formats Show how thumbnail previews can minimize bandwidth consumption Find out how to create and use transparent GIFs Demonstrate how to create an image map Introduce animated GIFs and streaming media GIF (Graphics Interchange Format) Uses an adaptive 8-bit color palette (256 colors) Especially suitable for line art and cartoons Can work well for some photographs JPEG (Joint Photographic Experts Group) Uses a fixed 24-bit color palette (millions of colors) Especially suitable for high-resolution photographs Uses lossy file compression Lossy Image Compression Trades image quality for memory savings Very good for minimizing bandwidth You control the trade-off when you save the image Interlaced GIFs Displays images incrementally in four passes Gives users something to look at while the image is still downloading Any GIF image can be converted to an interlaced GIF Thumbnail Previews Let your visitors decide if they want to download a large (bandwidth intensive) image Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Make the thumbnail sketch a link label so users can click through to the original image if they want it Transparent GIFs Transparent regions in an image allow the background color or pattern of a Web page to show through Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions The background of a photograph can be made transparent after some graphics editing Image Maps Navigational menus and navigation bars have clickable regions that take the user to different locations HTML’s map element makes it possible to specify different clickable regions within a single image Image maps can be created manually with the “ISMAP trick” or with the help of an image mapper Animated GIFs The GIF file format supports cartoon animations An animated GIF is stored in a single GIF file To display an animated GIF, just specify the GIF file in the SRC attribute of an IMG tag Streaming Media Video and audio files are often available on the Web via streaming media A media player is needed to process streaming media By buffering very large files in successive pieces, a media player can render one portion of a video or a recording long before the rest of the file has arrived The Web Wizard’s Guide to HTML Chapter Six Tables Chapter Objectives Examine the structure of HTML tables Explore the most important table attributes Learn how tables can be used to format text Learn how tables can be used to format graphics Explain some caveats and warnings associated with tables The Table Element Each table tag pair <table></table> can hold any number of table rows Each table row tag pair <tr></tr> can hold any number of table data items Each table data tag pair <td></td> can hold text, images, and other HTML elements Table Cells A table cell is another name for a table data element Tables cells can be distinguished by their own background colors, type fonts, alignments, etc. A table containing a single cell can be used to frame an image or offset important text Table Attributes You can center HTML elements on a Web page by embedding them inside a single-celled table with a width=“100%” table attribute and an align=“center” table data attribute A border=“5” table attribute creates a 3-D picture frame for a single-celled table containing an image Tables and Text Text is hard to read against a busy background pattern, but you can lay a table containing text on top of a background pattern without sacrificing readability (just give the table a solid background color) Tables can also be used to separate text into two columns (a cellpadding=“20” table attribute will put white space between the two columns) Web Page Borders Empty table columns can be used to create margins for text on a Web page Use a fixed width attribute (e.g. width=“50”) for the empty table data element A left-hand margin is necessary if you want to run a graphical border down the left side of a Web page (by tiling a very wide background pattern) Tables and Graphics Tables can be used to control a Web page layout for multiple images (or images mixed with text) Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams All tables have an underlying cell structure with a uniform number of table cells across each table row colspan and rowspan colspan and rowspan are table data attributes that are used to create irregular tables A table cell can be extended horizontally with the colspan attribute A table cell can be extended vertically with the rowspan attribute One vs. Many If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page Browsers have to download the contents of an entire table before any of the table can be viewed Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting Chapter Objectives Show how to create heading and paragraphs for Web pages Explain how to control a variety of features associated with text Learn how to add three types of lists to a Web page Explore the layout and white-space controls for blocks of text Heading Elements Headings come in six sizes <h1> </h1> is the largest heading <h6> </h6> is the smallest heading Headings break up text with titles and subtitles Tag Attributes Most HTML tags support their own set of tag attributes Each attribute contains an attribute name and an attribute value E.g. you can center a heading with an alignment attribute: <h1 align=“center”> Breaking Up Text The paragraph element <p> begins a block of text after an empty line The break element <br> begins a block of text on a new line The horizontal rule element <hr> inserts a horizontal line to emphasize a break in the text Standard Type Face Options <font face=“Arial”> </font> It is best to specify type faces in groups since different computers use different type fonts: face=“Arial, Geneva, Helvetica” face=“Times New Roman, Times” face=“Courier New, Courier” Other useful font attributes include color and size Three Types of Lists Ordered list <ol> <li> </li> Unordered list <ul> </ol> <li> </li> Definition list <dl> </ul> <dt> </dt> <dd> </dd> </dl> White Space Management Browsers are programmed to ignore extraneous blank spaces and empty lines Controlling white space on a Web page requires special HTML elements: <br> <pre></pre> <blockquote></blockquote> The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics Chapter Objectives Demonstrate how to add colors to a Web page Explain how to add background patterns How how to add images to a Web page Explain the use of relative addresses for image files Investigate the interplay between design decisions and bandwidth consumption Background Colors The bgcolor attribute inside the body tag is used to specify a Web page’s background color: <body bgcolor=“black”> Bgcolor values can also be expressed in hexadecimal notation: <body bgcolor=“#AA33CC”> Web-safe Colors Different computers and computer monitors may display the same hexadecimal color very differently 216 color codes are “safe” in the sense that they are displayed identically or almost identically on all computers Background Patterns The background attribute inside the body tag is used to specify a background pattern: <body background=“water.jpg”> All background patterns are repeated like tiles to fill up a Web page’s background Inline Images The src attribute inside the img tag is used to add an image to a Web page: <img src=“donut.gif”> GIF and JPG are the most commonly used file formats for inline images – browsers only recognize GIF, JPG, and PNG image formats Image Attributes The align attribute positions the image and enables text to flow around an image The height and width attributes scale the image to any size you like The alt attribute allows you to describe the image in text for browsers that can’t display the image Flowing Text Use the align attribute to make text flow alongside an image: <img src=“donut.gif” align=“left”> positions the image on the left side of the page and allows text to run down its right side Relative Paths The src attribute for an image file retrieves images from the same directory as the HTML file containing the img tag: <img src=“donut.gif”> If you want to retrieve an image from a different directory, you can add path information to the file name: <img src=“pix/donut.gif”> Bandwidth Limitations Image files consume more bandwidth than text files Users who access the Internet via telephone lines will have to wait for image files that are 100KB or larger Whenever possible, use image files no larger than 30-40KB Battling Bandwidth Limitations Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading Don’t put any large images at the top of a Web page Use interlaced GIFs and progressive JPGs Use the 1x1 image trick (with caution) The Web Wizard’s Guide to HTML Chapter Four All About Hyperlinks Chapter Objectives Introduce three types of hyperlinks Explain how to add absolute URLs Explain how to add relative URLs Explain how to add named anchors Examine the problem of link maintenance Different Types of Hyperlinks Absolute URLs point to Web pages on other Web servers Relative URLs point to Web pages on the same Web server Named Anchors point to a different location on the current Web page All Hyperlinks Have Two Parts The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) The Link Destination is the location that the link takes you to when you click on the link Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors Anchor Tags All hyperlinks are created with the anchor tag: <a>this is a link label</a> The href attribute is used to specify the link destination: <a href=“destination.html”> Absolute URLs All absolute URLs use complete URL addresses for their link destinations: <a href=“http://www.umass.edu/”>UMass-Amherst</a> Any Web page can be referenced by an absolute URL as long as you have its correct address Relative URLs A relative URL need only specify a file name for its link destination: <a href=“treehouse.html”>tree houses</a> This assumes the destination file is in the same directory as the HTML file containing the link If the file is in a different directory, pathing information must be added to the href value Named Anchors A named link destination specifies a location that has been marked by an anchor tag with a name attribute <a href=“#lumber”>Some Good Lumber</a> <a name=“lumber”>some good lumber</a> The href value is prefaced with the # character but the name value is not Named Anchors Combined with Other Links A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor <a href=“treehouse.html#lumber”>Some Good Lumber</a> Just add a # followed by the anchor’s name to the end of the file name in the href value Link Maintenance An absolute link that works today may not work tomorrow Dead links frustrate visitors and detract from your Web pages To keep all of your links operational, you have to test them periodically and update any that have died Automated Link Checkers If you have a large number of links, you should automate the process of link testing You can subscribe to a Web-based service for link testing and weekly or monthly link reports You can obtain your own link testing software and run it yourself The Web Wizard’s Guide to HTML Chapter Five Working with Images Chapter Objectives Explain when to employ the GIF, JPEG, and PNG file formats Show how thumbnail previews can minimize bandwidth consumption Find out how to create and use transparent GIFs Demonstrate how to create an image map Introduce animated GIFs and streaming media GIF (Graphics Interchange Format) Uses an adaptive 8-bit color palette (256 colors) Especially suitable for line art and cartoons Can work well for some photographs JPEG (Joint Photographic Experts Group) Uses a fixed 24-bit color palette (millions of colors) Especially suitable for high-resolution photographs Uses lossy file compression Lossy Image Compression Trades image quality for memory savings Very good for minimizing bandwidth You control the trade-off when you save the image Interlaced GIFs Displays images incrementally in four passes Gives users something to look at while the image is still downloading Any GIF image can be converted to an interlaced GIF Thumbnail Previews Let your visitors decide if they want to download a large (bandwidth intensive) image Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Make the thumbnail sketch a link label so users can click through to the original image if they want it Transparent GIFs Transparent regions in an image allow the background color or pattern of a Web page to show through Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions The background of a photograph can be made transparent after some graphics editing Image Maps Navigational menus and navigation bars have clickable regions that take the user to different locations HTML’s map element makes it possible to specify different clickable regions within a single image Image maps can be created manually with the “ISMAP trick” or with the help of an image mapper Animated GIFs The GIF file format supports cartoon animations An animated GIF is stored in a single GIF file To display an animated GIF, just specify the GIF file in the SRC attribute of an IMG tag Streaming Media Video and audio files are often available on the Web via streaming media A media player is needed to process streaming media By buffering very large files in successive pieces, a media player can render one portion of a video or a recording long before the rest of the file has arrived The Web Wizard’s Guide to HTML Chapter Six Tables Chapter Objectives Examine the structure of HTML tables Explore the most important table attributes Learn how tables can be used to format text Learn how tables can be used to format graphics Explain some caveats and warnings associated with tables The Table Element Each table tag pair <table></table> can hold any number of table rows Each table row tag pair <tr></tr> can hold any number of table data items Each table data tag pair <td></td> can hold text, images, and other HTML elements Table Cells A table cell is another name for a table data element Tables cells can be distinguished by their own background colors, type fonts, alignments, etc. A table containing a single cell can be used to frame an image or offset important text Table Attributes You can center HTML elements on a Web page by embedding them inside a single-celled table with a width=“100%” table attribute and an align=“center” table data attribute A border=“5” table attribute creates a 3-D picture frame for a single-celled table containing an image Tables and Text Text is hard to read against a busy background pattern, but you can lay a table containing text on top of a background pattern without sacrificing readability (just give the table a solid background color) Tables can also be used to separate text into two columns (a cellpadding=“20” table attribute will put white space between the two columns) Web Page Borders Empty table columns can be used to create margins for text on a Web page Use a fixed width attribute (e.g. width=“50”) for the empty table data element A left-hand margin is necessary if you want to run a graphical border down the left side of a Web page (by tiling a very wide background pattern) Tables and Graphics Tables can be used to control a Web page layout for multiple images (or images mixed with text) Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams All tables have an underlying cell structure with a uniform number of table cells across each table row colspan and rowspan colspan and rowspan are table data attributes that are used to create irregular tables A table cell can be extended horizontally with the colspan attribute A table cell can be extended vertically with the rowspan attribute One vs. Many If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page Browsers have to download the contents of an entire table before any of the table can be viewed Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading The Web Wizard’s Guide to HTML Chapter Seven Frames Chapter Objectives Show how to construct frame-based displays Explain how frames can be used to facilitate Web site navigation Show how to make and easy-to-browse art of photo gallery with frames Explore the controversial practice of deep linking The Frameset Element The frameset tag pair should follow the head element, replacing the body element The cols and rows attributes are used to divide the Web page into frames Each frame is represented by a separate frame element The Frame Element Each frame tag should contain a name attribute The name attribute can be used by a target attribute if you want to send a link destination from a hyperlink in one frame to a different frame Each frame tag should contain a src attribute that specifies a Web page Frames for Site Navigation A typical frame layout uses two nested frameset elements to divide a Web page into three frames: 1. The title frame runs across the top of the Web page A navigational frame occupies a left-hand border under the title frame A content frame occupies the remainder of the Web page 2. 3. Art Galleries with Frames The three-frame layout works well for an online art gallery Fill the navigation frame with clickable thumbnail previews When a user clicks on a thumbnail preview, send the original image to the content frame Deep Linking A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system You can avoid deep links by sending them to a new browser window Any link can be routed to a new browser window with the target attribute Problems with Frames Not all browsers support frames It is difficult for others to link to content inside a frame It’s easy to create deep links by accident Advantages of Frames Frames support intuitive site layouts that are easy to navigate Site development efforts can focus on content and navigation as independent problems The Web Wizard’s Guide to HTML Chapter Eight Publishing on the Web Chapter Objectives Run through a checklist of things to do before uploading a Web page Explain how to upload files using a Web browser Explain how to upload files using a Web page construction kit Explain how to upload files using an FTP client Explore some common troubleshooting scenarios Seven Things to Check Display each of your pages one last time Test all of your hyperlinks Compress any JPG images Make sure all img tags have width, height, and alt attributes Make sure your pages are easy to navigate Identify yourself and acknowledge any sources Include appropriate copyright statements What You Need A userid and password for your Web server The host address for your Web server The directory path to your account on your Web server The URL for your homepage Use Your Web Browser Web browsers can create FTP connections to Web servers You have to log in using your userid and password The browser will display remote directories in your browser window You can upload files by dragging file icons into the directory display Use a Web Page Construction Kit Construction kits include Netscape Communicator’s Composer, Miscrosoft’s Frontpage, or Macromedia’s Dreamworks Look for a “publish” feature Each interface will work a little differently Use an FTP Client This is the best solution for folks who expect to be doing ongoing site development or maintenance Many free FTP clients are available on the Internet Troubleshooting: 404 Not Found Your URL is incorrect You uploaded your file to the wrong directory Your upload failed and you need to upload again Troubleshooting: 404 Not Found Relative URLs depend on their surroundings (related directories) Your file name was altered during the uploading process (watch for case differences) You have an absolute URL on your local host Troubleshooting: Forbidden Access If you understand Unix protection codes and you have the right software, you can fix it yourself Otherwise, ask the Help Desk personnel for your Web server for assistance Troubleshooting: Image Files Won’t Display Right click over the box where the image should be and select “View image” to find out if it is a 404 Not Found error or a Forbidden Access error Once you know which type of error it is, you can fix it just as you would fix a link error