Book summary “Creating Web pages for dummies”: summary

Introduction

You want to build a personal or business presence on the World Wide Web, but you lack coding experience and technical confidence. The vast array of confusing software, complex design standards, and unfamiliar protocols can easily overwhelm your early efforts.

Bud E. Smith explains web publishing through simple tools and HTML 4.0 in Creating Web pages for dummies. The central idea is that you can construct and launch effective pages by mastering a few core steps, basic markup tags, and reliable design practices.

The book guides you from foundational web concepts and free hosting services through designing home pages and adding multimedia. You will learn how to prepare files and publish your site successfully.

• What are the basic components of a web page?
• How do you choose a hosting provider?
• What essential HTML tags do you need?
• How do you format text and add graphics?
• What are the best practices for uploading your files?

1. Web Publishing Basics and Site Types

The World Wide Web consists of text and graphics files organized into web sites. A web browser requests a page from a web server using HyperText Transfer Protocol (HTTP), and the page uses HyperText Markup Language (HTML) to define its appearance and functionality.

The World Wide Web relies on specific protocols and markup languages to assemble pages, and web sites must be categorized into distinct types based on their goals.

Every URL or web address contains a protocol name, a domain name indicating the server location, and a pathname specifying the exact file location on that server. Arthur's Netsurfer Communications uses the URL www.netsurf.com.

Publishing a web page follows a core set of procedural steps regardless of the specific tools or techniques used:

• Create the HTML text file that is the basis for your Web page.
• Create or obtain the graphic images you will use to spice up the appearance of your page.
• Create a link to the graphics in your HTML text file so they appear where you want them to.
• Preview your Web page on your own machine.
• Find Web server space.
• Transfer the HTML text file and the graphics files to the Web server.
• Check that your new Web page works correctly now that it is online.

Types of Web Sites

The major types of web sites are personal, picture, topical, business, and entertainment sites, each requiring different considerations regarding audience, maintenance, and scope. Jeff Lowe operates a personal site at www.jefflowe.com featuring pictures of a remote-controlled blimp and his résumé.

Personal web sites function effectively as online shares of identity and family events when kept simple and updated regularly. You should follow several guidelines to make these pages succeed:

• Make the main point of the site clear in the upper part of your Web page.
• Keep it simple by starting with modest goals.
• Provide lots of links to share information about Web sites and resources you like.
• Consider your privacy by not posting anything you would not want on a billboard.

Picture-heavy web sites require careful organization and image management to remain engaging for visitors without causing slow downloads. Arthur Bebak created the Netsurfer Communications site found at www.netsurf.com/nsd.

Commercial sites must clearly state the business purpose, maintain professional visual standards comparable to competitors, verify permissions for all assets, and monitor usage metrics. You should manage business pages with specific actions:

• Make the name and purpose of your business immediately clear.
• Get the right look to match the professional standards of your business.
• Get permission before putting a company page or external content on the open Web.
• Monitor usage of your site by investigating ways to measure traffic.

2. Hosting Services and Alternative Tools

Free web hosting services and alternative platforms provide guided creation tools and storage space while imposing specific storage, bandwidth, and content limits.

Services like Yahoo! GeoCities provide free personal web publishing but prohibit business home pages, commercial sales, and advertising banners. You must stay within allocated disk space and monthly data transfer caps. GeoCities has hosted 5,000,000 personal web page sites since its inception. A free account allows a maximum disk space of 15MB for all web files combined. That space fits approximately 15,000 text pages or 100 large quarter-screen graphics. GeoCities suspends service if you exceed the 3GB maximum monthly data transfer.

Registering for a Yahoo! and GeoCities account requires setting unique credentials and actively opting out of marketing emails. Yahoo! automatically subscribes new users to multiple special offer categories during registration, requiring manual unchecking or clearing of preferences to avoid unwanted promotional emails.

