WWW World Wide Web World Wide Web
SGML Standard Generalized Markup Language--a standard for describing markup languages
DTD Document Type Definition--this is the formal specification of a markup language,
written using
SGML
HTML HyperText Markup Language--HTML is an SGML DTD
In practical terms, HTML is a collection of platform-independent styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.
A web site is a collection of web pages that are linked together. A fair site is one that has OK pages and link together fairly well. Sites with good page layout, useful content and easy navigation are considered good sites. Now, to build a great site you need professional looking page layout with exceptional content. Add to that site navigation that both easy to understand and a pleasure to use and you've got a sensational web site. This tutorial will concentrate on the page layout and navigation and may help some with the content. However, most of the content will be up to you, and remember 'content is king on the Internet. Now I would suggest you read on before starting your first page.
Though HTML is the language used to build web pages we will also be looking a two other languages. Cascading Style Sheets aid in layout and give you more control over you entire web site. JavaScript will make you pages come alive with interactivity. Both of these were designed to work with HTML and can only be viewed in a web browser. Most of the tutorials found on HTML, Cascading Style Sheets and JavaScript only deal with one of these at a time. In addition, the majority of the tutorials available on the Internet either go in to so much detail there hard to the novice to understand or they're so brief the nearly useless. We will try to reach a happy medium and offer a well rounded tutorial on building web sites. Though it's true that entire college courses could be taught on each of these languages individually, we will not go into that dept. If you want to go into depth in these and other computer languages you will find a list of suggested resources at the end of this site. However, we are not affiliated with the sites, we just found them helpful and taught you might benefit from them as well.
One of the big pains about making Web pages is having to keep track of which browsers
support what features. So for this tutorial I will stick to features supported by all
browsers.
The first thing to understand and remember is HTML is the language of the web and HTML is
a
computer language. Don't let that scare your thought it is a fairly simple and
straightforward language. What I mean HTML uses tags like, img for image and p for
paragraph. It also uses attributes like color, size and align. In fact, most of the words
do just what they say and they fall together in ways you might expect. For example,
align="left", "right", "center" or "justify".
These are the values of the align attribute.
In HTML we open these tags, attribute, and values in what we call tags which are a less than < and greater than > sign, like this <HTML>. We close or stop the effects of these tags by closing them with a forward slash /, like this </HTML>. Another nice about HTML in that it is very forgiving.
First it is not case sensitive so you can use upper or lower case letters in side our tags and HTML will read them the same. So to HTML <Html> <HTML> <html> are all read the same. The next thing is HTML only recognize the first space and no returns. So you can type your document anyway you like and when it is viewed in the browser it will lay it out according to the tags your use in the document. So you could type up you document in one continuos line, however the would be hard to edit. You'll see more how this work as we get into the code (that's another name for a computer language).
You can write your you web page (HTML document in any word processor that will save as
text (*.txt). However, you will give you page a .htm or .html extension (myPage.htm) Many
word
processors such as Corel WordPerfect or Microsoft Word have the ability to create web
Pages. Great as that is your still need to understand some HTML to fine tune you pages.
With that in mind lets fire up the old work processor or note pad and start making, or
should I say "marking up," web pages.
HTML documents are made up of tags. Tags are keyword placed in side a less than and a
greater than sign i.e. and most tags must be closed like this . Here are the four basic
tags that need to be in all HTML documents and basically what they do:
HTML is a markup language which consists of tags embedded in the text of a document. The browser reading the document interprets these markup tags to help format the document for subsequent display to a reader. However, many of the decisions about layout are made by the browser. Remember, web browsers are available for a wide variety of computer systems.
The browser thus displays the document with regard to features that the viewer selects
either explicitly or implicitly. Factors affecting the layout and presentation include:
The markup tags used.
The physical page width.
The fonts used to display the text.
The color depth of the display.
The browser, ignores extra spaces and new lines between words and markup tags when
reading the document.
As any computer language HTML 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. However, HTML is
more forgiving than most computer language. If you type something wrong it will usually
just be ignored. For example <b> means start bold and </b> mean end bold. If
you type <v>bold</b> you'll probably get nothing at all. However, if your type
<b> bold <b/> you may end up with everything from this point on being bold. My
point is nothing is going to plow up and most mistakes easy to find and correct.
HTML 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. 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.
But 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. 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.
HTML stands or Hyper-Text Markup Language. Let's take those initials apart one by one, starting from the right:
HTML is 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.
Now 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, if you've
spent any time surfing the internet, and I assume you have, or you wouldn't be reading
this, you've seen a lot of the fancy thing that can be done on a web page. You may have
even changed some of the preferences or options in you web browser. It is because of the
markup part of HTML that these change effect every page you view in you browser. It's the
markup that make a web browser behave differently than say as word processor.
When you make change the preferences or options in a word processor it effects the way the file is saved not the way it is viewed. In a web browser it changes the way documents are view. That's because in a browser you view the document created at the time by the browser not the actual file as you would in a word processor. Why does this matter? It is important to remember the file you create in HTML may not look exactly the same on every browser. Oh. the text will be the same, it's just the formatting that may change. However, there are things you can do to make you documents look similar on every browser and well get into that later.
HTML 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. You've see hyperlinks in action on most every web site you've seen on the internet. So we'll not dwell on that now in a few minutes we see just how they work and how to make them work.
But 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. 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.
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Emacs or vi on UNIX machines; SimpleText on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save your document as "text with a .htm or .html extension.
I mentioned that HTML, as a computer language, has a defined syntax. This syntax was not thought up at random, since the idea of a markup language is hardly new. A language called SGML, the Standard Generalized Markup Language, exists that is used to define markup languages. Make sure you get this right: SGML is a markup language whose sole use is to define other markup languages. And one of those many languages is HTML.
Now wait. Before you click on our sponsor's ad and get out of here, afraid that you'll have to learn another language, let me assure you that no such thing is needed. You do not need to know SGML to learn HTML. It's just useful to know that HTML is an application of SGML, which will explain a few things.
Now let's get down to business. Remember the heading we saw in the last section? If not, here it is again.
HTML is make up of elements. Elements may have attributes. Attributes may have values. Here's an example.
This element is an p element, which happens to mean paragraph. You need tags to indicate where the element starts and where it ends. Tags always start with a less-than symbol (<) and end with a greater-than symbol (>). A start tag has the element's name in between these symbols, followed by any attributes and followed by any value. An end-tag has a slash (/) followed by the element's name. Here are some more examples of elements:
This might seem a little confusing at first. So I'll try to but things in perspective.
Suppose I go in
restaurant and order a stake. However, this is a different kind of restaurant where the
servers are
trained not to ask any questions. So how can they fill my order when there a several
questions
unanswered. How will the stake be cooked and what trimmings will it have? Well, they've
got that all planed by default. The default stake is a porterhouse, the potato is baked
and the veggie is corn. These items are like elements. If I want some else I must give
these elements a attribute. So I order a stake, New York strip. OK so that gives me the
type of stake I want, but suppose by default all stakes are medium. I want mine rare I
must order, stake, New York strip, rare. That is the element, the attribute and the value.
I think you get the you get the picture.
Now that you have little better understanding of elements, attributes and values lets get started learning HTML.