Creating web pages with text editors

Though large web sites with many pages are often created with the help of web editors or some publishing system, it is best to start creating XHTML pages with a normal text editor. This is an excellent way to learn the XHTML language.

Writing a web page with a text editor differs from e.g. using a word-processing program in that the web page in the text editor does not look like it will in a web browser. For anyone used to the wysiwyg principle this may require some time to accustom themselves, but it does not take long to learn to work with the XHTML code.

Work phases in a nutshell

  1. Open a text editor, such as Crimson Editor available in the UH network (it can display the XHTML mark-up in a different colour fhan the rest of the text), Notepad (on Windows) or pico (on Linux).
  2. Create a basic XHTML page with the basic structure of an XHTML page. The easiest way to do this is to copy the example presented earlier.
  3. Store the file on your network unit or in your home directory under the name index.html (the file ending for web pages is usually .htm or .html). If one directory contains many pages, the one called index.html is usually set as the main page on the server.
  4. Write the text you want to display on your web page inside a body element and structure it with different elements. Do not encode the layout into the web page, but do so in a separate CSS file. Do not forget to create a link from the head element of each web page to the CSS file.
  5. Make sure that every start tag has an end tag in your mark-up (e.g. </p>). You can use line breaks in your text to clarify the code, since the web browser will not display them at all.
  6. Store your web page and open it with the File menu in a browser. Edit the page if necessary, then see what the changes look like by clicking on the Refresh button in the browser.
  7. When you are satisfied with the page, you can check or validate the mark-up.

Some page editors for editing web pages are Nvu (freeware!) and DreamWeaver (commercial).