General Guidelines: The basics of HTML
Tags and Attributes
When you code HTML, you use many tags put together to form a web page. A tag is simply text put in between the greater and lesser than signs like this:
Most tags have a lasting effect, and will just keep goin' until you stop them. In the case you wish to stop a tag, add a backslash to the beginning of the tag:
You can't use any plain word, though. Unfortunately computers aren't psychic just yet (that's coming in the next 30-ish years...) Instead, there are many pre-set tags with pre-set attributes that you can use, and everything else will be ignored. An attribute is an optional bit of information you can add-on to a tag to be more specific. To use many attributes at once, simply seperate them by a space. For example, the <table> tag placed alone has a border by default. However, removing the border can be done by an attribute:
In this case "border" is the attribute, and "0" is the value. Since 0 means "nothing", it removes the border.
Remember to always, always, always put values in quotes; If your value is more than one word or has a special character like an accent, it won't work without quotes.
Basic Tags, Basic Attributes
You probably already know these, but here's a list of basic tags and what they do:
- <p>, </p>: Text in between these tags is put into a paragraph. A paragraph is basically HTML's way of saying "This is text". While simply writing text without putting the text in paragraph tags will work, standard-wise it is unacceptable and will stop working in the future. Also, CSS won't work with this type of text so it is really better to get into the habit of using paragraphs whenever possible.
- <h#>, </h#>: If you replace # for a number betwee 1 and 6, you get heading levels. h1 is the highest heading, with the largest test. h6 is the lowest heading, with a smaller text h1-5.
- <a>, </a>: This is a link tag. You can use this to create a hyperlink (a link to another one of your pages or a web page on the Internet) on your web page. the link tag alone without these attributes is pretty much useless:
This attribute gives the site the link will point to when clicked on.
This attribute is optional, it is used to make a link target a new window (open in a new window) when target="_blank" is used, or it can have a link target a frame named NAME rather than the current page; We will discuss how this works later on.
- <font>, </font>: These tags have various attributes like "size", "face" and "color" that help you style your web pages. Note that this tag is now deprecated, meaning old and no longer used. The new, better and much faster way to style documents is to use CSS.
- <table>, </table>: We discuss tables more in-depth later on, but they are a way of laying out advanced HTML pages.
- <hr> (stand alone tag): This tag doesn't need an ending, so you use it on it's own. hr will insert a horizontal ruler, basically a line like this:
- <br>, (stand alone tag): This tag skips a line when used in a paragraph. If you want to
manually break a line
like this, br does the job well. Many br's together like this <br><br> will skip...
Keep things tidy... Seriously, I'm not kidding!
All white space (more than two spaces in a row, extra blank lines, etc) are completely ignored HTML! This means that don't be afraid to use white space to keep your code tidy. For example, instead of writing:
<p><font size="3"><font color="red">My Big Paragraph Here</font></font></p><br><img src="my_image.jpg"><br><p>More Text Here</p>
Which is all on one line and will be hard to read and edit later on, use line breaks and seperate tags that go inside eachother (these are called "nested elements") by two spaces so it looks like this:
My Big Paragraph Here
More Text Here
If you try using either code, you'll see they render the same but when you start using tables and the HTML becomes more complex, it's much easier to read code when it's well organized.