This is a test section on my web page...

Next you must put a link to that test section on the page. You can either have the link to this section on the same page that the section is on or a completely different page. To put a link to this section if it is on the same page you would use the A HREF command. The address would no longer be a HTML document but a number sign “#” followed by the name of the section. The final source code for a link on the same page to a section would look like this:

<A HREF=”#Test”>Test</A>

In order to put the link from another page to that section of that page you simply need to enter the name of the page that the link is on followed by a number sign “#” followed by the name of the section. The final source code for a link to a section named Test on a page named test.html would look like this:

<A HREF=”test.html#Test”>Test</A>

The Image Command

The next command that we will explore is the command used to put an image on a page. This command has many different modifiers and can be used to change the size of the image by resizing it to the specified pixel size. The first thing that is necessary to put an image on your page is an image. This is most likely in the form of a gif but a jpeg image will work as well. Once this image has been found you must upload it onto your server. It would be wise to upload the image into the same directory as your page itself, at least for now. Once this has been upload you must decide if the image is going to link to somewhere or just be there doing “nothing.” This should not be a tough decision, if the image refers to a specific document it will mostly likely be linked to a certain page, if the image is a picture of you and your family on vacation it will most likely not be linked. For now we will say that it is not linked. Now you must decide if you want the image to be shrunk down or blown up artificially in order to make a thumbnail or if you just don’t like the size of the image how it is. Let’s say you decide to shrink it to 65 pixels high by 75 pixels wide.

In order to enter this into your source you will need to enter an angle bracket “<“ then the letters IMG SRC= then the title of the image then the modifiers then an angle bracket “>”. If the image is called image.gif then the source code for the image without any modifiers will look like this:

<IMG SRC=”image.gif”>

If the image is going to be the pixel size previously mention the source code will look like this:

<IMG SRC=”image.gif” HEIGHT=”65”>

It is also possible to insert a command that will tell people what the picture is of if they did not download it or pressed stop on there web browser. Let’s say this will be called View this Picture. The modifier which preforms this operation is the letters ALT then an equal sign “=”. In order to do this to image.gif the source would look like this:

<IMG SRC=”image.gif” HEIGHT=”65” ALT=”View this Picture”>

The next possible modifier of an image would be used if you want to put the image inside a link command. When the person clicks on the image they will be linked to the page that the image refers to. A person can sometimes tell if the image is a link if you leave a border on it. A border is the color of the LINK command (previously mentioned) if it has not been visited and the color of the VLINK command if it has been visited. In order to make a link to my page, let’s say, you would first need a gif that relates to my page. Let’s call this gif logo.gif. The way to tell the browser that you want the image to be a link is to simply put the IMG SRC command inside the place where text would go on the A HREF command. The final source code of a page with a link to my page and a image called logo.gif without any special modifiers in the IMG SRC command (Any modifier that is used when inserting an image into a web page that is not linked can be used when inserting and image in a web that is linked) would look like this:

<A HREF=”http://computing.net”><IMG SRC=”logo.gif”></A>

But sometimes a border on the image can be unsightly. In order to get rid of the border a modifier must be entered in the IMG SRC command that has the word border then an equal sign “=” then the number 0. A person will most likely know that this is a link because when they hold their mouse over it the link “hand” will form. The final source of an IMG SRC command without a border would look like this:

<A HREF=”http://computing.net”><IMG SRC=”logo.gif” border=0></A>

The Comment Command

The next command that we will discuss is a short command. This command allows one to put a comment on their web page. This is particularly useful if you want to leave notes for yourself on your web page that you don’t want the world to see, unless they view your source. I have not seen many web pages do this but comments can allow you to use HTML as you would a C++ program. When writing a C++ program a person will always leave a note as to what there next command was supposed to do. This is just in case someone else is working on the program when they find an error in that coding or you find an error in the coding and can’t remember what that code was supposed to do. Most of the time I have seen comments used to insert keywords into search engines. Some search engines simply display or search part of your page and if you put relevant keywords in a comment, the search engine will see this because it views the source, your page is much more likely to be found by someone that is looking for information.

In order to insert a comment in your page you need to use a command to start the commenting and a command to end it. The command that is used to starting the commenting is an angle bracket “<“ followed by an exclamation point “!” followed by two dashes “--”. Then you would enter your comments. Then you would enter your comment. Your comment could contain anything you want it to, it could possible coding if that code does not work or it could have information that you only what people who view your source to see. After you are done entering comments you would tell the browser you are done by entering two dashes “--” followed by an angle bracket “>”. The final source code for a comment would look like this:

<A HREF=”http://computing.net>Justin’s</A> <!-- A link to Justin Weber’s Computing Center -->

The Break Command

