October 22, 2006 11:48 PM
CHAPTER ONE:
What is HTML?
- INDEX
04) Saving Your Work!
01) WHAT IS HTML?
HTML (which stands for HyperText Markup Language) is a relatively simple language to learn. HTML is made up of two things: 1) Your text (what you want your Web page to say) and/or your images (graphics, pictures, photographs, etc. and hereafter just called images) and 2) The HTML code, called TAGS.
Tags are used to tell the Web browser (Internet Explorer and Netscape are two (2) of the most commonly used browsers, of which I use Internet Explorer to test with and also to view with) what to do. The tag part is a code (usually one or two letters) that specifies the type of effect you want. Tags are always surrounded by the less than (<) and greater than (>) symbols. So, if you see text surrounded by < and >, then it is a tag. For example, <B> is the tag for boldfacing. If you want the phrase "Terry's Web Page" to appear in bold (like it just did, without the quotation marks, of course), you type in:
<B>Terry's Web Page</B>
The result of the above line of HTML code (hereafter just called code) would look like this because of the usage of the boldfacing tags:
Terry's Web Page
The <B> says to a Web browser, "Hey! Look at what follows me. I want it to show up in bold print!". Now, it will continue to bold everything until you tell it to stop with </B>. The forward slash (/) is used as an end tag and </B> says to a Web browser, "Ok! Enough of the bold. Stop it right here!".
As you will learn later, there are several tags for other special
effects, including italics, underlining, paragraphs, lists, page
titles and more. Please refer to Chapter Two of this
tutorial for more information concerning those.
HTML is a series of coded tags that tells a Web browser
what to do with the text and/or graphics (pictures) in a Web page. A code is placed between a < and >
to turn an effect on. To turn it off, you need a forward slash in front of
the code, after the <, resulting in </.
In that line, <B> turns on bold print and </B> turns it off. Everything between those two tags will be in bold print. The line above would look like this:
This is bold.
02) WHAT IS THE BASIC STRUCTURE OF A WEB
PAGE?
The first line in your HTML file will always be the <HTML> tag. This tag simply tells the Web browser to pay attention because there are HTML tags coming up. What do you think the last line would be? If you guessed </HTML>, you are absolutely correct!correct!
So far, here's what our Web page looks like:
<HTML>
</HTML>
Since there's nothing between those two tags above, the Web page will be blank.
The next set of tags divides the Web page into two (2) parts: The head (<HEAD> and </HEAD>) and the body (<BODY> and </BODY>). You place these tags between your HTML tags. Our Web page now looks like this:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Since we have nothing but the very basic HTML tags now, the Web page is still blank. We have only used tags; we haven't added any text or images. What you just saw above is the skeleton of what every Web page starts with.
If you've ever noticed when you look at a Web page,
there is always the name (or title) of the Web page at the very top of your
browser, above the menu bar. This title (<TITLE> and </TITLE>) always goes
inside the <HEAD> section. The title needs to be a short description of
what the Web page is about.
To get that, the HTML code is entered as:
<TITLE>RiverMOO, Inc. HTML TUTORIAL: Chapter One</TITLE>
It is
all typed in on the same line.
In conclusion, below is the basic structure of every Web page. All Web
pages start with this basic structure, which I refer to as the skeleton, and build from here.
<HTML>
Open up a text editor of your choice and type in the basic HTML page above
(If you use Windows on your computer, then Notepad is an excellent and
simple way to start. For further instructions on getting started,
refer to the Getting Started page of this
tutorial). Make
sure you change the <TITLE> to what YOU want YOUR Web page title to be
and also remember not to add special tags, such as bold, to the <TITLE>
area.
Also, the text between the <BODY> and </BODY> should be what you want it
to be. To get started, you can add text similar to this (although you can
put anything you want, as well as much as you want!):
This Web page is currently under construction.
in between <BODY> and </BODY>.
If you find you need help for this exercise, click
here to be shown exactly what to type. Try to do this without the help
first, though. :)
Click here to see what you're finished Web page
should look like right now, providing you typed in the exact same thing as in
this exercise. If it looks pretty bare, remember: The only things that show up
in the actual Web page are those things that are between the <BODY> and </BODY>
tags. And all we put in the sample Web page was "This Web page is currently
under construction.". You can put whatever you want!
Congratulations on the creation of your first Web page, but before you
close the window, read the next section!!!!
Special tags do not work in the title of the Web page, such as bold, italics,
etc. So, if you try to bold the title of the Web page, all that will
happen is that your code will show up, as well as your text, since the code
ignores tags inside the <TITLE>. In other words, <B>Terry's Web Page</B>
in the <TITLE> would show up as: <B>Terry's Web Page</B>. The
actual content, text and/or images of your Web page (everything, except
the title) that you will see will always be inside the <BODY> section.
<HEAD>
<TITLE>Your Own Title Will Go In Here</TITLE>
</HEAD>
<BODY>
Everything you put in here, between the <BODY> and </BODY>, will actually be
your Web page. images, information, links to other web sites, etc. will go
here.
</BODY>
</HTML>
03) AN EXERCISE IN CREATING A WEB PAGE
Here are some industry standards for saving HTML files:
-
The default file in any directory is always named "index.html" or "index.htm", without the quotes (which won't be used from henceforth).
-
There is no capitalization in the file name.
-
There are no spaces in the name.
-
It does not end with .txt. If your saved file says index.html.txt, then you need to rename it or resave it correctly.
-
When using Notepad, the default extension (an extension is the part of the file name after the dot (or period)) is .txt. But, you do NOT want your file to be index.txt or index.html.txt, you want it to be index.html or index.htm (I prefer using the extension .html on all of my files, but this is a choice you can make), so when you save it, click on File, Save As, then in the Save As display window, you will see *.txt already there. Get rid of it! Backspace it or delete it, but get rid of it. Once the file name window is empty, type in either index.html or index.htm. Then, finally, click Save. You have now successfully saved your file!
-
To get your file back once you've closed your window, simply open Notepad or whatever editor you're using, click on File, Open, then either select it from the window or type in the name.
05)
HOW TO VIEW HTML SOURCE CODE WHILE IN A BROWSER
One of the best ways to learn and better
understand HTML is by examining someone else's HTML code. You can do this
at any time while while in a browser by clicking on VIEW, then SOURCE.
This will give you the source code for that HTML page.
It is
unethical, and perhaps even illegal in some instances, to view someone else's
source code, then "steal" the code from the page. It is not only
unethical, but it is probably even illegal
to use images that you do not own on your Web site without permission
(written, preferably) from the owner and/or unless the images were clearly being
indicated that they could be used freely (as some Web sites exist on the
Internet for the sole purpose of providing people free images to use). As
I am not a lawyer, the intent of this note is to give you a general idea of Web
content and it's copyright/ownership. It would be good practice to consult
with an Attorney At Law if you have any questionable doubts.
At this
point, you should know that every single Web page that you create is always
going to start with the basic skeleton. So, here is a shortcut that you
might find useful! Type in the basic skeleton of a Web page into a blank
window. Once you have the skeleton finished, save the file. I would
save the file as skeleton.html or skeleton.htm so that I would know what it was!
Then, the next time that you begin a new page, simply open the skeleton file and
start from there, but remember: When you change the skeleton page to a new
page, save it under a new file name and do not overwrite your skeleton file!
HTML TUTORIAL
| Tutorial Introduction | Introduction |
| Getting Started | How to Get Started |
| Table of Contents | Table of Contents |
| WHAT IS HTML? | |
| FORMATTING IN HTML | |
| Chapter Three | LISTS |
| Chapter Four | LINKS |
| Chapter Five | IMAGES |
| Chapter Six | TABLES |
| Chapter Seven | FORMS |
| Chapter Eight | EXTENSIONS |
| Chapter Nine | TIPS ON CREATING GREAT WEB PAGES |
