1. 1 Custom Background And Colors Text Formatting and Font Control Using Images Using HTML and JavaScript to Develop Websites.

2. 2 What we talked about last time... l Creating Lists »Ordered Lists ( … &.. ) » Unordered Lists ( … &.. ) »Definition lists ( …,.., … ) »Lists within lists (remember to match up start and end of lists). l Creating HTML links »Creating absolute links – my home page »Creating relative links – my FAQ Page »Creating email links – Mail me please

3. 3 What we will look at: l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

4. 4 Competency Objectives 1. Can add color and background images to a page. (Can create a tile effect). 2. Can control font style, size and color. 3. Can place image files on a web page. Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

5. 5 Color Attributes For Body Tags l The BODY Tag has specific attributes to set up the colors on your web page: »Background Color: »Link Color »Recently Visited Links »Links Briefly blink when someone visits them: »Put it all together Competency Alert: You need to know this !

6. 6 Body attribute example... 1. DePaul Link 2. 3. 4. Here is a site I like, it is called next.html 5. 6. Before you visit page link in red While click link and waiting for page load link in yellow If visit page again, link in white indicating you’ve clicked it recently

7. 7 16 Standard Colors l You can select from 16 standard “named” colors that include : »black, white,red, green, »blue, yellow, magenta (aka fuchsia), »cyan (aka aqua), purple, gray, lime, » maroon, navy, olive, silver and teal.

8. 8 Mix & Match Colors l The RRGGBB Format many colors possible. Amount of Red (from 0-255) Amount of Green (from 0-255) Amount of Blue (from 0-255) Note RRGGBB is the same color scheme used by television sets to view color. It is also the 3 colors your eye naturally sees.

9. 9 But Why Only 2 Digits? l Intensity of RED, GREEN, or BLUE »Specified as a HEXIDECIMAL (that is base 16). –255 = xFF - Says 100% of the intensity. –204 = xcc - Says 80% intensity. –153 = x99 - Says 60% intensity –102 = x66 - Says 40% intensity. –51 = x33 - Says 20% intensity. –00 = x00 - Says 00% intensity. l So what color would be: » Note Hexadecimal numbering is base 16. Each base 16 number can be represented in our base 10 numbering system

10. 10 Browser safe colors l With 256 possible Reds, and 256 Greens and 256 blues there are 16,777,216 possible colors l Which ones should you use? »Browser Safe Colors ? – Originally, Netscape created a browser color pallet of 256 colors that was common to the monitors of the time. »Windows reserves 40 of these colors for displaying windows elements. (Leaving 216 browser safe colors). »These days, most monitors and computers can display thousands (if not millions of colors) but most people design with the 216 colors in mind. Note you can see a browser safe color chart at: Here is a complete color chart http://www.24hourhtmlcafe.com/colors/ orhttp://www.24hourhtmlcafe.com/colors/ Also http://webdesign.about.com/od/colorcharts/l/bl_colors.htmhttp://webdesign.about.com/od/colorcharts/l/bl_colors.htm

