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).
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.
By
now you should understand how to write any text to a web
page. This lesson will teach you how to format text, add
images, create links between other web pages you create,
and links with other people's web pages. Once you learn
the basics of formatting, image placement, and linking,
it will be up to you to view the souce code (HTML) of
other pages to learn new specific HTML code that you prefer
on your site. Let's take the example from lesson 1:
FORMATTING
<html>
<head>
<title>Your web page title
goes here</title>
</head>
<body
bgcolor="#FFFFFF" text="#000000"> <center>Your web
page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and
hiking. </body>
</html>
Notice
the new command HTML code/tag in bold. Again, also notice
the closing command. This tells the web page to center
the stuff between the commands: <center>The
stuff here is centered.</center> so the
page should look something like this:
Your
web page content: Hello thank you for visiting my website!
I
like swimming, running, and hiking.
If
you forgot to close the center command, or if you purposely
place it after the word hiking, then your page would look
something like this. Notice that the web page does not
know when to stop centering without the ending center
command (</center>).
Your
web page content: Hello thank you for visiting my website!
I
like swimming, running, and hiking.
The
<p> command/tag is a hard "carriage" return.
Again, it is good practice to be specific about your HTML
tags even though HTML will assume things for you and will
even create hard/soft returns for you.
IMAGES
Now
lets add an image:
....
<body bgcolor="#FFFFFF" text="#000000"> <center>Your
web page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and
hiking.<p> <img src="images/yourpicture.gif"
alt="This is a picture
of me!"> </body>
.....
The
above bold command/tag tells the page to add a picture
after the word hiking. Type in the bold command, and then
in quotes, type in the name of the picture file (GIF or
JPG only, PNG is not supported on all browsers yet.).
You can type "images/yourpicture.gif"(Relative
pathing-you choose files relative to where this htm
file is.) if you made a folder in your web folder
called images. The page looks into the images folder
and then looks for the gif or jpg. If you
just made one web folder and put your htm files and your
picture files in the same web folder, then you would type
<img src="yourpicture.gif">. You do not
need to specify the folder that you are in. The alt command
is a description of the picture. If you rollover an image
and leave it there for a few second, the description of
the picture will appear. This is especially important
in complying with Section
508 (site accessability). Blind people can still understand
the importance of the picture by using a special web reader
that looks for alt tags associated with pictures.
Technically
speaking, if you were doing a web page that is local
to your PC, you can type in <img src="C:/MYWEBPAGES/web/images/yourpicture.gif">,
(Absolute pathing-you choose files using the
absolute path to the file name form the root directory.)
but if you decide to move the web page to a different
computer, then you would have to hunt all the code that
includes the reference to C: and change it to the correct
folder structure. The only time you really want and
have to use absolute pathing is when you are linking
to an image (or file) on someone elses computer or website
like so: <img src="http://www.nasa.gov/yourpicture.gif">
LINKING
WEB PAGES
A
link allows the user to jump to other web pages. Using the
same idea as above, a link command must surrount the text
or images that will act as the hot-spot that the user will
click on.
....
<body bgcolor="#FFFFFF" text="#000000"> <center>Your
web page content: Hello thank you for visiting my website!</center><p> I like swimming, running, and
hiking.<p> <a href="http://www.nasa.gov">This
text and everything around the a href and ending a command
will be a link to the nasa web page...including the following
picture since it is also between the commands. <img source="images/yourpicture.gif"
alt="This is a picture of me!"></a> </body>
.....
Relative
pathing vs. Absolute pathing also applies with the lnks.
The nasa link above is an absolute link to the nasa web
page, but a line like this: <a href="page2.htm>
Whatever link! </a> will take the user to page
2 of your web page.
Extra
information: <a href="sgweb3.htm" target="_blank"> You can add the extra command target to specify how
your new page will be displayed. If you do not include this
command, your existing web page will be replaced with the
new linked page. If you write target="_blank"
like above, your new web page will open in a new window,
so there will actually be two web pages diplayed at the
same time.
If
you are serious about web development (design, programming,
etc.), HTML is a language you should become very familiar
with along with JavaScript which we will get into later.
For those who just want to create simple pages and do not
want to understand how HTML works, there are special software
programs that let you create your web page by drag-and-click
icons. This lesson will talk about the various options available
to the HTML-phobic public. Keep in mind that using this
software will still help you understand HTML since most
of these programs allow you to view the HTML that the software
program is writing for you. In addition, professionals who
know HTML like "the back of their hands" also
use these software programs for efficient web development.
Netscape
Composer (Comes with your computer if you have Netscape)
Open up Netscape, go to the Communicator menu and select
Composer. A new window will pop up and you can start creating
your web page without writing any HTML code.
Homesite
Microsoft
FrontPage
Macromedia
Dreamweaver (Go to www.macromedia.com
for cost and information)
Professional web creation software: Includes template, web
management tools, and javascript functionality.
Note:
Some Microsoft Office tools like Word, Excel, etc. and other
software programs from various companies include the option
to save your files into an HTML format. Sometimes the HTML
file they make for you is not practical due to size (big
file size means slow downloading time). Check your HTML
files to see if this is a problem. Some programs will actually
fix the HTML file and make it more download friendly.
