I am what you'd call a "modernized conservative." I stick to the old ways but not because I don't like to try out the new ways. I stick to the old ways because I've tried the "new" ways and found that it is still useful to know the old ways. While I no longer use a typewriter for writing my papers, I still use the paper notepad for scribbling my notes. And I am not ashamed of it either. I have the same attitude towards writing webpages
Since the time I started writing webpages in 1999, I've seen several software applications that either improved working conditions for raw HTML coding or did away with it altogether. These latter come by the name WYSIWYG. These are applications that give one the impression that one is directly working on a webpage, putting content into it and formatting its elements. The former group of applications on the other hand improve upon the limitations of the ASCII text editor that comes bundled up with an operating system. In Windows, for example, the ASCII text editor is called a "NotePad", in Linux, "Vim."
I have always written about learning to create a webpage using raw HTML, and have discouraged beginners from using WYSIWYG applications. And this for a very simple reason: if a beginner starts using a WYSIWYG, he/she will not learn how to troubleshoot a page especially when it goes awry in a non-CSS sensitive browser, for example or when images thought to have been embedded, suddenly disappear once a page has been uploaded to a server.
I don't have anything against WYSIWYGs. I use them and I enjoy comparing how different WYSIWYGs perform different tasks. What I am against is the idea that one can write webpages using a WYSIWYG and forget about HTML.
This page was written specifically for the purpose of teaching beginners about HTML. I do this in the hope that inspite of the ever growing number of WYSIWYG applications on the web today, people will still look to their NotePad (or its worthy replacement) for a cheap and simple way of writing webpages.
Back in the days when there was yet no WYSIWYG editors, you needed to have two things to make a webpage. A text editor (any will do) and knowledge of the most basic HTML codes.
Your Windows Notepad or Vim (if you are into Linux) are the simplest of text editors. Hardcore webpage writers follow a three step process for editing a webpage. Here they are:
Before the three-step process, however, you've got to prepare the necessary materials.
First, open a new file in the text editor and save it with the extension *.htm or *.html1.
Next, open your browser (whether it is I.E. or Netscape). On the browser panel click File --> Open --> the webpage you just saved.
Now, here comes the three-step process in editing a webpage:
"Isn't HTML difficult?" "Aren't there many codes to remember?
The answer to both questions is a big fat "NO". Learning to code in HTML is like learning to swim. One gets by with a few simple strokes at first, and then as one gains confidence through practise, one learns the rest. When I started to write web pages with Windows Notepad, I started with ten codes (or tags). I later on built my knowledge of HTML codes with constant practice and some tutorials supplied by the teen-agers I met on the web. Here is a list of those ten tags:
Notice that in this list, there are only three tags that are not paired (viii,ix,x) while all the rest are paired. The first four pairs of these tags (i - iv) constitute the basic structure of a webpage. In fact, an "empty" webpage has these tags. These are -- in addition to the extension *.htm or *.html -- the sine qua non of a web page.
The HTML tags follow a particular arrangement:a "nesting" structure, i.e. an HTML tag is placed between the opening and closing tag of another. Let me illustrate this using a webpage in its source view.
Notice how the parts of the webpage are carefully marked using codes that are sandwiched or better, nestled, with each other. The HEAD of the Webpage encloses the TITLE, while the BODY envelops a HEADING (H1) and a paragraph (<P>). Both are in turn enclosed with the codes for HTML. Notice further how the opening and closing tags (the one with a "/") are neatly arranged. (You can copy this sample into a text editor, save it as "anypage.html" and view it in a browser and see what happens.)
In the list we have above, tags nn. v-x will always be found between the opening and closing BODY tags. The BODY is the area that is made visible in the main browser window. It is there where you have the headings, the paragraphs, the line breaks, the horizontal rules and the images.
The HEAD part of the webpage hides many things that will be understandable to an advanced webpage writer. If you view the source of this webpage, you'd find that I've put other things in the HEAD: meta tags (for search engine robots) and the stylesheet (css). The TITLE is actually displayed in the upper left corner at the top of your browser.
Click here for a more detailed explanation of these Ten HTML Codes
When you are finished writing your webpage, the next step is to make it available on the Web. Before there was anything like Frontpage Extensions, there were two ways of doing this: the browser FTP upload and the FTP application upload.