11. 11 Background Images l You can use an external file for "wallpaper" or background image. »Wallpaper is a small picture file that is repeated over and over on the background »An example from Teach Yourself HTML in 24 Hours, that uses tiling or wallpaper ( http://www.24hourhtmlcafe.com/hour10/motawi.htm) that uses tiling or wallpaper »Here is the gif file »( http://condor.depaul.edu/~dlash/extra/Webpage/back.gif) http://condor.depaul.edu/~dlash/extra/Webpage/back.gif l For example 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.

12. 12 A Noisy Tile example 1. 2. Sample Page 3. 4. This is an example web page. I don't recommend 5. actually using very noisy background images. It does not look too good. 6. But you never know why someone does some things. 7. 8.

13. 13 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.

14. 14 More On Background Images l Finding backgrounds (Certainly can search google): »Check out the Yahoo Index (http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_an d_Layout/Graphics/Backgrounds/)the Yahoo Indexhttp://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_an d_Layout/Graphics/Backgrounds/ l How 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.

15. 15 Objectives l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

16. 16 Changing font styles. l Working with font styles and colors italics. E.g., »BOLD, »underline, »ALL 3 at once, »BIG LETTERS »small letters »Many different font styles »Lots of different colors!

17. 17 Simple Font Control Tags

18. 18 Simple Font Control Tags - II

19. 19 The tags nest... 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. Common Problem Area! People seem to forget this

20. 20 Controlling Size, Color & Style l The typeset of the font can be controlled with the FONT tag. This includes the Size, color, and style of the font. l Basic tag was the tag with arguments: »size= »color= »style=

21. 21 Controlling Color l The tag supports the same set of colors as background: »16 named colors –(black, white,red, green, blue, yellow, magenta (aka fuchsia), cyan (aka aqua), purple, gray, lime, maroon, navy, olive, silver and teal) hello »hexadecimal color names Hello Competency Alert: You need to know this !

22. 22 Font Color Nesting Example 1. 2. Sample Page 3. 4. Welcome to my interesting site. 5. Notice how the font colors will 6. will nest just like the other tags. Its a matter of keeping 7. track of your tags 8. 9.

23. 23 Controlling Size l HTML supports 7 different sizes of fonts; »size can be 1 (tiny) to 7 (large) »The default is size=3 which is about word pt10. »Hello world l You 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 l For example, Hello world Note: Actually you can get more than 7 sizes but you need to use cascading style sheets. We talk about that later. Competency Alert: You need to know this !

24. 24 Font Size Example... 1. 2. Sample Page 3. 4. Notice how the font changes from to size 4. 5. Next the font will shrink to size 2. 6. Now a relative specification that jumps to 5 (2+3) 7. When end the tag goes back to 2. 8. Its a matter of keeping 9. track of your tags (again.) So lets finish with 7 10.

25. 25 Controlling Font Style l To control font style, need to know the name of the font. l For example, This would be Algerian l Can specify more than 1 font on a attribute. E.g., l Browser will try to use Lucida Sans Unicode, then arial then helvetica, if none available would use default (roman times).

26. 26 Color Example... 1. 2. Big & Purple Example 3. 4. 5. 6. 7. Baseball 8. 9. WhiteSox 10. Cubs 11. Wrigley Field 12. 13. 14. Football

27. 27 Mixing Color, Style & Size l You can include multiple arguments in tag to get multiple effects Hello l You can have layers of tags. Competency Alert: You need to know this ! THIS is a sample web Page Welcome To Exploring The Internet The Place to BE

28. 28 Objectives l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

29. 29 Inputting Special Characters l Entering special characters like pound sign (#), copyright sign, cent sign, etc.? l Each special character has a numeric code to use to represent it. »For example, enter the character sequence of &#162 to get the ¢ sign. »To display right bracket) enter &lt or &gt. »Example to get you need to enter <META&gt l Here 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 Competency Alert: You need to know this !

30. 30 Special Character Example... Some Example With Special Characters This line is Blue and size 4 This line is Blue and size 5 This line is GREY and size 6 A sample of the &lt font&gt tag. This line is size 3 and is &#177 10% smaller This line is size 2 and is squared&#178

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

32. 32 Objectives l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

33. 33 Using Image Files l Images are stored in separate files. »They are essentially linked to your website. l There are many different ways to create or find digital images »Digital cameras - If you save the image in a standard format (E.g., gif, jpg), you can include on your web page »On-line searches – E.g., search google for free clip art »To save a image off the web: 1.Put your cursor on the image. 2.Right click then -> save image as... 3.Save the image on your PC. (Make sure it is a gif, jpg, png suffix file.)

34. 34 Types of Graphical Image Files There are 2 dominate types of file formats for graphic images on the WWW l GIF (Graphic Interchange Format) – » the first graphic file type format uses 8 bit or 256 possible colors. »are platform independent »particularly good for areas of flat colors like logos, cartoons, icons. »Does not good for photographic images since it reduces all images to 256 colors. l JPEG (Joint photographic Experts Group) »Uses a 24 bit RGB color information, (displays 8 bit colors on 8bit color systems) » ideal use for photographs. Not good at compressing images with solid colors such as logos, line art and cartoons. On a side note, Unisys held the patent on the compression method that gif files uses. In 1994, announced will charge for sites using GIF, causing people to move towards nonproprietary format. This patent has run out in the USA.

35. 35 What is Digital Image? l A format for encoding a way to represent a picture using RGB color format »Each pixel to display needs to have a RGB value »Less colors you display the smaller the image –(since can compress the image more) l Gif format specification allows you to discribe more than 1 image »There is a delay to show each image giving an animation effect. (but no sound)

36. 36 Placing Image on a Web Page The basic command to include images is: You can use a relative or absolute address to the image: l Question: It linking to an image file on an external site generally a good idea? l Question can you legally copy images without asking permission? Note: if you have trouble linking to an image, ensure that you are specifying the filename correctly. Check to see if the image file name is capitalized or lower case.

37. 37 Dealing With Bad Links... l Below shows an example of a bad image link. l Some things to check if this occurs: »Is file name specified/spelled correctly? »Is file path correct? (e.g., it is in a different directory) »Is the image suffix correct? (myfile.gif, myfile.jpg) »Any capitalization in the filename? »Is the file the correct format (e.g, a bmp file won’t work) Common Problem Area! People seem to forget this

38. 38 Using The ATL Attribute... l The ALT specifies text to display if a user has graphic images disabled. l Format : » Note: The ALT tag has a nice side effect: When you hold cursor over image, it displays the ALT text.

39. 39 Which to use gif or jpg? l Typically might look at image in both formats to see best for your site jpggifs High-quality images with lots of colorsUsed for logos, ads with uniform colors > 16 million colorsUp to 256 colors No transparencies or animationTransparencies and annimation

40. 40 Summary l Putting Background Color on pages »How to specify color »Using background “tile” images l Working with font styles and colors »Underline, bold, italics »Working with the font tag –size, color and style l Using special characters ($, %, @, #) l Using Image Files

41. 41 Some Key Tags We Covered l l Named colors and specify Hexidecimal number »Browser Safe Colors, l l,, l » l Special character (e.g., $, #, @,,) need special numerical characters »&#162 to get the ¢ sign. »<META&gt to get » to get 2 blank spaces. l Including image files »

42. 42 Module 1 Hands on Assignment l Create an HTML file that looks like the following:

43. 43 One possible solution 1. 2. Sample Page 3. 4. While this is not a very attractive site. 5. The following text is in red. 6. Still this text is in purple. 7. and the following text is size 4 8. Now this text is style arial. 9. But what do you suppose is this text? 10.

44. 44 Another lab exercise... l Create an html document that looks as follows: You can view the background image at: http://condor.depaul.edu/~dlash/extra/webpage/images/