The Teaching Tree

Español | Deutsche | Français | Italiano | Português

Personal Pages: The Web, Your Way, Part 2: HTML

Ok. You're intrigued by the idea of having your own personal pages. But...you've never written html code in your life; you've never even seen html code, and wouldn't know it if it walked up and said "hello!"? Not to worry. There is a way for you to get acquainted with html, relatively easily and painlessly. For this, you will need your browser (either open two windows, in Internet Explorer or open two tabs, side by side in a tabbed browser such as Firefox.) You will also find it helpful to have available an html tutorial site such as htmlbasix or the w3c html tutorial provided in Part 1 of this post topic. Also check out html Goodies. As you can begin to see, there is no shortage of excellent resources available online for any level of learning, and a lot of it is free!

For Internet Explorer: Choose View>>Source to view the source code for any webpage you like (including the source code for this blog entry!) With the page itself loaded on one page, and the source code page (which may not look like anything that could possibly make sense) open in another window, you will need to begin at the top of the source code page. Notice there is a tag,"html" enclosed in brackets (<>) This is to tell the browser to prepare to "read" the html document. Similarly, at the end of the document, the closing "html" tag (in <> wwith the html preceded by a /) indicates the document < head > tag near the top of the page. That's where the heading of the page will appear, and you can place code in that section as well, to help the page look and work as it should. There is also a < /head > tag, to show where the heading information should end.

Further down the page, there is a < body > tag, which is where the code for the body, or main part of the page, is placed. Look at the loaded page, then at the source code, and compare them to see where things show up in the source code page. Incidentally, viewing source code is a great strategy for learning how an author made a page look terrific...or terrible. Go ahead and practice viewing the source code for some of your regular sites of interest. Use the tutorials, and pretty soon, html will begin to make much more sense.

In Firefox, you can open two tabs, side by side, and use the View Source With extension to open the source pages with your favorite text editor, then just follow the same steps as outlined for Internet Explorer.

Also, get out your text editor (notepad, or whatever flavor you like best; it needn't be fancy to work), and use what you've seen in the source code pages and in the html tutorials to see if you can write some html code yourself, then save the document as .html or .htm format. Don't forget to save your work frequently (after every three to five edits, to make it eaiser to spot when you make mistakes (and so that the errors you do make will be easier to correct.) Now, open it using your browser! That's right. It will work. This is also the way you will write the code for your personal pages. Don't worry if you don't get it exactly right at first; most errors are easily fixed, and it is a learning process, so give yourself permission to experiment, just to see what happens. Nothing is carved in marble. You can even create several pages and link them together into your own personal mini-site with the pages stored on your hard drive in a folder (or several). Coming up, we will explore what could be included in your pages and some benefits of using them.

Add this post to Del.icio.us or Furl

posted by Angelsong @ 2:38 PM