1. Open your Web browser.
2. Go to geocities.yahoo.com.
3. If you are not yet a member of Yahoo!, click the Sign In button in the middle of the browser window. When the Sign in to Yahoo! screen appears, click the Sign Up link.
4. Enter your desired Yahoo! ID and password. Retype your password.
5. Clear the check box if you don’t wish to have a Yahoo! Mail account. Then enter information in case you forget your password.
6. If you want to, indicate your industry and work details.
7. Verify your registration by entering the code (shown as a graphic).
8. If you want to read the Terms of Service or the Yahoo! Privacy Policy, right-click the appropriate link to open them in a separate window.
9. A confirmation page, Review My Account Information, appears. If it appears, click the link Edit Your Marketing Preferences.
10. The Account Information page appears with the Marketing Preferences tab selected. Click any categories you don’t want to be in to clear them, or simply click the link Clear All at the bottom of the list.
11. The changes are saved. Click Back to return to the page where you can continue with creating your GeoCities Web page.

Free Hosting Limits

Use Yahoo! PageWizards to rapidly construct a structured personal web page through a sequence of guided customization steps. PageWizards allows you to build an initial web page in minutes by filling out predefined areas such as personal identity, pictures, descriptions, and favorite links without needing immediate knowledge of HTML tags.

1. From the GeoCities control panel, click the Create & Update tab.
2. Click Yahoo! PageWizards.
3. Scroll down and click the Personal Page link.
4. Click the Launch Yahoo! PageWizard link.
5. Click the Begin button.
6. Choose a color and then click Next.
7. Enter your name and (optionally) the e-mail address you want to have appear on your Web page, and then click Next.
8. Choose a picture — a picture you upload, the default stick figure image, or no picture. Then click Next.
9. Enter a description to appear in the About Me section and a list of your hobbies to appear in the Hobbies and Interests section and then click Next.
10. Enter a description and the URL for up to four of your favorite Web links and then click Next.
11. Type a description of your friends and family and then click Next.
12. Type in links to friends and family members’ Web pages. Then click Next.
13. Enter a page name for your personal page. Then click Next.
14. Click the link to view your new Web page.
15. Write down or save your Web address, return to the wizard and click Done.

Using Publishing Wizards and Editors

Google Page Creator enables live in-browser web page editing using modern web technologies and provides free storage space. The service allows you to modify layout, look, and content directly inside a browser using AJAX and JavaScript, saving automatically as work progresses. It operates under beta conditions and lacks advanced forms or custom URL routing, while including 100MB of free storage.

1. Go to the Google Page creator page at pages.google.com.
2. If you are not already signed in, enter your password and click the Sign In button.
3. Review the page, including the Terms and Conditions at the bottom, and then click the check box at the bottom to agree to them.
4. Try different layouts by clicking the Change Layout link.
5. Click on the layout you want.
6. Try different looks by clicking the Change Look link.
7. Try different looks by clicking Preview under each look.
8. Select the look you want.
9. Edit the page title.
10. Highlight the new page title. Try as many formatting options as possible — bold, italic, header sizes, and more.
11. Enter new content.
12. Publish your page.

AOL users can leverage built-in, free Web publishing tools like 1-2-3 Publish and Easy Designer to create and manage personal or business Web pages easily. 1-2-3 Publish allows you to pick a template and fill in text and links without knowing HTML. Easy Designer provides drag-and-drop capabilities and HTML extension, though pages edited in Easy Designer can no longer be edited in 1-2-3 Publish.

Bud Smith created a sample 1-2-3 Publish page using the All About Me template.

1. Start America Online and enter Hometown in the keyword area.
2. Click the Make Your Own Web Page link to open the 1-2-3 Publish starting screen.
3. Scroll down and examine templates, choosing All About Me under Personal Pages.
4. Set up the background color and choose an image for the top of your page.
5. Add a title containing a keyword or your name, and upload a picture using the Browse button.
6. Choose a divider style that matches your top image.
7. Enter one to three sections of text with a title and description.
8. Enter the title and URLs for up to three favorite links.
9. Click Preview My Page, modify as needed, and click Save to publish.

