Images, Links, Headings and Breaks, Oh My!

Before, I talked about the basics of HTML coding including some editing tags. This time, I’ll teach you how to add images, links, headings and breaks. First, lets start off with headings.

Headings are preset-sized text that indicate important titles for a body of text. The title of this article is a heading, for example. Headings are sized according to their importance. As you go down in number, the smaller the heading will be. Normally, the headings you will use are the following:

<h1> – the biggest of the heading sizes.
<h2> – not as big as the <h1> but it’s still sizable enough.
<h3> – a bit closer to the small side but not by much.
<h4> – this is close to regular size font or is regular size font.

You can bypass the preset sizes and making your own by using CSS (Cascading Style Sheet) but that that’s more on the advanced side so I will not cover it at the moment. Heading’s need a closing tag btw, so don’t forget to put those in. Also, headings are like <p> tags in that it automatically breaks a line after it.

If you looked at the heading tag list, you notice that they were single spaced not double spaced like if you used paragraph tags. To do that little trick, all you need to do is add this tag: <br> . This is HTML’s solution to just pressing the “Enter” button once. You do not need to close this tag. As with the <b> or <strong> and <i> or <em> tags, the break tag also has an alternate that is used: <br /> Either one will work.

Let’s move on to linking one page to another. Before we start, I suggest you make several pages you want to link to such as an About or FAQ page; a norm for most websites.

Quick Tip: to save time, a savvy web designer will create a template that has all the basic tags and settings all ready placed. To add new pages, all that needs to be done is to copy that template, rename it to the new web page, test it out, and it’s done!

When you’re ready to link, you need to set up an anchor tag; <a></a>; before and after the word(s) you would like people to click to get to the next page. Anchor tags, though require additional information for it to work properly. This is where attributes come in. Attributes are extra commands placed right after the initial tag that specifies extra information. In this case, anchor tags needs to know where it will link to or it will not go anywhere so it needs the attribute called “href”, short for hypertext reference. To use it, type it in like so:

<a href=”index.html”>Home</a> | <a href=”about.html”>About Us</a> | <a href=”faqs.html”>FAQs</a>

If you noticed, an equal sign plus quotes are used as well. Whatever is in the quotes is the address of the page it is linking to. Since it’s pages within your own site, you use relative links. If you want to link somewhere else in the net, you have to use absolute links that require the whole URL like <a href=”http://www.pixelpetunia.com”>Pixel Petunia</a> to get to Pixel Petunia. If your link doesn’t work, recheck everything and make sure none of the symbols (=, “, /, <, >) is missing or the tags and attribute is spelled correctly. Check your link as well and see if that isn’t the problem.

Another tag that needs an attribute as well is the image tag; <img>. Like the <br> tag, it doesn’t require a closing tag and stands alone. The attribute that the image tag needs also is to point where the image is coming from, “src”, or source. It works like the anchor tag and can call images locally or non-locally.

<img src=”images/header.jpg”>

You can also change the location of the image by using the align attribute like so:

<img src=”images/funny.bmp” align=”left”>
<img src=”images/sad.gif” align=”right”>

Unfortunately, you cannot center align the image without using a <p> or <div> tag like so:

<p align=”center”><img src=”images/logo.png”></p>

If you’re going to center an image as shown above, make sure it is alone or else any text you type within that paragraph will also be center-aligned. Going back to the <p> tag, you can use the align attribute in it too to adjust your text’s alignment: left, right or center. If you do not specify an alignment, the default is left.

Regarding linking to images non-locally from your own domain, it is highly frowned upon! This is called bandwidth stealing. If you are linking to your other domain’s images, then that is alright but generally, do NOT link to other people’s images. For one, it’s stealing, 2) the image may be removed from the source at any time and can cause you problems and in some cases 3) the original image holder may just put in a picture that will embarrass you (images ranging from poop to words that say that the linker is a bandwidth stealing loser).

With that said, there should be enough that you’ve learned to make your site snazzier!