FreeMailer2000 When you sign-up for Free, you will get your very own personalized FreeMailer2000 website along with your Unique URL. When someone signs-up from your FreeMailer2000 website, they become your First Level Downline. Similarly, when someone else signs-up from their Unique URL, they become your Second Level Downline and so on till 15 Levels. The trade off here is very light, only 14 people are able to send email to you in return.

Before beginning with the new code, copy your index.html page and name the
this new copy as another.html (unlike your index page, this one really
could be called anything you like as long as the name ends with either .htm or .html, but stick with another.html just for the sake of following the
lesson as presented.)

Now, let's begin with adding another line of text to our first page. On the line
following Hello World lets add the words "From Me". And then on our other
new page add the words "To You" instead (you can also change the title
to indicate this is a new page, as you wish.) We now have two different pages,
both in the same folder (YOURSITE). Test them each to be sure they are working.

Did you notice that the text you added ("From Me") seems to appear
on the same line as Hello World? As mentioned, the user agent (browser) treats
a whole lot of white space as just one single solitary space. in order to force
a new line we need to insert a tag which tells the browser to break to a new line.

The break tag. This tag does not need to have an ending tag as it does not
enclose any content. It could be simply written as:

<br>

And that will work, but is not quite correct in XML (eXtensible Markup Language)
and so a space and a (forward) slash are added, to indicate that this tag is its
own closing tag, (sort of a shortcut, but more like better grammer.)

<br />

So the body of your two pages should look like the following two:

<body>

Hello World

<br />

From Me

</body>

<body>

Hello World

<br />

To You

</body>

Now we will add the code to make one page link to the other.
This will be a pair of anchor tags enclosing something
we want to be click on to initiate the link. Let us isolate the
new line of text and make it what links the pages to each other.

Add the following line to your first page, after the break and
before the words "To You".

<a href ="another.html">

Note that we included the page we wanted to link to in that line of code.
Follow the words "To You" with the closing anchor tag:

</a>

That should create a working link to your another.html page.
Lets do nearly the same thing on your second page only this time the
code will have its link set back to your original page index.html:

<a href ="index.html">

To You

</a>

I like to usually close this all up as one line to eliminate extra spaces before and after the linked words:

<a href ="index.html">To You</a>

