Creating a Website Tutorial

Marking Up Your HTML

In our first lesson, you learned how to create an HTML webpage with a lot of text—but that's about it. In this lesson, you'll learn how to mark up your webpages using tags to emphasis text, include images and create links—among other things.

Let's start with some of the simpler tags available: <b>, <i> and <u>. They will allow you to make your text bold, italic or underlined respectively.

Do note that tags should always be nested completely within each other. For instance:

Incorrect: <b><i>This is bold and italic</b></i> Correct: <b><i>This is bold and italic</i></b>

The first version is incorrect since the <b> tag should not be closed until the <i> tag inside of it is closed first. Browers will try to work around code that's 'technically' incorrect so you may not even see a problem if you view such incorrect code—but incorrect HTML is a bad habit to get into since there's no guarantee that all browsers will correctly figure out what you were trying to accomplish.

Another tag you may find useful is the <hr> tag, which stands for horizontal rule. This creates a line across the page to break up sections.

This HTML: <hr /> Creates a line that looks like this:

Notice that hr tags don't alter any text—they stand alone. Therefore, you can open and close the tag all in one step.

Links

Links connect webpages together into websites and, in a larger sense, the entire World Wide Web. Create links with the anchor tag:

Type this: <a href="/tutorials/html/references/color-chart.php" target="_blank">View Color Chart</a> To get this: View Color Chart

This tag uses two attributes. The first, href, points to the page to display if the link is clicked. You can specify the full URL—and you must do this for webpages outside of your website—or you can use absolute or relative paths for webpages within your website. If the webpage is in the same directory as the file you're working on, just the filename itself is needed.

The target attribute is completely optional—and in most cases you probably will not use it—but the target specifies where to open the link. By default, the new webpage will replace the webpage you were looking at when the link was clicked. In this example, the color chart will open in a new window.

Color Me This

Color, of course, will liven up just about any page. HTML has 16 predefined colors: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal and aqua.

You can set the color of any text by surrounding it with the <font> tag and the color attribute. For example:

Typing this: <font color="blue">I'm blue!</font> Creates this: I'm blue!

Most modern browsers will support additional color names, but they are not standardized and if you want to ensure everyone sees exactly what you want them to see, it is best to avoid them. However, there is another mechanism in place to mix your own colors. Unfortunately, it's an ugly little beast called hexadecimal numbers and RGB values.

To cut to the chase, if you look very closely at your monitor, you'll notice all those wonderful colors you see are made up from three basic colors: red, green and blue—also known as RGB. You specify how much of each color you want to mix, from 0 to 255, with 0 as "don't use this color at all" and 255 meaning "use the maximum amount of this color."

HTML makes it even more convoluted than is really necessary. It demands that numbers be expressed as hexadecimals—that is, using base 16. Using base 10—once you reach 9, you start reusing numbers and create 10. With hexadecimal numbers, that does not happen. After 9 comes A, then B, C, D, E and F. Only after F do you start reusing numbers and write 10. (Which is actually 16 if written using base 10.) So instead of specifying a number between 0 and 255 for colors, you must specify them using hexadecimals between x00 and xFF. Note that hexadecimal numbers are often preceded by a lowercase 'x' to denote that the number is hexadecimal.

Is your head spinning yet? Because we're almost done with how to mix your own colors. You specify the red, green and blue components of your new color using hexadecimal numbers smooshed together and preceded by the pound (#) sign. For example, one color I like to call Funhog Pink would be represented as #ff0080—where xFF stands for 255 (as much red as possible), x00 stands for 0 (no green at all), and x80 stands for 127 (only half the available blue).

Typing this: <font color="#ff0080">I'm Funhog Pink!</font> Creates this: I'm Funhog Pink!

It could take a lot of trial and error to find exactly the color you're looking for. Grand total, you have 16,777,216 colors to choose from! Instead of trial and error, however, I've created a color chart to help you. Look for the color you want—or at least the closest color to the one you have in mind and tweak it to suit your needs—then use the provided hexadecimal number in your HTML. Most paint programs also allow you to view the hexadecimal notation for a specific color, but how to use that feature will vary depending on your program.

Images

Now that we're linked to the rest of the Internet and our text is looking colorful and pretty, it's time to add a few pictures. Here's an example:

