|
Educational
Technology Creation
What
is HTML
When
you open up your Internet Explorer or Netscape (other Internet BROWSERS
include AOL's browser and MSN browser that are based on Netscape or
Internet Explorer), you get to see a pretty website with text, pictures,
and sometimes video and sound. What is really happening here is that
a text file is describing (to the browser program) what the web page
should look like. The text may say things like "center this picture
here," and "underline this text there." Even though
you do not see these instructions, they are there...even on this web
page.
The
browser knows what part of the text document are instructions, and
what part of the text must be displayed. The way to tell the browser
the instructions is to wrap the code around brackets: <whatever
instructions> The language you use to write these browser instructions
is called Hypertext Markup Language (HTML), and you would save this
text file as a: filename.htm
Let
us do a web page together from scratch so that you can see how simple
it is:
-
Open
your text editor program (Comes free with every computer: Notepad(PC)
and SimpleText(MAC))
-
Type
the following (or copy and paste) the following:
<html>
<head>
<title>Your web page title
goes here</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
Your web page content: Text, Pictures,
Movies, Animation, etc. goes here
</body>
</html>
The letters in red/italics is what you will type, and the rest
in bold text is something you will have to put always. This tells
the browser that it is not a text file, but an html page. Notice
how every command wrapped in ("<command>") these
brakets, have an endind command with the backslash ("</command>")
called the closing command. The closing command lets the web page
know where the title ends, where the html ends, etc. Without it,
the web page would not know when to stop creating the title and
where to start creating the body text. (Sometimes HTML is forgiving,
but there are some cases where poor HTML will look bad.)
- After
you type the above code into the text editor, go to File > Save
(this will open the Save Dialog Box window) and save your
file as mywebpage.htm. Make sure that you select "All
Files" under the Save as Type menu area in the Save
Dialog Box.
- Open
your BROWSER and go to File > Open and browse for your mywebpage.htm
file. When you click on it, you should see "Your web page title
goes here" on the title of the browser and "Your web page
content: Text, Pictures, Movies, Animation, etc. goes here"
in the main area of the browser. If you see all the coding, the
browser thought you were opening this file as text, and therefore
will show you the text file you created as is. (To fix this, open
your txt file in notepad again, and go to File > Save as, and
save it correctly as mentioned in step 3. You probably did not change
the Save as Type option.)
- Go
back to your notepad file and edit some of the stuff you wrote in
red. Make sure you hit File > Save, and then go to the
browser and hit the refresh or reload button. The browser refresh
button looks for the most recently saved html file. (If you do not
see the updates, you probably forgot to save the html or your refresh
button may be looking at the cache [memory that does not realize
that things have been changed]. In the case of the cache memory
problem, hit the CTRL key while pressing the Refresh/Reload button.)
- You
should now have your first web page with text content. Feel free
to add or play with the content to make more pages. Do a File >
Save As, and save a page1.htm, page2.htm, etc. Usually, you
want to make your home page file name index.htm. This is a standard
to allow people who visit the www.nasa.gov site to automatically
get the default htm file. If you do not have an index.htm file then
every user who visits your page has to type "www.yourwebdomain.com/yourpagename.htm".
As you can see, it is nicer to have the users just type "www.yourwebdomain.com"
only, and not "www.yourdomain.com/index.htm". We will
learn how to create links next. Links allow you to jump from one
web page to another. The power of the internet lies in the fact
that your personal page on airplanes for example, can link to other
sites on airplanes (e.g. NASA Aeronautics pages, LTP's Beginners
Guide to Aeronautics).
Go
on to
Lesson 2. For those eager to learn more,
look at other people's website to see how they create their html code.
Look at the HTML file code by going to the browser's menu, and click
under View > Source: the HTML code should appear in your computer's
default text editor.
-Steven
Gutierrez - Author
|