A beginner? Don't worry. With some terms, tips, and short tutorials under your belt, you will have a Web site up and running in no time.
Planning and Organization
Basic Terms and Ideas to Know
Create a Web Page
Uploading Files
PLANNING AND ORGANIZATION
The planning stage is the most important stage of developing a new Web site. If it is done well, it will produce an organized Web site and will save hours of re-work. An easy way to help plan a new site is to ask a few questions. Don't be afraid, a little research may be needed to answer these questions!
What is the purpose of the site?
What content do you want to include?
Who will be using the Web site?
What will you get out of the site?
What will visitors get out of the site?
What do competitors have on their sites? What don't they?
How will you keep visitors returning to the site?
Develop a Sitemap
The sitemap, even if it never appears on the Web site, will help sort out the different pages and subpages of a Web site. The sitemap is basically a list of all the pages of a site. See this Web site's sitemap: view sitemap.
Make sure to also include a page that will describe what the Web site is for or about. This may seem obvious, but consider an outsider to your industry that is visiting the Web site. To keep a visitor there, at least explain to them what the site is all about. Include answers to these questions: Who? What? When? Where? Why? Of course, be careful about disclosing too much personal information due to security reasons.
Your Audience
Make sure you are thinking like the visitors to your site, not thinking like yourself. Make the site easy to use and the information easy to find. If your audience is the elderly, lawyers, children, or other Web developers, restructure your site according to them.
Redesign Tips
Tackling Usability Gotchas in Large-scale Site Redesigns - By Jeffrey Zeldman, November 14, 2003
ABC News Redesigns - By Mike Davidson, October 9, 2004
Interview: The ESPN.com Redesign - By Mike Davidson, interviewing Eric A. Meyer of Netscape Communications, June 10, 2003
Search Engine Optimization and No-No's Site Redesign - By Mike Banks Valentine, October 1, 2004
Web ReDesign 2.0: Workflow That Works - Companion Web site to the book
top of page
BASIC TERMS AND IDEAS TO KNOW
HTML - The code that Web pages are written in. It stands for HyperText Markup Language. HTML is not a computer language; it is a markup language. A Web browser, such as Internet Explorer or Netscape Navigator, will interpret the HTML commands and display the Web page. Web files have the extension of .html, just like Microsoft Word files have a .doc extension.
W3C's HTML 4.0 Specification - Complete documentation of HTML by the W3C (World Wide Web Consortium)
Tags - Commands made up of English words that instruct the Web browser how to display information on a Web page. They are different from regular text because they are placed in small angle brackets, < and >. These characters enclose certain words called reserved words.
This is an example of a tag: <title></title>. Most tags contain two parts, the start tag (<title>) and end tag (</title>). The end tag is usually identical to the start tag except for the / which signals that it is an end tag. Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still other tags provide information, such as the title, which will not appear on the page itself.
Attribute - Some tags have additional features called attributes. For example, the basic tag to display an image is this: <img src="filename.gif">. But additional attributes can be added to control the width, height, border, and alignment. For example: <img src="art/katie.gif" width="180" height="180" border="0" align="center">.
URL - An Internet address (for example, http://google.com/index.html) that Web browsers use to locate files. It usually consists of the access protocol (http, which stands for Hypertext Transfer Protocol), the domain name (www.google.com), and optionally the path name to a file or resource residing on that server (index.html). URL stands for uniform resource locator.
Home Page - The first page or opening page of a Web site. It usually contains a set of links, like a table of contents, which allow the user to navigate the rest of the site.
Server - A large, powerful computer that holds data (images, HTML files, video files, or audio files). When a user types in the URL such as http://www.google.com, the user's Web browser connects to the server and requests the Web page. The Web server then sends back the data that was requested.
Web Browser - A software application used to display Web pages by interpreting HTML. Some common Web browsers are Microsoft Internet Explorer, Netscape Navigator, AOL Browser, Opera, Safari, and Mozilla. Web pages often appear differently depending on the brand and version of the browser being used.
Download - The act of pulling data or files from a remote computer to your own computer.
Upload - The opposite of download. Uploading files, transfers data from your computer to another remote computer, the Web server. To put files on your Web site, you must upload them. (See Uploading Files section.)
FTP - Abbreviation for file transfer protocol. The method used to download or upload files from a Web server to your computer. An FTP program, such as SecureFX, CuteFTP, WS_FTP, or SmartFTP, allows you to upload files to a Web server or download to your computer. Before buying an FTP program, search your computer first for "FTP." If you don't find a program, there are several free programs available for download on the Internet. (See Uploading Files section.)
Offline - Files that display independent of an Internet connection. Editing is normally done offline so the Web site can be viewed and tested before it is uploaded. (See Create a Web Page section.)
Live - refers to the uploaded version of a Web page.
index.html - Usually considered the home page of a Web site. When http://www.google.com/ is typed in to a Web browser, it automatically looks for the index page to open. If http://www.google.com or http://www.google.com/index.html is typed in, the same page will be displayed.
View Source - To view the source code of any Web page, choose "Source" under the "View" menu of your browser. Or right click on any Web page, (not on an image), and click "View Source." Either of these methods will open a new window containing the HTML code.
Meta Tags - Tags that list important information about a Web page. Search engines and Web directories use them to categorize and rank Web pages.
Cascading Style Sheets - Abbreviated CSS, are an addition to HTML that allows easy and elaborate coding for fonts, text colors, and text styles. (See Managing Fonts section.)
Content - Pictures, videos, text, etc. that are displayed on a Web page.
Font - A complete set of characters in a particular size and style of type. Three different fonts are Palatino, Times, Arial.
Sans Serif - A style of typeface that "without feet." Common sans serif typefaces include Arial, Helvetica and Verdana. (See Readability section.)
Serif - A style of typeface that has "little feet." Common serif typefaces include Times Roman, Garamond, and Palatino. (See Readability section.)
Forms - A collection of text-entry boxes, check boxes, radio buttons, and/or drop-down menus to collect information from a user on a Web page. Forms are written in HTML and processed by more advanced Web languages.
Script - A program or sequence of instructions that is carried out by another program not written in HTML.
top of page
CREATE A WEB PAGE
Step 1: Organizing your Web Files
Keep all Web files in one folder (such as one named html or web) on your computer. In the future, as the number of files and images increases, it will become more important to keep this folder neat and organized.
To be most efficient, all files on your home computer must match your uploaded Web site. This makes for easy uploads without broken links or missing images.
Step 2: Creating New Pages
Start by opening up Notepad, WordPad, or SimpleText. There are many applications that are made specifically to write and edit HTML code, but they are usually not free. EditPlus has a good Evaluation Version of an HTML editor. Although, a simple text editor will work just fine. Microsoft Word is generally too complex to use and will add unwanted HTML code.
Start by adding the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY>
Hello World.
</BODY>
</HTML>
This is the start of every Web page. The first line of code informs the browser what version of HTML you are writing in. As of December 1997, HTML 4.0 was the accepted version of HTML. (Source: HTML 4.0 Specification W3C Recommendation)
<HTML> begins and ends the document.
<HEAD> contains title information, meta tags, and scripting. The title tag (<TITLE></TITLE>) displays the text that appears at the top left-hand corner of the browser.
<BODY> includes the all of the content of the Web page, including all text and image information.
HTML is not case-sensitive, which means that <HTML> and <html> will create the same results.
Also indenting has no effect on HTML code, but it is useful and a good coding practice when working on long, complicated Web pages.
Step 3: Saving Pages
All Web pages must have an extension of ".html" or ".htm" to be work correctly in a Web browser.
From the "File" menu, choose "Save As." To save the page with an .html extension, set the file format to "All files." Type in your file name (index.html). The document type should be set to ASCII TEXT DOS or TEXT.
Step 4: View Your Web Page Offline
After saving the file, open a Web browser. Under the "File" menu, choose "Open." Then click "Browse" or "Open File." Locate the file on your computer and click "ok." You should now be able to see your work.
It is a good practice to do all work "offline." When finished editing and testing files, then upload your files. (See Uploading Files section.)
Step 5: Editing Web Pages
Open Notepad, WordPad, Simple Text, or an HTML editor. Under the" File" menu, choose "Open" to open the file to be edited. (If you cannot find the file you are looking for, make sure the file format is set to "All files.")
Make any necessary edits to the file and then make sure to save it.
Step 6: Uploading Files
Open Notepad, WordPad, Simple Text, or an HTML editor. Under the" File" menu, choose "Open" to open the file to be edited. (If you cannot find the file you are looking for, make sure the file format is set to "All files.")
Make any necessary edits to the file and then make sure to save it.
top of page
UPLOADING FILES
Before uploading any files, perform these checks:
- Spell Check. It is always a good idea to spell check. Since most HTML editors and simple text editors do not have very good spell checkers, copy and paste any text into Microsoft Word. It will catch most spelling errors and will save you some possible embarrassment.
- Check Links. Make sure all links go to the proper location.
Using Tripod's File Manager
- To upload to tripod, go to: http://www.tripod.lycos.com/build/
- Go to members login and type in your username and password, if you are not already logged in.
- Find the "File Manager" link in the center right of the page.
- The File Manager contains a list of all of the files your Web site contains.
- Find the "Upload via" dropdown menu, and select "single files (8)"
- Follow the directions on the page and click "Upload" when finished. You have now uploaded your files.
FTP-ing to Tripod
To upload files to tripod using ftp, open a ftp client program. The ftp address for tripod is ftp.tripod.com. Use your Tripod username and password.
top of page
All information compiled and researched by Katie Kleinman (Miller), last updated October 19, 2006. Sources are given when available. |
