|
|||||||
Basic concepts |
|||||||
|
|||||||
Advanced concepts |
|||||||
|
HTML is simply human-readable text. See below for an example of a web page.
<HTML>
<HEAD>
<TITLE>
My first web page
</TITLE>
</HEAD>
<BODY>
<H1>
About me
</H1>
<P>
I live in New Hampshire.
</P>
</BODY>
</HTML>
And that would be displayed similar to that below:
I live in New Hampshire.
I will explain what each of the lines means one by one, but first note the following: that the indentation makes no difference to the page, but is merely there to make it easier to read - the following would have the same effect:
<HTML><HEAD><TITLE>My first web
page</TITLE></HEAD><BODY><H1>About me</H1><P>I live in leafy
New Hampshire.</P></BODY></HTML>
In addition, case is unimportant in HTML - you can equally well place your markup in lowercase or a combination of upper and lowercase.
Any piece of text enclosed in <
and >
is called a tag. This
distinguishes it from normal text. A tag is an instruction to the web browser that will not appear
on screen. It does not matter whether tags are in upper or lower case.
Most opening tags will have a closing tag. Closing tags look the same as opening tags
but has a /
to mark it as closing. For example, here is a hypothetical opening tag:
<atag>
, and here is its closing tag: </atag>
.
A tag is a marker, an element is an actual thing. For example, given this:
<B>bold text</B>
the <B> and </B> are open and closing B tags, but the 'bold text' as a whole is the B element.
Usually, the start and end of an element is marked by a tag, but this is not necessarily so - sometimes these are implied
For example, the HTML element (which is simply the element that contains the whole of a web page) is implied. This means that even if you don't have the opening or closing tag, since every web page, by definition, includes the HTML element, the element's presence is implied.
Similarly, for paragraphs (the P element), although you may not omit the opening tag, you may omit the closing tag, since if you have:
<P> Paragraph <P> Next paragraph
then the P tag by starting the second paragraph implies the end of the first paragraph.
An attribute is something that gives the browser extra information about the element. Attributes are only specified on opening tags, since there is no point in telling the browser something about a tag that is being closed.
For example, <BODY bgcolor="white">
, bgcolor is BODY's attribute. Attributes
usually have values, e.g., <TAG attribute="value">, but not in all cases - e.g., <TABLE
border>.
Attribute values (e.g., white in bgcolor="white") must be enclosed in matching quotes (" " or ' ') unless they only contain a-z, A-Z, 0-9, -, and '.'. However, since they are always valid if included but sometimes invalid if not included, it is recommended that you always use quote marks.
To illustrate, <P style=color: red> is not valid, since the attribute value contains spaces and a colon, but <BODY bgcolor=red>, is, since it does not.
This section introduces you to the most important concepts introduced in the small piece of HTML above.
The first line of any web page should (but need not) be this tag.
Next comes this tag. It contains any content that is not displayed as part of the body of the document.
Between the <TITLE> and </TITLE> tags come the document's title. E.g., <TITLE>Introduction</TITLE>. The TITLE will be displayed at the top of the screen in the application's title bar. Every document MUST have a title.
This is to say that the HEADer is over.
This says that now you want to put the BODY. Inside the BODY comes things like paragraphs, lists and headings.
This is to say that you want a heading now. The H stands for heading, and 1 for the size of the heading. There are 6 sizes of heading from H1 down to H6.
This says that the heading is over. If you did not tell the browser this, it would think everything was a header, and display everything in the huge header font.
This says that now we want a paragraph. Without this tag, there would be no space between paragraphs.
Now our paragraph is over.
Now our BODY is over.
Now the HTML file is finished.
Now that I've introduced you to the basic concepts of HTML, I suggest that you try making a page of your own. Try starting with the basic page above, and then save it (you shouldn't use a word processor to do this, because it will save it with all kinds of irrelevant formatting information - instead use a text editor such as Notepad) and load it up in your web browser. Be sure to give it a name ending in '.html' or '.htm' - e.g., myfile.html.
Once you are totally happy with what has been discussed so far, you should continue with the next section, which considers individual elements.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.