Site Development
Downloads
Help!!
Home
The <h> TagsNow that we can make all sorts of neat looking paragraphs and other text blocks, we need a way to put a big title on the screen. Sort of like a magazine makes article titles and subtitles. Don't confuse these header type titles with the <title> that appears in the Title Bar of the browser. These headers show up in big print on your page itself. In HTML we do this with the <h> tags. Let's make a really big headline right now:
<html> The first thing to note is that there is a number right after the "h" in the tag. This number is required. We used number "1". This produces the largest header that can be made with header tags. The sizes range from 1-6. An <h6> tag is not much more than bold ("<b>") text. Also notice that there's a </h1> tag. The text between these tags is what becomes the large, visible header on the screen. The closing tag must have the same number as the opening tag. An </h5> tag won't close a <h1> header. Click here to see the <h1> tag at work as per our above example. Now lets try an example that will show us the relative scale of each header tag. I'll use my name in this example:
<html> Check what the code looks like in a browser here. As a rule of style, larger headers are used to title an overall page and smaller headers title the subsections. Give headers a whirl until you're comfortable with them and we'll move on to aligning text. Text AlignmentLook at the header "Text Alignment" above and you'll notice that it's centered on the page. We're about to cover how to do this and a whole lot more. First, we need to know about attributes. So far, we've been making tags with only one string of text and no spaces. This string of text is called the tag's element. You can add attributes to tags to get them to do more. Let's center an <h3> header: <h3 align="center">A Centered Title</h3> We've got a little to talk about here. First, lets get some names straight. The element of the above tag is "h3". Remember that the element is the first string typed into the tag. The attribute in this tag is "align". The value of the attribute is "center". Also notice the space in the code between the element and the attribute. Otherwise there are no spaces. A space inside a tag tells the browser to expect an attribute and value. Attributes generally come with a value of some sort. In the case of ALIGN, you can use the values "left", "right", and "center" for header tags. ALIGN="left" is the default if you don't add an attribute. We put the value "center" in quotation marks (" "). There are a few rules about when to use or not use quotes to contain values. Not all values need to be nested in quotes - like number values. The most important rule to remember is that putting an attribute's value in quotes never hurts, but forgetting quotation marks around a value that needs them always screws things up. If in doubt, put your values in quotes. Finally, notice that we do not have to put attributes in the closing </h3> tag. This applies to all tag sets. You do not put attributes in closing tags, only opening tags. There are a variety of attributes and you can put as many as you like in an opening tag. Not all tags support all attributes, so some attributes won't work in certain tags. We'll be covering this and more on attributes as we go. For now, practice using ALIGN with your header tags. More On AligningThe <p> tag also accepts the ALIGN attribute. You can also use another value -- "justify". Justify makes each line of text the same length when displayed regardless of the number of characters on each line. It uses little extra spaces to do this. The other values work just like with header tags. Try adding ALIGN to <p> tags:
<html> Click here to see what the above sample looks like when rendered by your browser. There are a couple of new tags that can help you align large blocks of content. You can use the <center> tag to center a large amount of content. You just put everything you want centered inside <center> and </center> tags:
<html> Notice that we don't need to use the ALIGN attribute in this case. The <center> tags do all the work. View the page this code makes here. The second tag you can use to get the <center> tag's job done is <div align="center">. Note that the <div> tag uses the ALIGN attribute we've previously discussed. You can use the other alignment values, too. This makes the <div> tag much more powerful than <center>. The term "div" means "division", a division of your content, or a block of content. In fact, the <center> tag has been "deprecated". This means it's been marked for death and that browsers may one day no longer support it. It has been replaced with the more powerful and flexible <div> tag. I don't think support for <center> will actually disappear in the major browsers for the foreseeable future, but it's a good idea to use <div> instead. Use the <div> tag just like the <center> tag to surround the content you want aligned:
<html> Notice that, unlike the <center> tag, the <div> tag requires an ALIGN attribute to work. The results of the above code will look exactly like the page using the <center> tag. With the <div> tag you can also use the "left" and "right" values for ALIGN. Practice making headers and aligning them with the ALIGN attribute. Also practice aligning blocks of text with the <div> and <center> tags. When you're comfortable with this we'll move on to how to add Special Characters, like the copyright symbol ( © ), to your page. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index