Links, Images and Basic Formatting

Welcome back to another fun filled day of HTML learning on My Beginning Web. Today we’ll be looking at links, images and basic formatting. Let’s get started.

Links

Links are what HTML was created for. The allow one to jump from one web page to another in the blink of an eye (well if you got high-speed cable that’s a little more accurate). Anyhow, let’s take a look at the structure of a link.

<a href="http://mybeginningweb.com">My Beginning Web</a>

What you see here should look like this: My Beginning Web. The tag for inserting links is called the anchor tag <a>. The attribute is href (hypertext reference) with the href being equivalent to where you want the reader to direct themselves to when they click the link.

The text between the two carrots is what the link will be attached to and then you have the closeout. You can see that the text becomes underlined and purple in color to indicate it’s hyperlinked and if you hover over it and look at the bottom left-hand side of your browser, you will see where the text is linked to.

You can also insert links to areas of a page like so:

<a name="top">Welcome</a>
<a href="#top">click here to go to the top</a>

It will look like this so click here to go to the top and see what happens. You can also use this trick to link not only to another webpage, but to a specific spot in that web page as long as that spot has an anchor reference in place. Just add the url of the page prior to the # (i.e. href=”http://blah.com#test”).

Email

You can also make a link to an email address like so:

<a href="mailto:testthis@test.com">email me</a>

It would look like this if you email me. You can click it to see what happens, but it’s not a real email address. There are ways to customize the email link to insert a cc and bcc address and even a subject line and content if you so wish. It would look like this:

<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&
bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20
are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>

The %20 is used to indicate a space present inbetween words in the subject and test line. For some reason, you can’t insert spaces in the code itself.

Images

Images look a lot like links. This is how it looks:

<img src="house.gif" alt="My House" />

Like the meta tag, it’s self closing. The image tag or <img> has src (source) as it’s attribute and the name of the image as the source equivalent. It either has to be in the same directory as the webpage or you have to use the full http path to where it is (i.e. http://testweb.com/house.jpg). The alt (alternate) attribute describes what to put if for whatever reason the image can’t render, like in a text only web browser.

To adjust the size of the image so it doesn’t take up half your page is like so:

<img src="house.gif" alt="My House" width="20" height="20" />

The width and height attributes are self explanatory. Their equivalents are in number of pixels wide or high. In this case we picked 20. There are a number of other things you can do to the image, like put borders, make it flash and all kinds of stuff, but this is more advanced.

Images can also act as hyperlinks too. It will look like this:

<a href="test.html"><img src="boat.gif" alt="Test Web" width="32" height="32" />
</a>

Notice that rather than putting text, we just inserted an image tag where the hyperlinked text would normally be. Simple huh?

Formatting

Now to talk a little of basic formatting. This is simple. Most formatting is done in CSS in your style sheet, however if you want to do a little formatting to individual words you can use the <strong> tag to make it bold or the <em> tag for italics. Just surround the particular word with that tag. Again general formatting will be left in CSS.

Another good formatting tool is the break tag <br />. This is another tag that closes itself. Let’s say we are writing a paragraph or sentence, typically it will just run and on until the end of the page in the browser window and just wrap around. You would just insert the <br /> tag where you want a break to occur. For example a quick poem like this:

My love of HTML never dies
I will always be by my web page’s side

I know it’s corny. Anyhow, you see what I’m talking about. The way to get the stop at the end of dies to occur is either to do this:

<p>Line 1</p>
<p>Line 2</p>

or

<p>Line 1 <br /> Line 2 </p>

Now with the paragraph tag (<p>) you will get an extra space of line between the two lines because they are being treated as separate paragraphs. With the break tag, you get two lines with no space between as you see above.

Now last but not least I will talk about the <pre> tag. This stands for preformatted and is used when you want to enter text without it changing how it looks. It can work similar to the <br /> tag, but you only need it once and it’s what I used to give you the code examples without them being read by the browser. Here’s how it looks:

<pre>
<html>
<head>
</head>
</html>
</pre>

Or…

<pre>
Line 1
Line 2
Line 3
Line 4
</pre>

And there you have it. Today’s lesson was kind of long, but we covered a lot of basics. Let me know if you see anything I missed or didn’t cover. If you want some more details on what I went over today, go ahead and take a peek at w3schools.com. They won’t explain as thorough as I did, but they have good examples of more detail. See you tomorrow for tables.

<<–  Back …  Next  –>>