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

1

Custom Background And Colors

Text Formatting and Font Control

Using Images

Using HTML and JavaScript to Develop Websites.

2

What we talked about last time ...

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

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:[email protected]"> Mail me please </A>

3

What we will look at:

Putting Background Color on pages »How to specify color »Using background “tile” images

Working with font styles and colors»Underline, bold, italics»Working with the font tag

–size, color and style

Using special characters ($, %, @, #)Using Image Files

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

Color Attributes For Body Tags

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


know this!

6

Body attribute example . . .

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

7

16 Standard Colors

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

Mix & Match Colors

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 to view color. It is also the 3 colors your eye naturally sees.

9

But Why Only 2 Digits?

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.

So what color would be: »<BODYBGCOLOR=”#00FF00"> »<BODYBGCOLOR=”#0000FF">»<BODYBGCOLOR=”#000000">»<BODYBGCOLOR=”#FF00FF">

Note Hexadecimal numbering is base 16. Each base 16 number can be represented in our base 10 numbering system

10

Browser safe colors

With 256 possible Reds, and 256 Greens and 256 blues there are 16,777,216 possible colors

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/ orAlso http://webdesign.about.com/od/colorcharts/l/bl_colors.htm

11

Background Images

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)

»Here is the gif file» (http://condor.depaul.edu/~dlash/extra/Webpage/back.gif)

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

A Noisy Tile example1. <html>2. <head> <title> Sample Page </title> </head>3. <body background="link.png">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. </body>8. </html>

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:

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

14

More On Background Images

Finding backgrounds (Certainly can search google): » 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: 1. Goto the site (lets try http://www.backgroundcity.com/)2. Find image you like, put cursor over the image3. 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:

<body background="tile.gif">6. Remember to copy your background file to your webserver when you

publish

Try this process now.

15

Objectives





16

Changing font styles.

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

Simple Font Control Tags

... This issmalltext

This is small text

<BIG> ... </BIG> <big> large text</big>

Large Text ... page2

page2

... page2

page2

<strike> ...</strike>

This<strike>isnot </strike>OK

This is notOK

18

Simple Font Control Tags - II

 ... Nowis OK

Now is OK

... This isindeed OK

This is indeedOK

<TT> ... </TT> This is <tt>monospaced</tt>

This ismonospaced

... This isreally bold

This is reallybold

19

The tags nest . . .

<html><head> <title> Sample Page </title> </head><body>

Welcome to my site. It is my precious siteI said <strike> stay away from </strike> you are ok.

 Man this stuff Can really Get confusing Fast.

</body></html>



20

Controlling Size, Color & Style

The typeset of the font can be controlled with the FONT tag.

This includes the Size, color, and style of the font.

Basic tag was the tag with arguments:»size=»color=»style=

21

Controlling Color

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 


know this!

22

Font Color Nesting Example

1. <html>2. <head> <title> Sample Page </title> </head>3. <body>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. </body>9. </html>

23

Controlling Size

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 

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

For example,

Helloworld 

Note: Actually you can get more than 7 sizes but you need to use cascading style sheets. We talk about that later.


know this!

24

Font Size Example . . . 1. <html>2. <head> <title> Sample Page </title> </head>3. <body>

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. </body></html>

25

Controlling Font Style

To control font style, need to know the name of the font. For example,

 This would be Algerian 

Can specify more than 1 font on a attribute. E.g.,

 Browser will try to use Lucida Sans Unicode, then arial then

helvetica, if none available would use default (roman times).

26

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

14. </UL> </OL> <LI>Football</LI></UL> </BODY> </HTML>

27

Mixing Color, Style & Size

You can include multiple arguments in tag to get multiple effects Hello 

Hello

You can have layers of tags.


know this!

<HTML> <HEAD> <TITLE> THIS is a sample web Page </TITLE> </HEAD> <BODY> Welcome To Exploring The Internet The Place to BE </BODY> </HTML>

28

Objectives Putting Background Color on pages

»How to specify color »Using background “tile” images




29

Inputting Special Characters

Entering special characters like pound sign (#), copyright sign, cent sign, etc.?

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

Here is an updated link with all the special characters supported. (http://www.w3.org/TR/REC-html40/sgml/entities.html)


know this!

30

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>

31

Some Common Special Characters

Using special characters (e.g., #, $, @, <, > )?

@&#64“&quot&&amp>&gt<&lt

CharacterSpecial Character

Note: A blank space is represented by &NBSP;

32

Objectives Putting Background Color on pages

»How to specify color »Using background “tile” images




33

Using Image Files Images are stored in separate files.

» They are essentially linked to your website.

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

Types of Graphical Image Files

There are 2 dominate types of file formats for graphic images on the WWW 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.

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

What is Digital Image?

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)

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

Placing Image on a Web Page

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

Question: It linking to an image file on an external site generally a good idea?

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

Dealing With Bad Links . . .

Below shows an example of a bad image link.

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)



38

Using The ATL Attribute . . .

The ALT specifies text to display if a user has graphic images disabled.

Format :» <img SRC="../calvin1.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.

39

Which to use gif or jpg?

Typically might look at image in both formats to see best for your site

jpg gifsHigh-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

40

Summary





41

Some Key Tags We Covered

<BODY BGCOLOR="TEAL" LINK="BLUE" VLINKS="RED" ALINK="Pink"> Named colors and specify Hexidecimal number

»Browser Safe Colors,

<body background="tile.gif">, , 

» » » »

Special character (e.g., $, #, @, <, >,) need special numerical characters»&#162 to get the ¢ sign. »<META&gt to get <META>»&NBSP; &NBSP; to get 2 blank spaces.

Including image files»<img src=“file location” alt=“alternative text”>

42

Module 1 Hands on Assignment

Create an HTML file that looks like the following:

43

One possible solution

1. <html>2. <head> <title> Sample Page </title> </head>3. <body bgcolor=yellow>

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. </body> </html>

44

Another lab exercise . . .

Create an html document that looks as follows:

You can view the background image at: http://condor.depaul.edu/~dlash/extra/webpage/images/

Documents

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