HTML Class: Day 5: Hyperlinks and More
Welcome! As usual, I'm starting the class with a
little review. Last class we took a
break from the useful, and sometimes a bit boring, codes to work on learning some
fun coding. We learned how to use
the marquee code, as well as how to customize it, and we worked on making
glowing text. So far your HTML file
should be looking something like this:
Your file in the browser should
look similar to this:
Now that we've reviewed what we
worked on last class, it's time to learn the new
codes. You may have been
wondering how people made websites with more than one page, and linked them
together, as well as how people linked to other sites. So, the first thing we'll be working on
today is how to make hyperlinks (also known as links). There are two basic ways, text links
and image links. To create a text
link, you would use the following code: <a href="the URL of the site you want to link to goes here, for
example, if you wanted to link to my site, here you would type
http://www.charlottehtml.com.">Here you would put the text you
want the visitors to see, which they click on, for my website you might put here
Charlotte's
HTML Help</a>. To use an
image link, you would code it like this: <a href="URL you want to link to here"><img src="Image URL here,
just put the image you will use in the same folder as your HTML documents, and
then use the name of the image, for instance, image.gif"
border="0"></a>. However,
before we use any type of link, we're going to add another page to our little
test site. In case you don't
remember how to save it properly, I'll review it now. Open up Notepad, this should be in the
accessories section in the start menu. Next, choose file, then save as.
Find the folder with your test page in it, and in the drop down menu
where it says "save as type", choose "all files". Then, for the file name, use
"page2.html", and click save. Now
it's time to set up the basic layout of the page, refer to the first lesson if
you don't remember how to. Use
something like "Test Page Part Two" for the title, and when you have it set up,
save your file. Now close that
file, and open up the first file in notepad. Decide where you want to add the link to
your second file, and add a text link to it. Your link should be something like
this: <a
href="page2.html">Test Page Part Two</a>, and don't forget a break
after it to make sure it looks right. Open up your main page in the browser, and make sure your link
works. The page it links to should
just be a blank page, with nothing but a title, so now it's time to make it look
nice. You can refer to the first
file to help you, and you don't need to have anything but some text, some
interesting font, and a background of some sort. Save it, and open it up in the browser
and it should be looking a lot better. So, now it's time to add a link back to the main part of the site.
Add the link in, and open up the main
page in the browser. Now you can
get back and forth from the first page to the second. So, now it's time to add an image
link. Of course, first you need
images, so open up paint, and create two images, one that will link to the first
page, and one that will link to the second, and make sure to save them in the
same folder. Now, right below your
text links, create image links, on the main page, create an image link to the
second page, and on the second page, create an image link to the main page, then
save and open up the main page in the browser and make sure that the image links
work. Now, it looks rather strange
to have both a text link and an image link to the same place on both pages, so
decide whether you'll be using the image links, or the text links, and remove
the ones you don't want. That's all
we'll be doing for today, so now it's time for the
assignment.
Today's assignment is to think of what you want your first real website to be about. It may seem strange, but you're actually almost done with the class, and you now know basic HTML; the rest of the class will be more advanced HTML, and then you'll be almost ready to start learning CSS if you choose to do so. So, for the assignment, think of some ideas for websites, perhaps start brainstorming some possible website titles, and maybe even start looking around for some good free hosts, though it's probably a little early to start doing that. Also, I would recommend looking at some HTML tutorials, I know there are things that I won't be teaching you, such as tables, and this really is just an introduction to all that HTML can do, which should help you understand HTML better, as well as HTML books, or online tutorials, though I am trying to include all of the most frequently used codes. You really can't learn HTML in a matter of days, not fully anyway, but this should help you get started. That's it for today, so prepare yourself for HTML Class day 6.