Heather Lee's HTML
Lesson 1
Learning HTML is not a difficult task if you are willing to spend a bit of time to master it. Several people have asked me to teach them the basics of creating web pages with HTML. Since the information is organized already, it made sense to share it with anyone else seeking to learn it. I have managed to learn what I know of web page creation through books, online lessons, looking at the source code of others, and experimentation. I am by no means an expert, but these lessons should be enough to get you started on creating your own web pages.
HTML or Hyper Text Markup Language is used to define the way in which information should be organized and displayed by browsers (for example Netscape and Internet Explorer). It is made up of a simple text file that has been saved with the extension .html. The text file allows the web page author to control various properties of the page through the use of tags. These tags are commands that the browser reads and acts on in various ways. For example the tags might tell the browser to display a paragraph of text, make the background green, or to show an image.
It is possible to edit .html files entirely in a text editor such as Notepad. You need no special programs or books to experiment with HTML, you basically just need a browser and a text editor. In fact, although there are many editors available, I recommend that you use only a text editor when first learning so that you will gain a good understanding of tags and their attributes. Once we have covered the basics, I will provide links to a few freeware HTML editors. At that point I will also provide you with information about actually putting your new web site online.
Included with these lessons is also a list of some of the online resources I have found useful, including a link to the World Wide Web Consortium otherwise known as W3. W3 is the group that publishes the standards for the various html versions, and should be referred to often. If you find errors in the information provided here, please let me know. The various languages of the internet are constantly evolving, and learning how to use them correctly is an ongoing process.
Keeping all of that in mind, we might as well get started........
A Simplified HTML Page:
<head>
<title>My First Page</title>
</head>
<body>
Hi, Welcome to my first page.
</body>
</html>
The Basics
The above text demonstrates what a simple html file would like like opened in a text editor rather than a browser. All of those weird looking bits of text in between opening "<" and closing ">" brackets are called tags.Tags are used by the page author to explain to the browser the way in which the content (images, text, sound, etc...) is to be organized and displayed.
The writing in between the <title> and the </title> would not show on the page, but it would be displayed in the bar on the browser bottom that shows the name of the page you are on and is used by some search engines in the results they display. The content written in between the <body> and the </body> would show up on the actual web page. So basically what I just typed would appear as a white screen with the words "Hi, Welcome to by first page." written across it.
At this point it is good idea to start taking notes or copy this into a text file, it sounds simple at first but its easy to get confused....
Tags are differentiated from the regular text by the fact they are enclosed in the "<" and ">" symbols. This tells the browser to read them as commands rather than to just display them as text.
You may have notice that each of the tags I have demonstrated thus far are written twice, for example <head> and </head>. The first tag, in this case <head> marks the beginning of command. The "/" symbol is used before each closing tag, right after the first bracket, to tell the browser that the area started by the opening tag is finished. There are a few commands that have no closing tags, and a few for which the closing tag is optional. In the optional cases it is always best to include the closing tag as it saves on confusion, and will aid with the eventual transition of web pages to xhtml*.
On to Lesson 2
| Lesson 1, 2, 3, 4, 5, 6, 7 | Lesson Links | Lesson Clip Art |
*An important note about HTML, XHTML, and CSS:
HTML was originally used simply as a way to display information in an understandable and practical manner for its exchange between computers. For instance, tags were used to indicate things like lists and paragraphs. As the popularity of the web increased however, html was stretched to include aspects of visual design as well... things like colorful backgrounds and fancy layouts. It has, over the last few years, become clear that in the interest of web page upkeep and accessibility, it is necessarily to split the design aspects of web pages from the content itself. This need led to the creation of Cascading Style Sheets. CSS can be used to indicate layout preferences that will be applied to information placed in an HTML or XHTML file. Another thing worth mentioning is that there will probably be no further versions of HTML released, XHTML is its successor. I will discuss CSS as well as the direction of web design further when we have covered the basics of HTML.
(This make not make much sense at the moment, but you should be aware of it in any case. It will become more understandable after we have further discussed the tags available in HTML and their effects.)
