Creating
your first Web page by coding HTML using a text editor (such as
NotePad) and then viewing the document using your Web browser is simple
and just needs the right html tags to be put at the right place.
To
begin a Web page you will open a simple text editor like Windows
NotePad for the Windows operating system or SimpleText for the
Macintosh. Once you have this simple text editor open to a new blank
document you will begin your web document by typing a few items I shall
discuss in a moment. When you reach the closing part of this file I will
ask you to save it to a floppy disk with a filename of firstpage.html.
This is discussed below, in the section titled Saving the File. The
method of opening the file using your Web browser is discussed in the
section titled Open and View the File. Let's begin.
The
first thing you are to type in the text editor work area is a left
angle bracket, < the letters HTML, and the right angle bracket, >.
The symbols and letters should look like this:
<HTML>
<HTML>
is the opening for any HTML Web Page. HTML stands for HyperText Markup
Language. By having coded the <HTML> the browser will know which
language it is to handle. What is HTML? is an article containing
additional information about HTML.
A
lot of information of your own preference is placed into a coded
document. The term document refers to what is being coded and typed in
the text editor. The term page refers to what the browser displays for
the viewer or what you see in your browser window when your browser has
opened your coded document. Try not to confuse the two terms. Think of
the document as what is being coded and saved as a .html file and page
refer to the Web page seen by the user from the Web browser window.
When
it eventually comes time to end your document, the last thing that
should be coded is the closing </HTML>. Notice the forward slash
this time in front of the HTML letters. The forward slash precedes
letters to close HTML "tags". Many elements have a beginning tag and an
ending tag. The only difference between the two is that the ending tag
has a slash right after the left angle bracket, <. So far what you
have coded looks like this:
<HTML>
</HTML>
Nothing should actually be visible yet in the browser window until later when more HTML "tags" have been added.
The Head Section
After
opening your document with <HTML> you will need to touch the
Enter key to begin a new line and code <HEAD>. <HEAD> begins
the HEAD section of the document, a part of the document above the
BODY. The <HEAD> section contains a lot of information and a title
but not the information nor the title which will appear on your actual
Web page. No, the <HEAD> section contains information for search
engines and document-finding, elements called META tags, which you will
learn about much later. So, getting back to the basics, I want to begin
another new line after you have coded the <HEAD>. The new line
should be <TITLE>My First Web Page</TITLE>.(This is not the
title that will be seen on your page but rather is the title which will
be used by search "spiders", "robots", search engines. You can read more
about search engines on the Searching the Internet page.) Begin a new
line. Code </HEAD>. This closes the HEAD section. So far, (before
anything has appeared on your Web "page", your first Web document looks
like this:
<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
</HTML>
Do
you see how the HEAD element begins and ends inside the shell of the
beginning and ending HTML element. This is important: In any Web
document the title (beginning and ending title tags and the information
in between) is nested between the beginning and ending HEAD tags. Also,
the HEAD section is nested between the beginning and ending HTML tags.
The HEAD section is opened and closed before you can open the BODY
section. It is the BODY section where "everything happens" that you view
on a Web page. All of the coding is called a Web document and only what
is actually viewed is called a Web page. Now that the </HEAD> has
already been coded, let's move on to the BODY section.
The Body Section
Similar
to the HTML element having an opening and a closing, and the HEAD
element having an opening and a closing, so too does the BODY element
have an opening and a closing. It is coded like this:
<BODY>
</BODY>
Whatever
you now code into your document, (inside the shell of the body element)
will be viewed on your Web page. So far your total coding in the text
editor looks like this:
<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Making A Title
A title (in the BODY section) for your first Web page is coded like this:
<H1>My First Web Page</H1>
If
the title is too simple in the example for your liking just substitute a
title of your own -- I just used this as an example. Here, take a peek
at what it would look like in a regular Web page the way it is currently
coded.
I
would really like to have the title centered. I could do this in one of
two ways. The older HTML 3.2 specification allows the use of
<CENTER> before the title and before the <H1>. After the
title and after the </H1> you would then close the </CENTER>
Here is the code:
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<CENTER><H1>My First Web Page</H1></CENTER>
</BODY>
</HTML>
Making A Background Color
Now
let's make a background color for your page. This is something new
because now you are going to have to type an attribute inside the BODY
element and you will give the attribute a value. It sounds difficult but
I will explain it a step at a time. An attribute is just something
additional than enhances the way the browser views an element.
The
BODY element began with <BODY>. Using your text editor, place the
blinking cursor (I-beam) between the Y and the right angle bracket.
Space once and type BGCOLOR="" then allow the right angle bracket to
close this attribute for BACKGROUND COLOR. You used double quotes, I
hope. Between the double quotes you will place either an accepted named
color, such as red, white, blue, green, yellow, goldenrod, cornsilk,
etc. OR you will have to look up some RGB Color Values for HTML Authors
values which each begin with an octothorpe (#). Find a color you like
from one of these Color Charts of RGB Color Values for now. When your
typing of that BODY tag is completed and has a color value such as
<BODY BGCOLOR="cornsilk"> or <BODY BGCOLOR="#FF6342">, you
will need to save the file changes in your text editor, File,Save. When
you return to the browser you will need to either click on Refresh or
Reload to "renew" the browser window to show the new changes you made in
the Editor program. Once you renew the browser window, you should now
see your page with a background color. I made a page with a "cornsilk"
background to show you. Click here to see it. I coded <BODY
BGCOLOR="cornsilk">. You will want to use the RGB Hexadecimal Color
Values when you get particular about wanting a certain specific color on
your web page.
Saving The File
When
you are through typing code into your simple text editor such as
NotePad or SimpleText, save the file by selecting Save As and naming the
file firstpage.html. Before selecting a location to save this file to,
be sure to change the text selection under the file name to the setting
that says "All Files". You will need to put .html at the end of the
filename such as naming it firstpage.html. Select a location such as a
floppy disk on the A: drive. Do NOT SAVE as text but select ALL files.
Again, Click on File in NotePad or another simple text editor. Select
Save As.
(Once
the file has been initially saved the very first time, do not use
SaveAs anymore, but use File, Save for all subsequent saving. You should
also save your work about every 5 minutes to prevent any unexpected
data loss from power problems.)
BEFORE
clicking on OK to save the file, be sure the first time it is saved
that you change the text setting (line under the file name in the SaveAs
dialog box of the Windows 95/98 Operating System) to "All Files". You
will be saving this as All Files so you have to include the .html
extension as part of your filename. Select a location to save it to such
as the A:\ floppy disk. Now Click on OK to save it. Once it is saved,
close the file.
Open And View The File
Now
open your browser window while you are not online. Click on File, Open.
Select Browse. Select the A: drive or the location where you saved your
firstpage.html file. Double click on it or select open. (Let your
browser open the file.) When done correctly you should be able to view
the title of your first web page.
Note:
An
alternate and easier way to open the file for viewing by the browser is
just to double click on the filename from Windows Explorer. Windows
Explorer will automatically open a browser to view the document you just
saved. If you did not close that document after saving it you will get
an error when you try to open it in the browser window. Once your Web
page appears in the Internet Explorer browser window you can edit it by
selecting View, Source from the browser menu bar. I caution you that you
cannot edit a file when online and the file is being delivered to your
browser from a Web server. You can only edit files on your own computer
such as from the floppy disk. Save any changes to your document and
switch back to the browser to click on either REFRESH or RELOAD before
your changes will be visible.
Only
the first time you saved this file did you use Save As. When you can
see your title in the browser window, I want you to try to click on
View, then Source in order to see the text editor coding of your HTML
document. When you type something new into this NotePad and Simple Text
file (the simple text editor file), you are to select File, Save for
each subsequent change or addition to your code. If you only have two
files open, your browser and the simple text file, you may use the
shortcut of Alt + Tab to toggle back and forth between the browser
window and the text editor coding. In order to see typed coding changes
after you have saved the changes with File, Save you will need to toggle
back with ALT + tab (windows users) and in the browser menu bar, select
Refresh or the Reload option in order to refresh the browser window.
Without refreshing or reloading the window, your saved changes will not
be seen. Once you begin coding your HTML document, you will SAVE and
REFRESH or RELOAD after each change, to see how the change looks. All of
this is done off-line using your browser in the off-line mode. You do
not need to be on the Internet to write HTML documents and to view them.
No comments:
Post a Comment