Typing this: <img src="/tutorials/html/tags/images/chicks.jpg" alt="Chick Photo" /> Creates this:

Strictly speaking, the source attribute (src) is the only required attribute to get your image to display and points to the location of the image in question. XHTML, however, does require the alternate attribute (alt) which displays alternate text in the event that the image cannot be displayed. Even if you do not want text to be displayed, you should still include the alt attribute—just leave the value of it blank.

There's another tag you can use with images—the align attribute. The align attribute allows you to wrap text around an image. Below are examples of how you might use the align attribute:

By using align="left", the image is pushed to the left of the text and text will wrap around it. This image was created with:

By using align="right", the image is pushed to the right of the text and text will wrap around it. This image was created with:

Putting it all together

Many more tags are available such as those used to create tables, lists and forms, but those are more advanced features that—for your simple webpages—will not be necessary.

Instead, let's look at an example where we use all of these nifty tags. Here's the source to a page displaying the creation of a gingerbread house I created a few years back.

<!DOCTYPE html> <html lang="en"> <head> <title>Gingerbread House: 2001</title> <style type="text/css"> body { padding:0 6mm; background-color:#ffffdd; } img { padding:2mm; margin:2mm; border:1px solid black; background-color:white; } h1 { color:navy; } h2 { color:maroon; } hr { clear:both; } #copyright { text-align:center; font-weight:900; } </style> </head> <body> <h1>Gingerbread House: 2001</h1> <p>Each year, I like to challenge myself with a gingerbread house. Follow along with the construction of this 2001 gingerbread house.</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house1.jpg" alt="The walls are up!" align="left" /> <h2>Putting Up the Walls</h2> <p>Half the work is just getting the gingerbread made—just getting the walls up took me three days of work!</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house2.jpg" alt="Working on the front porch" align="right" /> <h2>Roofing Complete!</h2> <p>Thanks to Scott for helping me get the rest of the roof on. You need at <i>least</i> four hands to get it on, and I'm a couple short.</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house3.jpg" alt="Need a chimney for those cold, winter nights!" align="left" /> <h2>A Chimney For Those Cold, Winter Nights</h2> <p>The chimney is made of chocolate caramel.</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house4.jpg" alt="Roof leaks—time to put on some shingles" align="right" /> <h2>The Leaky Roof Needs Shingles</h2> <p>The roof shingles are made of Big Red chewing gum. You can see a pile of it in front of the house. Looks like a regular construction zone, doesn't it?</p> <p>If you look <i>very</i> closely in this picture and the next one, you'll see a small green hand as if it was trying to get the gingerbread house. That's a leftover Halloween decoration. A candy bowl, to be exact, that tries to grab you and gives off a diabolical laughter whenever someone reaches for a piece of candy.</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house5.jpg" alt="Solidifying the foundation" align="left" /> <h2>Solidifying the Foundation</h2> <p>Did you notice how the shingles turned more red by the next day? This is not an optical illusion. I think the humidity was a contributing factor. I liked the effect, though, so I'm not complaining! The foundation of the house is made of Necco candy wafers. Notice the pile of Necco candy wafers in place of the pile of Big Red sticks? Now I understand why construction zones have big piles of junk all over the place! =)</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house6.jpg" alt="Decoration the house" align="right" /> <h2>Decorating the House</h2> <p>The dog and rails are pure icing. Piped them out onto parchment paper and waited for them to dry before trying to stick them onto the house.</p> <hr /> <img src="/tutorials/html/gingerbread-house/images/house7.jpg" alt="Creating a front yard" align="left" /> <h2>Landscaping the Yard</h2> <p>The finished house! The trees are upside-down sugar cones. The snowman is made of icing that I loaded up with powdered sugar so it could be formed into any shape I needed. The shovel is a piece of that Big Red gum with a pretzel stick glued to it using icing.</p> <hr /> <div id="copyright">©2006 Ryan Carpenter</div> </body> </html>

Go ahead and view the finished page.

You might have noticed some strange stuff in the header of the page, surrounded by style tags. What's that all about? Styles, officially called Cascading Style Sheets (CSS) in web lingo, is the best thing to happen since, perhaps, sliced bread. And we'll cover what they are and why you want to use them in the next lesson.