Introduction to HTML (Text Version)


       Welcome to Fort Lewis College and SCILnet online Web authoring tutorial. This tutorial is designed to teach you the basics of Hypertext Markup Language or HTML. HTML is a way of formatting text and graphics so that they can be viewed in a WWW browser such as Netscape or Internet Explorer. HTML seems complex at first, but I think you will find it very doable once you go through this tutorial. By the way, the right window of your browser contains information relating to this introduction (we'll be using it in a couple of minutes). This will allow you to follow along with the introduction and see the examples referred to in this introduction.

       The approach we take in the tutorial is to teach you the basics of writing HTML code. Some people would disagree with this approach since there are HTML editing tools widely available that don't require knowledge of HTML coding. Examples of these editors are Microsoft Frontpage and Netscape Gold. While these editors are relatively easy to use, it is our experience that a basic knowledge of HTML comes in handy. There is nothing like going straight to the code to fix a problem that defies resolution with one of these kinds of editors. This tutorial recommends the most basic of editors, for example, Notepad for the PC and Simple text for the Mac. Every Mac or PC comes with one of these editors. Once you have done the tutorial, you may want to experiment with some of the HTML editors that are out there. Some of these work directly with HTML code and give you shortcuts for writing the code, while others are known as WYSIWYG (or "what you see is what you get"). The WYSIWYG editors don't require knowledge of HTML, but are not always as WYSIWYG as they claim. A third type of HTML creation tool can be found in document converters, which will convert word processor documents and spreadsheets into HTML format. While document converters can be time savers, the results of the conversion are often unpredictable and require "touching up" by going into the code and making corrections. So, until these tools mature, we are taking the safe, but perhaps more difficult route of teaching HTML coding. Certainly, at some point in the future, knowledge of HTML won't be required, and will function much in the same way as page layout software (like Pagemaker) functions now.

       The way the tutorial works is that many of the basic HTML tags are demonstrated on right frame of your browser window. Each section shows the raw HTML code in the left pane of a table. The right pane displays how the WWW browser interprets that code. You should be viewing the first section right now in the right frame of your browser. It demonstrates the basic structure of an HTML page. Beginning and ending each HTML page are HTML tags. Notice that the ending HTML tag has a forward slash in front of the HTML. Many tags work this way, though there are some tags that don't have an ending tag. Within the HTML tags are two basic parts: the <HEAD> (notice the beginning and ending <HEAD>, </HEAD> tags) and the BODY, with it's corresponding beginning and ending tags (<BODY>, </BODY>). Nothing between the HEAD tags shows up in the browser window. The main element of the HEAD is the TITLE. The text typed in between the TITLE tags will show up in your browser title bar at the very top of the browser, but not in the browser window. The page you are viewing is entitled "Intro to Web Authoring", so that should appear in your title bar. Everything that appears in the browser window must be placed between the BODY tags. All of the tags that we will look at in this tutorial will be of this type.

       The content of the first example is "Hello World". If this HTML sample were loaded into a WWW browser, the only thing that would show up in all of the code on the left is "Hello World". Seems like a lot of work just to type hello world! But, you only have to type in the basic structural tags once, and most HTML pages contain a lot more than just "Hello World".

       If you scroll down to the next example you will see that we can format text in bold and italic by surrounding the words with the appropriate tags. In this case "Hello" is surrounded by bold tags and "World" is surrounded by italic tags.

       The third example, "The Heading Tag" allows you to create headings much like you would use in a word processing document. Note that the larger the number in the tag, the smaller the header. <H5> is the smallest the header tag will go. It is important to note that the heading tag automatically puts the text that it surrounds on a line of its own. Therefore, you can't use the heading tag to create larger text within a paragraph. There are other methods of doing that, which are covered later in the tutorial.

       In the next example we see the use of the <BR> and <P> tags. These tags create line breaks. For example, if you wanted to put an address on your page, you would need to place a <BR> at the end of each line, otherwise the WWW browser will just run all of the lines together. The <P> tag creates a new line, but includes a space in-between. As you may realize by now, it is useful for starting a new paragraph. Note that the <BR> and <P> tags have no ending tag.

       Scroll down to the next example to see the Horizontal Rule <HR>. This places a divider line across the page as shown.

       The next example puts several of these tags together to create a simple document.

       The final example of this session shows the <PRE> tag. It is good for including preformatted text, such as tables "as is". Just put a <PRE> in front and a </PRE> at the end and you are set. The example here shows a little ASCII art. But without the <PRE> , it is just a string of letters.

       Hopefully, you now have an idea of the way the tutorial works. At this point, you can click on the link at the bottom of the page to access the Lab Exercise for this section. Subsequent sections work the same way (minus this introduction). Simply review the code examples and then try it on your own by way of the accompanying lab exercise. There is a Lab Exercise corresponding to each section. Good luck and may the WEB be with you.

Assignment: HTML-Web Authoring
      You will construct a personal web page for this module. See your trainer if you have any questions.


Go to Exercise 1

SCILnet Home
Module Directory
Intro to HTML Home
SCILnet Trainers