INDEX for textedit webpages Previous page - Class notes for today Next page
# Open TextEdit * Open a Finder window # Change the format to plain text * Open the Format tab |
Important File Saving Tips
For all around compatibility on the Web, it is important to follow these simple rules for saving any file that is meant for Web viewing. This includes the (X)HTML files along with any other files uploaded to your Web site.
* No capital letters in the file name. Use only lower case. Using uppercase letters are not necessarily harmful, but since web page file names are case sensitive, it makes it a lot easier if you use all lowercase.
* No spaces or special characters. In example: & , " #
* You may use a -dash or _underscore In example: my-file.html or my_file.html
Keep your blank "template.html" file handy as we delve deeper into XHTML.
Setting Up a Bare Bones Template File
A re-usable template file can be utilized as the base for all your web files. It can be saved as a new file name whenever you want to start a brand new web page.
New File
If you did not create and save your "template.html" file yet, please start with a new document in your text editor. Delete any coding your editor included in the new document. Save the file as "template.html".
DOCTYPE Declaration
The first element that any web page should have is the DOCTYPE declaration. This informs the browser which "flavor" of (X)HTML you are using. This element is also extremely important when validating your page properly.
There are three flavors (versions) of XHTML: Strict, Transitional, and Frameset. When first learning or "transitioning" into XHTML, it is best to utilize the Transitional DOCTYPE.
A Transitional DOCTYPE means that you are aiming to build strong XHTML pages, but are still using just a few little pieces of older (deprecated) code until more advanced coding can be learned.
The Transitional DOCTYPE looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There is no sense typing all this each time, so please highlight, copy and paste the above code into the top line of your template file. Be sure to keep the code exactly as written, and do not change any of the text.
Your cursor in your text editor should be blinking at the end of the pasted DOCTYPE coding. Click enter to move to the next line.
The Html Tag
As we have done in the previous two classes we need to tell the browser that this is an HTML page. So type the opening <html> tag and pair it with a closing </html> tag. Give yourself some space in between the opening and closing tags because all the other tags on our page will be nested in these two tags. Nested? That is a new word. Nested means surrounded by or enclosed inside. Tags can reside on their own, or be nested inside other tags.
Remember that the FIRST tag opened, must be the LAST tag closed.
Here is the coding for your template file so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>
The Namespace Declaration
We need to add a little bit of coding to that opening <html> tag to make it valid for XHTML standards. But since it is a bit confusing to type, you might want to copy and paste the text below into Notepad:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This tells browsers and validation services that the web page is written in English (en) and that the version of xml is also in English.
It also states that the xml namespace (ns) for this page is located at the listed online address. The address is a page listed at The World Wide Web Consortium (W3C) which is the Web site that develops the HTML and XHTML standards. Sort of like the Big Boss of Web coding languages. Decisions about what code is "downgraded" (deprecated) and what code is "the standard" come from this Consortium.
To learn more about the W3C, please check out http://www.w3.org/. There, it is a bit overwhelming to read.
Here is how our template file is shaping up. Notice the new <html> tag including the namespace has replaced the original <html> tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>
Type the the <head> and </head> tags right after the opening <html> tag.
Nest the <title> and </title> in between the <head> and </head> tags. See below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
</head>
</html>
Some facts about the <title> tag:
* The <title> tag is always nested in the <head> tag.
* The <title> tag is where you type the text to briefly describe your web page.
* This text will not be viewable as web page content, but it will be viewed at the top of the browser window.
* The text you type in the <title> tag will also be used when someone saves your page to their favorites list or bookmark list.
* It is also very important for search engine optimization, as most search engines (Google) describe your page by using the <title> text.
* Only text is allowed in the title area. No tags or other formatting. Keep it simple!
The Body Tag
The <body> opening tag needs to be paired with a closing </body> tag. The opening <body> tag is typed after the closing </head> tag. The closing </body> tag is typed before the closing </html> tag.
The <body> tag is very important. The content of your page is contained inside the body. Whatever you want viewed on your web page (other tags, text, images, etc) must be nested in between the <body> and </body>. Give yourself a few lines of space in between the two tags so there will be room for your page contents.
And this is what you should have on your template page so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>