HTML is short for Hyper-Text-Markup-Language.
Hypertext
is simply a piece of text that works as a link to a target.
Markup-language
is a way of layouting text.
Basically a computer see's an "A" as simply an "A"
- no matter if its bold, italic big or small.
To tell the browser than an "A" should be bold we need to put a markup in front
of the A.
This will tell the computer that the text that follows is supposed to be shown as bold.
Such a
markup is called a "Tag".
In the
example below you see a piece of text as it appears on the screen. Underneath is the same
text as the computer sees it.
| Text as you see it on the screen |
This is an example of bold text |
| Text as the browser reads it |
This is an example of <b>bold</b> text |
Note:
All HTML-tags are encapsuled in < and >.
Some HTML-tags are used to
format the text. Examples would be adding different colors to the text, using
effects as bold and italics as well as increasing or decreasing the size of the text.
Other tags are used to divide
the screen into tables or separating the text with horisontal lines.
A third group specifies
properties for the page
Examples could be backgroundcolors or images and colors of hyperlinks on the page.
Finally there are tags used to
divide the page into the two major parts the browser expects a page to be in: The head and
the body.
It is
possible to create webpages without knowing
anything about the HTML-source behind the page.
There
are excellent so called editors on the market that will take care of the HTML-parts. All
you need to do is layout the page, just as you would do in a dtp-program.
However,
if you want to make it above the average in webdesign, it is strongly recommended that you
understand these tags.
The
benefits of doing so are many.
Most important are:
You can use tags the editor does
not support.
You can read the code of other
peoples pages, and "steal" the cool effects.
You can do the work yourself,
when the editor simply refuses to create the effect you want.
If you want
to write your HTML by yourself you can use almost any available texteditor to do so.
Including notepad that comes as a standard program with Windows.
All
you need to do, is type in the code, and when saving the document, make sure to put an
.html-extension or an .htm-extension to the file (for instance "mypage.html").
THE
PAGE STRUCTURE FOR HTML-PAGES:
All
normal webpages consists of a head and a body.
The
head is used for tags and texts that does not show directly on the page.
The
body is used for text and tags that are shown directly on the page.
Finally
all webpages has a <html>-tag at the beginning and at the end of it, telling the
browser where the document starts and where it ends.
The
most basic code.. the code you will use for any page you make, is shown below:
<html>
<head>
//
This section is for the title and technical info of the page.
</head>
<body>
//
This section is for all that you want to show on the page
</body>
</html> |
Note:
Closing tags are the same as opening-tags, only with a / in front.
THE HEAD OF THE DOCUMENT:
The head-part of
the webpage incudes all the stuff that does not show directly on the resulting page.
The <Title>
and </Title>-tags encapsules the title of your page.
The title is what shows in the top of your browserwindow when the page is loaded.
Right now it should say something like "Html Basic Coding" on top of the window
containing this text.
Other
things you would often see in the head-section would be meta-tags
used - among other things - to improve the rankings in searchengines.
Quite
often the head-section contains javascript - which is
programcodes for more complex pages.
Finally
more and more pages contains codes for cascading-style-sheet-commands (CSS).
CSS is a rather new technique for optimizing the layout of major websites.
Since these aspects are way
out of reach at this stage we will just proceed to the body-section for now.
THE
BODY OF THE DOCUMENT:
The body of the
document contains all that can be seen when the user loads the page.
On this site you can learn about all aspects of HTML:
For a complete overview of the tutorials and resources on this
site you should look at the sitemap.
Tell a friend about this site!!!
|
