IMPORTANT REMINDER ABOUT ONLINE RESOURCES:
Most web page tutorials on the web do not follow the XHTML guidelines. Following XHTML rules will force you to use clean coding that is more likely to be compatible with browser versions of the past, present and the future! Coding using XHTML is called "well-formed" code. You will lose points if you do not use "well-formed" code. It is easier to validate, debug and edit, and it will be more compatible and reliable in various browser versions.
The W3Schools website promotes using XHTML guidelines and is the most accurate online resource I have seen.
The home page for the XHTML section of the W3Schools website is at: http://www.w3schools.com/xhtml/default.asp
You should also visit the links available to see the sections on:
The good news is: Everything you have learned about HTML coding in the last project applies to XHTML coding. You use the same tags to set up the STRUCTURE of your page.
<html>
<head>
<title>Text for Title Goes Here</title>
</head>
<body>
</body>
</html>
It is important to notice in the above template of code for a standard HTML web page, there are two distinct sections of code. The "head" section of code refers to any codes that are included between the <head></head> tags. In the last project, the only tag included in the head section of code was the <title></title> tag. Other common codes that could be included in the head section are meta tags and style tags. The content of the "head" section of coding does not display in the document window when you view the page in the browser. The information in the head section of coding is to be used by the browser. That is why the text that you put between the title tags does not display on your web page. The browser uses it to display in the title bar of the browser window.
The "body" section of code includes all of the elements that are added between the <body></body> tags. Any element that you want to display on your web page should be included between the body tags. In the last project, you included headings and paragraphs in the body section of the code. Other common elements that could be added to a web page include pictures, links, lists, tables, and horizontal rules.
Coding with XHTML requires that you add to what you already know about coding web pages using HTML. XHTML is more strict about how the code is written. These XHMTL coding rules must be followed for this project:
Most tags used in standard web pages are container tags. Container tags include a start tag to open the element and an end tag to close the element. The start tag is the name of the element between brackets. It is used to "open" the space on a web page for the element. The end tag includes a forward slash before the tag name to indicate that it is being used to close the element. This indicates where the element ends. All of the tags that were used in the last project were container tags. A tag was required to indicate where the element started and a tag was required to indicate where the element stopped.
<html> </html>
<head> </head>
<title> </title>
<body> </body>
<h1> </h1>
<h2> </h2>
<p> </p>
There are a few tags in HTML/XHTML coding that do not require two tags. The element can be placed on the page with one code because it starts and stops at the same location! These are commonly referred to as empty tags because you use one tag to place the element on the page. Some tutorials refer to them as "single" or "one-sided" tags.
In XHTML coding rules all tags must be "closed." Container tags close an element with a code that includes the forward slash in front of the tag name.
Example: <body></body>.
Since empty tags only require one code, they look different from container tags. An empty tag includes the closing slash in the same code that opens the element. Examples of empty tags used in this project are:
<meta />, <hr /> and <br />
Meta
Meta tags are used to give information to the browser. Since they are not used to display information in the document window, meta tags are always added in the "head" section of the code. Typically meta tags are added right after the <title></title> tags.
In this project you will be adding a meta tag that tell the browser what type of keyboard characters you will be using.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
It indicates you are using a standard keyboard with regular characters used to type in the English language. This is referred to as the "character encoding meta tag." If you use a validator to check your coding for errors, this tag needs to be included in the head section of your page. It is best to copy and paste codes like these to avoid making typographical errors. Coding has to be exact to work properly.
Horizontal Rule
Horizontal rules are used as divider lines. They are a graphic element and only need one code to be placed onto a page. Be sure to include a blank space before the forward slash in this code to be backwards compatible with older browsers. All the horizontal rules that you use should look like:
<hr />
Line Break
Line breaks are used when you want to send text to the next line without starting a new paragraph. When you start a new paragraph with a <p> tag, you always get a blank line above the text for the paragraph. Sometimes you will want text to go to the next line WITHOUT having a blank line too. To make text go to the next line, put a line break tag before the text. Be sure to include a blank space before the forward slash in this code to be backwards compatible with older browsers. All line breaks should look like:
<br />
If you already have experience creating web pages, it is important to carefully study the rules for "well-formed" code. You may have to relearn some code and break some sloppy coding habits to bring your code up to the W3c standards!
Practice making other pages on your own trying out putting in different content. The best way to understand coding is to practice. Use the w3schools XHTML tutorial to familiarize yourself with proper coding and elements that you can use. When you are on the main page of the XHTML tutorial, click on the link for the XHTML Tag List. When reviewing information about different tags, be sure to check out the link to "Try-It-Yourself-Demos." It can help you understand the code and give you an opportunity to practice different codes without having to type in ALL of the code by yourself.