Flickr simplifies online photo storage, organization, and sharing through tagging, privacy controls, and community features. Flickr allows you to upload JPEG photos, assign descriptive tags, organize them into sets, and choose specific privacy levels ranging from entirely public to restricted friends and family lists. Free accounts impose a 20MB monthly upload limit for photos, allowing approximately 100 reasonably sized JPEG images per month and a total photo limit of 200. High-resolution image dimensions of 1024 x 768 are suitable for ordering prints.

Bud Smith uploaded a set of three photos to Flickr, noticing one was sideways and using the Rotate feature to fix it.

1. Get a JPEG photo onto your computer system from a mobile phone, digital camera, or the Web.
2. Open your Web browser and go to www.flickr.com.
3. Sign in with your Yahoo! or Flickr ID, or click Sign up! to create one.
4. Click the link Upload your first photo to open the Upload Photos page.
5. Click Browse to locate an image or multiple images from your hard disk, mobile phone, or camera.
6. Add descriptive words called tags to describe your images.
7. Choose privacy settings from Public, Private visible to you only, or visible to Friends and Family.
8. Click Upload to send your photos, then add titles, descriptions, and tags before saving.

Google's Blogger service enables you to create and maintain an online journal or blog hosted on blogspot.com. Blogger provides templates, basic text formatting, HTML editing, and the ability to post via Web interface, e-mail, or mobile phone while requiring a unique blog address and user account. Google acquired Pyra Labs, the creators of Blogger, in 2003 when Pyra Labs had 6 employees, and Live Journal claimed 10 million registered users.

1. Go to www.blogger.com and click the orange arrow to Create Your Blog now.
2. Choose a unique user name and enter a secure password.
3. Enter a display name that protects your personal privacy.
4. Enter your e-mail address and review the Terms of Service link.
5. Check the box to accept the Terms of Service and click Continue.
6. Enter a title for your blog and a unique blog address portion for your URL.
7. Enter the verification word seen onscreen and click Continue.
8. Choose a template from the available visual layouts and click Continue.
9. Click Start Posting to open your blog and begin adding content.

Starting a Web publishing career by selling an item on eBay provides a quick thrill of financial success and builds confidence for future Web projects. You should keep the first sale simple by choosing an inexpensive item like a book, CD, or clothing that is easy to ship and does not risk major losses or customer disputes. A $9.99 item insertion fee costs 35 cents with a 53-cent final value fee. A $19.99 item insertion fee costs 60 cents with a $1.06 final value fee. Final value fee percentages are 5.25% on the first $25, 3% up to $1,000, and 1.5% over $1,000.

The author suggests selling Simon Schama British history books or a complete collection of ABBA albums.

1. Choose what to sell from items you already own like books, CDs, DVDs, or clothes.
2. Register as a seller by clicking the Sell tab and filling in registration information.
3. Create a seller account by providing credit or debit card details and bank account information.
4. Post the item by entering a category, title, description with pictures, and pricing details.
5. Track the sale, ship promptly, and follow up with the buyer to ensure satisfaction.

Managing reputation and maintaining high accuracy are crucial when selling on eBay to avoid damaging feedback ratings that are nearly impossible to overcome. You rely heavily on public feedback ratings. You must ensure accurate descriptions, careful shipping limits, diligent follow-through, and avoidance of disputed authenticity items like autographed memorabilia.

• Spell-check text and have a friend read it for correctness and completeness.
• Limit the sales area to regions where shipping costs are reasonable relative to the item price.
• Offer a prompt refund if the buyer is not happy with the transaction.
• Avoid starting with items whose authenticity could be disputed, such as an autographed football.

3. Introduction to HTML and Local Testing

HyperText Markup Language uses angle brackets to enclose tags that instruct browsers how to render formatting or establish hyperlinks without displaying the tags themselves. HTML combines document text with descriptive formatting, linking, and navigational tags in a plain text file that browsers interpret.

Browsers ignore standard paragraph breaks and tabs in text, requiring explicit HTML tags to structure content correctly.

HTML tags usually operate in pairs where a starting tag activates a property and a slash in the closing tag deactivates it. Browsers automatically wrap text and treat multiple paragraph tags as a single break. Forgetting a closing italic tag results in the rest of a document appearing in italics. The author uses the sentence That is a good idea with bold tags around the word good.

