htmllesson2
advertisement
HTML Lesson 2
TBE 540
Farah Fisher
Prerequisites
• Access web pages and navigate
• Use search engines to locate specific
information
• Download graphics from web pages
• Match basic HTML tags to corresponding
web page display
• View the source of any web page
Objectives
• Edit and create a web page using a text editor
• Demonstrate the use of at least three text sizes
• Demonstrate the use of color tags for
background, text, links
• Demonstrate the placement and resizing of
graphics on a web page
• Describe three ways to obtain graphics for web
pages
“Warm Up”
• See the warm up activity at
http://www.csudh.edu/fisher/tbe540/HW
2.htm
• You will need to use a text editor (like
NotePad or SimpleText). You can also
use a word processing program, if you
“save as text”.
Colors in HTML
• When you specify colors in HTML, you
can either enter a color by name (for
simple colors) OR…
• You can put in codes that specify the
amount of red, green and blue to
include in the color (which gives you
millions of combinations).
Colors in HTML
• Here is an example of the use of color in a
<FONT> tag. The text will print in red.
<FONT color=“red”>The text.</FONT>
• Here is another way to say “red”:
<FONT color=“#FF0000”>The text.</FONT>
(weird, huh?)
red
green
blue
Colors in HTML
• What’s all this “#FF” stuff?
• If you want more than simple colors, you must
specify the amount of red, green, and blue in
the color.
• This is done with six hexadecimal (base 16)
numbers (that’s what # means) - two each for
red, green and blue.
• Each pair of numbers ranges from 00 to FF
(yes, FF is a number) 00 = none, FF = highest
Colors in HTML
• Here are some sample color numbers:
RED
GREEN
BLUE
BLACK
WHITE
YELLOW
CYAN
MAGENTA
#FF0000 (high red, no green, no blue)
#00FF00 (no red, high green, no blue)
#0000FF (no red, no green, high blue)
#000000 (no red, no green, no blue)
#FFFFFF (high red, high green, high blue)
#FFFF00 (high red, high green, no blue)
#00FFFF (no red, high green, high blue)
#FF00FF (high red, no green, high blue)
• See http://www.csudh.edu/fisher/tbe540/HHO2.htm for
lots more examples.
Colors in HTML
• Another place to use color is for a
background.
• Background color is specified in the
<BODY> tag.
• For example, to set the background of a
page to light blue, use
<BODY BGCOLOR=“#C0D9D9”>
Colors in HTML
• You can also set the link color and text color for
the whole page in the <BODY> tag.
• Here is a tag that sets the background to yellow,
the text to red, the links to blue, and the visited
links (the ones you have already been to) to
purple:
<BODY BGCOLOR=“#FFFF00” TEXT=“#FF0000”
LINK=“#0000FF” VLINK=“#871F78”>
More about Text Size
• In the last lesson, you saw “header”
tags that made large text (like
<H1></H1>)
• You can also specify text size with a
<FONT> tag.
• Here is an example of very small text:
<FONT SIZE=1>Write this.</FONT>
More about Images
• Web page images are displayed on the
left side of a page and in their actual
stored size unless otherwise instructed.
• The HEIGHT and WIDTH of an image can
be specified in the IMG tag.
• HEIGHT and WIDTH are measured in
pixels.
More about Images
• Example:
<IMG SRC=“MyPicture.gif” HEIGHT=100 WIDTH=50>
• The example above displays the graphic file
MyPicture.gif with a height of 100 pixels and a
width of 50 pixels.
• NOTE: If you do not specify HEIGHT and
WIDTH, the image will appear the size at whch
it was stored.
More about Images
• To align an image at the center or the right of
the screen, it is easiest to use one of the
following tag pairs:
<CENTER> </CENTER>
<RIGHT> </RIGHT>
• The IMG tag is placed between the alignment
tags:
<CENTER><IMG SRC=“picture.jpg”></CENTER>
– NOTE: If you place several IMG tags in a row (one for each picture),
they will appear next to each other when the page is displayed.
More about Images
• If you want a border (like a frame) around the
image, you can put BORDER=thickness in
pixels in the IMG tag. Example:
<IMG SRC=“kitty.jpg” BORDER=3>
• Here is an example of an image called BOG.gif
which is centered, displayed 200 x 200, with a 4pixel border.
<CENTER>
<IMG SRC=“BOG.gif” HEIGHT=200 WIDTH=200 BORDER=4>
</CENTER>
More about Images
• Be sure to visit the class website to see more
information about the use of graphics in web
pages.
• http://www.csudh.edu/fisher/tbe540/graphics.htm
• http://www.csudh.edu/fisher/tbe540/graphichints.
htm
Downloading Graphics
• In several class exercises, you will be asked
to download graphics from web pages to use
in your own projects.
• Before you begin, take time to review the
copyright links posted on the class website.
• Be sure to see the “fair use” information at
http://fairuse.stanford.edu/Copyright_and_Fai
r_Use_Overview/chapter7/7-b.html#1
Downloading Graphics
• In general, you may download graphics to be
used in your class projects, because they are
not posted on the web (they are just files on
a disk).
• If you decide to post a web site on the
Internet or assist your students in doing so,
you will want to examine the copyright issues
very carefully.
Downloading Graphics
• To download graphics from a web page…
– Locate the page containing the graphics
• You may want to use http://www.google.com and choose
to search for images instead of pages
– If you are using a Windows computer…
• Right-Click on the image
– If you are using a Macintosh computer…
• Control-Click on the image
– Choose Download to Disk or Save Image As…
– Notice where the image is stored
Downloading Graphics
• Graphics that are downloaded from the web
are already in .GIF or .JPG format, so they
are ready to be used in other pages.
• The size as images are stored may not be
the same as displayed.
• You should not download graphics from a
web page that prohibits copying.
Other Sources of Web
Graphics
• You can use any graphics program to
create images…even Word or
PowerPoint.
• However, graphics must be converted
to .GIF or .JPG before they can
become part of a web page.
Other Sources of Web
Graphics
• If you have a graphics program (like
PhotoShop), you may be able to “save
as” .GIF or .JPG.
• You can also search for freeware or
shareware programs that convert
images to .GIF or .JPG.
Other Sources of Web
Graphics
• If you have MS Word, you may be able to save
clip art and other graphics as web graphics
(depending on the version you have).
• Try creating a simple document in Word that
includes clip art and choosing Save as a Web
Page. Look for a folder with the .htm file and the
images as .gif files.
Self Check - HTML Lesson 2
• When specifying colors in HTML using
hexadecimal code, which of the
following is blue?
#FF0000
#00FF00
#0000FF
Self Check - HTML Lesson 2
• When specifying colors in HTML using
hexadecimal code, which of the
following is blue?
#FF0000
#00FF00
#0000FF
{highest red, no green, no blue}
{no red, highest green, no blue}
{no red, no green, highest blue}
Self Check - HTML Lesson 2
• To set the background color of a web
page to white…
<BODY BGCOLOR=“WHITE”>
<BODY BGCOLOR=“#FFFFFF”>
<BODY BGCOLOR=“#000000”>
<BODY BGCOLOR=“NONE”>
Self Check - HTML Lesson 2
• To set the background color of a web
page to white…
<BODY BGCOLOR=“WHITE”>
<BODY BGCOLOR=“#FFFFFF”>
<BODY BGCOLOR=“#000000”>
<BODY BGCOLOR=“NONE”>
{white is a common color, so either the word or the hex code
will work}
Self Check - HTML Lesson 2
• Which of the following places a graphic
called “dog.jpg” on a web page?
<IMG SRC=“dog.jpg”>
<IMG SRC=“DOG.JPG”>
<GRP SRC=“dog.jpg”>
<IMG GRP=“dog.jpg”>
Self Check - HTML Lesson 2
• Which of the following places a graphic
called “dog.jpg” on a web page?
<IMG SRC=“dog.jpg”>
<IMG SRC=“DOG.JPG”> {case must match file name}
<GRP SRC=“dog.jpg”>
<IMG GRP=“dog.jpg”>
Self Check - HTML Lesson 2
• Which of the following sets the size of
dog.jpg to 100 x 100 pixels?
<IMG SRC=“dog.jpg” SIZE = “100x100”>
<IMG SRC=“dog.jpg” SIZE1=100 SIZE2=100>
<IMG SRC=“dog.jpg” HEIGHT=100
WIDTH=100>
Self Check - HTML Lesson 2
• Which of the following sets the size of
dog.jpg to 100 x 100 pixels?
<IMG SRC=“dog.jpg” SIZE = “100x100”>
<IMG SRC=“dog.jpg” SIZE1=100 SIZE2=100>
<IMG SRC=“dog.jpg” HEIGHT=100
WIDTH=100>
Self Check - HTML Lesson 2
• Which of the following COULD NOT be
used in a web page without
conversion?
kitty.jpg
puppy.gif
octopus.png
bunny.bmp
Self Check - HTML Lesson 2
• Which of the following COULD NOT be
used in a web page without
conversion?
kitty.jpg
puppy.gif
octopus.png
bunny.bmp
{.png is a valid web graphic format}
Activities
• Complete the hands-on exercise at
http://www.csudh.edu/fisher/tbe540/HE
X2.htm
