For your convienence I've created a ZIP file to download the entire
tutorial.
You will also need WINZIP program to open the files.
Download the Ch59-Tutorial.zip
Download a copy of WINZIP.
Exercise #1
|
Open the Microsoft Notepad editor. Click "Start" then "accessories" then select Notepad. Copy the following lines precisely. Including all the <> brackets. <HTML>
Save the file by selecting "file" then "Save-as" and type the name test1.html
Now open your Windows Explorer from the start button and find the file,
double click on it. Your Internet browser should open the file.
|
Congratulations, you just created your first internet web page.
Ok, now that you know how to create HTML web pages, we can start this
tutorial and learn how to do something useful.
Scroll down to continue.
WEB page development: Chapter one. Getting Started.
I've been told that I spell and design pages like an engineer. I'm not
sure if that's a compliment or a slam since I am an engineer.
Several members and Chapter 59 officers would like to edit some
of my spelling errors and publish some of their own additions to this web
site.
And lets face it, web page publishing and being able to make your own
contribution is far more interesting than simply looking at them.
So, in the spirit of a very pro-active Chapter, I have compiled this
little web page tutorial for our members.
If you have already had some experience creating HTML documents with something like Microsoft Front-page or MS-Publisher, this tutorial will help you to understand what is going on in the background and why these types of programs are not really necessary. Although they are good for formatting images and pasting photos exactly where you want them, these applications embed more source code in the process than should be required.
To begin, I'll list the software applications that I use and the books I used to learn.
My major web page development software package is Netscape Communicator
version 4.5-4.75
I use Netscape rather than Microsoft Front-page because I don't like
all the extra unnecessary code that Microsoft embeds in the page source
code, although Netscape does this also, it's not as bad and can easily
be removed.
This extra stuff is all pure unadulterated Microsoft attempts to confuse
people into thinking web page publishing is difficult and serves only to
make you dependent on Microsoft. HTML web pages can be done with no more
than Windows Notepad or any other good text editor.
Netscape Composer is WYSIWYG, (What-You-See-Is-What-You-Get). So I
can see how my page is going to look as I develop it and I don't really
get very much extra garbage code added to my pages.
For pure text code writing I also use CuteHTML Editor from Globalscape. http://www.globalscape.com. It's a very inexpensive editor that can be downloaded from their web site. It's a non-WYSIWYG editor so you'll have to understand some source code, but it's quick and easy to use.
The most helpful programming manual I've found is: "Teach Yourself
Web Publishing With HTML 3.0 in a Week" by Laura Lemay.
Her web site URL is: http://www.lne.com/lemay/.
There may be a later version of this book by now because the one I have
is about three years old.
A week to learn HTML programming may be a little optimistic but two
or three weeks is all it should take working about two hours per day.
Once you've developed your web page, you will have to upload it to the
web server. Most UNIX web servers don't really like the "publish" commands
included in packages like Netscape Composer and Microsoft Front-page. There
is too much of a chance for security breaches and it's too easy for anyone
to access your web site. So publishing your web pages to your web server
is generally done with an FTP file transfer program. FTP
stands for File Transfer Protocol.
Again there are several good FTP programs available and almost any
will work. I use CuteFTP from Globalscape. It's quick and easy to
use and requires very little set up.
Ok, Ok, Now that that's done, lets get on with the tutorial and make a web page.
All HTML documents require the same type of format. This format tells
your Internet Browser how to display the document.
Here is the basic code and format that is required of every web page
document. If you did the first excercise at the top of this page, you already
have this part written.
<HTML>
<Title>
</Title>
<Body>
</Body>
</HTML>
The first line of code in any web page tells the browser that this document
is a web HTML file and that the browser should open and display it.
Notice that each line of code is surrounded in brackets < > and
that each one has an opening and a closing point. For example the very
first line <HTML> is the opening, and </HTML> is the
closing point. Notice the forward slash ( / ) in the closing line.
That tells the browser that this is the end of that page or section.
The code shown above is really all that is necessary in a web page document.
However, if you were to view this document in a web browser, all you would
get is a blank page. In order for something to show up when viewed in your
browser, you would place it in the <body> section of the code.
Between the opening and closing points of the body.
Here's your first exercise. Open any plain text editor you may have
like Microsoft Notepad. MS-Word will work if you know how to save a document
as an ASCII text file. Copy the lines below exactly as shown and save the
file with the name test1.html. Don't place a period at the end of the name,
that's only the period at the end of my sentence. Don't worry about the
use of bold characters, that's just my highlight to identify the code you
need to copy.
<HTML>
<Title>
</Title>
<Body>
Hello, my name is (enter your name)
</Body>
</HTML>
Put your own name in the line above. Notice that the line where your
name is does NOT have the usual brackets around it.
If you saved the file as an ASCII text file you can now open it with
your browser. Minimize this screen and find the file with your Windows
Explorer. Double click on the file and your web browser should open the
file. When you open this document in a browser all that is displayed is
the line "Hello, my name is (your name)". That's because it is between
the opening and closing sections of the body and it does not have brackets
around it. The rest of the text shown above is not displayed.
If you used Microsoft Notepad to create this file you can see how simple a web page document can actually be. If you have the document open in your browser, click on "view source code" or right click your mouse and then select "view source". you should see the whole code as it is written above.
If you've never published web documents before, Congratulations - you've just written your first web page. If you open any web page from any web site on the Internet, and then right click on the page, then select "view source" you can look for these few lines of code in every web page out there. They may be hidden or difficult to find in some web pages, but they are always there somewhere. Try it right here on this tutorial page. You will see that all this bable you're reading is carefully placed between the opening <Body> tag and the closing </Body> tag.
The few lines of code shown above are really all that is required to create a web page document. But obviously this would be pretty boring if that's all we had on the Internet.
The lines of code that you see in the test1.html page above are
called html tags. Each tag defines a section of the page or a function
within the page. Programmers who write applications and/or web pages generally
keep a library of these types of tags, code samples, or function
snippets as they are sometimes called. Here we will refer to them as tags
because that is the term most commonly used in web page designs.
As I said these HTML tags define a specific function. The first one
in our example, <HTML>, tells your web browser that this page
is an HTML web document and that it should display the document as a web
page. The next line, <Title>, tells the browser and the search
engines the title of the page. And the next line, <Body>, obviously
tells the browser that anything placed between the start point, <Body>
and the end point </Body> is either another tag or is something
to be displayed on the screen. Again, each tag has an opening and a closing
tag and each tag MUST be closed.
What this really means is that in order to be a web page designer, all you really need is to be familiar with the different HTML tags and their functions and how to use each one so that you get what you want. I have created a separate page to list as many of the normal HTML tags as I can so that you can print this page and create your own library.
Now that we've covered the basics lets move on to some of those function tags and see how we create some real web page stuff.
We'll continue to use the same pieces of code that we used for our first example in test1.html and continue to create the document in NotePad editor or what ever text editor you used. If you closed your editor - reopen it and open the test1.html file created earlier.
We well create the second document from the first and introduce another
html tag. The tag we will place in our new document is the <A HREF=>
function.
It is the "link" function that allows us to move from one page to another.
We will use the link tag <A HREF=> to open the first (test1)
file. Here's the line we will add to the test2 file. Copy the new line
below into your existing text1.html file.
<A HREF="test1.html">open the test1 document</A>
Exercise #2
|
<HTML> <Title> </Title> <Body> Hello, my name is (enter your name) <A HREF="test1.html">open the test1 document</A> </Body> </HTML> |
After you've entered the code above save the file twice, first as test1.html
again, and then use "save-as" to save it as test2.html. Now open the test2.html
file in your web browser. There is no need to close your text editor first
- you can keep it open if you like.
If you followed carefully and created both files exactly as shown above,
the words "open the test1 document" should be underlined and you should
be able to open the file test1.html by clicking on the link. If the link
reference works the file will open and display both lines entered above.
However you may also notice that both lines of text are on the same
line. No - you didn't get an error. We didn't place any line feed or carriage
return after the first line of text. That is another HTML tag, (BR).
Lets add the line feed after the first line of text.
Exercize #3
|
<HTML> <Title> </Title> <Body> Hello, my name is (enter your name) <BR> <A HREF="test1.html">open test1.html document</A> </Body> </HTML> |
Unlike all the other HTML tags, the line break <BR> do not
necessarily require a closing </BR> portion to it
although it won't hurt to use it.
There is one other tag that does not require a closing tag. That is
the <P> paragraph tag. When these two tags are included in your
source code, the effect is very similar and may not be obvious at first.
OK that's the end of lesson number 1.
If you're sick of doing this for now you can close these pages and
go on to something else for a while.