Welcome
Welcome
Welcome content.
Recent News
Learning HTML-Part 1-Architecture of a Web PageThis tutorial was written to get a beginner to web design, up to speed quickly. There are many resources for teaching html and web design on the internet. But most of them are complicated tutorials which take up long periods of your time. However, the purpose of this tutorial series is to get you writing html as quickly as possible. After all, the sooner you get your feet wet, the quicker you’ll be building your web site and getting your message out to the world.
So let’s get started.
What is HTML?
If you’ve never been exposed to web design, the first question your probably asking yourself is what is this html stuff? First, html simply stands for Hyper Text Markup Language. Html are markup tags used to format text based documents for display in a web browser such as Internet Explorer or Mozilla Firefox. Valid html files must have an .html, or .htm file extension. Examples would be, mypage.htm, or mypage.html. One good thing about an html web page is that it can be created with any text editor such as notepad. Don’t worry if you not exactly sure what that all this means, we’ll be diving in and covering all of this in detailed step-by-step instructions in future tutorials.
What Are HTML Tags?
If you’ve been around the web a time or two, you are probably familiar with the term tags. This can be confusing however, because many sites use the term tags in reference to keywords, but in the case of html web design, tags are not keywords at all but they are markup codes used to format a text document.
A tag looks something like this.
<html>
As you can see the html tags are specified by the < and the > symbol. The text that goes in between these symbols is the name of the tag you wish to use in your document.
For example, if you wanted to make the word Hello bold, you would use the html bold tag, <b> to do this. Here’s what it might look like in a sentence. Of course, the html tags do not get displayed in the web browser.
I want to say <b>Hello</b> to everyone.
The web browser would display,
I want to say Hello to everyone.
What Just Happened?
In the example above, I used the bold tag, <b>, to make the word Hello bold. What you might also notice is that I used the bold tag twice. Once to tell the web browser where to start making the text bold, and a second time to specify where I wanted the bold text to end. The end tag, or closing tag has one difference. It contains a / in the tag, </b>.
In most cases, you’ll want to close your html tags this way, however, there are some exceptions that we’ll look at later, but for now, I want you to understand what a tag looks like.
Architecture of a Web Page
Now that you are familiar with html, and what a tag looks like, I’ll show you the basic architecture of a web page. Don’t worry, it’s simple, and virtually every web page works on this exact layout structure.
Here is a simple html document.
<html>
<head>
Head content goes here.
——————————
</head>
<body>
Web page goes here.
</body>
</html>
——————————
That’s it. That’s the architecture of a web page in a nutshell. Of course, that document would not really do much, but in the upcoming tutorials we’ll be taking that basic template and adding to it to create our first html web page.
First let’s take a look at the basic html architecture in the example above and I’ll explain what is going on.
<html>: The first thing you see is an <html> tag. This tells the browser that this is an html document.
<head> : Next we see the <head> tag. This tells the browser that the following content is in the head section of the web site, and is not to be displayed in the browser window.
</head>: After the head content we see a closing </head> tag noted by the /. This simply tells the browser that this is the end of the head section of the document.
<body>: Next, you’ll see a <body> tag. This tells the browser that the actual web page content is next.
</body > : Once again, after the page content, we close the body with a closing </body> tag.
</html>: Finally, we come to end of the html document. There is a closing </html> tag to close the document off and let the browser know that this is the end of the document.
As I said, this basic template is the foundation for any web page you might want to create. Don’t worry if you are still a bit confused, read back through this tutorial and study the layout above. It will all start to come together in the next tutorial when we actually create an html document and view it in your web browser.
Have fun, and we’ll see you in the next tutorial.
From the Blog
- Troy Berlin Launches TroyBerlin.com · January 1, 2006