Cool

If you are already comfortable editing in HTML or XHTML, then you may want to just skip to the bottom and bookmark some of the resources I've listed for future reference. But if you've just been given the responsibility of maintaining or building a new site for your department, you may be wondering where to begin. If you've done the requisite site planning, as described in my Planning Your Website Tutorial, then you are almost ready to begin building or editing your pages.

To build a new site you will need to download the appropriate template files, and make sure you have the appropriate editing software on your computer. Case recommends using Dreamweaver as your XHTML editor. Dreamweaver is available—through the Software Center—as a component of Macromedia Studio 8. Dreamweaver is a great tool, but it is only a tool. A hammer is a useful tool for hitting a nail into a wall, but it still depends on you to both hold the nail, and to guide the hammer with appropriate force and precision. Similarly, Dreamweaver requires you to tell it what to do with the content you type or paste into it. You will find it is far easier to control Dreamweaver if you understand the basics of HTML and XHTML.

What are XHMTL and HTML?

XHTML (Extensible HyperText Markup Language) and HTML (HyperText Markup Language) are forms of SGML (Standard Generalized Mark-up Language) which allow users to define the structure of a document and its component parts. The first version of HTML was developed in 1989-1990 by Tim Berners-Lee and was fundamental to his invention of the World Wide Web. HTML 4.01 is the most current version. XHTML extends the abilities of HTML and can work in conjunction with XML. Case Web templates use XHTML 1.0 Transitional.

While I've included links to the specifications above, don't worry too much about the technical stuff. For your purposes you mostly need to understand that HTML and XHTML allow you to define areas of a document such as the body, headers, paragraphs, links and images so that a Web browser or other user agent knows how to structure the elements. Note that I said structure rather than present. Presentational elements which control the look of a site, such as font, color, boldness, and alignment, are not controlled through XHTML or HTML 4.01. Instead they are controlled by Cascading Style Sheets (CSS). XHTML handles structure, while CSS handles style. I'll discuss CSS more carefully in a separate post.

Building your first site in XHTML 1.0: A homework project

I find it is easier to learn by doing, so what I usually recommend is that you build yourself a little Web site from scratch. Knowing that you have your Case templates and Dreamweaver already installed, I want you to leave them closed in their folders and ignore them. We will not be using either for this project.

Your assignment

Using a plain text editor, build a five page Web site (in XHTML 1.0) about your favorite animal. You should be sure to include your site title on each page, topical headers on each page, subheads when appropriate, at least one bulleted list, and a navigational menu. Each page should include links to other pages within the site and to external Web sites, and a link to an e-mail address. I would like you to include at least one photograph or illustration (please only use images you have permission to use), but I do not want you to apply any styling such as font choice or color to the site. We will do that in our next project, learning CSS. Once your site is complete, go to http://validator.w3.org/ to make sure your code is valid. Then post a link to your site in the comments area below so that we can all see how you've done!

Tools to complete the project

• Text Editor: If you are using Windows, I recommend Notepad. If you are on an older Mac, use SimpleText, on a newer Mac, TextEdit. Users of other operating systems, such as Linux, should use whatever plain text editor they prefer. DO NOT USE WORD, WORDPERFECT OR OTHER WORD PROCESSING PROGRAMS.
• Image Editor: Adobe Photoshop CS2 is available through the Software Center, but you may use whatever program you prefer. For this project you will probably only need it to resize your image.
• A place to post your site: Case students, staff and faculty may sign up for free space at http://filer.case.edu. Others should consult with their ISP to see if Web space is included in their account, or sign up with a free service such as http://geocities.yahoo.com/join/.
• A method to upload files to your site: FTP (File Transfer Protocol) was once the dominant choice for uploading files, but is now joined by many others including Secure FTP and WebDAV. A variety of stand-alone clients are available, FTP is built into Dreamweaver, and Mac OS X has built-in WebDav support. http://filer.case.edu supports FTP and WebDav, but also offers an easy-to-use Web interface for file transfers. Your host provider should let you know which protocol they support.
• A Web browser to view your site. If you are reading this online, you already have one, however, I recommend Firefox.

Resources for learning XHTML and HTML

As I indicated in the title, I'm not going to teach you the code. Many others have provided perfectly good resources for this. The ones I used back in the dark ages of the early 1990's are now well out-of-date, and I've not read any of the following in their entirety, but I have read and skimmed bits of each, and they seem sufficient. Please make sure not to use any resources geared to older versions of HTML as they will include code that is no longer in use.

HTML Books

Safari Proquest subscribers, including users from many universities, can read these online at no cost. For others I've included links for ordering the books from Amazon.com.

Absolute Beginner's Guide to Creating Web Pages, Second Edition By Todd Stauffer

This book seems to cover all of the basics, and provides some background information about the Web that you may find interesting. Even without reading the entire book it should give you the information you need to build the site for our assignment. The author recommends testing your site locally, but I think you will be better served by uploading your pages as you go and testing them in a live environment. Purchase Absolute Beginner's Guide to Creating Web Pages (2nd Edition) from Amazon.

HTML for the World Wide Web, Sixth Edition, with XHTML and CSS: Visual QuickStart Guide By Elizabeth Castro

While a bit dryer than the previous title, Chapter 3. Basic (X)HTML Structure walks you directly through the process of building a page, and should provide you everything you need to complete this project. You can skip the chapters on formatting as we'll be using CSS to apply formatting in a future assignment. Purchase HTML, XHTML, and CSS, Sixth Edition from Amazon.

Designing With Web Standards By Jeffrey Zeldman

While more advanced than the the other two books, this is the most accurate and precise of the three, specifically because Zeldman's focus is adherence to Web standards. Once you've gotten a feel for the basics of HTML, this book will help you understand how and why to use proper structural code. Jeffrey Zeldman is one of the foremost experts in this field, and also runs the popular and very helpful e-zine, A List Apart. Purchase Designing with Web Standards (3rd Edition) from Amazon.

Online Resources

W3 Schools

W3 Schools offers tutorials on a variety of Web related topics including HTML and XHTML. Their XHTML tutorial expects you to know HTML, so read that one first.

HTML Source

These easy-to-follow tutorials range from "My first site" to more advanced topics such as CGI Scripting. Some of the tutorials include deprecated code, but they also explain why these are no longer recommended, so that users gain additional understanding.

W3C Markup Validation Service

This resource checks your Web page to let you know if your code is valid, and if it is not, what the errors may be. Very handy both for ensuring clean code, and for finding errors that may be causing problems in your pages.

The World Wide Web Consortium (W3C)

While no single entity owns or controls the Web (though the telcos are trying to change that) the W3C can be considered the defining authority. As the developers of Web standards and guidelines their mission is "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web." Their site includes all of the official recommendations and a variety of reference materials.

There are many other reference materials available online, but the above should be sufficient to get you started. So go ahead, open up your text editor, give it a try, and let us know how it turns out!

Next: Homework Review