Date post: | 21-Dec-2015 |
Category: |
Documents |
View: | 217 times |
Download: | 0 times |
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
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 ($, %, @, #)
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
<small>...</small> <small>This issmalltext</small>
This is small text
<BIG> ... </BIG> <big> large text</big>
Large Text<SUB> ... </SUB> page<SUB>2
</SUB>page2
<SUP>...</SUP> page<SUP>2</SUP>
page2
<strike> ...</strike>
This<strike>isnot </strike>OK
This is notOK
15David Lash
Simple Font Control Tags
<U> ... </U> <U>Now</U>is OK
Now is OK
<I>...</I> This <I>isindeed </I>OK
This is indeedOK
<TT> ... </TT> This is <tt>monospaced</tt>
This ismonospaced
<B>...</B> This <B> isreally </B>bold
This is reallybold
16David Lash
Want an example?
<html><head> <title> Sample Page </title> </head><body>
Welcome to <i>my site</i>. It is my <b><i>precious </i></b> siteI said <strike> stay away from </strike> you are ok.
<br>Man this stuff <i>C<B>a<u>n</u> really </b> Get <u> confusing
</u> </i> 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 <font> tag with arguments:size=color=style=
18David Lash
Controlling ColorThe <FONT> 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)
<font color=RED> hello </font>
hexadecimal color names <font color=”#008800">Hello </font>
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 <FONT SIZE=5>world </FONT>
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
Hello<FONT SIZE+2>world </FONT>
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,
<FONT FACE="Algerian"> This would be Algerian </FONT>
This would be Algerian Can specify more than 1 font on a line <FONT FACE="Lucida Sans Unicode, Arial, Helvetica"> 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 <font> tag to get multiple effects<font color=blue size=5 style=roman> Hello </font>
Hello
You can have layers of <font> 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.
<Font color=”#008800"> HELLO</FONT>
Amount of Red (from 0-255)
Amount of Green (from 0-255)
Amount of Blue (from 0-255)
23David 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 ($, %, @, #)
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 ¢ to get the ¢ sign. To display < (left bracket) or > right bracket) enter < or >. Example to get <META> you need to enter <META>
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., #, $, @, <, > )?
@@“"&&>><<
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"><U>, <I>, <B><font>
<font size=xx> <font color=xx> <font style=xx> <font style=xx color=yy size=zz>
Special character (e.g., $, #, @, <, >,) need special numerical characters ¢ to get the ¢ sign. <META> to get <META> &NBSP; &NBSP; to get 2 blank spaces.