• Use paired tags and check documents for unclosed tags before publishing.
• Insert paragraph tags between paragraphs to prevent text from appearing as a single block.
• Test web pages across multiple browsers and screen configurations before publishing.

Core HTML Structure

An HTML document requires a specific foundational structure divided between head meta-information and body content. The head section contains document titles used by search engines and browser bookmarks, while the body section contains the visible content surrounded by body tags. The author displays a sample electric guitars introduction document using html, head, title, and body tags.

• Open a new document in a text editor or word processing program.
• Save the document as a text-only file ending with the .htm extension.
• Enter the opening html and head tags on the first two lines.
• Enclose a descriptive title within title tags on the third line.
• Add the head closing tag and body opening tag, leaving a blank line for content before adding closing body and html tags.

Web page files must use the .htm extension and lowercase names to ensure compatibility across diverse server operating systems. Unix-based servers distinguish between upper and lowercase characters, meaning mixed-case filenames or uppercase extensions can break hyperlinks when moved from Windows systems.

• Save files using the .htm extension instead of .html or word processor defaults.
• Use lowercase letters for all web filenames.
• Keep filenames simple within 8x3 DOS limits and avoid spaces, colons, or apostrophes.

HTML supports unnumbered, ordered, and definition lists to break up text pages, relying on the browser to handle specific bullet and number formatting. Lists are structured using container tags for the entire list combined with individual item tags, omitting end tags for individual items. The author notes that unnumbered lists display bullets while ordered lists display numbers.

• Start an unnumbered list with ul or an ordered list with ol.
• Use the li tag at the beginning of each list item without an end tag.
• End the list with ul or ol closing tags.
• Create definition lists by starting with dl, using dt for terms, and dd for definitions before ending with dl.

Links and Local Previewing

Hypertext links use anchors containing href references to connect users to internal files or external web URLs. Anchors specify both the clickable link text and the destination address. Relative addressing points to files relative to the current document using dot notation, while absolute addressing uses the full path from the root directory. An anchor pointing to the For Dummies site uses the url inside quotation marks after href.

• Enclose link text within anchor tags using ahref followed by the destination URL in quotation marks.
• Put all simple web site documents in the same folder to avoid complex pathnames.
• Use double dots to specify parent directories in relative addresses when linking across subdirectories.

Web documents saved locally on a hard disk can be previewed directly in a web browser before being hosted on a web server. Testing involves opening the file via the browser's open dialog, saving edits in a text editor, and using the browser refresh command to reload changes. Using a 20-inch computer monitor allows viewing both the text editor and the browser side by side.

• Start your browser.
• Choose File > Open or similar command.
• Find your HTML document on your hard disk and open it.
• View your own HTML document in your own Web browser.
• Look for problems in your HTML document or things you want to add.
• Open the HTML document in your text editor or word processing program and fix it.
• Save the changed HTML document.
• Use the Refresh command or a similar command in your Web browser to reload the fixed HTML document.
• Repeat Steps 5 through 8 until you're done.

4. Designing and Filling Your Home Page

Structuring a personal home page into distinct content blocks simplifies the writing process and prepares the site for future expansion.

Dividing content into topics such as personal description, family details, work background, and categorized favorite links prevents the problem of not knowing what to say. You can think of this layout as an illuminated résumé.

A husband and wife who love travel and wine built a family web page.

Personal web pages must omit sensitive identifying information and specific numbers to prevent identity theft and protect children. You should exclude Social Security numbers, driver's license numbers, credit card numbers, street addresses, personal phone numbers, and exact birth dates from online profiles and résumés. A security expert described the Social Security number as the golden key to an American's identity.

To ensure search engines easily find a Web page, place key identifying information in specific locations. Search spiders look at the title, the first heading, the first 20 or so regular text words, and META tags. Putting key terms in these locations increases the likelihood of the page appearing prominently in search results.

• Put your full name or business name in the title.
• Put key information in the first heading within your document.
• Include important terms in the first 20 or so regular-text words.
• Add META tags in the document header area.

