Getting Started: Basic HTML tags


Every HTML, or Hyper Text Markup Language, document is based on four tags, <html>, <head>, <title>, and <body>. They're laid out like this:

<html>
<head>
<title> </title>
</head>

<body>



</body>

</html>


Breakdown...

The coding inside of the < and > is called a tag. You also notice that there are two sets of these tags- we'll call them a starting tag and a closing tag. You must remember to end your tags- otherwise things will look funny. You can end a tag by putting </TAGNAME>,with the name of the tag where TAGNAME is. Very simple ^^
<html>, </html>- These are optional, but it is considered proper form if you include these tags.
<head>, </head>- Coding that you want to occur before the page loads is put inside these tags, mostly JavaScript and CSS. Don't worry about that now, it's not really important at this stage. These tags are also optional.
<title>, </title>- Type what you want to display as the page's title here. It displays on the title bar...now that makes sense, doesn't it?
<body>, </body>- These tags are optional, but it is considered proper form to include them. It makes it easier for organizational purposes (in my case, at least). Your web page content coding goes between them.



Basic Body Tags

<p> - Start a new paragraph, like this:

You can also chose how to align your paragraph. You have three options: Left, Right, or Center. To do this, you need to put <p align="ALIGNMENT">, placing any of the three in the quotes where "ALIGNMENT" is. Very simple ^^ Paragraphs are automatically left-aligned.

This is left-aligned. This is left-aligned. This is left-aligned. This is left-aligned.This is left-aligned. This is left-aligned. This is left-aligned. This is left-aligned.

This is right-aligned. This is right-aligned. This is right-aligned. This is right-aligned. This is right-aligned. This is right-aligned. This is right-aligned. This is right-aligned.

This is centered. This is centered. This is centered. This is centered. This is centered. This is centered. This is centered. This is centered. This is centered. This is centered.

<center> Sort of like the <p align="center"> tag, except saves you some typing. Remember to end this tag, otherwise the rest of your page will be centered unless you specify.

<br> This code moves your text down one line, like this:
It doesn't skip a line like the <p> tag does, and I personally like it better.

&nbsp; This code inserts one space, useful for creating indents for paragraphs, like this:
     Text starts here...blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah....I think you get the idea....

Headings - Headings can help organize your web page. There are six sizes, 1-6, and you can also pair them with style sheets for quick formatting. You'd type <H*>Heading text here </H*>, replacing the * with a number 1-6.

Heading size one

Heading size two

Heading size three

Heading size four

Heading size five
Heading size six
You can also choose to align the headings by using the same align="ALIGNMENT" that you use in the <p> tag.

<!-- Comment tag --> This tag allows you to place comments on your webpage that the viewer can't see. It's very nice for organizational purposes as you do your coding. Type <!-- COMMENT HERE --> to add a comment.
To preview a comment, or any website's coding, simply go to View/Source in your browser's menu.

Changing the Background color To change the background color of your web page, type bgcolor="COLOR" in the body tag. Some color codes work, such as red, black, magenta, blue, et cetera, but it might be better to use a Hexadecimal color. For a list of the hexadecimal colors that are web-safe (everybody's computer views them the same), you can visit VisiBone.com and access their web pallet. Very nifty ^^

Add a Horizontal rule- This can be used to creat a divider in a page. It looks something like this:


Type <hr>, and inside this tag, you can change the width (width="*%"), height (size="*"), and color (color="Hex code or color name).