| The HTML Standard
|
| |
The Hypertext Markup
Language (HTML) is a very simple markup language used to create platform
independent hypertext documents.
HTML has been in use by the World Wide
Web information initiative since 1990. Presently, it has become the standard
language for creating Web documents.
From a quite simple and rudimental language, it has evolved, due to the
huge expansion of the World Wide Web, to become a very complete markup
language, ideal to create Web documents.
|
| |
| Basics |
| |
An HTML document is a
text file that consists of text and tags that mark the structure of the
Web document. After receiving an HTML file, the browser will use these
tags (also known as elements) to display text, multimedia objects, and
hyperlinks.
An element is the most basic part of
HTML. It consists of a start-tag, an end-tag, and the data characters enclosed
by the two tags.
- A tag starts with a less-than (<)
sign and ends with a greater-than (>) sign.
- An end-tag consists of the tag name
immediately preceded by a slash (/).
- Some tags require that you always
provide the matching end-tag.
- Others allow you to omit the end-tag
if the result is clear and unambiguous.
Consider the following example of an
HTML element:
<B>This sentence
will be displayed in Bold</B>
As you should already know, <B>
is the start-tag and </B> the end-tag.
It's also possible to have nested elements,
by placing an entire element inside another, as in this example:
<B>This sentence
<I>will</I> be displayed in Bold</B>
Links are the most important things on a web-site. With them you can reach parts of the offer,
and you can divide the offer into seperate sections.
The tag for this is <A HREF="XXXXX.HTM">.
Pictures let a web-site develop to something special. The tag for this is:
<IMG SRC="xxxxx.xxx" BORDER=0 VSPACE=x HSPACE=x HEIGHT=xxx WIDTH=xxx ALIGN=xxx ALT=xxxxxxx>.
This tag can also be embedded into a link-tag. A links is then placed behind the picture.
BORDER sets, whether there will be shown a border or not when a link is behind the picture.
VSPACE sets how many pixels the text will be shown vertically beside the picture. The same
with HSPACE, only horizontically. HEIGHT sets the height of the picture and WIDTH the width.
ALIGN sets the alignment of the picture (LEFT, MIDDLE, RIGHT). And finally ALT sets the
alternative text, which is displayed as long the picture isn't loaded or cannot be loaded. That is
important for pictures that have a link under themselve. Throught that way all people know
where they will end up following this link.
The worst thing is a text, which is written without a point or comma, without a good format.
Make paragraphs into your text. That is very easily done with the tag <BR>. A little more
complicated gets it with the tags <P></P>. These two tags have to embedd the text. But text
will flow around pictures which are implemented into these tags.
Format text...there are many tags for that. Therefore I've only listed the most important ones. <U></U> underlines the
text, <I></I> makes it italic and <B></B> makes the text fad. Then there are the tags
<H1></H1> to <H6></H6> are used for the headings. In the headings-tag you can also use an
ALIGN-tag. To center the text use: <CENTER></CENTER>.
|
| |
| Structure of HTML
Documents |
| |
Here's the simplest form
of an HTML document:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 3.2//EN>
<HTML>
<HEAD>
<TITLE>Simple HTML</TITLE>
</HEAD>
<BODY>
A very simple HTML document
</BODY>
</HTML>
Notes:
- Every HTML document begins with the
!DOCTYPE element. !DOCTYPE specifies
to the browser which version of HTML is being used.
- The next element in this basic document
is HTML, which informs the browser
that the content of the file is written in HTML.
- The HEAD
tag marks the beginning of the document header.
- The BODY
element appears at the start of the main content of the document and encloses
the body text, images, and multimedia objects.
|
| |
| Getting Along With Frames
|
| |
Also here a small example at first and then the description of the tags. One basic advantage
with frames: it gives a good structure to the page and design. The following file is nothing else
than the start-file of an old page of mine.
<FRAMESET ROWS="*,60">
<FRAMESET COLS="180,*">
<FRAMESET ROWS="70,*">
<FRAME SCROLLING="no" NAME="logo" SRC="logo.htm" NORESIZE>
<FRAME SCROLLING="auto" NAME="menu" SRC="menu.htm" NORESIZE>
</FRAMESET>
<FRAME SCROLLING="auto" NAME="main" SRC="main.htm" NORESIZE>
</FRAMESET>
<FRAME SCROLLING="no" NAME="copyright" NORESIZE SRC="copy.htm" NORESIZE>
</FRAMESET>
With <FRAMESET></FRAMESET> the window of the browser is divided into frames. You can
either define horizontal (ROWS) or vertical (COLS) rows. You either define those rows with
pixels or percentages. With pixels you can use wildcards. With the definition ROWS="*,60" the
main-window is divided into a frame on the bottom with a height of 60 pixels and the rest of the
window is used fo the other frame. You can embedd more than one FRAMESET-commando
into another.
Now to the <FRAME>-tag. SCROLLING sets, whether the scrollbar should be shown or not.
There three possible settings for this (NO, YES, AUTO). NAME sets the name of the frame,
SRC tells the browser which HTM-file should be loaded. NORESIZE prevents that the USER
can change the size of the frame.
In links, you always have to tell the browser in which frame he shall load the HTM-file. That is
made by adding TARGET="xxxx" to the link-tag. Replace the x's by the name of the frame.
|
| |
| A First Table
|
| |
A table allows to show something in perfect order. It is very easy to make one. Here an
example:
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=10>
<TR align=left>
<TH colspan=2 align=center>
A heading
</TD>
</TR>
<TR align=left>
<TD align=left>
A colum
</TD>
<TD align=left>
and another one
</TD>
<TR align=left>
<TH rowspan=2 align=center>
And here to rows are spanned.
</TD>
<TD align=center>
1. row
</TD>
</TR>
<TR align=center>
<TD align=center>
2. row
</TD>
</TR>
</TABLE>
And that's how it looks like:
A heading
|
A colum
|
and another one
|
And here to rows are spanned.
|
1. row
|
2. row
|
|
| |
| Further study...
|
| |
You are now in conditions
to start creating your own HTML documents.
Off course you'll need to know a lot more. With this simple introduction
to the basic concepts, we intended only to help you start learning HTML.
If you want to jump right into the HTML details, check this document:
On the other hand, if you feel the
need of more information tailored to HTML beginners, try these sites. You'll
lots of information and links to other sites:
|
|