HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 3—Web Page Design |
37 |
Session 8 describes proper color selection.
Cross-Ref
In addition to the technical design issues that you’ll master more fully as you progress through this weekend, your site’s makeup of pages and how those pages connect determine the feel that you want your site to convey.
Although they are rare, some Web sites are completely comprised of a single page. Many personal home pages that keep friends and family updated on the latest information of a family consist of a single page or two that effectively convey all the information needed. On the other hand, corporate Web sites that include product information, ordering, and contact information might consist of a hundred or more Web pages.
Many Web sites have a central theme or primary topic that conveys a message. If you cannot narrow your site to a central theme, consider rethinking your site and possibly dividing the site into two separate sites.
Constantly match your fonts and graphic images with your topic as well. For example, if you want to portray a friendly, noncorporate feel, use fonts that convey less of a formal, business feeling and that add more of a fun flair to your site.
|
Once you’ve decided on your primary topic, keep focused on that |
|
topic. Once you’ve created some Web pages, test whether or not |
Tip |
your pages fit your topic by asking others to view the pages and |
see how close they can come to determining your primary topic |
|
|
and the overall goal of the site. |
Web structures
HTML programmers structure Web sites differently because the goals of Web sites differ greatly. As you’ve seen in this session, the audience and the primary topic determines the look and feel of the site.
Generally, Web sites fall into one of these three categories:
Sequential or Linear: Each page in the site is just a continuation of the preceding page. The home page or start page is simply the first page in the sequential link of pages. Sites that are based on the sequential structure often are reading sites that tell a specific story or that need to teach the user a subject in a specific order.
Session |
Friday—I Part |
3 |
Evening |
38 |
Friday Evening |
Hierarchical: The home page is considered to be the top of the Web site, with subsequent pages branching out from the home page. The hierarchical site is the most common site, often being used for both corporate and personal pages, with the home page being the launch pad for the rest of the site’s areas.
Web: Pages are linked as needed, but no single page, including the home page, has priority over the other pages. When a site contains data that does not fall in a specific preset order, the Web structure is used to give the user several avenues of branching among the pages. An inventory system designed for a corporate intranet would make a good candidate for this structure.
Figure 3-4 shows the three structures that Web designers use to determine the logical order for users to navigate a site. Some Web sites provide areas that contain more than one structure. Your site’s message determines the site’s structure.
The Web page design walkthrough
No text on Web page creation would be complete without the typical steps an HTML coder takes to design the page. That list follows, but unlike many tasks in computer programming, Web page design is not a procedural task. A Web page is never finished. The elements on your Web page today probably will change tomorrow and will be completely different in a month of two. Following are the steps you follow when you first design your site, but you’ll be returning to them, in a different order, as your site evolves.
To design your Web page, you will:
1.Determine your site’s theme and primary topic or task.
2.Determine the structure that best suits the site.
3.Sketch your site’s home page to begin working on the tone of the entire site; your home page sets the standard format for the rest of the site.
4.Collect the text and graphic images that will appear on the site.
5.Create the initial page and block out the areas consumed by the headings, sidebars, menus, footers, and body of the page.
6.Enter the text and add the images to their appropriate locations.
7.Add hyperlinks to and from other pages you will be creating, as well as to other resources on the Internet you want to link to.
8.Publish your Web page.
Session 3—Web Page Design |
39 |
Sequential Page Structure
Home Page
Hierarchical Page Structure
Home Page
Web Page Structure
Home
Figure 3-4
The three common Web site structures determine how users navigate Web sites.
In addition to being an ongoing process versus a straight, sequential order of steps, several of the Web page creation steps require a surprising amount of work. For example, collecting graphic images entails locating images you can use, creating your own images from a source such as a scanner, digital camera, or drawing program, and working those images so that their colors and resolution work well in the majority of browser windows that will display your site.
Saturday morning’s sessions on graphics will explain more about optimum colors and image resolution.
Session |
Friday—I Part |
3 |
Evening |
Cross-Ref
40 |
Friday Evening |
|
Once you begin to create Web pages, you will find yourself cri- |
|
tiquing other Web sites. Such critique is good. You learn by |
Tip |
watching how others create Web sites. Most Web browsers enable |
you to view the HTML source code used to create that site. (You |
|
|
can do this by selecting View Source or a similar option that |
|
usually appears on Web browser menus.) |
You will learn many Web design techniques by studying HTML code for the sites that you like. Don’t steal the code, however, but learn what the HTML coder used to produce the site and experiment with your own styles that you gleam from other sites along the way.
Publishing Web Pages
Knowing HTML does not get your Web site published, only created. You must have an avenue to get your Web page on the official Internet set of pages, and that means getting a Web address (called a URL for Uniform Resource Locator) assigned to your site.
Once you create your site, you need to do the following to publish your Web pages:
1.Determine a domain name, the portion of the Web address that appears before the .com, such as myNewPage in http://www.myNewPage.com; that domain name must be unused by anyone else.
2.Register your domain name. By registering, you find out if your domain name exists, and, if not, you pay to own that domain name for a specific period of time. The cost typically runs from $100 to $150 for a three-year registration.
3.Locate and register with a Web host, a company that uses its computers to serve up your Web pages 24 hours a day to the Internet. Many Web hosts also verify whether or not your domain name is already in use, and if not, will register the domain for you so that you can use a Web host at the same location. Although you can use your own computer as a server to the Internet, you’re typically better off hiring the services of a host because a host can provide backup services, generally has equipment required for high-capacity Web page visits, and utilizes redundant storage technology to ensure that the site stays up. Free Web hosting services are also available. These are discussed in the next section.
Session 3—Web Page Design |
41 |
4.Publish your Web pages by uploading your HTML code and images to the host’s site. Generally, the host will tell you exactly how to go about publishing on that specific host machine. You might use a program called FTP (for File Transfer Protocol) to transfer the site from your computer to the host, but many hosts have their own special requirements.
5.Test your site by traversing all pages and hyperlinks, making sure that the site performs to your satisfaction.
Available Free Hosts
Many Web sites, most notably the portals such as Yahoo! and Geocities, offer Web hosting services for free. You can register at these sites for Web hosting space and upload your images and HTML code directly to their servers for instant (and free) Web pages.
|
Many of the free Web hosting services display banners and pop- |
|
up window advertisements on top of your Web page when users |
Note |
visit your home page. In addition, you are limited to the domain |
name that you can use. Generally, your site’s name will be |
|
|
prefaced with the Web host site’s name, such as http://www. |
|
geocities.com/mysite.html. In this URL, geocities represents |
|
the Geocities Web site. |
These sites are perfect for experimenting and learning HTML, as well as for designing your early Web pages. Instead of paying for professional Web hosting services, you can place your initial Web page designs on these free Web hosts and make sure the pages perform as you expect.
Some of the free Web hosts are:
Geocities (http://www.geocities.com/)
Yahoo! (http://www.yahoo.com/)
Microsoft Network (http://www.msn.com/)
America Online (http://www.aol.com/)
Session |
Friday—I Part |
3 |
Evening |
42 |
Friday Evening |
REVIEW
Design Web pages so that your users can see the most information possible.
The speed of your user’s connection and their screen resolutions affect the loading and display of your Web page.
The faster your pages load, the more likely users are to stay at your Web site.
An HTML Validator will inform you of trouble spots on your Web pages.
Design and maintain your Web site with your audience and target topic in mind.
A Web host will register your Web site’s domain name and act as a server for your Web site.
QUIZ YOURSELF
1.Which resolution displays the most information: 640× 480 or 800× 600? (See “Considering Your Environment.”)
2.Which corner of the screen should hold the most important links and site information? (See “What’s an HTML Programmer To Do?”)
3.How do some Web users eliminate the slow loading speed of images? (See “A World without Images.”)
4.True or False: You cannot view other Web sites’ HTML source code because the code is secured with passwords. (See “The Web Page Design Walkthrough.”)
5.What is the job of the Web host? (See “Publishing Web Pages.”)
S E S S I O N
4 
Maintaining and Improving
Your Web Site
Session Checklist
Properly maintain your Web site
Optimize the organization of your computer’s files and folders
Test and maintain your Web site on your own local Web server
Allow your Web site to reflect the ever-changing HTML
Learn about Web programming tools to accent your HTML code
One of the primary jobs of the HTML programmer that you should learn is proper site management. The choices you make when you first design a Web site, such as choosing proper folders on your own computer in which you
store the site’s files, can help or hamper your job later as your site grows.
In addition to managing a site properly, you need to stay abreast of the tools and new technologies available to help you improve your Web site. This session explores some of the HTML tools and other Web page languages that have become available that you can implement along with your HTML pages.
44 |
Friday Evening |
Success Means Constant Web Site Maintenance
Keep your Web site fresh if you want users to return. When someone begins to create a Web site, they have little understanding as to how involved and timeconsuming even simple Web sites become. Even small changes to a single Web page often require that you perform these steps:
Download the Web page to edit to your computer.
Make the change.
Upload the changed page.
Test and review the page to ensure that the change works.
The final step, testing, may require that you work on the page more than once. Often, when you make a change, other parts of your site are affected. Perhaps a hyperlink to an object on your page changes, or perhaps you replace a figure that is still referenced from another page on your site. Although HTML validating programs may help you locate these missing links, other unexpected problems can arise. You should view your site in as many browsers and on as many different kinds of computers as possible to ensure that your site looks good in various configurations. The bottom line is that you should consider Web maintenance to be a job that always takes longer than you expect but is required for a site to be successful.
Think of the Web sites that you often visit. Those sites not only provide information you need, but they also stay fresh and keep your interest piqued.
Note
If you work from a modem or an integrated services digital network (ISDN) connection, this process is even more timeconsuming considering the slow speed at which you must upload and download the pages you are editing.
The testing stage needs to include the same proofreading as printed documents require. Read your changes carefully to make sure the grammar and spelling are correct. Sloppy HTML programmers use sloppy spelling and poor grammar.
The Best Way to Organize Your Files and Folders
Not only must your Web site appear organized to your users, but also you must organize your own computer’s files that contain a working copy of your Web site. Create a new folder for each Web site you want to produce. The folder that you create is the
Session 4—Maintaining and Improving Your Web Site |
45 |
Web site’s primary folder. Next, inside each Web site’s primary folder, create a subfolder named images where you place every image for that site. By doing so, you head off problems that may arise. If you use an image more than once, for example, the user’s browser will only need to load the image one time if you place that image in your images folder and reference that folder in your HTML page. In addition, you will not have to deal with extended paths to images when they all reside in the same folder. If you change an image in the folder, all hyperlink references to that image will not have to change.
Never put multiple versions of your Web page in the same primary folder. For example, if you have four separate versions of your Web page for four foreign languages, keep each of those
Never versions in their own primary folder with their own images folder. Although doing so means that you might be maintaining four separate versions of the same images, you eventually save time with simpler hyperlinks throughout your sites.
Despite seeming as though you’re stuck in the Dark Ages, try to limit yourself to the old DOS standard of 8.3 filenames, using htm as the filename extension unless your HTML editor supports the html filename extension. Most of today’s computers recognize more characters, but you’ll ensure that problems won’t arise with legacy browsers and Web hosting software that you may still run into. In the world of computers, good documentation is vital, and 8.3-character filenames certainly do not allow extended self-documentation of filenames. However, for a few more years, such filenames are probably the safest to use.
Should You Turn Your Computer into a Local Web Server?
If you work from home, or from a small business that does not provide for a 24-hour Web server, you have the option of turning your computer into a local server. The drawbacks are that you must keep the server active at all times, day and night, connected to the outside world somehow. If you are linked to the Internet with a modem or ISDN line, you do not have the power to serve up multiple Web pages at once, if your site receives traffic that warrants the serving of more than one page simultaneously.
Despite its drawbacks, however, there is one benefit from turning your computer into a server: With your own local server, you can accurately test your site because you can create, edit, and maintain your entire Web site on your local server. You won’t waste time uploading your changes only to find that you must make additional corrections to fix a broken link or other error before uploading the pages
Session |
Friday—I Part |
4 |
Evening |
46 |
Friday Evening |
once again. Instead, you’ll perform all testing and editing on your own server, correcting mistakes there. Then, once the site is exactly the way you want it, you can upload the site to a more powerful, full-time server on your Web host’s system.
Most PC operating systems, including Windows 98, allow users to create their own local Web server.
Note
The Ever-Changing HTML
Your job of learning HTML will cease only if something replaces HTML on the Web. As discussed in Session 2, new command tags are introduced with virtually every new browser that appears. In addition, new techniques for using current HTML commands continue to evolve to help you maintain and create elegant, fast, attention-grabbing Web sites.
Stay abreast of new browser features when they are released by visiting the manufacturer’s Web site to learn the new commands. You can incorporate these changes as you update your Web site. Many Web sites exist that act as resources for you, the HTML programmer. The following Web sites are useful because they not only contain design tips, but they also contain HTML code samples and tutorials that keep you up-to-date on the latest HTML versions:
WebMonkey (http://hotwired.lycos.com/webmonkey/): Provides expert HTML and design tips
HTML Reference Page (http://hotwired.lycos.com/webmonkey/ reference/html_cheatsheet/index.html): Provides an HTML cheat sheet
Experts Exchange (http://www.experts-exchange.com/): Answers to problems you might be having with your HTML code
iSyndicate (http://www.isyndicate.com/): Provides content you can use on your site
CAIM Web Style Guide (http://info.med.yale.edu/caim/manual/index. html/): Provides standard guidelines to help you create an acceptable Web site with all the common elements
Take a few moments out of your weekend crash course to look at these sites now so you’ll understand the kinds of resources that you and other HTML programmers can rely on to bring the latest Web creation help to your screen. Sites such as