There are a few tags that every Webpage needs to let your browser know that it is a webpage.
<!DOCTYPE> Tells the browser what version of HTML it should expect
<html> Starts the page
<head> Includes non displayed information such as the title and links to other files
<title> Is displayed in the browser title bar
<body> This is where all of the content of the page is placed
The format for these tags is as follows
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.oursite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is the page title</title>
</head>
<body>
Page Content In Here
</body>
</html>
In the example above you can see that all of the element tags with the exception of LINK and DOCTYPE have a beginning and a ending tag. However you can also see that these two tags use a trailing slash / on the closing > to indicate that the tag element is closed. Like this />
A Link Tag is not one of the mandatory Tags but it is included in the example to show its placement.
To start any page you should include the DOCTYPE In our case the doctype for our page is (XHTML 1.0 Transitional) meaning the browser should understand that it will be receiving html that is compliant with the XHTML 1.0 Standard.
Immediately after the Doctype we have the HTML Tag. This tag will encapsulate the whole page with a start and end tag of <html></html> It tells the browser to begin reading in the page here and end there.
At the top of the page right after the HTML Element we add a <head> area that can contain information about the page such as the title that will show in the viewers browser title bar and other information such as links to files that will add support for the up coming HTML page.
Items that may be included in a header area include:
CSS formatting information or Links to an external file
Javascript commands or links to an external file.
There is no difference between adding css or javascript directly in a file or linking to it other then the fact that if that same information is used on many pages it can be easier to link to the file that way you only have to update one file instead of each page of your site.
The <body> Element Tag is located after the HEAD element tag closes.
The BODY area is where you will place all of the HTML Elements needed to display the content of your page. You will put all of your Text, Links to Images, Multimedia and basically anything you want your visitor to see in this area.
At the bottom of the page you will see the BODY tag Closes then the HTML Tag Closes to tell the browser the page has been downloaded completely.
Lets try a Test Page.
Make an empty folder to store your files and start a new text file named test.txt and open it in Notepad.
In the file put the following lines of HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.mysite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is my first webpage</title>
</head>
<body>
Hello, This is my first webpage. <br /> I hope you like it.
</body>
</html>
Now save the file and rename it test.html and open it in your browser by draging it into an open window.
You should see something like this:
I hope you like it.
As you may have noticed we added another tag on your page. The <br /> or Line Break Tag.
This is an important tag to remember because anytime you need to go to the next line or force an empty line between text or other items you will need to use a BR tag.
Empty lines and repeated spaces in HTML files are ignored. You could add ten pages of spaces and returns in your html file and only the first would be recognized and used.
You should also take note that all of our HTML Element Tags are in LOWER CASE <br /> is correct <BR /> is not correct. This is part of the new html standards and is important because some advanced html may see tags differently if they are in upper or lower case or have mixed case words. However for now if you make a mistake on the case of the tag eLeMenT your browser should still render the page correctly.
In lesson 3 we will introduce different content to our pages.