The next command that we will explore is the break command. The break command can be used to make a large space between anything in a HTML document. A break command is often used in between pictures. People also use break commands to insert any kind of space between items on a web page that will not be done with a paragraph command. I usually use two breaks between pictures on my web page but that is completely up to you.

In order to insert a break you must first figure out where you are going to put it. If you do not put in the break command between images they will be on the same line. This will make your web page extremely long and people that are visiting that only have a 14” monitor that is set to 640x480. Pixels the person will have to scroll over and back a large amount of time and would most likely be discouraged from revisiting your web page. To insert a break command between two pictures you would need to type into the final source code the code for the first picture using a IMG SRC command (previously discussed) followed by the break command. The break command is an angle bracket “<“ followed by the letters BR followed by another angle bracket “>”. After the break command the second IMG SRC command must be inserted. Let’s say we have two images. One of the images is named image.gif and the other one is named image2.gif. Let’s say these images are banner sized and you don’t want them next to each other so you decide to put a break in between them. The final source for this coding would look like this:

<IMG SRC=”image.gif”>

<BR>

<IMG SRC=”image2.gif”>

Let’s say you want to follow my example and put two breaks in between the images because you tried it with one break and you don’t think that the page looks good. The final source for this document would look like this:

<IMG SRC=”image.gif”>

<BR>

<BR>

<IMG SRC=”image.gif”>

Let’s say you think the space in between those images with two breaks is too large but the one with one break is two small. There is something that can be done about this. You can kind of “cheat” the system and use the paragraph command to make a smaller space then a break. The final source for this document would look like this:

<IMG SRC=”image.gif”>

<BR>

<P>

<IMG SRC=”image.gif”>

The No Break Command

On the other hand, there might be a time that you do not want a break in the text. This could be used if you want the users to have to scroll right to see the rest of your text because normally the text would automatically break and wrap around the page at the end of the browser window. You do want to be cautious when using this command because a very long amount of text with no breaks in it would look very weird. The command to do this is an angle bracket “<“ followed by the letters NOBR followed by an angle bracket “>”. Then you would enter the text that you do not want to be broken or wrapped at the end of the windows. When you are done entering that text you would then enter an angle bracket “<“ followed by a slash “/” followed by the letters NOBR followed by an angle bracket “>”. The final source code for this command would look like this (note that the text I enter would not normally break without the NOBR command but this is just an example):

<NOBR>Text that should not be allowed to break</NOBR>

The Word Break Command

Another command that is sometimes used with the NOBR command is the command that tells the browser that it is ok to break, if it needs it. Unlike the BR command this command does not make the browser create a break it just says that if the end of the line is there it can wrap that text. This command is represented by an angle bracket “<“ followed by the letters WBR followed by an angle bracket “>”. This will appear exactly where you want the browser to wrap if it needs to. The final source code for this command would look like this:

Browser if you want to make a break feel free to do so at my word break command <WBR>

The Center Command

The next command that we will explore is the command used to center items on a web page. This command can be very useful if you want to put images or text at the top of your page, or anything for that manner, that you want centered. The good thing about the center command is that if a person is visiting your page and they have a 21” monitor set to 1024x768 pixels, with their web browser window maximized, they will still see the centered items in the center of the screen. If you did not center the items they would be at the left hand side of the screen and, if they are small, they will not be very catching to the eye. On my front web page I have everything centered. I like this because I have text then a picture then more text on the same line and if I did not center the items they would not line up correctly and make the entire page look or poor quality.

Let’s say you decide that your page would look much better with a centered banner of your favorite web browser on it. Since my favorite web browser is Netscape, I will use it in my example. Let’s say you find a nice banner that advertises the Netscape web browser and since your page looks its best with netscape you decide that you should put that banner on your page. For now we will call the banner netscape.gif. The first thing that you would do would be to enter the beginning center command. That command is an angle bracket “<“ followed by the word CENTER followed by an angle bracket “>”. Then you would enter the item that you want centered. Let’s say that you want a link to netscape through the banner so you would enter the A HREF command and the IMG SRC command. Then you would tell the browser that you do not want anything following that centered. To do this the command is a cart “<“ followed by a slash “/” followed by the word CENTER followed by an angle bracket “>”. The final source code to do this would look like this:

<CENTER><A HREF=”http://home.netscape.com”><IMG SRC=”netscape.gif”></A></CENTER>

I had also mentioned that there was a way to center more then one item. Well instead of entering the center and uncenter command for every item that you want centered. This could be a long and tedious process. You could, if all the items that you want centered follow one another, just enter the center command once and enter the uncenter command at the end of the items that you wish to be centered. If you wanted the netscape banner and the text under it to be centered, and that the text reads “Click on the banner to download netscape”, you could do that. Of course to put the two items on two different lines you would have to insert a break command. The final source code for this document would look like this:

<CENTER><A HREF=”http://home.netscape.com”><IMG SRC=”netscape.gif”></A>

<BR>