eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Coding Style  
  • As you begin coding documents for your company or for yourself, it will benefit you greatly if you define your own standards and style that you apply without question to every page you build.

  • This will help immensely when you 1) rewrite all your pages and can use a script to replace one set of standard text with another set of standard text instead of doing all the changes by hand and 2) when someone else tries to modify or add to your collection of web pages.

  • Style is a personal thing, but there are a few standards that have become...well...standard.

    • Use capital letters for tags, arguments and values.
    • Use a space before and after equal signs within tags.
    • Use quotes around tag attribute values whether or not they include white space.
    • Use embedded spacing in your HTML code so that the code itself looks similar to how it will be formatted by a browser. In other words, use indentation and paragraph markings in the code when you specify paragraphs in the code.
    • Keep your line width to 80 characters so that UNIX editors will be able to read your code. If a tag goes beyond 80 characters, indent continuing attributes.
    • Follow HTML standards even if browsers will let you slide. This means, use closing tags like </HTML>
    • Include no extra spaces in anchors and only anchor meaningful words

Coding Style by Example

  • Here is an example of "bad" code.

    <HTML ><head><Title>Hello World</TITLE></Head><Body bgcolor=white text=black> This is a very simple web page. Notice that the browser does not pay attention to spaces that we add to our document unless you specify what type of spacing you want<p>Like when you use a paragraph tag or a <br> break line tag. <A HREF = "next.html"> click here to go on to the next page </A></BODY>

  • Here is an example of good code:

    <HTML>
    <HEAD>
    <TITLE>Hello World</TITLE>
    </HEAD>
    <BODY BGCOLOR = "FFFFFF" TEXT = "000000"
                 VLINK = "AAAAAA" ALINK = "564345">
    
    <!-- BEGINING OF PAGE BODY -->
    
    This is a very simple web page.  Notice that the
    browser does not pay attention to spaces that we
    add to our document unless you specify what
    type of spacing you want
    
    <P>
    
    Like when you use a paragraph tag or a
    <BR>break line tag.
    
    <P>
    
    Click <A HREF = "next.html">here</A> to go to the next page.
    
    <!-- ENDING OF PAGE BODY -->
    
    </BODY>
    </HTML>
    

  • Notice how the example of "good" code is VERY easy to read. For example, the paragraph mark in the code actually had new lines around it in the code so it actually looked like a paragraph mark.

  • As your code gets more and more complex, good coding standards will become more and more important.

  • Finally, take some time to get familiar with an HTML Validation Program that you can use to check your code against the various HTML standards.

Previous Page | Next Page