Appendix 4
Steps to Build a Web Page
Okay, you've read, marked up, skimmed, tried out, and thrown this book at your cat. While it should all fit seamlessly together for you, isn't there just a simplified set of steps to authoring a web page? Sure! Keep in mind you still need to plan your workflow, organization, timeline, and launch-related tasks. However, there are basic steps to just diving in and building a web page from scratch.
Step 1
Get your coding tools open and ready: text editor and browser to view your work
• In your text editor, make sure you have word wrap and line numbers visible.
• Choose where you will save your web page's file and images.
• Make a subfolder in this location called images.
• Save a blank file called index.html in this location.
Step 2
Code the basic web page structure:
• HTML wrap – open and closing html tags.
• One (1) Head open and close - inside the html wrap.
• One (1) Body open and close - inside the html wrap and below the opened/closed Head section.
• SAVE.
Step 3
• Choose and code your doctype just before your opening HTML wrap.
• Clarify your opening html tag: <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
• SAVE.
Step 4
• Add content to the Head section of the page:
• Title
• Various metadata tags
• Styles (if using)
• Useful comments
• SAVE
Step 5
Author the Body section of your website:
• Determine the width of your website. Steps to Build a Web Page
• Use a table for layout - <table>, <tr>, <td>, colspans, rowspans, etc. Decide if you want flexible, fixed, or mixed widths. (Or use CSS Div layouts if you have pro- gressed to that).
• Use HTML Commenting to announce the segments to yourself to keep things straight.
• Code an Identification Banner segment to identify your page, give a logo, graphic, and/or title text.
• Code your site's Navigation links segment (absolute and relative URLs).
• Code the Content segment for your reading and image-related content.
• Code your Footer segment – copyright information, contact email, disclaimer link, etc.
• SAVE.
Step 6
Fill in your Content segment with the reading and image-related content your visitors will view
• Headers
• Subheaders
• Paragraphs of text
• Tabular table information
• Lists (bulleted, numbered)
• Image(s)
• In-text links
• Whatever else
• Anchor “back to top” links for more than 2 screen scrolls down
• SAVE OFTEN.
Step 7
• Review your coded web page in at least 3 current browsers (Internet Explorer, Firefox, Google Chrome, Safari, etc.)
• Check your layout in a free multi-browser comparison tool.
• When you make changes and corrections to your code, refresh your testing browser view.
• Keep checking your code to clean it up so it works.
• SAVE OFTEN.
Step 8
Your web page is standards compliant when your code validates and you can add a W3C approval icon/link to your page. Therefore,
• Validate your code with the W3C validator – in the “Validate by Direct Input” tab.
• Don't panic.
• Look for and correct errors one at a time, since one correction can fix several apparent errors.
Step 9
Make a BACK UP of your web page(s), especially your index.html. Always.
Step 10
• Upload your web page and all related images to the Web host server you plan to view it from.
• Verify it works when “live” in the world.
• Test all the links.
• Fix whatever is not working right.
• Validate your code with the W3C validator by typing your URL in the “Validate by URI” tab.
HINT: If you build a page that works, make a backup of the project. Call this backup project directory Template. Then, in the page, remove the content, leaving just the shell code for you to reuse again, and again, and again.