15 Little Things to Know About HTML
I claim there are only about 15 things you need to know to be able to hand code a webpage. In reality, no one can expect you to read this and just hand code a webpage, myself included. Think of these 15 things as areas to be aware of. It will take a little while before you really understand these things. And that's just fine! Relax. It will come in time.
OK. What are the 15 things?
.:Open, Close, Nest. In HTML (ok, in XHTML, really), you open an element with an opening tag, then, at the end of the element, you signal the end by using a closing tag. (ie. Open a paragraph with <p> and close it with </p>). Closing tags always have a forward slash just after the less-than sign. Exceptions are so rare that you can learn them in time. All tags must be properly nested. (ie. If you put a link in a paragraph, you must close the link element BEFORE closing the paragraph element - <p>blah, blah, blah text <a href="linktosomewhere">blah</a></p>. The link element is nested within the paragraph here, as it should be.) Remember, open-close-nest, and you're on your way!
.:Lowercase tags. Write your tags in lowercase. It isn't required in HTML, and we used to write markup in caps, but World Wide Web Consortium (W3C) standards for XHTML call for lowercase markup and HTML doesn't care.
.:<html>. All HTML documents open with <html> and close with </html>. Everything else gets nested within these two tags. See Open, Close, Nest above.(The one exception is the document type declaration, but you don't need to think about that to get started.)
.:<head>. Right after we open the HTML document with <html>, we add the HEAD element. The HEAD provides your user's browser with some information about your website. For example, if we put the webpage's TITLE in the HEAD, our user finds that title reproduced at the very top of his or her browser. There is a lot of other good stuff in the HEAD, but we don't need to sweat it to get started. We must close our HEAD before we move to the BODY, or we won't be following good practice.
.:<body>. The stuff we want our users to see is contained in the BODY element. Our text, images, navigation, etc. are either physically contained in the BODY, or are pulled into the BODY from elsewhere via links. The relationship between the HEAD and BODY is one philosophers and theologians can ponder - is the head, our mind, spirit, consciousness connected to our body? With HTML, the relationship is quite clear. We don't want our HEAD in our BODY (there's a joke in there somwhere), or vice versa. We do not nest the BODY in the HEAD. We open with <html>, then open our <head>. We always close the HEAD (</head>) before opening the BODY (<body>). End of thing-to-know number five.
.:<h1>, <h2>, <h3>, <h4>, etc. HEADINGS are quite useful because they help us style our text by breaking it up into different pieces. A single webpage might have a main heading (<h1>) in a large font, and subheadings (<h2>, <h3>, or more) breaking the text into different pieces. The higher the number, the smaller the type (<h1> is big, and <h4> is much smaller). We should use <h1> only once on a specific page, and should reserve it for the main heading or title for the page. Others can be used over and over. While we can (and should) customize the look of our HEADINGS, we should preserve the general practice of keeping <h1> as our largest heading.
.:<p>. The PARAGRAPH is a good friend to the writer, and you need to know it! This element groups stuff together. You can put images, links, text, and more between the <p> and </p> tags. See some tutorials for more on this element.
.:<br /> (or <br>). The BREAK is another good friend to the writer, and you'll probably stumble across it when you need it. In practice, the <br /> differs from the <p> in the following way: the BREAK gives you a single-space, or line break in your text, while the PARAGRAPH gives you a double-space, or paragraph break in your text. Important Note: in HTML, you can write the BREAK without closing it (as in <br>), but XHTML standards require even empty elements to have a close. The way we do this right is to write the forward slash that signals a closing tag right after the "br" and before the greater-than sign, like so: <br />. (Do notice that there's a space between the "r" and "/" in that tag.)
.:<a>. The ANCHOR element is very, very important. Without it, a webpage isn't really making use of its status as a webpage. The A is our link element. We can use it to turn text or images into links that take the user to another page, to create links that help the user jump around on a single page, to create an email button for users, and more. To make a basic text link to another webpage, we write the A as follows: <a href="http://gohereonclick.com">go here</a>. The opening (<a>) and closing (</a>) A tags turn the text between them (in this example, "go here"), into a link. The "http://gohereonclick.com" tells the computer where to go when the user clicks the link. FYI: in our example here, "href" is known as an ATTRIBUTE of our A tag, and we call "gohereonclick" the VALUE of that attribute. Values always appear in quotation marks! Basically, we're saying, turn "go here" into a link that will take the user to "gohereonclick.com". There are some important variations here when we want to build links to different parts of a single page (we need the "name" ATTRIBUTE), or when we make an email link (our VALUE has to be "mailto:emailaddresshere"). But that's enough for now.
.:Comments. It is often helpful to make little notes in the source code to remind ourselves of things we're doing in the code, to acknowledge the authors of bits of code we're using, or simply to insert a date of creation stamp in the code. But we don't always want that information popping up in the user's browser window. So, we want it, but we want it hidden in the source code. We do this with a comment. A comment always opens with "<!--" (less-than sign, exclamation point, dash, dash) and closes with "-->" (dash, dash, greater-than sign), as in "<!--This could be a comment-->". Comments can be very helpful when we want to remember where we got something, or how/why we did something with our design. That's ten. Only five left.
.:<img /> (or <img>). The IMAGE element enables you to insert an image (picture or graphic) into your webpage. Like the BREAK above, it is an empty element and has only one part to it, and so needs that front slash at the end if we're coding for XHTML. If you want to insert an image called "myimage.jpg" into your page, the basic code looks like this: <img src="myimage.jpg" />. Notice our IMAGE element has an ATTRIBUTE called "src" and a VALUE (myimage.jpg). If this element looks a little like A, good for you! "A" says, "insert a link here," while IMG says, "insert an image here."
.:Lists. Lists are another useful tool for us, and you should have some sense of how they work. There are two main kinds of lists, ORDERED LISTS and UNORDERED LISTS. Ordered lists put the list items in order - think of an outline where you have point 1, point 2 , etc. These points are in a clear order, and the browser will add numbers to your items for this kind of list. Unordered lists aren't in any numerical order, and the browser adds bullet points, or something to mark the different items. ORDERED LISTS are opened with an <ol> tag and closed with, you know this, </ol>. UNORDERED LISTS, following a convention no one understands, are opened with a <ul> and closed with </ul>. Each list item is marked by <li> and </li>. Easy. Remember: Open, Close, Nest. All LIST ITEMS go between the opening tag (<ol> or <ul>) and the closing tag (</ol> or </ul>). Practice a couple lists and you'll get it.
.:ATTRIBUTES & VALUES. Ok, you've already seen these words and their function in a couple different places, notably in <a> and <img /> above. Now that we've seen them in practice, we ought to explore their power a bit. Think of ATTRIBUTES as the features of an element. With ANCHOR (<a>), we added a hyperlink feature. The VALUE simply specifies the characteristics of that feature. Again, with <a>, we wrote that the hyperlink will take the user to "gohereonclick.com". We always insert attributes and values into elements as follows: <tag attribute="value">. Once we generalize beyond the specifics of the ANCHOR example, we open ourselves up to a whole world of fun with attributes and values! We can add more than one attribute to an element and specify a font color, background color, link effect, and more to our webpages. For example, in the <body> of my webpage I can use the "bgcolor" ATTRIBUTE to make my webpage blue, or the "background" ATTRIBUTE to put a nice background image onto my webpage. I just need to specify the VALUE for blue (<body bgcolor="#0000FF">) or a valid VALUE for that background image (<body background="images/background.gif">).
.:Colors. This is weird at first, but it's easy to put into practice. The colors you use on your website will be a combination of six numbers and letters that follow the number (#) sign. This combination, known as a "hexadecimal value," is a way of translating RGB (red-green-blue) values into another system. I won't bore you with the history and logic of the hexadecimal system, in part because I only understand some of it, but the first two characters after the # stand for the RED value, the next two for the GREEN value, and the last two for the BLUE value. (This is why the value for blue is #0000FF in ATTRIBUTES & VALUES above.) The code for black is #000000, the code for white is #FFFFFF, and pure red, green, and blue are #FF0000, #00FF00, and #0000FF, respectively. (The letters run from A-F, and the numbers are 0-9. If you see an 0 in a hexadecimal value, know that it is a zero and not the letter O.) There are lots of color wheels and lists of the entire rainbow of hexadecimal colors available on the web. And any decent image editing software program will have a color picker that enables you to use your eyes to pick a color you like while giving you the right hexadecimal value, or hex code. Don't memorize, or sweat the details. Just know that you need a # and a combination of six numbers/letters. See our Resources for some color help.
.:TABLE. The TABLE element is very, very important for designing in HTML, and is really best understood in a tutorial. Please do a tutorial on TABLE! While originally created as a way to present tabular information, for better or worse TABLE has become the major tool for layout in web design. In a sense, then, it is quite fitting that it is the last of our fifteen little things. Think about a table. It has rows and columns, right? Usually, we use it to present information in a grid format, as in a spreadsheet. In short, we often use tables to organize information for a reader or user. And we can and should use TABLE in that way in our websites. If you have data or information that can be easily understood if presented in a table, then use TABLE for that purpose. But we can also use TABLE to layout our entire webpage. We can sketch our website on a piece of of paper and put in gridlines to mark different sections of the page, and then put some of the features of TABLE to work for us. We can use it to position a little image in the upper left corner, to put our navigation buttons on the right side of the page, to keep the main text for a webpage positioned in a certain place. To do this, we need to be able to bring together the fourteen other basic things, and add a bit to our understanding of available ATTRIBUTES and VALUES. We won't worry about that here (this is the basics, after all). But what is TABLE? TABLE is an element that has a set of rows (TABLE ROW) and some information (called TABLE DATA). We open TABLE with <table> and close it with </table>. In between these tags, we can insert any number of rows (<tr></tr>) and columns (<td></td>), always remembering to Open, Close, Nest. Basically, we open our TABLE element, then open a TABLE ROW element. We create columns for that row by using the TABLE DATA element (nesting it within the TABLE ROW). We can add ATTRIBUTES like height, width, bgcolor, to our <table>, our <tr>, or our <td>. And we can use ATTRIBUTES like "rowspan" and "colspan" to merge some of the cells of our table and make room for goodies like a navigation bar or a header graphic.