Hypertext Mark-up Language
The World Wide Web. The Information Super-Highway. The Internet. The Web. Call it what you want, but the last name may be the most appropriate. This unique phenomenon, this colossal yet invisible web of shared information and creativity has steadily been woven into almost every facet of our lives. Many young people today probably can't even conceive of a time when a person couldn't instantly connect to the information he or she wanted or contact another person thousands of miles away in a split-second.
In a very real sense all this is made possible, in no small part, by something as simple as a specially-formatted shared document utilizing what we call HTML, or HyperText Mark-up Language.
A Word from Our Sponsors...
If you really want to learn the ins-and-outs of web design, I strongly suggest you visit the awesome folks at W3Schools.com. That site has just about everything there is to know about proper web page development. I am merely going to paraphrase some of what I learned there and elsewhere.
So, let's get into the good stuff, shall we?
File Structure
Here is a sample web page I put together for your viewing pleasure. Check it out, then continue reading below.
Code sample: samplepage.html
<html>
<head>
<title>Page Title Goes Here</title>
</head>
<body>
</body>
</html>
Break It Down!
So, let's talk about each part now, aye?
Each word you see surrounded with these brackets, < >, is what is known as an element tag.
The element tag, or simply tag,
denotes a special area within the document. The assorted tags tell the program responsible for parsing, or interpreting,
the document to apply certain attributes to the text contained within that element's range of influence. This range
is determined by specifying the beginning and end tags, like so:
<tag name> Stuff goes here </tag name>
In this example, the element begins with <tag name> and ends with </tag name>. Everything in between is affected by any special attributes applied to this element, such as text-alignment, font-size, etc.
If you look at samplepage.html above, you will see that it has four unique tags: <html>, <head> <title>, and <body>.
The <html> tag is like a wrapper
tag; it surrounds the entire web document. Any text outside of the <html> tag will either be ignored, or displayed without any special formatting applied to it, depending on the browser being used.
Next comes the <head> tag. This part of the web document is not displayed in the user's web browser. It is used to link the current page to other documents or to specify special rules to apply to the document. It also will normally contain a <title> tag. This instructs the browser to display a specific page title in the browser's title bar. This is useful if the web site has many pages with similar content, so that the user does not get lost
in the site.
The last, but in some ways most important tag, is the <body> tag. It is here that all of the viewable text is placed. This is the part of the web document that a user actually sees in his or her browser.
With these four simple tags, it is possible to build a perfectly valid, if completely vanilla,
web document.
Do You Want to Know More...?
Check out the tag list if you want to see all of the available HTML tags.
A More Robust Sample
Okay, now that you have a general idea of what a web page is, let's make a more real-life
example, hmm? We want to create a page similar, to, say... this page! Yeah!
First off, let's look at how this page is organized. There's the fancy site graphic up top. We have a nice little menu for navigation (which I happen to embed in the site logo). Then we have this awesome content, followed by the stuff on the bottom, like last updated,
copyright,
blah blah blah...
Since those parts listed above all describe different sections of the page, I section them off in my code. This is easy to do; simply create a <div> element for each section, like so:
Code sample: samplepage.html, Part 2
<html>
<head>
<title>Page Title Goes Here</title>
</head>
<body>
<!-- header -->
<div>
</div>
<!-- navigation -->
<div>
</div>
<!-- content -->
<div>
</div>
<!-- footer -->
<div>
</div>
</body>
</html>
Pretty cool, eh? DIV tags are nice, since they can styled in just about any way imaginable, yet do not have much in the way of default attributes, unlike, say, <p> tags (paragraph elements).
So now what?
, I hear some of you ask. Well, that's all up to you! The header element usually contains the image(s) and/or the title you use to identify your site. Use the image tag, <img>, to add an image, and you can either type your site title into the <div> tag directly or add a <p> element first, then type your text into that. The navigation section should have link tags, <a>, with links to each page on your site. The content section should be self-explanatory. And the footer section is normally used for such things as copyright dates, links to validators, etc.
Here's a rather simple example of what I'm talking about:
Code sample: samplepage.html, Part 3
<html>
<head>
<title>Page Title Goes Here</title>
</head>
<body>
<!-- header -->
<div>
<img alt="" src="assets/logo.png" >
<p> My Sample Site </p>
</div>
<!-- navigation -->
<div>
<a href="index.html"> Home </a>
</div>
<!-- content -->
<div>
<h1> Welcome </h1>
<p> This is my sample site. Isn't it nice? :) </p>
</div>
<!-- footer -->
<div>
<p> ©2008 All rights waived. </p>
</div>
</body>
</html>
And that is about all I will show you, for now. I will put together a better step-by-step tutorial for those who want it...