Table of Contents
- Hello World!
- Understanding Tags and Structure
- Whitespace in XHTML
- Breakdown of a Tag
- Attributes
- Paragraphs and Line Breaks
- Validation and Browser Tools
Basic Structure
Welcome!
This tutorial is designed to teach you the basics of XHTML 1.1 and CSS 2.1 quickly, efficiently and correctly. If you are intrigued, read on!
Goals:
Upon completion of this tutorial, you will have:
- A basic understanding of XHTML.
- A basic understanding of CSS.
- An understanding of basic web design practices, and common coding conventions.
- An understanding of all the tools necessary to create a website, including FTP and FTP clients, webspace, web hosting, doctypes, validating your code, and domain names.
Requirements and Materials
Warning!
For the purposes of this tutorial, you can think of HTML and XHTML as the same thing, and I will likely use the terms interchangeably. However, they are not the same; click here to learn about the differences.
No previous experience with HTML is necessary! However, if you do have experience with HTML, you may need to "unlearn" certain things depending on how old your knowledge is, due to CSS.
You will need
- A plain text editor:
- If you use Mac OS X, I recommend TextWrangler. However, the bundled TextEdit will work as well, as long as you set it into plain text mode in the Format menu.
- If you use some flavor of GNU/Linux, you can use gedit.
- If you use Windows, I suggest SuperEdi. (It's Free!) Additionally, the included NotePad will do. However, NotePad will constantly fight with you over file extensions. You will try and save as .html, but it will want to use .txt. Just keep that in mind.
- A browser. You're using one right now. I prefer Safari. Many prefer Firefox. Some are forced to use Internet Explorer, which can cause us problems, which we will discuss later.
Lets Get Started
I've separated out code chunks and given you basic instructions on text editors for a reason: if you follow along by copying and pasting, playing with, and otherwise making use of the XHTML examples, you will have a much more solid understanding of the concepts within this tutorial. Just something to keep in mind!
From here, you can go to the Lesson One Overview, or you can skip right to the beginning of the lesson.
Acknowledgments
Much of this tutorial is lifted right from Evan Goer's wonderful HTML tutorial. You might even call this tutorial the "spiritual successor" to Goer's tutorial. Key differences include XHTML coverage, overall modernization (Goer's tutorial is now four years old) and a deeper discussion of tools related to web design.
