How to Write XHTML
- Before You Start
- The Basic Document
- Save your XHTML files
- Include Links
- Include Graphics
- View your page locally
The instructions included in this guide are all the tools needed to produce a basic yet quality website using XHTML. We provide a brief overview of the necessary steps for a very simple website; the website can grow with the time and experience invested by the producer.
The code for a hand-written web page is most efficiently written using plain-text editing software, especially that which is designed specifically for web development. A google search on 'HTML text editor', which will typically prove useful for XHTML pages as well, will reveal many editors which are free to download. If using regular word processing software such as MS Word, you must save the document as "Plain Text".
It is also possible to create a web page using a What You See Is What You Get (WYSIWYG) HTML editor, such as Dreamweaver. These applications make it easy for even a novice to design beautiful pages. However, they use intricate code that can be extremely difficult to update without the application used to create it, and don't necessarily produce code that is compatible with a wide array of web browsers. For this reason, we focus our attention on hand-written code and refer readers to other resources to learn more about these useful applications.
Below we represent the structure of a basic web page. If you copy and paste this code directly into a text editor, you can easily update it with content to create a working, albeit somewhat unattractive, page. Explanations of each line follow it in italic font, between XHTML comment tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <!- -This is the document declaration. It basically tells the browser what kind of page it's about to view.- ->
<html><!- -This marks the beginning of the html/xhtml.- ->
<head><!- -This marks the beginning the head section, which includes information about the page such as the page title, any links to relevant stylesheets or templates, and website metadata tags.- ->
<title>Choose your page title</title><!- -The title is the text that appears in the (usually blue) bar at the top of the browser window. For this page, it reads 'E-MELD School of Best Practices: How to Write XHTML'- ->
</head><!- -This marks the end of the head section- ->
<body><!- -This marks the beginning of the body section, where the page content is.- ->
<h1>Insert primary heading</h1><!- -The primary header is typically the most prominent text on the site, followed by h2, h3... and finally to normal paragraph text.- ->
<p>Write your paragraph</p><!- -Paragraph text constitutes the majority of the text on most web pages.- ->
<p>add as many paragraphs as needed</p>
</body><!- -This marks the close of the body of the page- ->
</html><!- -This marks the close of the html/xhtml content of the page- ->
Remember, XHTML demands that all commands be in lower case. Also note that the content of comment tags are not displayed on the page along with the rest of the content. This makes comment content ideal for maintaining records on a web page's production, instructions on how to use the page, notes about future plans for the page, etc.
Remember that your main page MUST be saved with the filename "index.xhtml". If you fail to designate an index page, a directory listing will automatically be generated by the browser in its stead, which will not be an attractive page for readers. When naming the other files for your website, do not use characters other than letters and numbers within the file name - using other characters will result in bizzarre URLs at best (because those characters will be replaced by character codes), and some browsers will not be able to show the page. Make sure that you include the .html extension to all of your files. Without it, your files won't be HTML/XHTML files.
Links are really what make the internet the internet. When building a website, you link one of your pages to another to connect the site together. Links between pages on your own site are called internal links, and they're what make the website cohesive. For example, all of the links in the box at the middle of the right side of this page are internal links, because they lead to other pages within the School of Best Practices site.
The basic command for adding a link is as follows:
Here is an example of a link to the E-MELD site.
On a page, it would look like this:
Using links to other documents on the internet is also a resourceful tool that can benefit your web page as well as the user's experience. When there is a relevant topic which your site does not have resources to expand on, an external link to a web site which does will add to the usefulness of your site. On most websites, it is customary to make external links open in a new window. This is done by adding target="blank" to the anchor tag. So, the same link given above would open in a new window with the small modification below:
Here is an example of a link to the E-MELD site that opens in a new window.
On a page, it would look and work like this:
Graphics can be added to your website from many sources, the main sources being images already on your computer or images from other websites. A tasteful use of graphics can make a web page appear more interesting, seem more professional, and even add important information. However, it is important not to get swept away - overuse of images will quickly overwhelm a web page and even cause readers to question the page's credibility.
Existing Images and Downloaded Images
When downloading an image from another website, do not change the file extension. Make sure to save it in the same folder that your index.html file is in. When working with small websites, it is easiest to keep all files in the same folder. However, when dealing with many files on one site, a logical directory structure is necessary. Because of its large size, the School of Best Practices site stores image files in a folder named 'images'.
Be aware of any copyright laws or permission rules which may be associated with the images you have chosen to download. If the image you want to use for your website is already saved on your computer, such as a scanned photograph, simply transfer the file to your website file folder on the server. To display the image on your website, insert the following command on your site where the image is to be displayed.
The src (source) value specifies where the image is to be retrieved on the server. Be sure to include both the file name and the file extension (usually .jpg, .gif, .png or .tiff). The alt value is text that displays if the image fails to load, and supplies text for html reading software used by the blind. Consult the Images section of the Classroom for information about the use of archival and presentation quality images.
Once you have typed and saved your XHTML file, the next step is to view your page to the web to see how it looks. This is accomplished in various ways, depending on different browser software, but the process is fairly easy to follow. Once you browser window is open, look under the "File" menu and select the "Open File..." or the "Open Page..." option. This will open a menu option like the one you get when opening any file from an application. From here you can open the index.html file you just created. Now you can see how the page would look on the internet, and make necessary changes. Note that viewing your page in this way does not mean that you have put the page on the internet.
In order to actually put the website on the internet, you must upload all files to a server. Please note, however, that simply uploading files to a server and creating a website does NOT mean you have archived your resources. In order to archive resources, you must deposit them into a reputable archive.
How to Write XHTML