1. David Lash DePaul University SNL 262 Web Page Design Chapt 10 - Custom Background And Colors Chapt 6 - Text Formatting and Font Control Instructor: David A. Lash

2. David Lash 2 What we talked about last week... zCreating Lists yOrdered Lists ( … &.. ) y Unordered Lists ( … &.. ) yDefinition lists ( …,.., … ) yLists within lists (remember to match up start and end of lists). zCreating HTML links yCreating absolute links x my home page yCreating relative links x my FAQ Page yCreating email links x Mail me please

3. David Lash 3 What we will look at: zPutting Background Color on pages yHow to specify color yUsing background “tile” images zWorking with font styles and colors yUnderline, bold, italics yWorking with the font tag xsize, color and style zUsing special characters ($, %, @, #)

4. David Lash 4 Color Attributes For Body Tags zLINK="BLUE" VLINKS="RED" ALINK="Pink BODY Tag has specific attributes to set up the colors on your web page: yBackground Color: yLink Color yRecently Visited Links yLinks Briefly blink when someone visits them: yPut it all together Click here for example http://www.depaul.edu/~dlash/extra/Webpage/examples/11Example1.html

5. David Lash 5 16 Standard Colors zYou can select from 16 standard “named” colors that include : yblack, white,red, green, yblue, yellow, magenta (aka fuchsia), ycyan (aka aqua), purple, gray, lime, y maroon, navy, olive, silver and teal.

6. David Lash 6 Mix & Match Colors zThe RRGGBB Format many colors possible. http://www.24hourhtmlcafe.com/hour11/tileroo m.h Amount of Red (from 0-255) Amount of Green (from 0-255) Amount of Blue (from 0-255)

7. David Lash 7 But Why Only 2 Digits? zIntensity of RED, GREEN, or BLUE ySpecified as a HEXIDECIMAL (that is base 16). x255 = xFF - Says 100% of the intensity. x204 = xcc - Says 80% intensity. x153 = x99 - Says 60% intensity x102 = x66 - Says 40% intensity. x51 = x33 - Says 20% intensity. x00 = x00 - Says 00% intensity. zSo what color would be: y

8. David Lash 8 But Why Only 2 Digits zHere is a Table of Decimal to Hexidecimal conversionDecimal to Hexidecimal conversion http://www.depaul.edu/~dlash/extra/Webpage/examples/11decTohex.htm zHere is a complete color chart ( http://www.24hourhtmlcafe.com/colors/) zWhich ones should you use … yBrowser Safe Colors - there are only 216 colors are common between the color palette of MACs, Win95 and Windows. (AKA Browser safe)

9. David Lash 9 Background Images zYou can use an external file for "wallpaper" or background image. yWallpaper is a small picture file that is repeated over and over on the background yAn example from book that uses tiling or wallpaper ( http://www.24hourhtmlcafe.com/hour10/motawi.htm)book that uses tiling or wallpaper yHere is the actual gif file.actual gif file. zHere is the actual gif file for my home page. ( http://condor.depaul.edu/~dlash/extra/Webpage/back.gif)gif file for my home page If this is your image, it would be stored in an external file (say back.gif) on your site. Welcome To my site Tiling repeats that file over and over like wallpaper on to the background of your site.

10. David Lash 10 How do you do that? 1. Find a background image file (more on how to find on next slide). 2. Save the image file onto your webserver. (That is, use FTP to copy over to your webserver.) 3. Change your body tag to indicate the background image file: This list indicates to use the tile.gif as the background image. This file must be on the webserver in the same directory as the HTML document.

11. David Lash 11 More On Background Images zPick a complementary tile not one that overwhelms the pageoverwhelms the page zFinding backgrounds (Certainly can search google): yCheck out the Yahoo Index (http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and _Layout/Graphics/Backgrounds/)the Yahoo Indexhttp://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and _Layout/Graphics/Backgrounds/ zHow to “use” a background image from one of these sites: 1.Goto the site (lets try http://www.backgroundcity.com/)http://www.backgroundcity.com/ 2.Find image you like, put cursor over the image 3.Right click the image and select save picture as. 4.Save the image to your hard drive. 5.Include the name of the file in your body tag: 6. Remember to copy your background file to your webserver when you publish Try this process now.

12. David Lash 12 What we will look at: zPutting Background Color on pages yHow to specify color yUsing background “tile” images zWorking with font styles and colors yUnderline, bold, italics yWorking with the font tag xsize, color and style zUsing special characters ($, %, @, #)

13. David Lash 13 What We Will Cover zWorking with font styles and colors italics: yBOLD, yunderline, yALL 3 at once, yBIG LETTERS ysmall letters  Many different font styles yLots of different colors!

14. David Lash 14 Simple Font Control Tags

15. David Lash 15 Simple Font Control Tags

16. David Lash 16 Want an example? Sample Page Welcome to my site. It is my precious site I said stay away from you are ok. Man this stuff C a n really Get confusing Fast. http://condor.depaul.edu/~dlash/extra/Webpage/examples/bold.html

17. David Lash 17 Controlling Size, Color & Style zThe typeset of the font can be tightly controlled with the FONT tag.  This includes the Size, color, and style of the font. zBasic tag was the tag with arguments: ysize= ycolor= ystyle=

18. David Lash 18 Controlling Color zThe tag supports the same set of colors as background: y16 named colors x(black, white,red, green, blue, yellow, magenta (aka fuchsia), cyan (aka aqua), purple, gray, lime, maroon, navy, olive, silver and teal) hello yhexadecimal color names Hello See Example at herehere http://www.depaul.edu/~dlash/extra/Webpage/examples/6ExampleColor.html

19. David Lash 19 Controlling Size zHTML supports 7 different sizes of fonts; ysize can be 1 (tiny) to 7 (large) yThe default is size=3 which is about word pt10. yHello world zYou can also specify size relative to the default font SIZE=3. Absolute Value | 1 | 2 | 3 | 4 | 5 | 6 | 7 Relative Value | -2 | -1 | - | +1 | +2 | +3 | +4 zHello world Click here for example http://www.depaul.edu/~dlash/extra/Webpage/examples/fonts.html

20. David Lash 20 Controlling Font Style zControlling font style is similar except you need to know the name of the font. For example, This would be Algerian This would be Algerian Can specify more than 1 font on a line zA browser would first try to use Lucida Sans Unicode, then arial then helvetica, if none available would use default (roman times). zHere are examples of various fonts and colors.( http://condor.depaul.edu/~dlash/extra/Webpage/examples/BigandPurple.html)examples of various fonts and colors.

21. David Lash 21 Mixing Color, Style & Size zYou can include multiple arguments in tag to get multiple effects y Hello Hello zYou can have layers of tags. ySee this example.this example. http://www.depaul.edu/~dlash/extra/Webpage/examples/multiSizeColor.html

22. David Lash 22 Mix & Match Colors (Just like before) zThe RRGGBB Format many colors possible. HELLO Amount of Red (from 0-255) Amount of Green (from 0-255) Amount of Blue (from 0-255)

23. David Lash 23 What we will look at: zPutting Background Color on pages yHow to specify color yUsing background “tile” images zWorking with font styles and colors yUnderline, bold, italics yWorking with the font tag xsize, color and style zUsing special characters ($, %, @, #)

24. David Lash 24 Inputting Special Characters zEntering special characters like pound sign (#), copyright sign, cent sign, etc.? zEach special character has a numeric code to use to represent it. yFor example, enter the character sequence of &#162 to get the ¢ sign. yTo display right bracket) enter &lt or &gt. yExample to get you need to enter <META&gt zClick here for some other examples.Click here for http://www.depaul.edu/~dlash/extra/Webpage/examples/SpecialChar.html y(See also page 91&91 for partial list.) zHere is an updated link with all the special characters supported. ( http://www.w3.org/TR/REC-html40/sgml/entities.html)Here is an updated link

25. David Lash 25 Some Common Special Characters zUsing special characters (e.g., #, $, @, )? @&#64 “&quot &&amp >&gt <&lt CharacterSpecial Character Note: A blank space is represented by

26. David Lash 26 Some Key Tags We Covered z zNamed colors and specify Hexidecimal number yBrowser Safe Colors, z z,, z y zSpecial character (e.g., $, #, @,,) need special numerical characters y&#162 to get the ¢ sign. y<META&gt to get y to get 2 blank spaces.

27. David Lash 27 Review of homework zLook at homework file at yhttp://condor.depaul.edu/~dlash/website/Lab2.htmlhttp://condor.depaul.edu/~dlash/website/Lab2.html zIt is asking you create a homepage and link in your homeworks.