META tags provide background information about a Web page exclusively within the header area to guide search engines. These tags consist of the word META, a field describing the content type, and the information itself. Essential versions to include for search optimization and internal clarity are author, description, and keyword tags.

SeaMonkey Composer automatically generates content-type and author/description tags, but keywords must be added manually by editing the HTML source.

• Open your Web page in a text-editing program.
• Add the author, description, and keyword META tags in the header area between the head tags.
• Save your document and exit.

Search Optimization and Text Formatting

Web writing requires a distinct style based on the physical limitations of computer screens and the unique behavior of online users.

Online content must account for HTML capabilities, low computer screen resolution causing eye strain, and the extreme ease with which users can click away to another site. Consequently, text must be kept brief, broken up with headers and lists, and hyperlinked to remain engaging. A PDF file from the For Dummies site demonstrates that an on-screen page displays significantly fewer words than a printed book page, meaning readers exert more effort online. Computer screens feature an approximate low resolution of 100 dpi compared to 300 dpi for most print materials.

Effective Web writing maintains a calm, informative, and informal tone while strictly avoiding hype and inaccuracy. Because the internet evolved from a network used by educated civilian and military researchers, overly broad commercial claims and hucksterism feel out of place. You should adopt a casual tone like writing to a friend while maintaining rigorous accuracy. Arthur Bebak's Netsurfer Digest is cited as an example of a cool, low-key, informal, and informative Web page lacking hype.

Working directly in HTML requires explicit tags for paragraphs and line breaks because text editors ignore standard keyboard returns. Pressing Enter or Return in a raw HTML text editor creates a single blob of text unless paragraph tags or break tags are explicitly used. Repeating paragraph tags will not generate extra white space, requiring a non-breaking space tag instead.

• Insert a p tag at the start of each paragraph and a closing p tag at the end.
• Use the br tag to create a line break without starting a new paragraph.
• Insert a non-breaking space tag after a br tag to get a full blank line break.

Web text formatting options include six heading levels, relative font sizes, and basic character formatting, but advanced styles should be used cautiously. Authors can use heading tags h1 through h6, relative font sizes, and bold or italic formatting. Underlining and advanced custom font colors should be avoided because they confuse users accustomed to standard hyperlink formatting.

• Use intended heading tags starting from h1 down to h6.
• Apply bold or italic tags moderately for emphasis.
• Avoid underlining text to prevent confusion with hyperlinks.

Using lists breaks up featureless blocks of text, makes content easy to scan, and forces writers to condense their points. HTML supports bulleted, numbered, and definition lists, each serving specific structural purposes. Bulleted lists are unordered and flexible, numbered lists indicate sequence or importance, and definition lists pair terms with descriptions.

• Start a bulleted list with the ul tag and mark each item with the li tag.
• Start a numbered list with the ol tag and mark each item with the li tag.
• Start a definition list with the dl tag, precede terms with dt, and data with dd.

5. Graphics, Multimedia, and Publishing

Minimizing graphic file sizes, selecting appropriate image formats, and uploading files via FTP are crucial for a successful live website.

Graphics Formats and Optimization

Web developers should use GIF format for simple graphics with solid colors and JPEG format for complex photographs. GIF supports up to 256 colors and offers features like transparency and interlacing, making it ideal for banners, bar graphs, and icons. JPEG compresses complex images with many color variations smoothly, making it the best choice for natural-looking photographs.

The author points to the NASA website and Marc Andreessen's photo test page at cgi.netscape.com/assist/net_sites/impact_docs/e-jpeg.html to demonstrate file sizes and compression differences. An uncompressed full-page color image takes about 1.5 megabytes of space, requiring roughly 12 minutes to download over a modem. Minimizing graphic file sizes is crucial to prevent user frustration caused by slow download times on slower internet connections.

Using Web-safe colors ensures that graphics display consistently across different computer operating systems running in low-color modes. Many users and performance-focused programs run on an 8-bit color display supporting 256 colors. Because PCs and Macs use different palettes, only 216 colors work safely on both without creating odd color blends.

The author recommends checking www.lynda.com/hex.asp to find safe color combinations.

