Webmastering

Basic HTML

HTML operates on a system of tags. These tags go along with the text (called "content") of the page and tell the Web browser how stuff should appear on the screen.

The syntax, or grammar, of the tag system is quite consistent and, therefore, should be easy to remember. All tags have what is called an "open tag". The open tag begins or opens the instruction. Similarly, all tags have a "closing tag". It closes the instruction. Between the two tags is the content, or words, that the tag allies to.

For example: <Title>My Web Page</Title>

<Title> is considered the "Opening Tag",
</Title> is considered the "Closing Tag", and
My Web Page is the content that is being affected.

Rules about tags to help you remember their format:

All tags appear within arrow brackets: < >
All closing tags have a slash inside the brackets but before the command: </ >
The command or tag element is between the arrow brackets and tells the Web browser what to do: Title
Many tags are nested, similar to measuring cups or mixing bowls in the kitchen at home. This allows you to format an item in a variety of ways.
Generally, Web browsers are not picky about upper or lower case tags; but human eyes might be. In class, format your tags as either all uppercase or all lowercase.
Not all tags include an element in the middle; some are empty and stand alone.

Starting Your Web Page

Until a later time, we will be using Notepad for the creation of our Web pages. I know, I can hear you over here! The reason we are learning in Notepad is because a general knowledge of HTML without the crutch of a software WYSIWYG program will give you design flexibility later. Are you ready?

Step 1:

Open Notepad and size it on your screen so you're comfortable with its location.

Step 2:

Set up the basic format of the page.

All pages begin and end with an HTML or html tag. The purpose of this tag is to further reinforce to the Web browser that it is an HTML document. Nested inside of the HTML open and close tags will be everything else for the page.
Immediately below the open tag for HTML with be the tags for the Head (short for "heading"), as well as its contents. One of the more important tags inside of the Head tag is Title (and it is required). The contents of the Title tag will be the name that appears in the Title Bar on the Web browser. Other tags inside of Head are what are known as meta tags, which can be very useful. We will address these later.
The Head tags are followed by the tags for the Body of the Web page, which includes pretty much everything else, all nested inside of the Body tags.

<HTML>
<HEAD>
<TITLE>Pratice Web Page by Your Name</TITLE>
</HEAD>
<BODY>

This is an example of unformatted or standard text in an HTML document. Standard text can be added to an HTML file by typing with little knowledge of tags.

</BODY>
</TITLE>

Step 3:

Save (often)! When saving in Notepad, you must always remember to include the file extension; otherwise Notepad will assume it is a text or .txt file and it will be difficult to use. Remember the rules for saving a Web page.

Preview the page by opening it in a Web browser. To be safe, open it in all Web browsers on your machine.

Troubleshoot and/or Revise if nothing appears, something is wrong ~ go back to Notepad and double check the tags (make sure they are in pairs, check spelling, closing tags must have the slash, and make sure nesting order is correct). Once you've made the changes, save the file again, go to the Web browser(s) and re-open or refresh/reload the page to see your changes.

Assignment #4

On-Line HTML Tutorials and Tips:
HTML Goodies

Previous page ~ Telecom ~ Next page