Welcome to How2Code

In this lesson, we will:

  • Learn basic xhtml lingo
  • Learn how to test code for standards compliance
  • Optional: Set up a virtual server to test our webpages

Let's get started:

Our first lesson starts with information about a programming language.

<tag attribute="value">content</tag> <!-- comment -->

As you can see above, tags start with a < symbol, then the name of the tag is given. Attributes are optional. The start tag is completed with a > symbol. Then comes the content of the tag and the closing tag, which has a slash before the name of the original tag but no attributes.

Comments are started by <!-- and ended by --> but cannot contain any other occurrence of two dashes in a row.

The Doctype Definition

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Doctype definitions tell web browsers what kind of code the page is written in. If a doctype definition is not given, the browser has to use a best-guess formula, often resulting in formatting errors.

For example, since html does not support self-closing tags, a tag like <br /> would act like a closing tag for an unknown element, which might prematurely end the page, hiding part of the document from the viewer.

Similarly, xhtml does not support capitalization of the names of tags, so a tag like <BODY> wouldn't work and the document would not show up for the viewer.

Since different webpages serve different needs and programmers have different levels of ability, there are many different doctypes available.

The doctypes can be separated into groups by XHTML/HTML and/or Strict/Transitional/Frameset.

  • HTML is a less powerful language, but easier to write and more forgiving.
  • XHTML is a more powerful, standards-compliant language, and easier to comprehend, but also stricter.
  • Transitional is a less strict version of strict, used if you're converting over from the previous HTML or XHTML version.
  • Strict is and should be used for general documents.
  • Frameset is a very strange doctype, used to make a document that contains only links to other documents and no actual content. (We'll get into this later.)

XHTML 1.1 is not widely used and certain javascripts don't work on it. We won't talk about this in How2Code.

Validation

Activity time! Go to validator.w3.org and type in the name of your favorite site. (Be sure to include the http://) Does it pass the test? If not, can you figure out why it doesn't?

Bookmark the validator. You will need to use it later.

Optional: Set up a virtual server on your computer

This section is completely optional for now. If you want to have a virtual webserver on your computer right away, go to the XAMPP homepage and install the one for your operating system. I'm not going to give instructions in this lesson because there are already instructions on the site linked to above, plus the fact that this is an extra credit assignment.

See you next time!

How2Code was filmed before an emulated sabayon linux computer. No actual computers were harmed in the making of this webpage. How2Code is powered by electricity and the food that Ben ate while he was thinking about what he should write. Do not eat this. It doesn't taste good. Viewer discretion is two words.

This is Ben, signing off. See you next time!

Go back to the table of contents