Welcome to the Intermediate HTML Class sponsored by the Web Diner
We will be building on the basics from the first class, but we will still keep it short so you can easily get a page uploaded at the end of class.
All you need is a text editor or wordprocessor that can save ASCII text. So, go ahead and open the text editor now and then go through the brief intro.
We will cover the <A HREF>, <IMG SRC> tags and the mailto function.
<A HREF>, is actually a combination of Anchor and Hypertext REFerence, and is used to link to other files.
<IMG SRC> is the Inline Image tag, and is used to display .jpg or .gif graphic files.
Briefly, <A HREF> links via the path that you spell out for it.
For example:
<A HREF=http://members.aol.com/wdtim/wdtim.htm> WD Tim</A>
tells the browser to go to the server "members.aol.com";
the subdirectory "wdtim";
and show the page "wdtim.htm".
Okay, enough of that, let's learn by doing!
Everyone, at the top of the page enter:
<HTML>
<HEAD>
<TITLE>
Learning Links, Images, and Email for my Web page
</TITLE>
</HEAD>
<BODY>
<H2>
Anchor Lesson
</H2>
This first part is just repeating some of the tags from the first class. They should be clear to you now, if not, you may want to review the notes from the first class.
Enter:
<P>
My first link will follow this line:
<P>
<A HREF=http://members.aol.com/wdtim/youdidit.htm> This is my first link.</A>
Here's what we're doing:
"<A HREF=" starts the anchor and hyperlink;
"http://members.aol.com/wdtim/youdidit.htm>" shows the URL and ends the URL with a closing bracket;
"This is my first link." is the text that will be highlighted for clicking;
"</A>" closes the anchoring.
Okay, enter:
<H2>
Image Source Lesson
</H2>
<P>
My first image will appear below:
<P>
<IMG SRC=http://members.aol.com/wdtim/webkid.gif>
Here's what we just did:
"<IMG SRC=" says that an inline image should be starting;
"http://members.aol.com/wdtim/webkid.gif" is the path to a graphic at WD Tim's home page.
Most often, your graphic will be in your own directory, so the path will be easier to see. For example, on my home page on AOL it would be:
<IMG SRC=webkid.gif>
Okay, we're now going to tie the anchor reference and the image source together.
Enter:
<H2>
Image Source and Link Lesson
</H2>
<P>
I'm learning how to link an image to a page!
<P>
<A HREF=http://members.aol.com/wdtim/yougotit.htm><IMG SRC=http://members.aol.com/wdtim/webkid.gif></A> You're getting it!
Here's our recap:
"<A HREF=http://members.aol.com/wdtim/yougotit.htm>" shows the full link of where we want to go;
"<IMG SRC=http://members.aol.com/wdtim/webkid.gif>" shows the element we want to use as the link;
"</A>" closes the anchor!
Enter:
<H2>
Email Lesson
</H2>
<A HREF="mailto:username@domain.com">Your name here</A>
Here's the final recap of the lesson!
"A HREF=" starts the anchor link;
"mailto:username@domain.com" calls to the mailer and says send to your
username in your domain. For example, my email address would look like:
<A HREF="mailto:tim@webdiner.com">Tim McCanna</A>
"Your name here</A>" says who you are and closes the anchor!
Note, many of the browsers need to have the mailer defaults entered. You can check with your documentation and your ISP to determine your requirements.
Enter:
</BODY>
</HTML>
You may view a completed example.
Save your file and upload it!