 | The Boiler Room | |
Tips on HTML Pagework
HTML stands for HyperText Markup Language. It is the method of encoding the text files which carry information and format the pages seen on the World Wide Web. HTML commands, known as <tags>, are embedded in the text of a page. A Web browser, such as Firefox, Safari, Chrome or Internet Explorer, translates HTML-encoded pages to display informative text, graphics and links on your computer monitor. Here are some helpful tips on how to design your own cool Web pages.
You may click one of these shortcuts or scroll down the page:
| Home Page
| Graphics
| Photographs
| Navigation
| Frames
| Styles
| Tutorial
| Colors |
What you need to get started
Creating your own Web page is not difficult. First, you add HTML <tags> to an information document, then you save the document somewhere on your computer as a plain-text file, and finally you take a peek at the document to see how it looks as a Web page.
The tools you need:
- Some information to use as content on your Web page.
- A text editor, such as TextEdit, Notepad, TextPad, WordPad, BBEdit, Word or Pages, in which to type the information and HTML <tags>.
List of text editors »
- A Web browser with which to view your handiwork – Firefox, Safari, Chrome, Internet Explorer, etc.
List of Web browsers »
The text editor:
- The objective is to save the HTML document as a plain-text ASCII file with the filename extension .htm or .html.
- Macintosh users might use TextEdit.
List of text editors »
- Windows users might choose Notepad or Wordpad.
List of text editors »
- UNIX users could use vi, pico or other text editor.
List of Unix text editors »
- If Word, Pages or other full-featured word processor is used, be sure to save the document as a plain-text ASCII file with the filename extension .htm or .html.
HTML editing programs:
- There are rules for proper use of HTML. It should match the standards set by the international World Wide Web Consortium (W3C), which makes websites accessible to all computers including wireless mobile devices.
About W3C »
- WYSIWYG stands for What you see is what you get. A WYSIWYG editor shows exactly how a Web page will be displayed in a web browser. Because using a WYSIWYG editor does not require any HTML knowledge, it is easy for an average person to use.
HTML editors »
- Commercial HTML editing programs include Dreamweaver, iWeb and others. The WYSIWYG editing programs can make life easier up to a point. They automate a lot of the typing of <tags>. However, they may not give you the precision fine-tuning of a page design you want. Professional designers often do their HTML creation work "from scratch." That's what the Space Today Online webmaster calls "writing it long hand."
List of HTML editors »
- Word processors usually allow saving or exporting of HTML files. It's easy to use Word, Pages or another word processor in the way you might use a WYSIWYG HTML editor.
List of word processors »
- There also are online WYSIWYG HTML editors such as CKEditor, OpenBEXI and TinyMCE.
Comparision of HTML editors »
Saving the document:
- Save your HTML-encoded document either on your computer's internal hard drive or your floppy-disk drive. If you are on an office network, you could save the document on your personal virtual drive.
- Be sure the HTML document is a plain-text ASCII file.
- Putting all of your HTML files in one folder is a sensible approach.
- The last part of the document's filename – its extension – must be .htm or .html
- Macintosh, Windows 95 and UNIX computers can use very-long filenames. Windows 3.x and DOS computer are limited to eight-character filenames and three-character extensions.
Testing your page:
- You will want to test your newly-designed Web page by looking at it before publishing it on the Internet.
- To open an HTML document from your hard drive, you can simply drag-and-drop the textfile onto your Web browser icon, alias or shortcut. Netscape Navigator, Microsoft Internet Explorer and most newer browsers will open the document automatically.
- Otherwise, here are the steps in opening the HTML document in your browser:
- Open the browser.
- From the File menu, choose Open File (or Open Location, Open Page or whatver the similar selection is in your browser). Locate your specific HTML document and open it.
- Review your entire document in the browser window. Does the document look like you want it to or think it should?
- Go back to the text editor, make changes in the document, and save the document again.
- Return to the browser and click the Reload or Refresh button to see the newly-modified page. Review the document again.
- If it still isn't right, go back to the text editor again, make changes and save the document again. Return to the browser and click the Reload or Refresh button. Review the document again. Does it look right? If not, repeat this.
- When you are satisfied, save the document for the last time.
Home page theme
Keep your home page interesting. Base it around a theme or story.
Small home page
Make your home page accessible to everyone by making it quick to download. Keep your images small – under 10K in filesize. Keep the background image simple and small. This will speed the loading of your page and help keep the text over top of the background easy to read. Even better, use a background color rather than a background image. Limit your entire home page to under 40K.
Premixed Colors
The words, links and backgrounds on your page can be shown in different colors. Colors are specified by a six-digit "number." For instance, the color Blue is represented by 0000FF. To make things easier, several widely-used colors have been given common names. Now, identifying a color by name is equivalent to identifying it by number. Here is a list of predefined color names with color swatches.
Should you beg, borrow or steal artwork?
It's fun to browse the Web for fresh images for your pages. A quick search will turn up a gazillion freebies in the public domain for your use. Public domain means nobody owns the artwork. Many Web artists have published pages of their art and placed those artworks in the public domain for use by anyone. Otherwise, when using graphic-image files downloaded from the Internet, bear in mind the possible legal implications. Of course, you can't own information, only the way it's presented. And, U.S. and international copyright treaties allow you to download files from Web pages. However, those U.S. and international rules control how you use the files. In particular, if you wish to use copyrighted graphics or text from someone's Web page, contact the page publisher and ask for permission (unless the publisher has posted a notice permitting use of artworks on other pages).
Image URLs
You know that a graphic image on a Web page is assigned its own address (Uniform Resource Locator). To find the URL for a particular graphic, Windows users right-click the mouse over the image and choose "Properties." Macintosh users click and hold down the mouse button on the image and choose "Copy Image Location."
Transparent GIFs
To make an image blend into the background on a Web page, make the .GIF image file transparent. That is, make the background color of the image match the background color of your Web page as closely as possible, then make that background color the transparent color in the .GIF image.
Small buttons
Keep buttons, icons and other small graphics for a Web page under 5K. That way, on a 28.8 Kbps modem connection, each graphic will load in a second or less.
Small graphics
Make images small and, therefore, fast to download. Lower the "resolution" or color depth of the image to 256 or fewer colors (8-bit color or 72 dpi). Reducing the number of bits per pixel lowers the size of the file.
Dithering system colors
Dithering means simulating colors on a computer screen by putting pixels of different colors together. Most computer operating systems offer 216 colors which will not dither. Use the 216 colors for a clean, even look on your Web pages.
GIF vs. JPEG
Almost all graphic images on the Web are saved as .GIF or .JPG/.JPEG files. In fact, most are .GIF images. If an image is more like a drawing or painting than a photo, save it as a .GIF file. If it is an actual photograph, save it as a .JPG file. If the photo .JPG looks bad, re-save the original as a .GIF file. Remember, JPEG file throw away image data so be sure not to try to re-work the .JPG file. Work with the original, uncompressed image.
Blurry JPEGs
If a JPEG graphic on a Web page looks blurry, the JPEG may have been squeezed to a very low compression ratio. To correct the problem, take the original, uncompressed image and re-save it as a JPEG with a higher compression ratio – 75% or higher should work fine. JPEG files save space by throwing away image data so be sure not to work with the too-compressed image file. Work with the original, uncompressed image.
Reducing photographs
Photographs, which often are very large files displaying thousands or millions of colors, can be reduced without extreme loss of quality. Lower the "resolution" or color depth of the image to 256 or fewer colors (8-bit color or 72 dpi).
Simple graphic navigation bar
Here's how to design a simple graphic navigation bar (navbar) without using image maps:
- Make a navbar image in your favorite graphic-creation program.
- Use the graphic program to cut the navbar into blocks.
- Save each cut-apart block as a separate file.
- In HTML, assign each cut-apart graphic an A HREF link.
- Use the ALIGN="center" and BORDER="0" attributes in the graphic's IMG SRC tag.
- Avoid putting extra HTML tags or text between the cut-apart graphics.
- If your navbar uses more than one row of buttons, use the BR tag to separate rows.
Frames
While some computer nerds are enthralled by them, lots of Web-browsing folks are bugged by Frames. If you simply must use Frames in your HTML page, use as few as possible and give your visitors the option to choose between Frames and no-Frames versions of your pages. Frames sometimes help organize a page so you can have a standard, consistent interface, but Frames take longer to load because you load separate HTML documents for each Frame and because the extra Frames take more time to draw on the screen. Remember, many people prefer to have Frames turned off for faster downloading or they use browsers that don't support Frames.
Style sheets
You can use "Cascading Style Sheets" – a new addition to the HTML standard – to define exactly which fonts, colors, sizes and styles to use for each element in a Web page. Read more about style sheets at http://www.w3.org/pub/WWW/TR/REC-CSS1
HTML Tutorials Online
Here are some good, free HTML tutorials on the Web:
Copyright 2011 Space Today Online