Beginner's Guide Series - Basic HTML, part 1
A friend of mine is learning ColdFusion, so I said to myself "Hey! That would make a great subject for the blog!" As this person is pretty much starting from scratch, I thought it'd be a good idea to write up a series for beginners. I have no intention of reinventing the wheel here, just helping out a friend and sharing with the world.
What is HTML?
HTML is the standard format for web pages. It's basically just a plain text document, with some structure information. The browser receives this information and applies different styles to the provided elements.
HTML uses a tag based syntax to represent this structure. For example, if we wanted to display text within a paragraph, here's what we could write:
A tag is a word enclosed within chevrons (<>). Certain tags will surround other text (like the previous example). To indicate that we are closing the tag, we need to put a forward slash (/) in front of the word.
A closing tag: </p>
In this example, anything included between the starting and closing tag will be presented in a paragraph. An HTML document is built entirely using tags like this one.
My First HTML Document
An HTML document always starts with a basic structure:
<head>
<title>This is the page's title</title>
</head>
<body>
</body>
</html>
The <html> tag encloses the entire document: it determines the beginning and the end of the page. There are then two subsections: <head> and <body>. The head section includes header information, like the title of the page. It should also be used to link to other resources (more on that later). The body section, on the other hand, contains what will actually be displayed in the browser. This is where we'll be placing our paragraphs, our headers, our tables, etc.
The first example used in learning most programming languges is the "Hello world!" script. Basically, it only requires that an output of "Hello world!" be sent to the screen. Using what we already know, we can do this rather simply in HTML:
<head>
<title>My "Hello world!" example.</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
This should give you something that looks a little like this:
In our next episode, I'll explore HTML's most used tags: paragraphs, headers, lists and tables.
I'm aware I forgot a couple of _really_ important tags in that last line there (think links and images). I haven't forgotten about them, and they will be included in the next post.
