Web Pages Made Easy - Notes from Lesson 7

Lecture and Discussion

---

Lesson 7: Publishing
Your Pages on the Web

Congratulations!
By now you've built your first Web site. You've structured your content
into headings and paragraphs and other elements, added images, links, and
a style sheet to control your text and color styles. Now it's time to share
your work with others, get feedback, and perhaps make some modifications
to your Web site to get it ready for your audience.

To get your
Web pages on the Internet, you'll need a Web hosting service. In this lesson,
we'll explore the options, which include free Web hosting services, and
monthly fee Web hosting with many added benefits. You'll need to evaluate
your needs and level of interest, and choose a service that works best
for you. Cost is always a factor, but it probably shouldn't be the only
factor you consider.

As you visit
the pages listed in this discussion, be sure to read the offers carefully,
and weigh the pros and cons of each service before you make a decision.
Chances are good that you'll find a solution that's right for you, at the
right price.

Exploring
Your Options

There are many
ways to get your Web pages online. There are hundreds of sites on the Web
that offer free or low-fee Web hosting services. Most of them offer a flat
monthly fee for a good amount of storage (you'll need some space for those
images and all the additional pages you'll add in the future), multiple
email addresses, and other services. Some Web hosting services also include
free connection software, to make the process of getting started a lot
easier. We'll start with the free hosting services...


Free
Web Page Publishing

Some Web sites
will host your Web pages free of any charge, just for being a member of
their Web site. The catch? Your Web pages will contain banner advertisements.
If this doesn't bother you, and you don't want to pay a monthly fee to
publish your Web pages, then one of these free services is probably the
solution you're looking for.

• 
  
  Geocities is owned by Yahoo!, and offers free Web site hosting under their domain.
  This means your Web address will look something like http://www.geocities.com/YourUserName.
  This
  page provides a run-down on all the different Web hosting packages they
  offer.
  

  Summary:
  

  
  
  • 
    Free, but with
    their banner ads on every page.
  
  
  • 
    1 free email address.
  
  
  • 
    15 MB of disk space
    on their server.
  
  
  • 
    3 GB of data transfer
    per month.
  
  

  
  

  
  
• 
  
  Tripod is
  owned by Lycos, and offers free hosting with a few nice added benefits.
  Your Web address will be in the format YourUserName.tripod.com.
  This
  page provides a list of services you'll get with their free option,
  plus a pay for service option to consider.
  

  Summary:
  

  
  
  • 
    Free, but with
    their banner ads on every page.
  
  
  • 
    20MB of disk space
    on their server.
  
  
  • 
    Page design templates
    you can use.
  
  
  • 
    Lots of free images
    you can use on your Web pages.
  
  

  
  

  
  
• 
  
  Angelfire.com
  is also owned by Lycos, so its free service comes with the same bag of
  of goodies that you'll find at Tripod.com.
  This
  page provides a list of services you'll get with their free option,
  plus a pay for service option to consider.
  

Monthly
Fee Web Hosting

Can't stand
those pop-up ads and flashing banners? All three sites listed above offer
an "upgrade" package that removes all advertising from your Web pages.
For $4.95, Tripod and Angelfire will upgrade your hosting
package to include 25 MB of storage space, and give you access to additional
tools, including HTML and script libraries. On the Geocities
home page, you will notice there are several options, ranging in price
from $4.95 per month to $19.95 per month.

Other monthly
fee Web hosts include:

• 
  
  Your-site.com. For $5.00
  per month, Your-site.com offers a bit more for the money. Perhaps the most
  important benefit is their support services, which includes a 24/7 paging
  service. You'll also get 50MB of disk space, 6GB of bandwidth per month,
  and up to 25 email addresses.

• 
  
  Brinkster.com. For $3.95
  per month (plus a $3.95 initial setup fee), Brinkster offers 30MB of disk
  space, and some additional technology features that may or may not be of
  interest to you.

Uploading
Your Pages

Geocities, Tripod,
and Angelfire all provide an easy tool for getting your Web pages online.
Once you sign up, you'll be given all the information you need to transfer
your Web pages and images to their server. If you want to go the quick
and easy route, sign up for one of these free services and let them walk
you through the process of getting your Web site online.

If you decide
not to go with Geocities, Tripod, or Angelfire, the process is a little
more involved. Most monthly fee Web hosts require you to use an FTP program
to upload your Web pages and images. FTP stands for File Transfer Protocol.
It's the standard protocol for transferring files from one location (your
computer) to another (your host's server). There are many free FTP programs
out there, but perhaps the easiest to use and most popular is WS_FTP.

You can
get
a free copy of WSFTP here. Once you fill out the short form and download
the program, install it on your computer. You'll need to make a note of
all the information your Web host provides to youβ€”you'll need this information
to set up your FTP program. You'll find more information on this in the
activity page for this lesson.

Discussion

Now that you
have explored some of your options, share whatever insights or experiences
you might have with others in the class. Post your comments to the following
discussion items in the message board:

1. 
   Have you ever used
   a Web hosting service before? If so, which Web site, and how would you
   rate their service?


2. 
   If this is the
   first time you've ever explored Web hosting services, which of the services
   listed above impressed you the most, and why?

Web Pages Made Easy - Notes from Lesson 6

Lecture and Discussion

---

Lesson 6: Applying
Color

So far your
Web pages are black and white, which isn't too exciting, is it? You've
probably been thinking about how to add color to your page already. In
this lesson, you'll explore more about style sheets as you learn how to
add color to your text, the background of individual text elements, and
the background of your entire page. You'll also learn about the different
color methods you can use, and a few tips on using color that will help
you to make your Web pages distinctive looking and effective.

First, we'll
take a look at changing text color. Then you'll learn how to change the
background color for individual sections of text, and the whole page.

Modifying
Text Color

As demonstrated
on page 106-107 of your book, you can use the color property in your
style sheet to change the color of your text. The value of the color
property can be a color name keyword or a hexadecimal value.


Color
Name Keywords

Color name keywords
are simply the common names of colors, such as red, blue, black, and green.
There are 16 color name keywords that are part of the official HTML and
CSS specifications. You can use any one of the following as the value of
the color
property:

black, white,
silver, gray, red, maroon, purple, fuchsia, lime, yellow, olive, green,
blue, navy, teal, and aqua.

For example,
if you want all your paragraphs to display with navy text and your level-one
headings to display with gray text, you would write:

<html>

<head>

<title>My Page</title>

<style type="text/css">

p { color: navy; }

h1 { color: gray;
}

</style>

</head>

<body>

...all your HTML tags
and page content...

</body>

</html>



Hexadecimal
Color Values

Color name keywords
are easy to code, but there aren't many different colors to choose from.
Fortunately, you can choose from over 16 million colors by using hexadecimal
values. Hexadecimal values are color codes that represent the red,
green, and blue variations that combine to make a color. Hexadecimal
values all begin with a pound sign ( # ), followed by six letters or numbers;
A-F and 0-9, which represent a color.

Hexadecimal
values are difficult to remember. Even the most experienced Web developer
can't look at any color and give you its hexadecimal equivalent. That's
where hexadecimal code charts come in handy.
Webmonkey has
a helpful color chart you can use as a reference throughout this lesson.

TIP! Hexadecimal values are not case sensitive, so you can use lower case or upper case textβ€”whichever you prefer.

So, let's say that
you've checked out the hexadecimal color chart mentioned above, and you
want to make your paragraph text a dark shade of green and your level-one
headings a dark orange color. Your code might look like this:

<html>

<head>

<title>My Page</title>

<style type="text/css">

p { color: #336666;
}

h1 { color: #FF6600;
}

</style>

</head>

<body>

...all your HTML tags
and page content...

</body>

</html>


Adding
Background Color to Text

All the color
values mentioned earlier work with both text color and background color.
As you now know, the color
property sets text color. To set background color, you use the background-color
property. For example, if you want all paragraphs to display with navy
text and a silver background color, you would write:

<html>

<head>

<title>My Page</title>

<style type="text/css">

p { color: navy;

   
background-color: silver; }

</style>

</head>

<body>

...all your HTML tags
and page content...

</body>

</html>

Or, for hexadecimal
colors:

p { color: #003366;

   
background-color: #DDDDDD; }

As mentioned
on page 106-107 in your book, you can also use the background
property to apply a background color. This property is a shorthand version,
but it's not as well supported in older browsers. To ensure that your background
color works in as many browsers as possible, use the background-color
property instead.



Background
Color Characteristics

When you set
the background color for a text element like a paragraph or heading, the
background color fills the entire width of the element. By default, this
width is determined by the size of the browser window. So, if you give
a heading a navy background color with white text, and a paragraph a silver
background color, you'll get the following result:





Changing
the Page Background Color

You can also
give your entire page a background color. All you have to do is use the
background-color
property with body
as your selector. So, if you want to create a light blue background for
your page, you would write:

body { background-color:
#003366; }

This would create
the following effect:

TIP! Make sure that your text color and your background colors don't clash. If there is not enough contrast between your text color and background color, your content will be difficult to read and may even hurt your visitor's eyes. Remember, readability is the top priority.

You can experiment
with a variety of colors until you find the combination you're looking
for. All you have to do is change the color value in your style sheet rule,
save your changes, and refresh the page in your browser.

Discussion

Now that you
know how to add color to your Web pages, you've covered all the fundamental
Web design skills, and you're ready to put the finishing touches on your
first Web page! To facilitate further learning and the sharing of information,
post your comments to the following discussion items in the message board:

1. 
   Have you ever seen
   a Web site that uses color poorly? If so, share the URL with the class
   and describe what you would do differently.


2. 
   Do you know of
   any Web sites that you think use color extrememly well? If so, share the
   URL with the class and describe what you think make's the site's use of
   color effective.

Web Pages Made Easy - Notes from Lesson 5

Lecture and Discussion

---

Lesson 5: Controlling
the Appearance of Text

Now that you
have structured your text and have embedded images and links to bring your
Web page to life, it's time to add some style to your text, to give it
a distinctive look and feel while keeping your content easy to read. The
appearance of text is a large part of the overall design of a Web site.
You don't have to have the same old default font face, and you can adjust
the size of your text to suit your design goals and your audience. In this
lesson, you'll learn how to control the appearance of your text by using
a style sheet, which is the most powerful and time-saving method for adding
style to Web pages.

Introduction
to Style Sheets

A style sheet
is a portion of your HTML page that's reserved for style information. It
can also be a separate text file that your Web pages link to. In this course,
you'll learn how to use an embedded style sheet to control the styles
on each individual Web page.

The code in
a style sheet is CSS, which stands for Cascading Style Sheets. CSS
is a separate language from HTML, but they go hand in hand. CSS is just
as easy to learn, and you'll need at least the basics to create effective
HTML code. The vast majority of Web sites today use CSS, at the very least
for color and text styles. You can control text styles with old HTML tags
that are phased out and discouraged by the World Wide Web Consortium (The
standards body that governs Web languages like HTML), but doing so involves
a
lot more time and effortβ€”and the result is nowhere near as effective
as CSS.

With that little
pitch for CSS out of the way, let's get started with the basics.


Setting
Up a Style Sheet

One of the nice
things about using style sheets is that you can separate your HTML structure
from your style decisions. This makes it easier to make changes to your
Web page design, and reduces the amount of code you need to achieve the
design you're looking for.

What does the "separation
of style and structure" mean? Say you want to change the font face for all
the text on your page, and then you want to make the text a little bit bigger
than it appears by default. You can embed a style sheet in the <head>
tag of your Web page as follows:

<html>

<head>

<title>My Page</title>

<style type="text/css">

body { font-family:
Georgia, serif;


      
font-size: 15px; }

</style>

</head>

<body>

...all your HTML tags
and page content...

</body>

</html>

There's a lot
going on here that's new to you, but it will soon come fairly easy. The
<style>
tag starts the style sheet. The type="text/css"
attribute is just a syntax requirement--the reason for it isn't important
at this level.

The code you
see inside the <style>
tag is the CSS code.



Understanding
CSS Code

CSS code consists
of rules that determine how an HTML element is displayed on a Web
page. In the example above, there is one rule in the style sheet. It literally
says, "Make all text inside the <body>tag
display with the font face Georgia at 15 pixels".

All style sheet
rules consist of a selector, and one or more properties that
are contained in curly braces: { }. For example, all style sheet rules
follow this general format:

selector { property:
value; }

The selector
is the HTML element that you want to style. You have to drop the HTML tag
brackets to create a selector, and simply write the tag name, such as body,
p, h1, blockquote, etc.
Then comes the braces, which hold your properties and their corresponding
values.

TIP! Properties and their values are separated by a colon ( : ), and property/value pairs are separated from other property/value pairs with a semicolon ( ; ). It's a good idea to always end each style sheet rule with a semicolon, so you can easily write in new ones. If property/value pairs are not separated by semicolons, your style sheet code won't work.

CSS properties
are pre-defined keywords that act on an HTML tag. Properties then have
values,
which give an exact specification for the property. For example, if CSS
code could create the automobile of your choice, your code might look like
this:

car { type: sedan; color:
red; doors: 4; }

Here, car
is the selector. Type, color, and doors are the properties,
and sedan, red, and 4 are the values for each property.
Using CSS to add style to your Web pages works just like thisβ€”all you have
to do is get to know the names of the properties and the values they accept.


Changing
the Font Face

As shown on
page 102 in your book, you can change the font face for all the text on
a page with one single rule, as the previous example demonstrated, or you
can single out an HTML tag, or multiple HTML tags. First, you should determine
how you want each section of text to appear on your page. You might want
all your headings to be a large, block font, and all your paragraph text
to be a smaller, traditional font. Once you have an idea what you're looking
for, you can get started with your CSS code.

To change the
font face of your Web page text, you use the font-family
property.
The value of this property is the name of one or more font faces that you
want your text to use. Why specify more than one font face? If a visitor
to your site doesn't have the first font face you specify installed on
their computer, it can't display your Web page text with that font. If
you specify a second, third, even forth option, the odds are better that
all users will see your Web page as you intend.

 

TIP! Each font face must be separated by a comma. If the name of the font face you choose consists of multiple words, like Trebuchet MS, you must enclose them in quotation marks. For example: p { font-family: "Trebuchet MS", sans-serif; } If you're unfamiliar with common font faces, you can always look inside the Fonts folder of your own computer. If you're using Windows, the Fonts folder is located in your C:\Windows folder. You'll likely find a few that you like. Jot down their names so you can easily remember them when you're creating your CSS code.

For example,
consider the following code:

h1 { font-family: Verdana,
Arial, sans-serif; }

Now, if a visitor
to your site does not have Verdana installed on his or her computer, then
their browser will look for the next font face in the listβ€”Arial. If Arial
is found, the text of your level-one headings will display with this font.
If not, the browser will move to the next option in the list. The value
"sans-serif" is a general font declaration that will work in all browsers,
because it will choose its own default sans-serif font.


Serif
and Sans-serif Fonts

Serif
fonts are those font faces that have "flourishes" at the ends of each letter,
for example:

This is a serif
font.

Note the ends
of each letterβ€”like the T, for example. Instead of straight, even lines,
the letters have pointed designs (the "flourishes") that give serif fonts
their distinctive appearance. Popular serif fonts include:

• 
  Times New Roman


• 
  Garamond

By contrast, sans-serif fonts are made with straight, even lines
with no flourishes, for example:

This is a sans-serif font.

Popular sans-serif fonts include:

• 
  Verdana


• 
  Trebuchet MS


• 
  Arial

When you choose a font, you should consider the readability of the text.
There are many "fancy" font faces available that might not be appropriate
for paragraph text because they can make your content difficult to read.


Modifying
Font Sizes

As shown on
page 104 in your book, you can also change the font size for any text element.
To set the font size for your text, you use the font-size
property. There are many different values you can specify, but the most
effective choice in terms of creating a consistent display across different
browsers and platforms is to use pixel values. Pixel values start with
an integer, and are then followed by px, with no space in between.

 

TIP! Most sans-serif fonts will appear to be a little larger than serif fonts at the same font size. In other words, the sans-serif font Verdana at 14px will appear larger than Times New Roman at 14px. This is due to the size of the letters and spaces in each font face.

For example, if
you want your paragraph text to display a little larger than the default
(which is 14 pixels in most browsers), you could write:

p { font-size: 18px;
}

Here, only text
inside of <p>tags
will pick up the style. All other text will be left alone.

If your Web
page contains text inside <h1>
and
<h2>
tags, a few paragraphs and a block quote, you could style each of them
differently, for example:

h1 { font-size: 24px;
}

h2 { font-size: 16px;
}

p { font-size: 12px;
}

blockquote { font-size:
11px; }

Putting
It All together

Let's say you
want all text on your page to display with the font face Georgia, and you
want your paragraphs to display at 15 pixels, and your links to display
just a little bit smaller, at 14 pixels. To achieve this, your HTML and
CSS code will look like this:

 

TIP! Style sheet code is not case sensitive, so if you write your HTML tags in uppercase and your style sheet code is in lowercase or vice versa, it won't have any effect.

<html>

<head>

<title>My Page</title>

<style type="text/css">

body { font-family:
Georgia, serif; }

p { font-size: 15px;
}

a { font-size: 14px;
}

</style>

</head>

<body>

...all your HTML tags
and page content...

</body>

</html>

Discussion

Now that you've
been introduced to the basics of style sheets, and setting font face and
font size, you can really put your creative juices to good use. Before
you work through the activity, post your comments to the following discussion
items in the message board to help make sure you're ready to proceed:

1. 
   In your opinion,
   is CSS code easier or harder to understand than HTML?


2. 
   Is there anything
   in this Lecture & Discussion page that isn't clear to you?


3. 
   Have you ever seen
   CSS code before, or dabbled in it? If so, share what you know about CSS
   with the class.

Web Pages Made Easy - Notes from Lesson 4

Lecture and Discussion

---

Lesson 4: Creating Links

What's a Web page without a link? It's a dead end! Links are the most important mechanism of the Web. In fact, they're one of the reasons the Web is called the Web in the first place. Links allow you to jump from one location to the next and find the information you're looking for. In this lesson, you'll learn how to create links to your own Web pages, other Web sites, and to specific locations in your own pages.

Linking to Other Pages

The <a> tag, or "anchor" tag, creates a link.
You then need to specify the destination for that link. To do this, you
use a hypertext reference, which is simply the address of a page
or other resource on the Web. You specify the address with the href
attribute.

For example,
if you want to create a link from your home page to another page in your
site, called "myfamily.html", you would simply write:

<a href="myfamily.html">This
is the text that will display as a link.</a>

Notice that
the <a> tag contains the text that you want shown as a link. Links stop
when the closing </a> tag is reached. By default, all links are displayed
as blue, underlined text, like this:

This
is what links look like.



Relative URLs

If you're creating a link to another page in your site, you can simply
specify the HTML page you're linking to, as the example above illustrates.
This is a relative URL, which means the page is accessed relative
to the currently viewed page.

However, if
you decide you want to store some of your pages in their own folders for
better organization, you need to specify the folder name as well. For example,
if you want all of your poetry pages stored in a separate folder named
"poetry", and you want to link to a page in that folder, you need to specify
the folder name, followed by a forward slash ( / ), and finally, the name
of the page, as follows:

<a href="poetry/page1.html">Check
out my poetry pages</a>


Linking to Other Web Sites

You can also
create links to other Web sites, such as Yahoo!, Google's search engine,
and any other site you can think of. For example, to create a link to the
Google search engine, you would write:

<a href="http://www.google.com">Search
the Web at Google!</a>


Absolute
URLs

The example
above uses an absoute URL to specify the destination page. This
is required if you want to link to a page outside of your site. An absolute
URL is the full address of a page or resource. Most addresses on the web
begin with http://, which stands for hypertext tranfer protocolβ€”the
standard means of delivery over the Web. The second part, www defines
the address as part of the world wide web, more or less. While some addresses
leave out this part, the reason isn't particularly important. More often
than not, your external address will require it.

Opening Links
in a New Browser Window

When you create
a link to another page on the Web, you're creating an exit door for your
site visitors. The external page will open in the same browser window,
so they will have essentially left your site. Do you really want them to
leave your site so quickly? Maybe, or maybe not. Depending on the nature
of your site and your own preferences, you might want to set all external
links so that they open in a new browser window.

This way, when
visitors to your site click on one of your external links, the destination
page opens in a new window, leaving the original window open. This provides
an easy way for you to keep visitors on your site.

To do this,
you need to use the target attribute
in the anchor tag, with the value "_blank",
as follows:

<a href="http://www.yahoo.com"
target="_blank">Yahoo!</a>

Link Titles

Whenever there's
information about a link that is not provided by the link text, you should
use a link title. You create a link title by using the title attribute
of the <a>
tag. The value of the title
attribute should be a text statement that provides users with information
about the destination page. For example, if it's an external page and you've
set the link to open in a new browser window, you should write something
like:

<a href="http://www.yahoo.com"
target="_blank" title="Opens in a new browser window.">Yahoo!</a>

Other circumstances
that warrant the use of a link title include:

• 
  The link downloads
  a file. Indicate the size of the file and the file type.


• 
  The link is to
  an external Web site that requires registration. (No one likes to click
  a link to an article, only to find that they need to fill out a long form
  before they can read it.)


• 
  Any information
  about the link that isn't provided by the link text.

Link titles create
"tooltips", the same feature created by alternative text for images. When
you place your mouse over a link that has a title, a tooltip pops up, displaying
the title text, as shown here:

Creating
Links to Specific Locations on a Page

As mentioned
on pages 50-51 in your book, you can also create links to specific sections
of a page. These links are commonly known as bookmark links,
or named anchors. They're generally only useful when you have a
long page that would require a lot of vertical scrolling. For example,
say you have a single page that is a long list of all your favorite links
on the Web. You have organized these links by category, but the page is
still extremely long, because, hey--there are a lot of good sites out there.

To make it easier
and faster for users to find links they might be interested in, you can
create a series of links for each category. When a user clicks on one of
these links, the browser will display the desired category at the top of
the page, so they don't have to scroll down the page and look for it.

TIP! Note that the name is logically related to the category. Naming your targets in this way will help you to read and understand your own code if you ever need to update your page in the future.

To do this,
you need to give each destination a name
by using the name attribute in the a tag. You can wrap any html tag inside
this link. For example, if you want a heading to act as a target for a
link, you would write:

<a name="music"><h2>Music
Links</h2></a>

Then, to create
a link to this location in the document, you would write:

<a href="#music">Music
Links</a>

Here, the value
of the href
attribute must start with the pound sign (#), followed by the name you
have chosen. Clicking on this link will take you directly to the tag that
has that name.

TIP! If you create a long page, you should also provide an easy way for users to return to the top of the page, as this external Web page demonstrates. To do this, you can give the first tag in your document a name, such as "top", and then create a link to this anchor after each "section" in the page.

To see a good
example of this technique, visit this
site.

Setting
Images as Links

It's easy to make images on your page links to other
pages. You already know how to embed an image, and you know how to create
a link. Now you'll simply combine the two. To make an image a link, wrap
your <img>
tag inside a link tag, for example:

<a href="TargetPage.html"><img
src="MyImage.gif"></a>

Removing
the Border on Image Links

By default,
any image that's a link will have a blue border around it to indicate that
it's a clickable region. You don't often see these on the Web because they
tend to make images look pretty ugly, as shown below.



To remove the
border from around the image, you need to use the border
attribute on the <img>
tag, and set it to 0, as follows:

<img src="MyImage.gif"
border="0">

Discussion

Now that you
know how to add links to your Web pages, you can connect your first page
to other pages you might want to create. To facilitate further learning
and the sharing of information, post your comments to the following discussion
items in the message board:

1. 
   When might link
   titles be unnecessary?


2. 
   Do you know of
   any other way to create "bookmark" links? If so, share it with the class.

Web Pages Made Easy - Notes from Lesson 3

Lecture and Discussion

---

Lesson 3: Applying Images

Now that you have some text on your page and you've established the structure of your text, you'll
learn how to liven it up with some images.

In your reading, you learned how you can embed an image in a page by using the <img> tag and specifying the location of the image with the src attribute. You also explored how you can align images with text and specify a text alternative for your images. Now we'll discuss these topics in a bit more detail and introduce some additional concepts that will help you to use images effectively.

Exploring
Image Formats

The images you insert in
your Web pages need to be one of two image formats, either a GIF
or JPEG image. The GIF image format is for non-photographic images
that don't have many different colors. GIF images have a .gif file
extension, as in MyImage.gif.

The following is an example
of a GIF image. It's not a photograph, and does not contain many different
colors.

An example of a GIF image

The JPEG (pronounced "jay-peg")
image format is for images based on photographs--images that contain many
colors. JPEG images have a .jpg file extension, as in MyImage.jpg.

The next image is an example
of a JPEG image. Because it's a photograph, it contains many colors.

An example of a JPEG
image

You can obtain images from
a variety of sources. There are many sites on the Web that offer free GIFs
and JPEGs you can use. Or, if you have experience with image editing programs,
you know that you can create your own images from scratch. If you have
a digital camera, it will automatically save your photographs as JPEG files
which you can then embed in your Web pages. If you don't have a digital
camera, you'll need a scanner to digitize your film-based photographs.



Web Sites That
Offer Free Images

TIP! If you find any images you like, save them into the folder you created for your Web site.

If you don't have a digital
camera or scanner, you can always obtain images from a variety of sites on the
Web. For example, check out the following Web sites and you'll likely find a
few images that fit the theme of your Web page:

• 
  Free Images


• 
  iStock Photo


• 
  Free Foto

Inserting
Images

As demonstrated on page 64
of your book, you can insert images by using the <img> tag and src attribute.
The src attribute specifies the location of your image. If your image is
located in the same folder as the Web page you're inserting it into, you
can simply specify the name of the image, for example:

<img src="myimage.gif">

However, if you want to keep
all your images in a separate folder inside your Web folder, you'll need
to specify the name of your images folder, followed by a forward slash
( / ), and then the file name of your image, for example:

<img src="images/myimage.gif">

If your image is not in the
folder that you specify in your src attribute, Internet Explorer will display
the following icon, which indicates that it can't locate your image:


Providing
Alternative Text

As mentioned in
your book, you should always provide alternative text for your images.
Some people use non-visual browsers that use speech to deliver the contents
of a Website. When these browsers encounter an image, they read the contents
of your alt attribute. Also, some users disable images in their
browser preferences to make Web pages load faster. Your alternative text
will be important to them as well.

TIP! In Internet Explorer, alternative text creates a "tooltip". When you place your mouse pointer over an image that has alternative text, a small message box appears with the alternative text. To see this, place your mouse pointer over the Saturn Enterprises logo.

Depending on the image, your
alternative text should either describe the content of the image, or simply
indicate what the image is. For example, The following GIF image is the
logo for the fictional company "Saturn Enterprises". A logical choice for
a text alternative would be "Saturn Enterprises Logo".

To code this, you would write:

<img src="saturnlogo.gif" alt="Saturn Enterprises
Logo">

For a photographic image,
you might want to describe the content of the image itself. For example,
using the JPEG Image shown earlier on this page, you might create alternative
text that reads, "Scene overlooking the Cascade mountains."

Discussion

Now you know the fundamentals
of structuring text, and you can begin to add content to your page. Post
your comments to the following discussion items in the message board:

1. 
   Do you know of any other sites
   on the Web that offer free images? If so, share them with the class.


2. 
   Why is it important to keep
   your images as small as possible?