/cover/
How to build a Web page
Plus: HTML Basics
By Eric Griffith
You
have a great idea for a Web site. But how do you turn that idea into www.yourgreatidea.com?
You could hire someone to build a site for you. But why not learn to do
it yourself?
You have to be prepared to learn some new technical terms and concepts, and you have to be patient as you grapple with some new software. But don't let that intimidate you. Learning how to create basic Web pages has never been easier.
In the early days of the Web, you had to learn how to use HTML (hypertext markup language) to create Web pages. HTML is a standardized set of codes—programming instructions or commands—that tell your Web browser what to do. These typed codes turn plain text into a colorful Web page.
In the past few years, a new kind of Web-design software has made learning HTML almost old- fashioned—even unnecessary. Programs like Macromedia's Dreamweaver 3 ( www.dreamweaver.com ; 800-470-7211; $299) and Microsoft's FrontPage 2000 ( www.microsoft.com/frontpage ; 425-882-8080; $149) make creating Web pages as simple as creating a word processing document (even Microsoft Word can make Web pages).
With these visually oriented programs, instead of typing codes, you type right onto a document and then style the text (changing fonts, point size) the way you would with a word processor. Most of the coding is automated for you.
These programs aren't perfect, however. Some Web designers say they don't allow enough control. If you want to eventually construct high-quality Web pages, you should learn the basics—HTML. Knowing your way around the HTML code of a page also means you'll be better prepared to work around limitations of programs like Dreamweaver.
Just what is HTML?
HTML is a standard set of codes, a language, overseen by a group called the World Wide Web Consortium. These codes tell browsers how to display Web pages. HTML pages are plain old text documents that you can make with a low-end program like Windows' built-in Notepad or the Mac's built-in SimpleText. So if you have a computer, you can likely begin building a Web page with no additional outlay of money.
OK, So what does this HTML stuff look like? You can see the HTML document underneath any Web page you visit. In your browser go to the View menu and select Source or Page Source; a window will appear showing you the basic text that builds that page.
The text of an HTML page is "marked up" with tags; these are specific instructions that determine what the page will look like in a browser. They indicate things such as bold text, the size of headlines, the placement of images and hyperlinks. Tags must go inside arrow brackets, like this: < b > word < /b >. In this example, < b > tells the browser that the word that follows should be in bold type, and < /b > says "Stop with the bold type now." The slash character (/) indicates that this is a closing tag, ending the command.
The contents of the Web page must be within tags. Everything on the
page must be inside the < html > tag set; it is the first opening
tag on a page and the last closing tag. Inside that set are the two
sections of the page. The < head > holds important information, such
as meta tags, which are words that search engines will find, and the title
that appears in the bar at the top of a browser. The < body > is
where the guts of the page—the content—is. So a standard Web page layout
without any content would look like this:
< html >
< head >
Title for browser bar and
invisible meta tags go here
< /head >
< body >
page content goes here
< /body >
< /html >
When you're ready to fill the space between the < body > tags with content, you'll need to know the basic tags for formatting and linking text and embedding images on a page. You can find a list of common tags at the Bare Bones Guide to HTML ( www.werbach.com/barebones ).
Tools you'll need
Creating and editing "raw" HTML—as the basic code of a Web page is sometimes called—with programs like Notepad or SimpleText requires you to memorize tags and type them in. But an abundance of easy software automates some functions so you don't have to become an encyclopedia of hypertext markup.
The best Windows program for tweaking raw HTML code is HomeSite 4.5 ( www.allaire.com/homesite ; 888-939-2545; $89).
A similar product is the Coffee-Cup HTML Editor ( www.coffeecup.com ; 361-887-7778; $49). CoffeeCup plans to offer an online-based HTML editor at www.htmleditor.com so you don't even need to upload any pages to a server; you'll already be on it. Mac users generally swear by BBEdit 5.1 ( www.barebones.com ; 781-687-0700; $119). Tucows ( www.tucows.com ) offers less-expensive options for Windows and Macs.
Next, you'll want to add images to your pages. Software that comes with your scanner or digital camera, such as Adobe PhotoDeluxe ( www.adobe.com ; 800-888-6293; $49), usually works with photos only, and not with other graphics.
If you want software that will let you produce any kind of Web graphic, one of the easiest for Windows is Paint Shop Pro 7.0 ( www.jasc.com ; 800-622-2793; $109). Many professional Web designers use a program called Adobe Photoshop ( www.adobe.com ; 800-492-3623; $609), available for Macs and Windows.
Once you've created your content, you can see how it looks by opening the file within your browser. Your HTML editing program may also have a preview function.
Where to put your pages
Now you'll need a spot on the Web to share your creation with the world. Chances are your Internet service provider has given you space on its servers—usually 5MB to 10MB; contact your ISP for instructions. Every screen name on America Online gets 12MB of space for Web pages and graphics. You can access this at Keyword: Hometown or at hometown.aol.com.
If you have a larger site in mind, you can pay a service to host your pages. (See reviews of Web hosts in our May 14 issue.) Hosting services cost about $10 to $20 a month depending on the features you get.
Finally, you need to get the Web pages you've created from your hard drive to the Web host's server computers. Many will suggest you send files via file transfer protocol. If you need to send via FTP, Windows users should check out WS_FTP Pro 6.5 ( www.ipswitch.com ; 800-793-4825; $39.95) or CuteFTP 4.0 ( www.cuteftp.com ; 800-290-5054; $39.95). Mac users can try Fetch 3.0 ( www.dartmouth.edu/fetch ; 603-646-1999; $25). All the software mentioned is available for a 30-day free trial.
Dive right in
It takes time and patience to build an impressive site, but just about anyone with the right tools and temperament can do it. We've just laid the foundation here. If you still think HTML is not for you, consider one of the Web- design software programs, such as Dreamweaver. But if you're ready to take the plunge, start working with HTML. Eventually, you'll have a site to call your own.
/click here/
Dreamweaver
www.dreamweaver.com
FrontPage
www.microsoft.com/frontpage
Bare Bones Guide to HTML
www.werbach.com/barebones
HomeSite
www.allaire.com/homesite
CoffeeCup HTML Editor
www.coffeecup.com
CoffeeCup HTML Editor Server Edition
www.htmleditor.com
BBEdit
www.barebones.com
Tucows
www.tucows.com
PhotoDeluxe/Photoshop
www.adobe.com
Paint Shop Pro
www.jasc.com
AOL Hometown
hometown.aol.com
WS_FTP
www.ipswitch.com
CuteFTP
www.cuteftp.com
Also, see the following articles in our site's Back Issues
section:
May 14, Reviews of Web hosts
April 9, "Setting up your own online
shop"
Feb. 13, Reviews of free Web space
Feb. 6, "Free Web
page-building tools"
Oct. 31, 1999, Reviews of HTML guides
August
1999, Reviews of Web-building sites