Archive for May 9th, 2008
The Basics of HTML
Learning HTML is fairly easy. There’s just two rules you have to remember:
1) HTML tags must be closed and
2) HTML tags must be closed in order
Before I go on with those two rules, an HTML tag is a word or set of words placed within the less than and greater than characters like so: <p>. All HTML tags are in that format and if you reverse the order – >p< – it won’t work. To close a tag, you have to use the opening tag but you must place a forward slash in front of it: </p>. To create the basic HTML page, open up Notepad or Wordpad and type the following code:
<html>
<head>
</head><body>
</body>
</html>
Once done, save the file with an html extension such as “index.html”. Index pages is the first thing that a browser loads up when accessing a website. You may have noticed that some sites use a shortened “.htm” extension. This works just as well as the .html extension so either extensions will work. Just note that if two index HTML files are loaded into the same directory, the index file with the .html extension will most likely be the one loaded by the browser.
Going back to the code I made you type out, the <html> tags tells the browser that the document is an HTML (Hyper Text Markup Language) file and it will execute it as such. What it displays is the result of your coding. If you were to load the file above, you will see an empty web page. That’s because there’s nothing in there but the very basic format of an HTML file.
Next, the <head> tag is much like the header of your document. This is where information about your web page resides such as the title (<title>), links to style sheets (<link>) or scripts (<script>), and meta (<meta>) tags that dictate the author of the site, keywords, description and other information. Meta tags and link tags (for style sheets, for example) do not need a closing tag.
The <body> tag is where all the things you see on a web page goes from images, text, and so on. There is also a footer tag that you can place after the body tag but it is hardly used and from my experience, you don’t need it. Below, I have a list of tags you can place in the body along with their explanation. Place some in your HTML document and see what they do!
<p> – This tag starts a new paragraph. It automatically creates am empty line between it and the previous tag.
<div> – A division tag. Unlike the paragraph tag, this does not automatically create a space before it. This tag is highly used when using CSS (Cascading Style Sheet) for it’s flexibility.
<b> – The original editing tag used to bold fonts. This tag has been updated to <strong> which is more commonly used in web sites nowadays though the <strong> tag is still recognized for backwards compatibility.
<i> – The original editing tag used to italicize text. Like the <strong> tag, the <em> tags current incarnation is <em> which is short for emphasis. Either tag versions will work.
<u> – An editing tag that is used to underline. Links are generally underlined so using this tag is not as widely used and if you do use it, use it sparingly because underlined text can easily be mistaken for links.
Now that you know what an HTML tag looks like and how it works, let’s get back to the two rules I mentioned.
I. HTML Tags Must Be Closed
Almost all HTML tags have an opening tag and closing tag (example: <p></p>). There are a few exceptions and those are tags that mainly reside in the head of an HTML file as I explained earlier. If you forget to close a tag especially one of the editing tags (i.e. <i>, <b>, <u>), the remaining text from that tag and onwards will be in that style. When you get to more complex HTML tags such as tables, it can easily ruin your whole web page.
II. HTML Tags Must Be Closed in Order
This rule is just as important as the first one. If you don’t close them in order properly, you can wind up with a page that doesn’t look right. For example, if you want to bold and italicize a set of text, you have to open and close them like so: <b><i>Luke! I’m your father!</i></b>. This is a no-no: <b><i>Luke! I’m your father</b></i>.
But don’t listen to what I say, try it out for yourself and see how it works. Here’s an example HTML file you can start with or compare.
<html>
<head>
</head>
<body>
<p>Hello world! </p>
<p>For some reason, that is the <i>first</i> two words most coders write when starting to learn a programming language. Now for something completely different:</p>
<p><b>n_____________n</b></p>
</body>
</html>
Btw, you can capitalize your HTML tags or leave them lowercase as I do. They will both work either way. :)
Add comment May 9, 2008
