David Lash DePaul University SNL 262 Web Page Design Chapt 10 - Custom Background And Colors Chapt 6...

David Lash

DePaul University SNL 262

Web Page DesignChapt 10 - Custom Background And Colors

Chapt 6 - Text Formatting and Font Control

Instructor: David A. Lash

2David Lash

What we talked about last week ...

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>

3David Lash

What we will look at:

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

Working with font styles and colorsUnderline, bold, italicsWorking with the font tag

size, color and style

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

4David Lash

Color Attributes For Body TagsLINK="BLUE" VLINKS="RED" ALINK="Pink 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 VLINKS="RED"> Links Briefly blink when someone visits them: <BODY ALINK="PINK"> Put it all together

<BODY BGCOLOR="TEAL" "> Click here for example

http://www.depaul.edu/~dlash/extra/Webpage/examples/11Example1.html

5David Lash

16 Standard ColorsYou 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.

6David Lash

Mix & Match ColorsThe RRGGBB Format many colors possible. <BODY BGCOLOR=”#008800">

http://www.24hourhtmlcafe.com/hour11/tileroom.h

Amount of Red (from 0-255)

Amount of Green (from 0-255)

Amount of Blue (from 0-255)

7David Lash

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% intensity102 = 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">

8David Lash

But Why Only 2 Digits

Here is a Table of Decimal to Hexidecimal conversion

http://www.depaul.edu/~dlash/extra/Webpage/examples/11decTohex.htm

Here is a complete color chart (http://www.24hourhtmlcafe.com/colors/)

Which ones should you use …Browser Safe Colors - there are only 216 colors are common between the color palette of MACs, Win95 and Windows. (AKA Browser safe)

9David Lash

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 book that uses tiling or wallpaper (http://www.24hourhtmlcafe.com/hour10/motawi.htm)

Here is the actual gif file. Here is the actual gif file for my home page.

(http://condor.depaul.edu/~dlash/extra/Webpage/back.gif)

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.

10David Lash

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.

11David Lash

More On Background Images

Pick a complementary tile not one that overwhelms the page

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.

12David Lash






13David Lash

What We Will CoverWorking with font styles and colors italics:

BOLD, underline, ALL 3 at once,

BIG LETTERS small letters

Many different font styles Lots of different colors!

14David Lash

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

15David Lash

Simple Font Control Tags

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

16David Lash

Want an example?

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

http://condor.depaul.edu/~dlash/extra/Webpage/examples/bold.html

17David Lash

Controlling Size, Color & Style

The typeset of the font can be tightly 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=

18David Lash

Controlling ColorThe 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 

See Example at herehttp://www.depaul.edu/~dlash/extra/Webpage/examples/6ExampleColor.html

19David Lash

Controlling SizeHTML 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

Helloworld 

Click here for examplehttp://www.depaul.edu/~dlash/extra/Webpage/examples/fonts.html

20David Lash

Controlling Font StyleControlling 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 A browser would first try to use Lucida Sans Unicode, then arial then helvetica, if none available would use default (roman times).

Here are examples of various fonts and colors.

(http://condor.depaul.edu/~dlash/extra/Webpage/examples/BigandPurple.html)

21David Lash

Mixing Color, Style & SizeYou can include multiple arguments in tag to get multiple effects Hello 

Hello

You can have layers of tags.See this example.

http://www.depaul.edu/~dlash/extra/Webpage/examples/multiSizeColor.html

22David Lash

Mix & Match Colors (Just like before)

The RRGGBB Format many colors possible.

 HELLO

Amount of Red (from 0-255)

Amount of Green (from 0-255)

Amount of Blue (from 0-255)

23David Lash






24David Lash

Inputting Special CharactersEntering 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

Click here for some other examples. http://www.depaul.edu/~dlash/extra/Webpage/examples/SpecialChar.html

(See also page 91&91 for partial list.) Here is an updated link with all the special characters supported. (http://www.w3.org/TR/REC-html40/sgml/entities.html)

25David Lash

Some Common Special CharactersUsing special characters (e.g., #, $, @, <, > )?

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

CharacterSpecial Character

Note: A blank space is represented by &NBSP;

26David Lash

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.

27David Lash

Review of homework

Look at homework file at http://condor.depaul.edu/~dlash/website/Lab2.html

It is asking you create a homepage and link in your homeworks.

David Lash DePaul University SNL 262 Web Page Design Chapt 10 - Custom Background And Colors Chapt 6...

Documents

Transcript of David Lash DePaul University SNL 262 Web Page Design Chapt 10 - Custom Background And Colors Chapt 6...