XHTML 101
Lesson 1 - Part 2.5
Elements and Global Structure
The following is not part of original course. I created this lesson as I felt it was needed between part 2 and part 3.
Elements
Web pages consist of elements. Everything you see displayed on a webpage is contained within elements.
Elements consist of both an open tag and a closing tag.
|
Open
|
Closed
|
|
<html>
|
</html>
|
A browser reconizes these tags by how they are coded. A tag always starts with a less than ('<') symbol, followed by the name of the tag, then ends with a greater than ('>') symbol. You can control the behavoir of many tags by adding attributes to the open tag. Attributes will be considered later. Closing tags are similar to open tags except closing tags has a forward slash ('/') inserted before the tag name.
Text you want displayed on the screen will be typed between an opening and closing tag. Together, the tags are called an element. Since information is enclosed within an element they are referred to as container elements. There are elements that do not have closing tags. These will be disscussed in Lesson 1, Part 3.
Global Structure
Now let's create the structure of a website. This structure is referred to as a global structure.
An entire website is contained within the <html> element. The DOCTYPE element mentioned in the previous lesson is an exception but is not part of the HTML specification.
Within the <html> element is the <head> element and the <body> element. The head element contains things such as the <title> of your page.
The <body> element contains what you want shown in the browser.
The global structure can be illustrated as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Global Structure - DOCTYPE Transitional
By changing the DOCTYPE the above would also be the proper structure for the 'Strict' specification.
You should use the above skeleton for every web page you create.
Use the following structure when dealing with frames:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>untitled</title>
</head>
<frameset rows="" frameborder="" border="" framespacing="">
<frame src="file:///..." name="mainFrame">
<frame src="file:///...." name="bottomFrame"
scrolling="" noresize>
</frameset>
</html>
Global Structure - DOCTYPE Frameset
Framesets will be discussed later. For now just remember the main difference between the two is one uses the body element and the other does not. You tell each frame what you want to load into it. What you load is another non-frame html document. If a body element is wanted it should be enclosed within a <noframes> element.
|