Graphic of WWW

Introduction to Web Page Creation

What are Web Pages?

A web page is nothing more than pages of text with coded messages that tell your browser how to display the web page file. This code is called HTML or Hyper Text Markup Language.

Web pages may be created by writing HTML code and content using a text editor or word processing software. They may also be created using web authoring software (Dreamweaver, FrontPage, etc.) or programs such as Word or PowerPoint that include HTML translation tools.

Any computer can read HTML files. You can create web pages using both PCs and Macintosh computers.

W3C.org is the organization that establishes and maintains standards for HTML and XHTML coding.

For the next month, we will create a series of web pages using a variety of methods: plain old-fashioned hand-coding using a text editor, working with HTML editors, and WYSIWYG (What You See Is What You Get) software tools. By the time we finish this series of lessons, each student will have created an individual web site with multiple web pages, all accessible through a main home page which contains a snazzy animated image which each student will have an opportunity to design and create.

There's no need to be nervous--throughout this series of classes, I will schedule and hold a series of drop-in tutorial labs to provide one-on-one assistance.

Before Creating Your First Web Page

A good first step is to spend some time viewing web pages on the Internet. Make a list of what you like about your favorite pages. Pay careful attention to color choices, font faces and font sizes, navigation schemes, and basic page layout.

Start by organizing the material you wish to include in your page. Begin by using a piece of paper and sketching a draft or storyboard of how you want your page to appear. Do you want to include a headline, links to other pages, e-mail link for viewers to send comments or ask questions, images, photos, horizontal lines to divide the page into sections, tables, text blocks, or lists? Make sure you begin by creating a list of what components you want to include in your page. Then, make a rough sketch of your page design. Remember to adhere to the four basic design principles: Alignment, proximity, repetition, contrast.

Within this class, the textbook and instructor have completed this step for you. All you need to do is follow the instructions!

Designing Your Site

Again, this information is to help you after you complete this class and are so excited about web page creation, you decide to design and publish your very own personalized web site.

Figure out the purpose of your page. What information do you want to convey?
Think about who your audience is. How can you tailor your content to appeal to this audience? Should you include lots of graphics or is it more important that your page download quickly?
How many pages will you need? How do you want these pages organized? Do you want visitors to go through your site in a particular direction or sequence or do you want to make it possible for them to explore in any direction?
Sketch out the design of your site on a piece of paper.

Alignment

Make sure the items on your page are lined up with one another. Chose one alignment (left, right, or centered) and use it on the entire page. Check horizontal and vertical alignment of text and images. Move page elements away from the extreme left edge of the web page. Don't set the default type in all caps or italicize words that are all in caps.

Proximity

Keep headlines close to related text. Group items together that belong together. Try to cluster related page elements.

Repetition

As you build web sites with more than a single page, repeat certain elements to tie the pages together using a single repetitive image or theme. Use navigation buttons as a repetitive element. Colors, style, illustrations, format, layout, typography and so on can all be part of the repetition that unifies an entire site.

Contrast

Contrast is what draws your eye to the web page. Contrasting elements guide your eyes around the page. Create a focal point, something with a dominating force--the other elements follow a hierarchy from that point down.

Web Authoring Tools

Within this class, we will have an opportunity to explore several different web authoring tools and products. Once class is over and you are on your own, you may want to test some of the other tools available to assist you in the creation of Web pages. Microsoft Office products such as Word, PowerPoint or Excel all come with HTML translators that allow you to save your files in Web page format. These translators change your .doc, .ppt, or .xls files into html files and create accompanying folders that contain converted images and style sheet instructions that determine how your Web page will display. If you use this method to create your Web pages, you will need to move your html files and associated folders to a Web server. If you do not move all the files and folders into their correct places, you links may not work or your images may not display.

Some General Steps to Creating a Web Page:

Make and name a folder on your hard drive in which to store your web site files and folders.
Open your web authoring software such as Dreamweaver, CoffeeCup, NVU, or start up Word.
From the file menu, choose "New" or "New Page".
Type a headline or title for your page.
Hit Enter or Return and type in a paragraph of information.
Hit Enter or Return and type in another paragraph of information.
Type in the text you would want to link to another page such as "Next Page" and hit Enter or Return.
If you wish to add an e-mail link, type in the text you would want to generate an e-mail.
Save the page in your folder, giving it a name that is 8 characters or less in length. Additional instructions in the tutorials found below will explain how to convert Word and Powerpoint files into web pages.

Tutorials: