|
EDUCATION.MEDIA.WEB
Lesson
1: Web Development (Level: Beginner) - Go
to Lesson 2
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 ending 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 edit/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.
|