Using this concept you can now create any number of pages and have any
of them link to any other. For the majority of servers you might use, you
will need to have an index.html page which acts as the default page for
your site. (When you visit http://fjd1.com, the page you are taken to is really
http://fjd1.com/index.html by default.) You may have any number of these links
on a page, just be sure they are each properly ended with a closing anchor
tag. Save and test these pages, making sure the links work. If they don't
then check the code for exactness character by character.

Speaking of characters, not all characters are okay to use. We have so far
only used letters and spaces in the content itself. Let's now add to this
the solution for the problem of making a few extra spaces. As you know, the
extra spaces you might add seem to all get reduced down to a single space.
(try adding in a few extra spaces between Hello and World, to see this in
practice if you have not already.) The solution lies in special characters.
These start with and ampersign (&) and end with a semicolen (;) and have
their unique code or number between. Here is the code to create what is called
a non-breaking space, (that is, a space which should not be treated like it was
a proper place to jump or break to the next line down, a handy way of keeping
two words together and on a single line.) Add this code for a non-breaking space
anywhere to the content of your pages and it will add spaces till your heart's content:

&nbsp;

To separate Hello and World. Then
to spread out the word World you could write:

Hello&nbsp;
W&nbsp;o&nbsp;r&nbsp;l&nbsp;d

Note how this will show up in a browser window, and that
the non breaking space prevents the word World from starting
on a new line, even though we have written it on a separate
line in our code now. (You noticed that did you? Good!)

Hello
W o r l d

You should avoid typing in quotation marks directly, and instead use
the following special character in their place when needed:

&quot;

As a matter of style, I prefer to use the double quote (two marks
as opposed to a single mark) for the parts of code which must be
in quotation marks such as the anchor tags where the name of the
page goes. You are free to use the single quote in you content as
it is used so often for contractions etc., ya' know? Please do not
be luled into complancency by the FACT that on your pages it does not
seem to matter, when you wish your content to have a double quote
mark, type &quot; instead. Here is the word Me in quotes.

&quot;Me&quot;

Perhaps even more important is the ampersign symbol, (the and symbol
as some call it.) This too should never be included directly as content
but instead you should type:

&amp;

And absolutely you must use this for the < sign which is
properly known at the less than symbol but also called the
left angle bracket/brace or worse, (and kindda incorrectly) the left arrow:

&lt;

And just as absolutely you must use this for the > sign which is
properly known at the greater than symbol but also called the
right angle bracket/brace or worse, (and kindda incorrectly) the right arrow:

&gt;

So to write the word To enclosed within these angle brackets, you would need
to write as html code:

&lt;Too&gt;

So add some text to both of your pages. (It really does not matter what
you write for now, as you can always copy it elsewhere or replace it any time.)
Just a few simple lines you can use to test your understanding of these
few tags and special characters is all that is needed before proceeding.
Try some really long lines so that you can get a feel for how the
break tag works and how the non-breaking space character functions. Try
putting several break tags in a row, followed by more text. You will notice
that a single break tag does not cause an extra blank line, but that two
are required to make a blank line.

Here is a remake of the index.html page demonstrating these characters
in use:

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>
My first html page, Hello World
</title>

</head>

<body>

&amp;&nbsp;Hello&nbsp;
W&nbsp;o&nbsp;r&nbsp;l&nbsp;d

<br />

<a href ="another.html">&quot;Me&quot;&nbsp;&lt;Too&gt;</a>

</body>

</html>

Here is how the above code looks when copied directly from above as
viewed in a browser and then pasted directly into the source code of
this page. (Everything between the body tags was copied and pasted.)

I should warn you that if you click on Me Too you will be sent to la la land as there
is not a page to be found here with that name. Which brings up the point
that links can be made relatively or absolutely depending upon your desires.
If you want to link to this page from your page, you will need to write the full
URL (Uniform Resource Locator) like this:

<a href ="http://fjd1.com/instruction201.html">FJD1.com</a>

That code above looks like below this when parsed by your browser.
(Note that I have used a shade of gray so that it will be easy to
tell when I am demonstrating the actual effect as it is parsed or
displayed by your browser. I am using a white background where I am
showing the actual source document and the code as you might enter it
in your text editor. There has been nothing in our lessons concerning color
which you might have missed. We will address color etc. after first
proceeding with putting images on your pages.)

For those who once knew DOS this may seem redundant, but for those
who do not the following my indeed help. If you wish to link to
a file in a directory above the one which the page your are on is in,
then you may proceed the name with ../ (two periods followed by a slash.)
To link from the page: C:/MYWEB/MYSITE/index.html
To the page: C:/MYWEB/MOMSSITE/linker.html
You can write ../MOMSSITE/linker.html
And to link to the page: C:/WEATHER/log.html
You could write: ../../WEATHER/log.html
As each ../ will cause the link to first exit out of the folder it
is itself in and thus into its containing (more root like) directory.

For now, try keep all of your pages in the same folder, and
write your links as you have already learned earlier. It is
possible to link to many different kinds of files also. (You
might try linking to a text file you could make and locate
in the same folder as your web pages.)

Now let's add an image to your index.html (first) page.
We will call our picture myphoto.jpg in the following
example, so either rename your photo to match, or note
where the file name is included in the following and change
the file name to the name of the image you will use. This is
the image tag, and like the break tag it should end with a
space and a slash before the final greater than sign (right
angle bracket.) Note; there must be a space between the img
and src parts of the tag. Our image is in the images
folder as you will remember, and that path must be included as
shown here:

<img src="images/myphoto.jpg">

Your page will be parsed from top down to bottom with text
and other objects appearing one after another. To have your
objects like images show up on their own line, a break may
be added before and after the image. Let's do that, adding
your image between the lines of text we already have and
adding a break before and after. The code within (and including the)
body tags should now look something like this:

<body>

&amp;&nbsp;Hello&nbsp;
W&nbsp;o&nbsp;r&nbsp;l&nbsp;d

<br />

<img src="images/myphoto.jpg" />

<br />

<a href ="another.html">&quot;Me&quot;&nbsp;&lt;Too&gt;</a>

</body>

When parsed by your browser, your page now includes
the image and should look something like this (below)
with a line of text, a photo, and then our text link.

Before continuing to our task of making an image
the clickable part of a link, we may need to have
some control over how big the image appears. We can
do this inside our image tag by adding what are
called attributes. We need to add an attribute for
the height and width of our image. (Note; some browsers
will distort an image if only one of these attributes
are used so it is best to always include both, which also
happens to improve the time it takes to parse as the
browser.) The size of our current image is 200 pixels by
200 pixels, and the resolution is 150 pixels per inch.
Let's shrink it just a bit down to 175 by 175 pixels by
changing our image tag to include the width and height attributes.
Note the use of quotes again around the numbers here and
note to the order of width appearing before the height attribute:

<img src="images/myphoto.jpg" width="150" height="150" />

And here is how our image looks when parsed, now being just slightly smaller.

But we still have another important attribute to add, the one
which provides an alternate explanation of the picture. Often
folks will have this text set to something other than an explanation
of the image, but know that correctly it should be supplying
and alternate text explanation of the photo, not directing the
user to take some action. This attribute may be left empty between
the quotes and this will prevent a validator from presenting you
with a warning regarding a missing attribute. As this is a picture
of my bird feeder, I will add this text explanation by including
the alternative text attribute within the image tag like so:

Move your mouse (or cursor) over the image below and
you will see that our text appears to tell us more about the
picture.

There are more attributes which can be used with the image
tag, and there are many other attributes which can be used in a number of
other tags. We can add a border around our image by adding the border
attribute and including the size of the border. (A border can be set
to zero as we will see shortly.) Here is the new image tag with the
border width of 4:

Great! Now we will make it link to our other
page (another.html) simply by enclosing it within
a pair of anchor tags in the same manner we used for
our text link earlier. Note that tags can enclose tags
but you must nest them completely inside each other. just
as the html tag encloses the body tags and they enclose the
anchor tag, now the anchor tag encloses our image tag like this:

This now looks just like before, except that the border should
be more dynamic and change colors to indicate that this image
is an active link and your cursor may change from say a pointer
to a hand (all depending of course upon the settings of the
browser being used which may over ride our best efforts at times.)
You will also be able to click on the image and the another.html
page will displayed.

By changing the border to zero you can turn off this effect completely if you desire.

Once again it is without a border, yet still an active link
looking like this when parsed:

Let's conclude by listing the entire source code for the page
we have created so far. Yours may vary a bit, but you should
have the same basic nesting of tags with all of your content
(text, images etc.) within the body tags. Here is ours:

So far you have learned about the proper way of creating an html beginning with the document type first, and then the html start and ending tags enclosing everything in between with the head section first and the body section following. The head and the body sections contain everything else with tags being nested nicely like the famous Russian dolls within dolls.

You have also learned how to put simple text on a page and how to drop in an image sized to your desire and with or without a border of your desired thickness.
You should now be able to write code to use text or images to link to other pages via an anchor tag. And have memorized the special characters for the double quote, the less than sign (left angle bracket), the greater than sign (right angle bracket), the ampersign (the and symbol), and the now infamous non-breaking space.

In addition to also knowing the break tag, you should have learned the tags which are not used in pairs should end with a space and a forward slash just before they end with the greater than sign.

It would be wise to practice by making several pages using all of these concepts just to get the feel for how these work beyond the example used here. Link them to each other and remember to take tiny steps, saving the file and refreshing your browser to check (debug) and see if everything is as expected before proceeding to add more content and code and images etc. Try a few, then venture on to the next lesson where you will learn a few more tags and attributes to help you gain more control of how a page is parsed. Remember too that pages will look different when viewed on different machines and using different browsers as there are three levels of control and the writer has access to only one of them, (the code which the coder writes, the others are the creators of the browser programs and the users themselves. This is necessary, especially for any who are sight-impaired in some way.)

Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)

Hosting services include free tools and website hosting. Click on the banners above and make a website within the hour. Premium services are
exceptional and they have all the goodies and services you expect from
a host.