Lesson #2: Body tags

In the last lesson, I covered the basic structure for web pages. Today, I'm going to talk about tags you can use in the <body> section of your document.

I may have to split this into multiple lessons. Tags will be listed in the order I think of them, with most important ones likely being first. HTML experts out there, feel free to add to the list in the comments if you'd like. Wink

Okay, so, here are some of the HTML tags you'll use a ton:

<p> is the tag used to define (read: make) paragraphs. HTML doesn't count paragraphs unless you specifically tell it to. So, if you press enter in between every word in your page, it'll display all in one paragraph. We don't want that, so <p> tags can be used to tell HTML to space it out.

Example:

Code:: <p>This is a paragraph.</p><p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

Of course, in practice, you'd write the above code like this:

Code:: <p>This is a paragraph.</p> <p>This is another paragraph.</p>

It just looks cleaner. Smile

<a> is the tag used for defining links. Why "a"? I haven't a clue. Maybe address?

To use <a>, you'll have to tell the HTML code where the link goes. This is done with HTML "attributes". So, here's a link to CC's main page:

Code:: <a href="http://www.campbellcountymb.com">Campbell County</a>

Campbell County

The href attribute tells the web browser exactly where to go when the link is clicked. The text inside the tags, "Campbell County", is the text that you click on to follow the link.

Other attributes you may often use in <a> tags are title, and target. Title tells the browser what to show you if you hover your mouse over the link, and target tells your browser where to open the link- either a new tab, or the current tab, or even a custom frame (I'll get to that later on).

The target attribute is considered pesky, so you shouldn't use it. But if you want to, you can. Just use it sparingly. Wink

<img> is the tag you use to display images on your page. This one is very common now, and you'll need to learn how to use it properly. This is also a tag I'll likely spend an entire lesson focusing on because it's so important. But, for now, a quick example use of <img> for ya:

Code:: <img src="http://ryanhoots.com/images/host/hacking.png">

Notice there's no closing tag for <img>. There's no reason to put any text inside it, so <img> stands alone, without another tag to close it.

It's good practice, though, to close the <img> tag with a slash at the end of the tag, like this:

Code:: <img src="http://ryanhoots.com/images/host/hacking.png"/>

That slash doesn't change how the image looks, it's just good practice. Not strictly required, but it's probably a good idea.

And, finally, some formatting tags before I get into some complicated stuff.

<b> makes text bold. <strong> works too, though.

<i> makes text italics. <em> works, too.

<u> makes text underlined.

~~<s> makes text strikethrough.~~

For math and physics geeks, <sup> is ^superscript while <sub> is _subscript. This allows for proper rendering of fancy math stuff. Very Happy

x³=(7)(n₁)-y^n₂

<h1>, <h2>, <h3>, and so on up to <h6>, make headers. <h1> is the largest.

<h1> is huge!

<h6> isn't!

Note: most of the time, <h1> headers won't have a line beneath it. You have to put that there yourself. But on CC, <h1> will always have a line break.

Speaking of line breaks, that's what <hr> does.

It looks like this:

Of course, you can style it however you want with CSS.

Okay, that aside, it's time for the fun stuff. The <div> tag. <div> is mostly used alongside CSS, which will be the main focus of the next lesson.

Unlike other tags so far, like <img> and <p>, <div> doesn't directly change how your page looks. It's used to divide your content into chunks, telling the web browser to treat them differently.

CSS is used to give HTML pages color and style, and <div>s are used, primarily, to tell CSS what section is what. Example:

Code:: <html> <head> <title>Foo</title> <link rel="stylesheet" type="text/css" href="foo.css"/> </head> <body> <div id="header"><h1>Foo</h1></div> <div id="content"><p>This is foo. Foo is foo. Foo is also frou-frou.</p></div> <hr/> <div id="copyright"><p>Foo is copyright 1320 Foo.</p></div> </body> </html>

Psst... if you want to see all the tags, including ones you'll probably never use, look here: http://en.wikipedia.org/wiki/HTML_element#List_of_all_HTML_elements

Assignment: Make an ad for Campbell County in the form of an HTML document. PM Sko if you really need help, but try to do it on your own.

This ad should have a header, at least one line break, and make proper use of <p> and <a> as needed. Google is your friend for this one.

Style isn't required. Black and white is fine, and perfect if you want to print it out.

Lesson #2: Body tags