What you will learn:
- How to create special characters, such as ©
- How to build a "standards compliant" webpage
Self-Contained Special Tags
We have covered making a paragraph and a heading. We have covered making text bold or italicized. But what do we do if we want a line to carry down in a paragraph, but don't want to create a new paragraph. This is called a line-break. Here, is
an example. Notice how the sentence prematurely dropped to another line? The line break is a self-contained tag, just like the image tag. It looks like this: <br />.
Another special, similar to the line-break, is the horizontal rule. It is used to divide sections of a webpage by drawing a line across the screen, like so:
The horizontal rule looks like this: <hr />
Another important special, is the non-breaking space. This allows you to add more than one space between words, or characters inside a paragraph. You may or may not have noticed yet, but HTML will not allow you to add more than one space between characters. The non-breaking space allows you to insert as many spaces as you like . It looks like this:
Special Characters
One thing you will notice with the "non-breaking space" is that it has a unique syntax. It starts off with an "ampersand" or & and ends with a semi-colon. This special type of syntax also allows us to add certain characters that might otherwise be hard to find, such as the "copyright" emblem. This particular character is: ©, and renders as: ©
For a full list of these, go to VR-Special Characters
It is important to note that, since special characters use the "ampersand" in their syntax, you must use &, if you want the actual symbol to appear in your own text.
Let's be Standards Compliant
You have learned the basics of html. You have learned how to add an image and a link. You know how to put in special characters. Essentially the only thing left, really, is in layout and design. But these are things best left to CSS, and you will learn about CSS in a later chapter. So then what? That just leaves one final set of crucial elements . . . the "DOCTYPE" tags.
On the bottom of each and every page of this tutorial is a little icon that indicates "this document checks out as XHTML 1.0 Strict". Well, what does that mean? It means that, according to the group who sets the world's web standards, the World Wide Web Consortium (W3C,) this webpage passes for the highest standards possible. This can be harder than you might think. But for you, as a new designer, that's not so important. The important thing is that you get started off on the right foot, so that your webpage will be the most efficient, and work in the maximum amount of browsers, both now, and in the future to come.
Well, I have taken care of this little chore for you. That is where the "Standards Compliant" section—what you're reading right now—comes in.
You remember my example of the most basic of webpages, right? Well, in reality, at least in a "standards compliant" reality, a few things are missing. Now, don't get too bogged down by the specifics of this code. Just focus on the things that I point out. In reality, you can just simply copy and paste these elements right into your own document.
First thing's first: Before the html tag, we need a declaration of just exactly what type of html page we have here. "What! There's more than one?" The short answer is, "yes". Just like everything else in technology, html has evolved with time. It was originally built as a way for scientists to share information with one another over great distances. But, obviously, it has evolved into something more. We now have large businesses sharing their wares over the web. Just think of e-bay for a moment; this is way past the originally intended use of the web. And then there is YouTube or iTunes.
This evolution is a great thing! In terms of html, however, it means that things have needed to be added in order to accomidate this shifting purpose. Did you know that HTML is now in its 4th, going on it's 5th, edition, or version? That's not even including the "XML" type, which we will be using.
So, before we add our html tag to our document, we have to declare that this is the most "up-to-date" and "standards compliant" version of html. Don't worry about the repercussions of this statement: I have already geared you towards making this kind of markup. So, without farther adieu, here's what you add:
A lot of gobbledy-gook, huh? The important thing is where it says "Strict" just after the "XHTML 1.0" declaration. What that means is that your document will be at the most standards compliant level. It will be picky about having all tags closed, and all lowercase; but then, that's what we've been doing, now isn't it?
For your document, don't worry about memorizing all of this; just copy and paste it in. A full template code can be found here, under the "Visual Reference" section of this tutorial.
Another feature has found its way into technology called "xml". This doesn't have to mean anything to you. In short, simple terms, it is a text format that allows various technologies to share information, with one another, as simple data. It is marked up very much like html, and is extremely versatile. In fact, with a text editor, you could create an xml file yourself, just like you're doing with html. But that's far beyond the scope of this tutorial. I only point this out because it leads us into the next thing that we must add to our webpage, and here it is:
. . . As part of the opening html tag, add xmlns="www.w3c.org/1999.xhtml> so that the entire tag reads as "<html xmlns="www.w3c.org/1999.xhtml">."
If your interested in a little explanation, what we essentially did is declared that this is an html document, just like we've done before, only now we added the necessary details to make this compatible with xml files, as well. That's where the xmlns part comes in. It stands for "xml namespace" and then, declares the address reference for these rules. But, again, this is something that you can simply copy and paste into your own html tag. Now would be a good time to also point out one other element of the DOCTYPE tag: This is where we first declared that our particular document is an XHTML, rather than an HTML document—simply meaning that it can work with XML files, as well. XHTML is on par, or considered by some to be even higher than, HTML 4, the highest level of HTML so far. So, with XHTML 1.0 of the "Strict" type, we are bringing our HTML to the highest standards thus far. Again, this doesn't have to mean very much to you right now; just know that we are being completely standards compliant.
There is just one thing left to do: Going to the head section of your html document, we add: <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>, a meta tag used to declare what type of character set is to be used. All you really need to know is that it is the final element missing, in order to make this a 100% standards compliant webpage. Had enough? Well, good 'cause that's all there is.
All explanation aside, you can just simply copy and paste the following code into your own HTML document, and use it as a template:
[Next]
