1 / 106

New Perspectives on Creating Web Pages with HTML

New Perspectives on Creating Web Pages with HTML. Tutorial 3: Designing a Web Page Working with Fonts, Colors, and Graphics. Tutorial Objectives. Learn how HTML handles color Create a color scheme for a Web page Work with font sizes, colors, and types Place a background image on a Web page

jbono
Download Presentation

New Perspectives on Creating Web Pages with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Perspectives on Creating Web Pages with HTML Tutorial 3: Designing a Web Page Working with Fonts, Colors, and Graphics Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  2. Tutorial Objectives • Learn how HTML handles color • Create a color scheme for a Web page • Work with font sizes, colors, and types • Place a background image on a Web page • Define colors for a Web page and for specific characters Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  3. Tutorial Objectives Continued • Learn about different image formats • Control the placement and appearance of images on a Web page • Work with client-side image maps Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  4. Working with Color in HTML • Using color will make your web pages: • visually interesting • eye-catching for the reader • HTML is a text-based language, requiring you to define your colors in textual terms. • HTML identifies a color in one of two ways: • by the color’s name • by the color values Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  5. The 16 Basic Color Names This figure shows the 16 basic color names that are recognized by all versions of HTML. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  6. Using Color Names • Using the basic color names allows you to accurately display them across different browsers and operating systems. • The list of only 16 colors is limiting to Web designers. • in response, Netscape and Internet Explorer began to support an extended list of color names Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  7. Partial List of Extended Color Names This figure shows a partial list of these additional color names. The extended color name list allows you to create color schemes with greater color variation. A more complete list is provided in Appendix A, “Extended Color Names.” Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  8. Using Color Values • To have more control and more choices, specify colors using color values. • A color value is a numerical expression that precisely describes a color. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  9. Basic Principles of Color Theory • Any color can be thought of as a combination of three primary colors: red, green, and blue. • By varying the intensity of each primary color, you can create almost any color and any shade of color. • This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  10. Adding the Three Primary Colors This figure shows the colors yellow, magenta, cyan, and white are produced by adding the three primary colors. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  11. RGB (Red, Green, and Blue) Triplets • Software programs, such as your Web browser, define color mathematically. • The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity). • In this way, 2553, or more than 16.7 million, distinct colors can be defined. • Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  12. RGB Triplets Examples • White has a triplet of (255,255,255), indicating that red, green, and blue are equally mixed at the highest intensity. • Yellow has the triplet (255,255,0) because it is an equal mixture of red and green with no presence of blue. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  13. A Typical Colors Dialog Box In most programs, you make your color choices with visual clues, usually without being aware of the underlying RGB triplet. This figure shows a typical dialog box in which you would make color selections based on the appearance of the color, rather than on the RGB values. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  14. Hexadecimal Values • HTML requires color values be entered as hexadecimals. • A hexadecimal is a number based on base-16 mathematics rather than base-10 mathematics that we use every day. • in base 10 counting, you use combination of 10 characters (0 through 9) to represent numerical values. • hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15). • for values above 15, you use a combination of the 16 characters; 16 is expressed as “10”, 17 is expressed as “11”, and so forth. • Because of the popularity of the Web, most graphics programs will now display the hexadecimal value of the colors in their color selection dialog boxes. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  15. Hexadecimal Values Continued • To represent a number in hexadecimal terms, you convert the value to multiples of 16 plus a remainder. For example: • 21 is equal to (16 x 1) + 5, so its hexadecimal representation is 15. • the number 255 is equal to (16 x 15) + 15, or FF in hexadecimal format (remember that F = 15 in hexadecimal). • in the case of the number 255, the first F represents the number of times 16 goes into 255 (which is 15), and the second F represents the remainder of 15. • Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  16. Color Names, RGB Triplets, and Hexadecimal Values The color yellow has the RGB triplet (255,255,0) and is represented by the hexadecimal string FFFF00. This figure shows the RGB triplets and hexadecimal equivalents for the 16 basic color names presented earlier. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  17. Color Selection Resources Available on the Web This figure shows color selection resources available on the Web. However you decide to work with color in your Web pages, it’s important to understand how HTML handles color, if for no other reason than to be able to interpret the HTML source code of the pages you explore on the Web. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  18. HTML Code for using Color in a Web Page • In most cases, the default browser scheme involves: • black text on a white or gray background • hypertext links highlighted in purple and blue • To use different colors than these, modify the attributes of the page, defined within the <body> tag. • The <body> tag can be used to indicate the colors on a Web page. • The syntax for controlling a page’s color scheme through the <body> tag is: <body bgcolor=“color” text=“color” link=“color” vlink=“color” alink=“color”> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  19. HTML Code for using Color in a Web Page Continued • bgcolor attribute sets the background color • the value of color will be either one of the accepted color names or the color’s hexadecimal value • if you use the hexadecimal value, you must preface the hexadecimal string with the pound symbol (#) and enclose the string in double or single quotation marks i.e. <body bgcolor=“#FFC088”> • text attribute controls text color • link attribute defines the color of hypertext links • vlink attribute defines the color of links that have been visited by the user • alink attribute determines the color of an active hyperlink (the color of the link as it is clicked by the user) Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  20. active hyperlink color previously followed hyperlink color text color hyperlink color background color HTML Code for using Color in a Web Page Continued Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  21. The Page with the New Color Scheme The Arcadium Web page now has dark blue text on a light blue background. Hypertext links are red and dark blue. By adding the color scheme to the <body> tag of the HTML file, you’ve superseded the browser’s default color scheme with one of your own. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  22. Modifying Text • Specifying the text color in the <body> tag of a Web page changes the color of all the text on the Web page. • Occasionally, you may want to change the color of individual words or characters. • Changing the color of text is an effective way to make specific sections of text stand out. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  23. Using the <font> Tag • The <font> tag allows you to specify the color, the size, and the font to be used for text on a Web page. • The syntax for the <font> tag is: <font size=“size” color=“color” face=“face”> text </font> • size attribute allows you to specify the font size of the text • color attribute allows you to change the color of individual characters or words • face attribute specifies a particular font for a section of text Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  24. Examples of Different Font Sizes This figure shows a representation of the various font sizes for a typical browser. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  25. Examples of Heading Tagsand Font Sizes This figure shows a complete comparison of header tags and font sizes. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  26. Changing the Font Color • The color attribute of the <font> tag allows you to change the color of individual characters or words. • Specify the color in the <font> tag by using either a color name or color value. • for example, to change the color of the word “Aracadium” to the hexadecimal color value 8000C0, you would enter the following HTML tag: <font color=“#8000C0”> Arcadium</font> • If there is no color specified in the <body> tag, the default colors of the Web browser is used. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  27. Changing the Font Face • The face attribute is used to specify a particular font for a section of text. • The face attribute overrides the browser’s font choice. • You must specify a font that is installed on the user’s computer or use one of the following five generic font names: • serif • sans-serif • monospace • cursive • fantasy Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  28. Examples of Generic Fonts This figure shows some of the possible ways each of these generic fonts could be displayed. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  29. Fonts and Browsers • The face attribute allows you to specify a list of potential font names. • the browser tries to use the first font in the list; if it fails, it will try the second font, and so on. • A generic font name should be listed last for the browser to fall back on. • for example to display the word “Arcadium” in a sans-serif, enter the following HTML tag: <font face=“Arial, Helvetica, sans-serif”> Arcadium</font> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  30. text will appear in a sans-serif font Applying a Sans-Serif Font to a Section of Text This figure shows an example of applying a sans-serif font to a section of text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  31. Example of Headings in a Sans-Serif Font Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  32. Using the <font> Tag to Specify Color • The <font> tag gives you significant control over the appearance of individual blocks of text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  33. text will appear in red subtitle appears in red Using the <font> Tag to Create Spot Color Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  34. Inserting a Background Image • The background attribute allows an image file for the background of a Web page. • The syntax for inserting a background image is: <body background=“URL”>. • URL is the location and filename of the graphic file you want to use for the background of the Web page. • for example, to use an image named “bricks.gif” as a background image, you would use the tag: <body background=“brick.gif”> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  35. This figure shows that when a browser retrieves your image file, it repeatedly inserts the image into the background, in a process called tiling, until the entire display window is filled up. The Process of Tiling the Background Image Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  36. Background Image • In choosing a background image, you should remember the following: • use an image that will not detract from the text on the Web page, making it hard to read • do not use a large image file (more than 20 kilobytes) • large and complicated backgrounds will increase the time it takes a page to load • be sure to take into consideration how an image file looks when it is tiled in the background Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  37. This figure shows some examples of well-designed and poorly designed Web page backgrounds. Background overwhelms the foreground text Background shows distracting seams between image tiles Background doesn’t overwhelm the foreground text and seams are not evident Web Page Backgrounds Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  38. Title URL Absolute Backgrounds Textures Archive http://www.grsites.com/textures/ Free Backgrounds http://www.free-backgrounds.com/ Texture Station http://www.nepthys.com/textures/ WebGround http://www.ip.pt/webground/ Source of Web Backgrounds There are many collections of background images available on the Web. The only restriction is that you cannot sell or distribute the images in a commercial product. This figure shows a list of some of these collections. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  39. Finding the right background image is a process of trial and error. You won’t know for certain whether a background image works well until you actually view it in a browser. setting the image file for the page’s background Entering Clouds.jpg as the Background Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  40. Results of the Web Pagewith the Clouds.jpg Background Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  41. Extensions to the <font> and <body> Tags • Both Netscape and Internet Explorer support some attributes for the <font> and <body> tags. • Netscape supports the following two extension to the <font> tag: <font point-size=“size” weight=“boldness”> • size is the point size of the font • boldness is a measure of the weight or boldness of the font • for example, to display text in a 12 point font with a weight of 700, the following <font> tag would be used: <font point-size=“12” weight=“700”> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  42. Extensions to the <font> and <body> Tags Continued • Internet Explorer does not support any extensions for the <font> tag. • Internet Explorer does support the following additional attributes of the <body> tag: <body bgproperties=“properties” bottommargin=“value” leftmargin=“value” rightmargin=“value” topmargin=“value”> • bgproperties attribute is used whether the background image can scroll along with the page • the bottommargin, leftmargin, rightmargin, and topmargin attributes specify the size of the margin Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  43. Deprecated Tags • The <font> tag and the attributes of the <body> tag have both been deprecated by the W3C. • deprecated means that they are considered to be outdated by newer methods • Web page authors are encouraged to use other approaches, such as cascading style sheets, to format the appearance of Web pages. • Most of the deprecated tags and attributes are still supported by the major browsers. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  44. Images • The two image file formats supported by most Web browsers are GIF and JPEG. • Choosing the appropriate image format is an important part of Web page design. • Balance the goal of creating an interesting and attractive page against the need to keep the size of your page small and easy to receive. • Each file format has its advantages and disadvantages, and you will probably use a combination of both formats in your Web page designs. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  45. Working with GIF Files • GIF (Graphics Interchange Format) is the most commonly used image format on the Web. • Compatible with virtually all browsers. • GIF files are limited to displaying 256 colors. • Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons. • Images that require more color depth, such as photographs, can appear grainy when saved as GIF files. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  46. Interlaced and Noninterlaced GIFs • Interlacing refers to the way the GIF is saved by the graphics software. • Normally, with a noninterlaced GIF the image is saved one line at a time, starting from the top of the graphic and moving downward. • With interlaced GIFs, the image is saved and retrieved “stepwise.” • for example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  47. Interlaced and Noninterlaced GIFs Continued • Interlacing is an effective format if you have a large graphic and want to give users a preview of the final image as it loads. • Interlacing can increase the size of a GIF file by anywhere from 3 to 20 kilobytes, depending on the image. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  48. top appears first Image appears one line at a time entire image is retrieved Noninterlaced Graphic This figure shows how a noninterlaced GIF appears as it is slowly retrieved by the Web browser. If the graphic is large, it might take several minutes for the entire image to appear, which can frustrate the visitors to your Web page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  49. a rough image appears first image starts to show more detail final image is crisp and detailed Interlaced Graphic This figure shows the effect of interlacing, which is when the graphic starts out as a blurry representation of the final image, then gradually comes into focus-unlike the noninterlaced graphic, which is always a sharp image as it’s being retrieved, although an incomplete one. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

  50. Transparent GIFs • A transparent color is a color from the image that is not displayed when the image is viewed in an application. • In place of a transparent color, the browser will display whatever is on the page background. • Creating a transparent color depends on the graphic software used. • Many applications include the option to designate transparent color when saving the image i.e. PhotoShop. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 3

More Related