Tuesday, November 01, 2005

Web Pages Made Easy - Notes from Lesson 1

Glossary

Absolute URL: An absolute URL is the full address of a page or resource, such as http://www.freepeoplesearch.info/yahoo-people-search.html.

Color name keywords: The 16 official color names you can use as values of the color and background color properties.

CSS: Cascading Style Sheets, the standard presentation language of the Web.

Embedded style sheet: A style sheet that's defined by the <> tag and is inserted into the section of an HTML document.

GIF: GIF is an image format that's typically used for non-photographic images.

Hexadecimal values: Hexadecimal values are color codes that begin with a pound sign ( # ), and offer the full spectrum of color.

HTML: Hypertext Markup Language. The standard structural markup language of the Web.

JPEG: JPEG is an image format that's typically used for photographic images with many colors.

Properties: CSS consists of pre-defined properties that take specific actions on an HTML element.

Relative URL: A relative URL is one that does not list the full path to the image. Instead, it's an image who's address is relative to the current page. (Also called relative addressing)

Selector: A selector is the part of a style sheet rule that attaches the style command to an HTML element.

Style sheet: A series of CSS rules that determine how HTML elements are displayed.

Tooltips: Pop-up messages that appear next to your cursor when you hover over an image that has alternative text, or when you hover over a link that has a title.


--------------------------------------------------------------------------------
Lesson 1: Introduction to the Web and HTML

I strongly recommend you get in the habit of using lower case tags from the start. Use <> instead of <>, for example (WITHOUT the extra spaces on your Web page).

While current browsers don't care which you use, future browsers might.

The newest version of HTML is called XHTML. Part of the new standards call for all lower case tags. That's really all you need to know for now.

However, for the highly motivated with a good background in HTML, you might want to visit:

http://www.nypl.org/styleguide/xhtml/guidelines.html

for a good summary of XHTML differences.

Again, in the distant future, special browsers might require lower case tags, so develop good habits now.

With the first reading assignment under your belt, you're almost ready to get your hands on HTML. The following topics will help to reinforce what you've learned and introduce some additional concepts that will help you to create your first Web page.

In your Web browsing experience, you've probably seen many Web pages that you'd love to emulate on your own site. If you have ever viewed the source code for one of these pages, you might have been overwhelmed by the code. Not to worry -- like all new things, you need to start with the most basic skills and progress toward the more complex features. Many effective Web sites are built with simple HTML only. Sometimes, a simple layout is the most effective.

In this lesson, you will learn how to get started with a new Web site project. You'll start with a plan, and steadily begin to make your vision a reality. All HTML pages start with the most basic ingredients and build from there. Your HTML skills will follow this pattern. You will start your Web site by creating a "skeleton"
-- the basic components that all Web pages contain.

Getting Started

Before you can build a house, you need a plan -- a blueprint you can follow to keep yourself focused on the end result. Likewise, before you begin to create your first Web page, you should first draft a plan of action. Start off with a mission statement. Most companies and organizations have a mission statement that describes the purpose of the company, its goals, and how it meets specific needs in the marketplace or community. Mission statements don't need to be long -- most are only about a paragraph.

An example of a mission statement might be:

"My Web site will provide a central location for my family members across the country to share news, pictures, interests, and family plans. It will provide a complete list of addresses, phone numbers, email addresses, birthdays, event reminders, and vacation plans."

Or, your Web site might have a more specific focus:

"This Web site will provide golfers with the most comprehensive list of information and reviews of golf courses all over the country. It will also provide information on obtaining tee times, seasonal fees, and nearby lodging and dining."

Every effective Web site fills a niche. Your mission statement should describe how your Web site will fill a niche, or need that is not currently met. Get a piece of paper and a pen, or use a text editor to write your mission statement. As you create your first Web page, you'll likely find yourself looking at your mission statement to keep focused on your objectives. Write concisely, and try to capture your goals in a single paragraph. Ask yourself the following questions and make a note of your answers:

What is the objective of this site?
Who will the audience be?
How will users benefit from this site?
What information will this Web site provide?
What will you provide that will keep users coming back to your site?

A good plan will help keep you focused on your goals. Once you have answered the questions listed above and you feel satisfied with your plan, you're ready to create your first Web page.

What Are Web Pages, and how Do They Work?

First, let's review some of the basics.

Web pages are simply text files that are saved with a .html or .htm extension.
Web pages are built with HTML, the Hypertext Markup Language.
Content in HTML is enclosed in various elements (tags) which define the structure of your pages.
Web browsers like Internet Explorer and Netscape Navigator display your page content according to the HTML tags you use.
As mentioned on page 8 in your book, all HTML tags consist of angle brackets (<>), with the tag name in the middle. Most HTML tags are containers, which means they contain your content, and/or other HTML tags. Container tags have an opening and closing tag. For example, all HTML pages must begin with the tag, and end with the tag. This defines the page as an HTML document.

Every Web page you create must have four basic container tags:



  • <html>


  • <head>


  • <title>


  • <body>


These four elements make up
the "skeleton" of a Web page. All Web pages contain these elements.


    The <html> container
    comes first. This tag will contain all the other tags and content in your
    document:



    The <head> container
    comes next. This is where you'll enter your page's title:



    Next, you'll insert the <title>
    container inside the head section. You will enter your page's title inside
    this container, as follows:





    Finally, the <body>
    container comes after the closing head tag. This element will contain all
    the visible content of your page.


    Tips:
When your visitors bookmark your page, the title you enter will appear as the title of their bookmark. It's important to make sure your title is relevant to your page content, informative, and brief. For example, if your title is "My Page", users might not be able to identify the page when they look through their bookmarks at a later date. A more effective page title might be, "(Your Name)- Welcome!", or the name of your Web site or organization.

It's up to you if you want to write you HTML tags in uppercase or lowercase text. Using lowercase text is a little faster and easier since you don't have to use the SHIFT key constantly, but some developers prefer to use uppercase tags because it can help to visually distinguish tags from page content.

Once you have these basic structures in place, you can begin to create your page content.



Discussion

So far, we've tackled some of the essential building blocks that all Web sites start with. You have
a plan of action, a mission statement, and a clear set objectives for your project. Now it's time to share your vision with others.



  1. Post your mission statement
    in the message board.


  2. Share any comments or questions
    you might have about what you've learned so far.


  3. If you already have a Web site
    work-in-progress, please share it with the class.

No comments:

Zoitsa the Gaian