Introducing Web Technologies
Now that you are thinking of the Web as a huge collection of documents, not dissimilar to the documentsyou come across in everyday life, and you know how aWeb page gets to you when you type a URL into
your browser, it is time to look at the technologies used to writeWeb pages.
In this section you meet HTML, CSS, XHTML, and JavaScript. You will get an idea what each language is
used for and start to see the basics of how each works.With a basic understanding of each of these
technologies you will find it easier to see the big picture of creating pages for the Web.
Introducing HTML
HTML, or Hypertext Markup Language, is the most widely used language onWeb. As its name suggests,
HTML is a markup language, which may sound complicated, although really you come across markup
every day. Markup is just something you add to a document to give it special meaning; for example,
when you use a highlighter pen you are marking up a document. When you are marking up a document
for the Web, the special meaning you are adding indicates the structure of the document, and the markup
indicates which part of the document is a heading, which parts are paragraphs, what belongs in a table,
and so on. This markup in turn allows a Web browser to display your document appropriately.
When creating a document in a word processor, you can distinguish headings using a heading style
(usually with a larger font) to indicate which part of the text is a heading. You can use the Enter
(or Return) key to start a new paragraph. You can insert tables into your document, create bulleted lists,
and so on. When marking documents up for the Web you are performing a very similar process.
HTML and XHTML are the languages you use to tell aWeb browser where the heading is for aWeb page,
what is a paragraph, what is part of a table and so on, so it can structure your document and render it
properly. But what is the difference between HTML and XHTML?Well, first you should know that there
are several versions of both HTML and XHTML, but don’t let that bother you—it all sounds a lot more
complicated than it really is. Whereas there are several versions of HTML, each version just adds
functionality on top of its predecessor (like a new version of some software might add some features or a
new version of a dictionary might add a few extra words), or offers better ways of doing things that were
already in earlier versions. So, you do not need to learn each version of HTML and XHTML, nor do you
need to focus on one variation. This book teaches you all you need to know to writeWeb pages using
HTML and XHTML. Indeed, as I mentioned in the Introduction, XHTML is just like the latest version
of HTML, as you will see shortly (although to be accurate, while it is almost identical to the last version of
HTML, it is technically HTML’s successor).
Let’s have a look at a simple page in HTML.
<html>
<head>
<title>Acme Toy Company: About Us</title>
</head>
<body>
<h1>About Acme Toys Inc.</h1>
<p>Acme Toys has been making toys for popular cartoon characters for
over 50 years. One of our most popular customers was Wile E. Coyote, who
regularly purchased items to help him catch Road Runner.</p>
</body>
</html>
This may look a bit confusing at first, but it will all make sense soon. As you can see, there are several sets
of angle brackets with words or letters between them such as <html>, <head>, </title> and
</body>. These words in the angle brackets are known as markup. Figure 1-2 illustrates what this page
would look like in a Web browser
As you can see, this document contains the heading “About ACME Toys Inc.” and a paragraph of text to
introduce the fictional company. Note also that it says “Acme Toy Company: About Us” right at the top of
the window in the middle; this is known as the title of the page.
To understand the markup in this first example, you need to look at what is written between the angle
brackets and compare that with what you see in the figure, which is what you will do next.
0 comments:
Post a Comment