Learning Center
Plans & pricing Sign in
Sign Out



									Web Design Class— FRCC                                                                         Helen Goody
page 1                                                                       

September 19, 2009

8:00-9:00 Understanding HTML Hypertext Markup Language
(Hours 1 and 2 in Sams)
Some good places to start: Good for technical information, reviews on Web related software, downloads Easy-to-use directions for Web development, good HTML and color
cheatsheets, good Javascript library, glossary (see their tutorial on HTML 5.0). Nice and basic, especially good for the not-so-technically savvy Good for technical information, ecommerce, advanced development and other
compatible languages
L/ Lots of links for good, clean, HTML fun HTML Dog Blog Governing organization for the Web; HTML validator

Appendix B of Sam’s (p.487)

Check with your Internet service provider—find out what Web space and design templates and tools they
have provided for you…

Resources and Tools
Sam’s Teach Yourself HTML and XHTML in 24 Hours, Sam’s Publishing
HTML Editor: DreamWeaver, Flash (Adobe/Macromedia)
HTML Editor: Expression (Microsoft)
Graphics Editors: Photoshop, Image Ready,
Graphics Editor: Fireworks (Adobe/Macromedia)
Graphics Editor: Paint Shop Pro

We LOVE Free Stuff!
Text Editor: Notepad or TextEdit
HTML Editor: Google Sites
Blog Pages: Blogger, WordPress
 (see advice on page 17)

HTML: Hypertext Markup Language
Browser: Piece of software that helps you view HTML pages
WYSIWYG: What you see is what you get/Web design software
HTTP: Hypertext Transfer Protocol
FTP: File Transfer Protocol

What is the WWW?
• 1947—hypertext forecasted
• The internet started in the early 60s
• pre-1990: Internet access was all technical
• 1990: HTML invented
• 1993: Web browsers developed in order to view graphics
• Nowadays: Internet, intranet, extranet, CD-Rom, DVD, GUIs

The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to
     make these resources readily available to the widest possible audience:

1. A uniform naming scheme for locating resources on the Web (e.g., URI/URLs).

2. Protocols, for access to named resources over the Web (e.g., HTTP).
Web Design Class— FRCC                                                                             Helen Goody
page 2                                                                           

3. Hypertext, for easy navigation among resources (e.g., HTML).

