Anatomy of a web page pt1
You are here > Home > Blog >
Anatomy of a web page part 1
Some developers starting out find the concepts of creating a
webpage quite odd and difficult to remember. So I thought I'd like
to sum up the key concepts in this blog to give you a helping
hand.
HTML is a coding language and one of its principles is the
concept of the tag.
A tag is an identifier that denotes a part of the web page that
needs to be compiled. Tags break up the page into logical sections.
Before we talk more about tags perhaps we should discuss the form
that a tag takes.
Lets say we had a tag called "mytag". We could apply it to a
webpage in the following format:
<mytag> descriptor or text</mytag>
So the mytag has an opening statement - the <mytag>, this
is then followed with text or other statements and then the tag is
closed - the </mytag>.
OK. It does get a little more complicated than that but not much
more. So tags have an opening and closing statement. The
opening statement is always
<name of tag>
and the closing tag is exactly the same but with the inclusion
of the slash or the / mark being
</name of tag> .
This format is used throughout HTML and you should get
used to it.
What is a Webpage?
A web page is just a plain page of ASCCII text like you would
see if you opened Notepad or Mac Equivalent. Many developers
just use a plain old text editor for writing pages anyway, and get
used to the constructs, and can visualise the finished page.
A web page starts with an opening tag the <html> tag. This
tag is usually the first tag on the page unless you are using
asp.net (or similar) page directives etc.
So the page starts its life like this:
<html>
</html>
If you fired it at a web server you wouldn't get a whole lot of
output but every page starts its life this way.
Next you will get the <head> tag. This tag is used by the
web server to find out what the web page is all about. It is
inserted between the <html> tags like this:
<html>
<head>
</head>
</html>
It is very important that you understand that the head tag and
any other tags are enclosed within the html tag.
A web page is sent to a web server for processing. A web server
looks at the page and makes it available for a web browser to view.
The web browser gets the page and assembles it locally for display
on the local computer.
So the web browser is expecting the first tag to be the html
tag. Then its expecting the second tag to be the head tag and so on
and so forth. A web page denotes what part is what by using the
opening and closing tags to denote where everything is.
Lost… Don't worry it gets easier.
At the moment our web page is rather blank so we need some
content. But we can just throw in content willy nilly. No we need
to enclose our content with a tag. This tage is called <body>
meaning body of text.
Here is our web page:
<html>
<head>
</head>
<body>
Some very interesting content
</body>
</html>
The web page is now complete and can be shown in a web browser.
Try it for yourself. Open notepad and type in the code above, and
save it as webpage.html. Run the file and it will appear in your
default browser. All you will see is "Some very interesting content
"displayed as that is the only text within the body tags.
The <Head> tag
The head tag is all about information about the web page.
Nothing in the head tag is displayed on the web page.
So what sort of stuff do you find in the head tag?
Let consider a few of the well known tags that live there. Fist
the <title> tag
<title> My Web Page </title>
The title tag displayed in the top border of your web browser,
so if your title was set to "My Web Page" then "My Web Page -
Mozilla Firefox " would be displayed (if your web browser was
Firefox that is).
Next comes the Meta tag
The meta tag is all about giving information about your page.
Historically these tags were used by search engines to find out
about a page. The meta tag like many other tags support parameters.
These are like arguments passed to the tag that change the
information being displayed. For example the meta tag has two well
known parameters called keywords and description. They are passed
to the meta tag like this:
<meta name="keywords" content=" keywords that describe the web page"></meta>
And to make is even more complicated because there is typically
nothing between the opening and closing tags you can self close the
tag by appending the closing slash before the closing bracket like
this:
<meta name="keywords" content=" keywords that describe the web page" />
There are lots of meta parameters but many are not now used by
search engines as they were historically abused by naughty web
developers.
After meta comes style.
The style tag also takes a parameter called type, which tells
the browser what to expect.
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
</style>
The style tag can be used to style a tag that resides within the
body tag of the web page. The style tag consists of a series of
statements that change the look and appearance of a particular tag.
More on that later.
After style come script. The script tag allows to your include
code in your web page that performs a function. This is an example
of the script tag:
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
OK that about it for the head section. Let put it all
together:
<html>
<head>
<title> My Web Page </title>
<meta name="keywords" content=" keywords that describe the web page" />
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
</style>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</head>
<body>
Some very interesting content
</body>
</html>
Next time we'll discuss the body tag where it starts to get really
interesting
Last Updated: Tuesday, April 05, 2011