Publishing and Multimedia

Publishing web pages to a host server is typically accomplished using File Transfer Protocol (FTP), requiring specific steps to connect and upload text and binary files correctly. HTML files must be designated as Text, while graphics and multimedia require the Binary designation, or an Automatic setting.

Using Fetch, a popular Macintosh FTP client featuring a running Scottie dog, or WS_FTP Pro for Windows makes file transfers easy.

• 1. Connect to the Internet.
• 2. Start your FTP program.
• 3. Enter the host name (e.g., ftp.mysite.com).
• 4. Enter the username (anonymous is often allowed).
• 5. Enter the password.
• 6. Enter the target directory for your files.
• 7. Click OK to connect.
• 1. Click the appropriate option for the file type: Automatic, Text, or Binary.
• 2. Click Put to write your file.
• 3. Select the file name in the dialog box and click OK.
• 4. Choose Quit or Exit from the File menu when complete.

Animated GIFs provide the simplest and cheapest way to add motion and multimedia to a web page without requiring special server software or plugins. An animated GIF functions like an old-fashioned flip book, sequencing a pair up to a couple of dozen still images.

• 1. Install Ulead GIF Animator on your machine.
• 2. Create a few GIF images in sequence of the exact same size.
• 3. Start Ulead GIF Animator and open a new file.
• 4. Enter the Width and Height of your images to set the canvas size.
• 5. Click the Add Frame button in the Frame Panel, press the Ins key, and select your image.
• 6. Click the Optimize tab to reduce file size by removing duplicated information.
• 7. Save the file as a GIF format.
• 8. Insert your animation as a GIF file in a Web page and test it.

QuickTime movies and MP3 audio files can be easily embedded or linked within web pages using simple HTML tags to deliver rich multimedia experiences. QuickTime uses the embed tag for direct playback, while MP3 files use standard anchor tags to link to audio content.

• 1. Install QuickTime and the QuickTime plug-in on your own machine.
• 2. Create or obtain a QuickTime movie or MP3 file.
• 3. Embed the movie using the embed tag or link to the MP3 file using the anchor tag.
• 4. Test the file and web page locally in browsers like Internet Explorer and Netscape Navigator.
• 5. Upload the changed Web page and media file to the Web and test again.

Conclusion

You now understand how foundational HTML, careful graphic compression, structured site planning, and adherence to publishing dos and don'ts combine to create an effective web presence. Publishing a successful page depends on maintaining a clear process from initial site planning through local testing to final server uploads. You can apply these systematic rules to build and maintain your own web pages.

1. Plan your site structure before writing any HTML code to define your purpose and audience clearly.
2. Keep your pages simple by relying on standard HTML tags and readable text formatting.
3. Optimize all graphic files by reducing dimensions and colors to ensure fast loading times.
4. Test every file locally in multiple web browsers before transferring data to your remote server.
5. Upload your complete file directory via FTP and verify all internal links function correctly.

10 Key Ideas

1. The World Wide Web relies on specific protocols and markup languages to assemble pages, and web sites must be categorized into distinct types based on their goals.
2. Free web hosting services and alternative platforms provide guided creation tools and storage space while imposing specific storage, bandwidth, and content limits.
3. Browsers ignore standard paragraph breaks and tabs in text, requiring explicit HTML tags to structure content correctly.
4. Structuring a personal home page into distinct content blocks simplifies the writing process and prepares the site for future expansion.
5. Web writing requires a distinct style based on the physical limitations of computer screens and the unique behavior of online users.
6. Minimizing graphic file sizes, selecting appropriate image formats, and uploading files via FTP are crucial for a successful live website.
7. Personal web sites function effectively as online shares of identity and family events when kept simple and updated regularly.
8. Commercial sites must clearly state the business purpose, maintain professional visual standards comparable to competitors, verify permissions for all assets, and monitor usage metrics.
9. Web developers should use GIF format for simple graphics with solid colors and JPEG format for complex photographs.
10. Publishing a successful page depends on maintaining a clear process from initial site planning through local testing to final server uploads.