Some Web Facts
  Tens of thousands of Web pages are posted on the Internet every day (source: Sams)
  More than 1.4 billion Internet users (source:
  Google has indexed more than 1 trillion Web pages as of July 2008. (source: Google Blog)
  97 billion emails, over 40 billion of which will be spam messages, are sent daily worldwide (source:

   You only need four HTML tags to make a Web page: HTML, Head, Title, and Body.
   There are more than 90 element tags in the current HTML version, and about 875 attributes for those
   All you need to build a Web page is a text editor and a browser (Internet access helps!)

Practical uses for HTML
Your Web Host HTML Editor
Blogs, Photo sites, Forums, Chat
HTML email marketing

How Web Pages Work
Web pages work similar to paper pages, but instead of flipping through pages, you click on a link. Pages are
located on your desktop load fast; pages from Australia with a bunch of graphics on them may load slower.

Everything on a Web page is an individual file and has an individual location. It's possible that a Web page
could have an element on it from all seven continents.

The Web page is served in a browser (Internet Explorer, Firefox, Safari, etc.), which not only retrieves a file
but also organizes its relations.

Surfing—the client/server model. The client (visitor) has control of many factors that alter the way a Web
page is displayed:
        Hardware
              o Computer
              o Connection/Internet Service Provider
              o Firewalls
        Software
              o Browser/ Plugins
              o OS
              o Fonts
              o Antivirus
        Settings/Customizations
              o Visual
              o Cookies/Privacy
Web Design Class— FRCC                                                                                 Helen Goody
page 3                                                                               

9:00-10:00 Creating and Publishing a Web Page
(Hour 2 in Sams)
Tools: NotePad (in Start Menu/Programs/Accessories) and Internet Explorer

Start by creating a folder in your My Documents area. Name the folder your first and last name; for example:
“hgoody”. This is where you will save your files locally.

Then open NotePad and start coding!

Every page needs a begin <html> and end </html> tag, <head> </head> tags, <body></body> tags, and
<title></title> tags. Title tags nest inside the Head tags; Body tags contain all the content that you’d like to
display on your page.

                   Add a title

•      Every HTML document needs a title. Here is what you need to type:
<title>My First Web Page<title>

•      Change the text from "My First Web Page" to suit your own needs. (in my example, I would type in
       “Kids Unplugged Toys, Loveland Colorado”). The title text is preceded by the opening tag <title> and
       ends with the matching closing tag </title>. The title should be placed at the beginning of your

•      Next add <body></body> tags, just after the </head> tag and before the </html> tag. Add some
       body copy in between the body tags: “KidsUnplugged Toys, Loveland, Colorado”

•      To view your page, save the file as "index.htm" (NotePad will try to save it a .txt file, but don’t let it!),
       then view the file in a Web browser. Open Internet Explorer, go to the File/Ope File menu, and
       browse on your computer to find your file. If the file extension is ".html" or ".htm" then the browser will
       recognize it as HTML. Most browsers show the title in the window caption bar.

         Next steps
HTML 5: My prayers are answered! This validation code is now easier than ever!
<!DOCTYPE html>

To make sure your HTML code is recognized as valid code, add this above the <html> area (p. 28 of Sam’s
for HTML 4 version):
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="" xml:lang="en">

Then add this in the <head> section, after the <title> </title>section:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

(this validates what character set you will be using; namely, Unicode character sets)

See p. 31 of Sam’s for more explanation on these “boilerplate” codes.

                   Add headings and paragraphs

In HTML there are six levels of headings: h1 is the most important, h2 is slightly less important, and so on
down to h6, the least important.

Here is how to add an important heading:

<h1>Kids Unplugged</h1>

and here is a slightly less important heading:
Web Design Class— FRCC                                                                            Helen Goody
page 4                                                                          

<h2> </h2>

Each paragraph you write should start with a <p> tag. For example:

<p>Quality Toys. Powered by Kids.</p>
<p>Our quality toys are hand-built-to-last and great for laughs. No batteries necessary (except for an
occasional PBJ); no upgrades necessary (except maybe when they become teenagers and you’ll have to
upgrade to something requiring keys). </p>

<p>Call, click, or stop by! All summer beach toys on sale now! </p>

Use <br /> for a short return or line break. Line breaks use “empty” tags, meaning they don’t need a tag set
to run. That’s why they look a bit different.

                  Adding a bit of emphasis

You can emphasize one or more words with the <b>, <i>, or <em> tag, for instance:

Add boldface to your line above:

<p><b>Quality Toys. Powered by Kids.</b></p>

Mention how you heard about us and get <b>10 percent</b> off your next purchase!

Mention how you heard about us and get <b><i>10 percent</i></b> off your next purchase!

Be sure to save your files frequently. Open a browser and find your index page to preview it. It’s great to
keep NotePad open and Internet Explorer open at the same time, then toggle back and forth, and refresh
your browser to see your changes.
Web Design Class— FRCC                                                                             Helen Goody
page 5                                                                           

10:00-11:00 Creating Images, Links, and Color
Start by creating an “images” folder in your directory. This is where you will place all your images for your
Web site.

                  Adding interest to your pages with images
Start with sample images at:

Right-click on an image you’d like to save, select “save target as” and save the file to your “images” folder.
Images can be used to make your Web pages distinctive and greatly help to get your message across. The
simple way to add an image is using the <img /> tag.

<img src="images/logo.jpg" />

You can also add elements so you can control the size:

<img src="images/castle.jpg" width="200" height="250" />

         Adding Alt Tags (Hour 9 in Sams)
Something is still missing! People who can't see the image or who elect to turn off graphics in their browsers
need a description they can read in its absence. You can add a short description as follows:

<img src="logo.jpg" alt="Kids Unplugged Logo" />
          Alt tags (a.k.a. “alternate text”) allow your user to conceptualize what's downloading before it does,
or if he/she uses text-only browser. It's also friendly for visually handicapped and voice-based interfaces.
They can also add search-engine friendly metadata to your site. It’s especially good for graphic buttons.

         More on images
        With an absolute link in the image source, you can pull a graphic located on someone
else's web page to your page.
        • You can determine the size of your image as well: <img src="myimage.gif" width="300"
        • And give it a border: <img src="myimage.gif" border="1"> (Use border="0" if you want to
make an image a hyperlink but don't want the blue link color around it).

         A few notes about images:
To avoid long delays while the image is downloaded over the network, you should avoid using large image
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIFs are good
for graphics art involving flat areas of color, lines and text.

         Adding links to external sites (Hour 3 in Sams)

What makes the Web so effective is the ability to define links from one page to another, and to follow links at
the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag.

To link to a page on another Web site, you need to give the full Web address (commonly called a URL). For
example, to link to your Ebay store, you need to write:

Visit our online store on <a href="">Ebay</a>.

You can also turn an image into a hypertext link, for example:

<a href=""><img src="shop.jpg" alt="shop online"></a>
Web Design Class— FRCC                                                                         Helen Goody
page 6                                                                       

                  Adding color (Hour 9 in Sams)
• Be consistent with three or so colors; be sure your user can follow your lead
• 16 "named" colors: black, white, red, green, blue, yellow, magenta/fuchsia, cyan/aqua, purple, gray,
lime, maroon, navy, olive, silver, teal.
• Color can be attributes for many element tags, including <font>, <body>,
• text="black" for text color
• link="yellow" is a color for a link that hasn't been visited recently
• vlink="lime" is a color for recently visited links
• alink="red" is for briefly blinking link when clicked
• bgcolor="red" for background color

custom colors: (click on “color codes”). You can display any color in HTML that can
be described in a hexadecimal format.

         File Transfer Protocol

Web a Web server sends pages to a user’s computer, it uses a transfer standard called Hypertext Transfer
Protocol or HTTP. To upload a page to your Web server, you have to use a different transfer standard call ed
File Transfer Protocol, or FTP.

To FTP files, you need four things: Your account name, your password, the FTP address for your Web site,
and the folder where your pages are located.
Free FTP clients: FileZilla, FireFTP (part of Firefox browser).
Dreamweaver and Expression have FTP clients built in.
Online Control Panels as part of your hosting package.

To use Microsoft Windows an FTP Client, type (for this class):

IMPORTANT: Create a folder that’s named the same as the folder you created in My Documents. Open that
folder, then simply drap and drop everything from My Document to that folder window.
Web Design Class— FRCC                                                                             Helen Goody
page 7                                                                           

11:00-12:00 Planning a Web Site, Finding a Host and Domain Name
     —Start by planning a site. Ask these questions:
           • What domain name do you want for your site?
           • What kind of content should your Web site have?
                     Examples: information, advertisement, e-commerce, entertainment, personal
           • What would your visitors want to know when they visit your site?
           • What features should you have? Write down a list of pages or sections that you might add to your
     site. Prioritize them with a 1, 2, or 3. Consider even your Priority 3 pages as you choose hosted Web
     space, nadwidth options, and server type (secured or nonsecured space). Some example sections:
           —about your business                                          —online store
           —product information                                          —photo album
           —prices/comparison chart/why buy?                             —directions
           —event calendar                                               —testimonials
           —registration/membership                                      —FAQ
           —contact form                                                 —samples
           —message board/chat                                           —fun/games
           —newsletter                                                   —instructional material (how to)
As you make your list of features for your site, rank their importance, and then take time build your site (and
continue to add to it) as you move along. A good Web site is a living series of documents, and it will continue
to change as your users needs change.

         Finding a home
Local hosts are good hosts for technical support ( ). But doesn't have to be local. It’s a
good idea to find a host who can also develop for you or work with developers. Price can range anywhere
from $10-$150 a month to host. See page 492 in Sams for more ideas on where to find one. See also:

        Some larger, reasonably priced hosts:
Go Daddy:


Check with your Internet Service Provider:
Comcast, Earthlink, AOL, Qwest, AT&T, and NetZero all provide some non-ad-invested web space for its
customers. Blog sites such as Blogger and WordPress allow capability to customize HTML.
For Comcast, read:

Finding a domain name
       Research, research, research
       Opt for the .com extension (unless you are designing for a nonprofit, then .org is good).
       Short is good, but memorable is better: vs.
       Avoid hyphens, unless it’s part of your brand (and if that’s the case, opt for getting both with and
        without): .
       Consider location in your name if necessary: .
       If you’re starting a business, research domain names as you develop a business name: .
       Domains are cheap, so buy them up while they are still available, then decide later which one to

To top