Introduction

HTML (HyperText Markup Language was designed as a simple markup language which could be used to produce documents on the internet.  Because of the language's platform-independence, it can be created on wordpad or notepad, but it must be saved in html format.

Let me explain what this means. 

You can type up your html in notepad.  When you type up the tags (the things that tell the computer what to put into your web page)  you will not be able to see what it makes until you can look at it in your browser.  Your browser is what internet program you are using to see the web sites.  When you save what you have created in notepad you have to type the name of what the file will be called but you also have to add the following:

save as:    myfirstpage.html

When naming files they must be together, any words you want, but no spaces and avoid any symbols in the name.  Notice also that there is a period and the html after it.  This makes sure that the browser will read the file.  It makes it html readable. 

Sounds silly but true.  If you still have problems check that you are saving this file as a text file.  Ask you teacher if you are still having problems.

There are four important rules for coding with HTML tags.

.

• Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the 
   tag creates a blank line and doesn't have an "off switch." Once you've made a line break, you can't unmake it.)
• The second tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with , shout your piece, and then go back to regular text with .

Your text.

The correct order is:

Your text.

 HTML is always evolving, and older browsers often don't support the newest tags. Plus you will find that some things can be done in Internet Explorer and not in Netscape, and vise versa.  This course tells you when that happens.  When a browser encounters an HTML tag it doesn't understand, it will usually ignore both the tag and the material the tag affects. This way, the newest elements will appear to viewers with newer browsers without causing problems for viewers using older browsers, who will only see material their browsers recognize. On the downside, browsers treat coding errors like unfamiliar code. If you've made a mistake while building your page, you won't necessarily see an error message; you might just see nothing at all. You should always closely check all of your pages in a browser to make sure that everything that's supposed to be there appears properly. You do this by going into FILE, then OPEN, and go BROWSE for your file to   open.  This lets you see what it would look like on the browser you have.

If it's all starting to sound complicated, relax, it's simple once you get started.  A great way to learn about more complicated HTML is to look over the shoulders of other Web page creators. If you see a Web site you like, just view the page's source to see how it was done. You should never just copy another builder's design, but most developers do borrow inspiration from other sites. Methods for viewing source vary by browser, but it's usually as simple as selecting Page Source or Source from the View menu.  When viewing source code, you'll sometimes see organizational comments from the page's author near the top of (or scattered throughout) the file. These comments are inserted with the  or  tag and often contain useful information for those who view them. For a simple exercise in reading source code, try printing a well-commented Web page from your browser and then printing the source code of that page. Compare the two documents side by side, using the author's comments to match sections of code with the visual elements they represent. You'll soon be able to zero in on specific lines of code to understand how to achieve individual effects.  But we're getting ahead of our self.  Lets get back to the basics.

START

There are certain tags you need to put in every HTML document to set it up as a Web page. Begin by opening a new document in your text editor.  In our case Notepad.

 is the first tag to appear on every Web page. Add the opening and closing tags to your page like this:

All of the page's code will be placed between these two tags, which tell a Web browser it's reading an HTML document.

Below the opening  tag, enter the  tag, which contains information about the document but doesn't appear on the Web page. Your document should now look like this:

This puts text in the browser's title bar. Your document should now resemble the example below (remember: First on, last off):

Now you're ready to add opening and closing 

 tags. Your document should now look like this:

years inside the Web page will go between the 

 tags.

Add headings and paragraphs

In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

An important heading

and here is a slightly less important heading:

A slightly less important heading

check out the different sizes.

Each paragraph you write should start with a

tag. The

is optional, unlike the end tags for elements like headings. For example:

This is the first paragraph.

This is the second paragraph.

Adding a bit of emphasis

You can emphasize one or more words with the tag, for instance:

This is a really interesting topic!

Try these ones out to see what they do:

ATTRIBUTES

Start tags may have attributes, which define some characteristics of that tag.  What I  mean is the following:

, will make all that paragraph center in the page.  You can have "left", "right", "center", or "justify".  Don't forget that if you set your paragraph like this that you have to change it back in the next paragraph.

Pictures have this characteristic also.

SCR="image/firetrck.gif" ALT="A fire engine races to the scene of an accident" ALIGH="center">

What this will do is have a picture of a fire truck.  When you put the mouse over it the words will come up and the picture will be centered on the page.  This is a lot, I know, but once you get the easy part done, all is well.  Try this.  Copy the section below, and past it in a notepad document.  Save it by calling it firetruck.html   and then open the browser and call it up to see it.  Play with what I have put here.

I can't believe that I can do this!!

this is a header.  Try others

write something here.


 

Assignment time.