first tutorial aims to teach you plain HTML, from scratch. It would
be nice if you forgot everything you knew about HTML and take a
fresh look at things for this tutorial.
going to assume that the reader of this tutorial knows nothing about
creating Web pages, but has a basic familiarity with browsing the
Web. After all, if you couldn't browse the Web, you probably wouldn't
be reading this! If you have some passing familiarity with creating
Web pages, you can quickly go through this tutorial and make sure
you're familiar with everything here, though as we've mentioned
before, even experienced Web developers might be surprised by learning
something new here, and we're going to use these concepts a lot
in future tutorials.
what is this HTML?
order to be able to write good HTML, you must first understand exactly
what HTML is. The most obvious place to look for this information
is in its name: HTML stands for HyperText Markup Language. If this
doesn't make much sense to you, don't worry, because that's what
I'm here to explain. Let's take those initials apart one by one,
starting from the right:
is a language, but not the kind you tell your kids to watch. It's
a computer language, and as such it has some specific rules that
must be followed. In other words, it has a defined syntax, a strict
way in which it must be written, and, when the time comes, read.
But we'll get to that later.
HTML is also a markup language. What this means is that it takes
a document and marks specific parts of it, giving them special meaning.
Why does it do this? Well, let me give you an example. Take the
following piece of text:
Computer Corporation is a technology-based company that seeks to
offer its customers the latest in technological innovation. Our
products are created using the latest breakthroughs in computers
and are designed by a team of top-notch experts.
are based in Acmetown, USA, and have offices in most major cities
around the world. Our goal is to have a global approach to the future
of computing. Have a look at our product catalog for some examples
of our innovative approach.
you, as a human, see in the above text is a heading ("Acme Computer
Corp.") and two paragraphs of text. However, if a computer were
to see the above text, all it would see is a bunch of characters,
perhaps arranged in a certain way. We have an active interest in
letting the computer know that the above is a heading and two paragraphs.
I'm sure you can guess some of the reasons. In a larger document,
we'd like to be able to have the computer produce an outline of
the document containing only the headings; or we might want to display
the headings in a different style. However, the computer can't do
any of these things unless it can see each part of the document
for what it is. Thus, we introduce markup to show the computer what
is also a hypertext markup language. Hypertext is text, in any format,
with an added feature: parts of the text is linked to other parts
of the text, making it easy to jump from one part of the text to
another. For instance, in the Acme example above, the phrase "Have
a look at our product catalog" hints that such a catalog exists,
but the reader doesn't know where to find it. With hypertext, you
can link this phrase with the catalog itself, giving the reader
an easy way to get to it if he's interested.
hypertext links aren't just shortcuts. Just like markup, they mean
something. HTML is all about document semantics. A document by itself
may be informative, but to be truly useful, you must have a way
to get to its meaning. Once you have a way of encoding the document's
semantics, you can manipulate it in many interesting ways (don't
get any ideas... this isn't that kind of Web site!). By defining
the links from a document to a table of contents that lists it,
to the next or previous documents if it is part of a series, to
a glossary or copyright notice, we give the document itself more
meaning, and hence, more value. The primary purpose of any document
is to convey information, and by specifying the semantics of a document
we supply even more information, which can only be a good thing.
That is, if it's done right.
Elements of HTML
Paragraphs and Headings
What is HTML Made Of