WengerEnterprises
    Simplifying Web Design


Pages

Tools

Webmasters


    

HTML Structure

Let's take a look back. HTML is the basic layout of websites. The doctype declares what type of HTML we're going to use. Now it's time to actually use some HTML.

The first tag is the HTML tag. Who knew? This is declaring that you have actually started using HTML. Remember that a tag is formatted as <tag> and </tag>. The <tag> is the "opening tag" and </tag> is the "closing tag".

Now, what's the first thing on our page again? The doctype. That said, we'll start here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
</html>

If you put that on a page, it won't do anything exciting, will it? The whole point of the above is to state what type of HTML will be used, that the HTML has begun, and that the HTML has ended. To make it do exciting things, we need to do things between the HTML tags. Simple enough.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
</head>
</html>

A new tag! The head tag is a place to put information such as the title of the page that is displayed at the top left. See the title of this page? It's "HTML Structure Tutorial - Wenger Enterprises Beginner Web Design Tutorials, Resources, Tools, Scripts, and More". Which leads us to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Webpage</title>
</head>
</html>

Now there is finally something you can see! Not very exciting yet, but at least you've gotten this far. It only gets better from here.

"Alright, that's fine and dandy, but when can I do something with that big white box sitting there staring at me?" Right now. The head tag precedes another tag called the "Body" tag. This is where most of what you see in your web browser is coded.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>Hi</p>
</body>
</html>

Let's look at the <p> tag a little more closely.

<p>Hi</p>

The "p" tag stands for "paragraph". I'm sure you know what a paragraph is; you're reading one. The p tag seperates your text into paragraphs. You don't have to use it, you could just say "Hi" without the tag, but it's more organized to use it. Not to mention you can style your text as well which comes into play in CSS, which stands for Cascading Style Sheets. You will learn about this much later.

That's enough for this lesson. You should be able to create this page now. The next lesson will show you how to put images on your website.




©WengerEnterprises.com - All Rights Reserved

Privacy Policy