Premier Website Solutions
Hosting, Design, and Domain Registration
|
HTML for beginners Before we get into this new tag, let's clean up our system a little. If we kept putting everything, all our pages, images, and whatever else we use later, in the same directory, it'll get a little cluttered. In any decent size site, subdirectories are used for organization. How you organize your material is entirely up to you, but for now I suggest using my ideas so your codes will work right. Where you are currently saving your index.html page and the images being used, create a subdirectory called "images", then move your images to the new directory. View your index.html page in the browser again and you should have no images appearing. Any image tags that have the "alt" attribute should show that. The reason the images don't show up now is because your code says the images are in the same directory as the page, but they are not there now. To fix this, you need to edit your html page. Wherever you have a tag that says <img src="filename">, you will need to change it to say <img src="images/filename">, including your "body background" image. Once you make those changes and save it, everything should appear normal again. Now we're ready to make our second page. Open notepad to create a new document and type, or copy and paste, the following. You will notice that the code is right at the left side of the window this time. I put it outside of the table I normally use so that when you copy and paste, you won't get the unwanted indents. Save this page where you have your index,html file and name this one page1.html. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="210" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> </body> </html>
|
It's time to find out about the link tag ("a" tag). The a stands for "anchor". This is one of the most important tags of all. This is what allows you to give visitors a way to get around, (navigate), your site. Without links you can only have a 1 page website. Good enough if you don't have much to say or show, but you will probably want more than 1 page to your site. Here are some of the "a" tag attributes.
Take your page1.html and add the red text below. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="210" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> <p align="center"> <a href="index.html">Back to index</a> </body> </html>
|
Now when you view your second page you will see a link at the bottom that will take you back to your first page. Problem is, once you click the link and go to your first page, you won't have a link to go to the second page again. Let's fix that. Add the following code to the end of your index.html page. Make sure you put it before the </body> tag. |
<p align="center"> <a href="page1.html">Page 1</a>
|
Now you can check out your 2 pages and jump back and forth easily. How about the "target" and "name" attributes for this a tag? Let's play with them. Make the small change shown below, then reload your page and click on the link. With most browsers, this will cause the index.html page to open in a new window. You would then just close that window to go back to the one before it. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="210" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> <p align="center"> <a href="index.html" target="_blank">Back to index</a> </body> </html>
|
Links that automatically open in new windows are useful sometimes, but can also be a pain. Be careful when using that feature. Now let's use the "name" attribute. For this feature to be useful you need to add 2 new pieces of code. Add the 2 new changes you see here. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <a name="top"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="210" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> <p align="center"> <a href="index.html" target="_blank">Back to index</a> <p align="center"> <a href="page1.html#top">Top of page</a> </body> </html>
|
View your page and click on the new link.
Did it do anything? We'll make our page have a scroll bar then, but first, let's fix something. Notice how the 2 new links we have added are showing up beside the nice photo of me? Is that where you want them to be, or should they be below everything else? Do you remember what was said about the "image" tag and the "align" attributes for it? The image of me says align="right" which puts the image on the right and all test automatically goes to the left of it, even when we use the <p> tag. Nothing will go below the image until there is no room beside it anymore.
We only want One way to put an end to the images "align" command is to use a powerful little extra function of the simple <br> tag. Add the red line shown below. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <a name="top"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="210" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> <br clear="all"> <p align="center"> <a href="index.html" target="_blank">Back to index</a> <p align="center"> <a href="page1.html#top">Top of page</a> </body> </html>
|
Now view your page and see what the clear="all" addition to the br tag did. Just <br> simply means, "go to a new line", but <br clear="all"> is saying "go to a new line below everything else". If your making pages where you will be mixing images and text, you will probably be using this a lot, unless you use a different method of laying out your page, like tables. That'll be a future lesson. If a page isn't using image tags with the "align" attribute, you probably won't need this fancy br tag. Let's get back to making the "name" attribute of the "a" tag useful. Now that we have new content going below the image, it'll be a little easier to make the page longer. Let's cheat and have some fun with the picture of me. Change the height of the image of me, as shown below. I guarantee you will have a scrollbar on the side after this change. |
<html> <head> <title>My second page</title> </head> <body bgcolor="ffcc99"> <p align="center"> <a name="top"> <font size="+2" color="red"><i>This is my second web page.</i></font><br> I will soon be linking my first and second pages together. </p> <p align="left"> <font color="0000ff"><b>This would be your introductory paragraph. You would want to word it well so when a visitor reads it they will know if your site will be interesting to them. If you make it too long and boring, visitors may just skip it, or more likely just not bother with your site any more.</b></font> </p> <img src="http://www.mikessites.net/Mike.jpg" height="1000" width="150" align="right"> <p align="center"> <b>Hi, I'm the person behind the screen.<br> Don't worry, I won't be telling you to save this picture for anything. :)</b> </p> <br clear="all"> <p align="center"> <a href="index.html" target="_blank">Back to index</a> <p align="center"> <a href="page1.html#top">Top of page</a> </body> </html>
|
Now view your "page1.html" page, (not the "page1.html#top" page). Scroll down to the bottom and then click on the "Top of page" link. This time it did something. When pages are long, the "name" attribute makes it possible to jump around the page faster, but try not to make pages too long. It's not always a good thing. One common use of this is question and answer pages (FAQ's). When you see several questions at the top with the questions repeated and their answers below, it's most likely using this. You now know enough to put together a simple website. Put a simple 5 page website together with each page having links to the other pages. When you have a working website on your hard drive it will be time to have a place on the internet to put it. If you want a free website to practice and even tell others about, I can give you a free site at websitesforfun.com. Your site would be http://something.websitesforfun.com and you decide what the "something" will be. For example, if you want to put up a website about photography, you might want http://photography.websitesforfun.com. If you want something.websitesforfun.com, just email me at learnhtmloffer@premierwebsitesolutions.com. Tell me what you want your website to be, and include your name, address, and an email address you can be reached at, and I will set up the account for you within a few hours and send you instructions on using your new account. I will have more lessons, getting into more detail and more functions, in the near future. For now, if you have any questions about html coding, just ask. My email is webmaster@premierwebsitesolutions.com without the spaces. |
|
Premier Website Solutions |
Tell a friend about this site.
 This website is designed and hosted by
Premier Website Solutions |
