Understanding Basics and Definitions

In this tutorial I assume that you know how to code basic HTML (HyperText Markup Language) and that you have heard of CSS (Cascading Style Sheets). If you need a refresher on HTML, brief definitions and a good link to an HTML tutorial are in the Glossary

I also assume you know how to use Notepad - a non-WYSIWYG (non-What You See Is What You Get) piece of software that is useful for typing simple text into a file.

Below is a review of some basic concepts and advice on developing websites armed with just Notepad.

A Little History

Since the turn of the century the Internet has grown in leaps and bounds. With growth comes change. The fast growth of the Internet has resulted in much "junk code" that was put together quickly and not expected to last. The result is mountains of bad HTML and a large group of people who feel there has to be a better way.

The commonly held current view of a better way is to strip formatting out of the HTML tags and put it into Cascading Style Sheets (CSS). This allows you to create a style that can be applied to one or many web pages.

The World Wide Web Consortium (W3C) is the standards group spearheading the drive towards CSS, as well as being the focal point for many other web standards. The W3C have excellent tutorials for the many standards they have developed. The W3C tutorials are free, comprehensive, detailed, and excellent for web developers with a lot of background experience. Once you feel comfortable with the basics of CSS, I recommend you visit their website to learn more.

World Wide Web Consortium

The tutorial you are in right now is not as detailed or comprehensive as the W3C tutorial. It gives you the basics on how to create a web style using CSS and some easy exercises. It is an easy introduction to CSS.

Some Definitions:

• HTML - HyperText Markup Language

  An HTML file contains markup tags around content. Web browsers interpret the markup tags and display the content accordingly.

  Web browsers can operate on many kinds of systems, from Personal Computers (PCs) to cell phones. An HTML file is cross-platform, which means that it does not need to change to suit the system the web browser is running on.

  The down side of HTML files is that they are often a convoluted mixture of content and format. These files are easy to write, but difficult to maintain.

  The typical file extension on an HTML file is: .html

• XML - eXtensible Markup Language

  XML is the W3C recommended standard for markup tags which describe data.

  The data described by XML tags can be content for display in a web browser, or data prepared for entry into a database, or any data that can be interpreted by any XML-compliant software. The standard tags free the data from any software or system-specific format.

• XHTML - eXtensible HyperText Markup Language

  XML standards applied to HTML.

  XHTML is a more stringent version of HTML where every markup tag is opened and closed, so that every web browser, in every environment, is able to interpret the tags correctly.

  XHTML is set to replace HTML and is strongly recommended by the W3C.

  Style parameters are not imbedded inside HTML markup tags when the XML standard is applied.

  This tutorial follows the XHTML standards.

  The typical file extension on a XHTML file is the same as for an HTML file: .html

• CSS - Cascading Style Sheets

  The style parameters that web browsers use when displaying either HTML or XHTML content.

  Cascading Style Sheets contain markup tags to format the display of HTML or XHTML content.

Tips to save you time

Creating web pages in Notepad can be aggravating if you are not methodical. Beyond suggesting yoga and soothing music, to help you through this tutorial I recommend that you open both your .html and .css files in Notepad; write methodically; remember to save your changes frequently; and test the results of your changes frequently.

To Work in Notepad:

1. Open Windows Explorer.

   The windows shortcut for this is to hold down the key that has the Microsoft flag on it, and then press E.

2. Navigate to your .html file.
3. In Windows Explorer right-click your .html file.
4. Select Open With.
5. Select Notepad.
6. Navigate to your .css file.
7. In Windows Explorer right click your .css file.
8. Select Open With.
9. Select Notepad.

To write the .html content file methodically:

1. Insert both the opening and closing tags before you put content between them.

   This helps you follow the XHTML standard as it ensures you have both opening and closing tags for every element. For example:

   First type: <p></p>

   Then: <p>type your content between the tags</p>

2. Before doing anything else, code the header section content.
3. Copy a working file with the correct header to a safe place and use it as a template for your other files.

To write a .css file methodically:

1. Add each style one at a time.

   For example: Add the style for heading 1:

   h1 {font-size:x-large; color:green}

2. Test the results.

   I recommend you test each new style in at least 3 different web browsers before deciding to keep it.

To test your results whenever you change anything in one of your files:

1. Save the files in Notepad.
2. In Windows Explorer right-click your .html file.
3. Select Open With.
4. Select IE, Opera, Firefox, or another web browser you have installed.
5. Or, if your file is already open in your browser, Reload the .html page to see the changes.