CASE.EDU:    HOME | DIRECTORIES | SEARCH

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

June 09, 2006

I'm not going to teach you XHTML/HTML, but you should learn it anyway

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.

books.jpg

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.

Books (Case users can read these online at no cost)
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.
HTML for the World Wide Web, Fifth 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.
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.
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

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button


Posted by: Heidi Cool June 9, 2006 04:15 PM | Category: Heidi's Entries , How-to , XHTML

Trackbacks

Trackback URL for this entry is: I'm not going to teach you XHTML/HTML, but you should learn it anyway

Comments

gravatar

Is it necessary to use a validator such as Markup Validation Service to validate html on a website?

Andrew

Posted by Andrew on August 3, 2006 05:50 PM

gravatar

I thought the previous comment might be spam—as it originally included a link to a topically irrelevant Web site—but it poses a valid question.

I think it is important to at least spot check your pages with the validation service for the following reasons.

1) It helps you find errors in your code that might cause rendering problems in various browsers.

2) It helps to ensure that your code is standards compliant.

3) When you know there is a problem with your page, the validation tool can help pinpoint which part of the code is causing the problem, and

4) It is an educational tool that will help you to understand what code is valid and what isn't. For example, if you are new to XHTML and have been using <br> to indicate a line break, the validator will point out that this is an error in XHTML. Instead you should be using <br />.

Posted by Heidi Cool on August 4, 2006 04:42 PM

gravatar

A completed assignment to give you a good laugh: http://www.case.edu/news/giraffes.

Posted by PJ on August 10, 2006 02:53 PM

gravatar

Whew!

This was fun but it is only the beginning.
http://filer.case.edu/mlm21/Bats/

The challenge for me is to be make sure that I use the correct document type when I create the site text for the site (simple text, html, word).
I encountered several problems because I used the wrong doc type.
Also need to be sure to include the proper beginning and ending codes <p> and </p> for example.

Posted by Marsha Bragg on August 29, 2006 05:26 PM

gravatar

It will get easier as you become more familiar with the code. Basically it is best not to try to edit HTML files in Word as it will add extra code.

If for some reason you don't have any plain text editor available and you must use word then make sure to save the file as a plain text file rather than an HTML file. This may involve changing .txt to .html after closing the file.

Also when you are using Dreamweaver you won't have to worry much about the format. It will only give you Web appropriate options. That said, one still must watch out for Word.

When copying text from a Word document into the design view of Dreamweaver may bring stray code and odd characters along for the ride. If you paste in code mode this shouldn't happen. (There is also the issue of special characters, but I'll post a special entry on that topic.)

Posted by Heidi Cool on August 29, 2006 06:42 PM

gravatar

I also work with html, but i got still some problems with text-only editing the html code. For these things i use a WYSIWYG Editor called Macromedia Dreamweaver (now also known as adobe). I usually get the page http://www.pcmasters.de done with this visual editor dreamweaver and its a perfekt tool, to start with html. It generates a good structure for your website (with a right document type). After that it have a great syntax highlighting, that makes the work easier, espacially for beginner.

Ps: Happy regards form germany, i'm a daily visitor. Thank you for the interesting blog entrys. I got learn a lot during the time here.
happy regards
Eugen Bunen

Posted by Eugen Bunen on February 11, 2007 01:51 PM

gravatar

Hi, my site is http://www.innovateidea.com in xhtml1.1 & 1.0, I have all my pages valid according to the w3 standards, but why is that w3.org itself has few invalid pages, over 10 pages.

Posted by Web Masters on February 14, 2007 09:33 AM

gravatar

HTML is one of the easiest things to learn. There are plenty tutorials on the web, in fact there are too many.

Posted by OkTutorials.com on April 22, 2007 03:20 PM

gravatar

Web Masters: The goal is not to have every page validated 100% - a couple of invalid items are not going to break your site. The bigger picture is removing the tables for layout and making sure that your site is semantically built.

For more resources about professional web development, check out the Professional Web Developer Wiki: http://www.ryanj.org/wiki

Posted by Ryan Johnston on June 4, 2007 01:16 PM

gravatar

at this moment XHTML is very important and be a standard international webmaster.

Posted by oknoorap on September 10, 2007 10:48 AM

gravatar

I want to have a blog page at my website. Can you help me how to develop blog page where people can put their comments.

regards
wajih

Posted by Wajih on January 23, 2008 01:28 AM

Post a comment

















Posted by: hac4 (Heidi Cool) June 9, 2006 04:15 PM | Comments (11) | Trackback