HTML › basics |
|||||||||||||||
|
In this section, we will explore some of the basic HTML tags and their functions. HTML tags are contained within “<” and “>” brackets. Most HTML tags have an opening tag <tag>and a closing tag </tag>. If a specific tag requires a closing tag, USE IT. By making this a habit, you’ll save yourself a lot of frustration when troubleshooting and editing your pages. Most tags have attributes associated with them, further ways in which to detail the use of the tag to format your text and images. The options for those attributes are called values. This will become clear as we go. Trust me! ••• document tags The first tags you will encounter when creating a web page are these: The <html> tag tells your browser that this code is, indeed, HTML. The <head> tag encloses the <title> tag, which, obviously enough, is the title of your page. This information appears in the task bar at the bottom of your computer screen. (The <head> tag also encloses the <meta> tag, which is used for indexing by search engines; we will not concern ourselves with that in these pages.) The <body> tag contains all the “guts” of your web page. (All these tags require a closing tag, with the exception of the <meta> tag.) These tags will look like this in your web authoring software:
The <body> tag has attributes associated with it, including text color, background color, link color, and others. I like to handle these attributes in a cascading style sheet, so we’ll get to that later. ••• basic text formatting The body of your web page will contain text and images, and each container tag associated with these elements has its own “grammar” or syntax. The basic container tag for text is the <p> tag. The most common attributes for this paragraph tag are those governing alignment and class (used with style sheets). (Be patient — I told you we would get to that!) The code for centered text would look like this: The values associated with that align attribute are "center," "justify," "left," and "right." "Justify" spreads your text over the width of your page and can leave big gaps between your words; I don’t use it. The default alignment value for the <p> tag is "left." If you want your text to align on the left, you do not have to include the align attribute. Within a paragraph of text, if you want to emphasize something, make it stand out, you can do this by enclosing a portion of that text in other container tags. Use <strong> to make a word or phrase bold, <em> to italicize it. You also can nest these tags to make a word or phrase both bold and italicized. Your code would look like this: This code will render like this in your browser:
In addition to paragraph tags to contain your text, you can add some organization and hierarchy to your page with heading levels.
As you can see from the above rendering of the six heading levels, <H1> is rather large. This is the default size that HTML creates; you can change this using style sheets or you can choose not to use that <H1> tag as your first level of organization. I have used the <H1> tag only once — on this page. (You will notice, too, that I changed the color and size of the <H2>and <H5> tags. You guessed it! I did that with the use of a style sheet.) ••• bulleted and numbered lists Within your web page, you might feel the need to list items in bulleted or numbered lists. To create a bulleted (or unordered) list, this is what your code would look like:
This code will render like this in your browser:
To get a bullet other than a square, change the value of the type attribute to "disc" or "circle." "Disc" is the default and gives you a solid circle. "Circle" gives you a hollow circle. I’m partial to the squares. Don’t ask me why. The code for a numbered (or ordered) list would look like this:
This code will render like this in your browser:
As you might have guessed, you can create different kinds of ordered lists by changing the value of the type attribute. The different values are "A," "a," "I," and "i." You can nest lists inside of other lists (such as you would do for a research paper outline with major points and supporting points underneath them), but that can get rather messy rather quickly. Just stick with basic lists until you get the hang of them. ••• horizontal rules Sometimes it’s helpful to divide your page into sections or to separate elements from one another. A simple way to do this is to include a horizontal line or rule. This <hr> tag does not include a closing tag. A basic horizontal rule is coded like this: For a more “sophisticated” horizontal rule, try this: The align attribute is set to "center" to, well, center the line. (Duh!) The size attribute is set to "1" to make a thin line. You can make this as tall as you want, but I recommend using restraint here. The width attribute is set to 60% of the space available. The color of the line is set, in this case, to an orangish hue. (Internet Explorer renders this okay; Netscape leaves the line the default gray color.) The noshade attribute renders the line without a shadow. ••• line breaks The <br> tag can be a handy little fellow, used to create a line break in your paragraphs. Unlike the <p> tag that inserts a space between lines, the <hr> tag simply forces your text to the next line. Here’s an example: This code will render like this in your browser:
| |||||||||||||||
| |||||||||||||||
| |||||||||||||||
|
› basics |