Using HTML and Java Script to Develop Websites

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

What we talked about last time. . . l Creating Lists » Ordered Lists (<ol> … </ol> &<li>. . </li>) » Unordered Lists (<ul> … </ul> &<li>. . </li>) » Definition lists (<dl> … </dl>, <dt>. . </dt>, <dd> … </dd>) » Lists within lists (remember to match up start and end of lists). l Creating HTML links » Creating absolute links – <A href=“http: //www. depaul. edu/~dlash/myfile. html”> my home page </A> » Creating relative links – <A href=“myfaq. html”> my FAQ Page </A> » Creating email links – <A href=“mailto: dlash@condor. depaul. edu"> Mail me please </A> 2

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 3

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

Color Attributes For Body Tags l The BODY Tag has specific attributes to set up the colors on your web page: » Background Color: <BODY BGCOLOR=‘TEAL’> » Link Color <BODY LINK=‘BLUE’> » Recently Visited Links <BODY VLINK=‘RED’> » Links Briefly blink when someone visits them: <BODY ALINK=‘PINK’> » Put it all together <BODY bgcolor="teal" LINK='red' vlink='white' alink='yellow'> Competency Alert: You need to ! know this 5

Body attribute example. . . 1. 2. 3. 4. 5. 6. <HTML><HEAD><TITLE>De. Paul Link </TITLE></HEAD> <BODY bgcolor="teal" LINK='red' vlink='white' alink='yellow'> Here is a site I like, it is called <a href='nex. html'> next. html </a> </BODY> </HTML> 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 6

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

Mix & Match Colors l. The RRGGBB Format many colors possible. <BODY BGCOLOR=”#008800"> 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 8 to view color. It is also the 3 colors your eye naturally sees.

But Why Only 2 Digits? l. Intensity of RED, GREEN, or BLUE » Specified as a HEXIDECIMAL (that is base. Note 16). Hexadecimal – 255 = x. FF - Says 100% of the intensity. – 204 = xcc - Says 80% intensity. – 153 = x 99 - Says 60% intensity – 102 = x 66 - Says 40% intensity. – 51 = x 33 - Says 20% intensity. – 00 = x 00 - Says 00% intensity. what color would be: » <BODYBGCOLOR=”#00 FF 00"> » <BODYBGCOLOR=”#0000 FF"> » <BODYBGCOLOR=”#000000"> » <BODYBGCOLOR=”#FF 00 FF"> numbering is base 16. Each base 16 number can be represented in our base 10 numbering system l. So 9

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. 24 hourhtmlcafe. com/colors/ or Also http: //webdesign. about. com/od/colorcharts/l/bl_colors. htm 10

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. 24 hourhtmlcafe. com/hour 10/motawi. htm) » Here is the gif file » (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. 11

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

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: <body background="tile. gif"> 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. 13

Images Finding backgrounds (Certainly can search google): l » Check out the Yahoo Index (http: //dir. yahoo. com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and _Layout/Graphics/Backgrounds/) How to “use” a background image from one of these sites: l 1. 2. 3. 4. 5. Goto the site (lets try http: //www. backgroundcity. com/) Find image you like, put cursor over the image Right click the image and select save picture as. Save the image to your hard drive. Include the name of the file in your body tag: 6. Remember to copy your background file to your webserver when you publish <body background="tile. gif"> Try this process now. 14

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 15

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! 16

Simple Font Control Tags 17

Simple Font Control Tags - II 18

The tags nest. . . <html> <head> <title> Sample Page </title> </head> <body> Common Problem Area! People seem to forget this Welcome to my site. It is my precious site I said <strike> stay away from </strike> you are ok. Man this stuff Can really Get confusing Fast. </body> </html> 19

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

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 21

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

Competency Alert: You need to Controlling Size ! know this 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 pt 10. » Hello world l You can also specify size relative to the default Absolute Value | 1 | 2 | 3 | 4 Relative Value | -2 | -1 | | +1 font SIZE=3. | 5 | +2 | 6 | +3 | 7 | +4 l For example, Helloworld Note: Actually you can get more than 7 sizes but you need to use 23 cascading style sheets. We talk about that later.

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

Controlling Font Style l. To control font style, need to know the name of the font. l For example, This would be Algerian 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). l 25

Color Example. . . 13. <HTML> <HEAD> <TITLE> Big & Purple Example </TITLE> </HEAD> <BODY> <UL><LI>Baseball</LI> <OL Type="A"><LI>White. Sox</LI> <LI>Cubs <UL><LI> Wrigley Field </LI> 14. </UL> </OL> <LI>Football</LI></UL> </BODY> </HTML> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 26

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

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 28

Competency Alert: Inputting Special Characters You need to ! know this 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 < (left bracket) or > right bracket) enter &lt or &gt. » Example to get <META> you need to enter < META&gt l. Here is an updated link with all the special (http: //www. w 3. org/TR/REC-html 40/sgml/entities. html) characters supported. 29

Special Character Example. . . <HTML><HEAD> <TITLE> Some Example With Special Characters </TITLE> </HEAD><BODY> <UL> <LI> </li> This line is Blue and size 4 <LI> This line is Blue and size 5 </li><LI> This line is GREY and size 6 </LI> </UL> A sample of the &lt font&gt tag. <HR> This line is size 3 and is &#177 10% smaller <HR> This line is size 2 and is squared&#178 </BODY></html> 30

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

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 32

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. ) 33

Types of Graphical Image Files There are 2 dominate types of file formats for graphic images on the WWW l GIF (Graphic Interchange Format) – » » l 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. JPEG (Joint photographic Experts Group) » Uses a 24 bit RGB color information, (displays 8 bit colors on 8 bit 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. 34

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) 35

Placing Image on a Web Page l l The basic command to include images is: <img src="elivs. gif"> You can use a relative or absolute address to the image: <img src="http: //www. indelible-learning. com/website/images/bugs. gif”> 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. 36

Common Problem Area! People seem to forget this 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 37 work)

Using The ATL Attribute. . . The ALT specifies text to display if a user has graphic images disabled. l Format : l » <img SRC=". . /calvin 1. gif" ALT="This Is Calvin" > Note: The ALT tag has a nice side effect: When you hold cursor over image, it displays the ALT text. 38

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

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 40

Some Key Tags We Covered l <BODY BGCOLOR="TEAL" LINK="BLUE" VLINKS="RED" ALINK="Pink"> l Named colors and specify Hexidecimal number » Browser Safe Colors, l<body background="tile. gif"> l , , l » » » l Special character (e. g. , $, #, @, <, >, ) need special numerical characters » &#162 to get the ¢ sign. » < META&gt to get <META> » &NBSP; to get 2 blank spaces. l Including image files » <img src=“file location” alt=“alternative text”> 41

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

One possible solution 1. 2. 3. <html> <head> <title> Sample Page </title> </head> <body bgcolor=yellow> 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. </body> </html> 4. 43

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/ 44