skip to content

• Home
  • About
• Cabrillo
  • DM56
    • Syllabus
    • Schedule
    • Exercises
      • Exercise 1
      • Exercise 2
        • Feedback form
      • Exercise 3
        • Feedback form
      • Exercise 4
        • Feedback form
      • Exercise 5
        • Feedback form
      • Final project
        • Feedback form
    • Extra credit
    • Grades
    • Student sites
  • DM60
    • Syllabus
    • Schedule
    • Exercises
      • Exercise 1
      • Exercise 2
        • Feedback form
      • Exercise 3
        • Feedback form
      • Exercise 4
        • Feedback form
      • Exercise 5
        • Feedback form
      • Exercise 6
        • Feedback form
      • Exercise 7
        • Feedback form
      • Exercise 8
        • Feedback form
      • Exercise 9
        • Feedback form
      • Exercise 10
        • Feedback form
      • Final project
        • Feedback form
    • Extra credit
    • Grades
    • Student sites
• Resources
  • Tutorials
  • Links
• Forum
  • Forum tips
• Sitemap
• Contact

The Process of Creating, Publishing, and Validating a Web Page

The tools:

• Text editor
• Web browser
• FTP program

The process

1. Create the Web page in a text editor.
   • A Web page "skeleton" consists of:
     • DocType
     • HTML section
       • Head section
         • Character encoding meta tag
         • Title
       • Body section
         • Main headline
         • Paragraphs
         • Validator button code
   • Save the file as a "text" document (your editor may list the format as "text", "text-only", "ASCII", or "ASCII text"). Do not save as RTF, Word, etc. (If the editor has a "save as HTML" feature, do not use it!) See Text Editors for HTML and Script Editing.
   • Save the file with a filename extension of ".html" (not ".txt" or any other extension). If the page is to be a home page, it must be named "index.html" (all lowercase).
   • Never use spaces in a name of a file or folder that is to be on a Web server. See the How to Name Files and Directories page.
2. View the page locally in a browser.
   • Drag the icon of the file into a browser window. Remember that you are only seeing the version of the page as it was last saved.
3. Upload the page to the Web server.
   • See the How to Upload to Webhawks.org with Fetch (Macintosh) and How to Upload to Webhawks.org with CoreFTP (Windows) for information on uploading.
4. View the page remotely in a browser.
   • Enter the URL of the page into the browser address bar and hit return.
5. Validate the page.
   • See How to Use the W3C HTML and CSS Validators.
6. Fix the errors, and re-upload the corrected page.
   • Edit the page in the text editor again, save it, and reupload it. When you upload a revised file to the server, it will usually just replace the earlier version (depending on how your FTP preferences are set).

The difference between local and remote

While you are viewing a page in your browser, look at the URL in the browser's address bar. If the URL starts with the word "file" as in:
file:///Users/john/Desktop/duh.html
it means you are looking at a "local" file on your disk, not a file on the server.

If the URL starts with "http" as in:
http://webhawks.org/~dm60asmithjo/
it means you are looking at a "remote" file on the server.

The validator buttons are meant to work with a (remote) file on a Web server that is reachable through the Internet, not with a (local) file on your hard disk. If you are trying to use the validator buttons on a local file, you'll instead need to upload the file, view the file (the file on the server, not the file on your disk) in a browser, and then click on the validator button.

Different ways to open a Web page

When you double-click on a file on your computer, the operating system (Mac or Windows) looks at the filename extension of the file to determine what program to use to open it. Your operating system preferences associate filename extensions with specific programs, such as ".doc" with Microsodt Word, or ".jpeg" with Photoshop, for example. So when you double-click on a Word file (which has a filename extension of ".doc") the operating system will automatically open the document with Word. (Be aware that if your operating system's preferences are set to not display filename extensions, you may not be seeing the real filename. For example, if you look at the icon of a Word document on your computer and it says "Blah" instead of "Blah.doc" you are not seeing filename extensions.)

But while you always want to open a Word document with Word, you don't always want to open a Web page with the same program. To edit the code of the page, you need to open it with a text editor. To see what the page looks like on the Web, you need to open it with a browser.

A Web page, also called an HTML document, is just a plain text file that has a filename extension of ".html" to identify it as a Web page. The preferences of most operating systems are set to open a browser when you double-click on a file with an "html" extension (usually this means Safari on a Mac, or Explorer on Windows). But you may wish to open the page with a different browser, or with a text editor. So you need to know how to choose the program to open the page.

To open a Web page with the program of your choice, right-click (if you are on a Mac with no right click button, control-click) on the icon of the file. From the popup menu that apperars, choose "Open with" and choose the program. Alternatively, you can use the drag-and-drop method: drag the icon of the file you wish to open onto the icon of the program you wish to open it with.