Before we learn HTML, you will need to know what it is. HTML stands for HyperText Markup Language.
Basically HTML is a system of coding for internet pages
Of course, HTML doesn't look like what we see on the screen. HTML is full of < > tags which enclose a special task for the browser to fulfill. It is these < > tags which you must learn...
We start out a normal HTML page with the simple tag
<html>
You need to know a page consists of 2 parts : 1 the head and secondly the body.The head is the non visible data for your page but which you can manipulate to fool the search-engines or get a better ranking., Also your title is mentionned here.
<head>
In this <head> section you enter your title.
<title>Your Page Title</title>
Notice the "/" before the second usage of "title". This "/" tells the browser that this is the end of the page's title. Almost every tag uses one and you shouldn't forget this otherwise your page won't appear as you want it to appear.
If the head is finished we enter
</head>
The second and largest part of your HTML programming is giving your page body, in other words adding contents to your page.
To start the body part we type :
<body>
Now this body tag has different labels. A label is written into the tag and offers a specific quality of the tag .
e.g.
<body
label="something">
Most HTML tags have labels. labels are usually not mandatory to use. Concerning the body tag , you find these most important labels.
*background="image" - The background image
eg. <body background="image.jpg">
This will be the background for your page
Most HTML tags have labels. labels are usually not mandatory to use. Concerning the body tag , you find these most important labels.
*background="image" - The background image
eg. <body background="image.jpg">
This will be the background for your page
*bgcolor="rgb_code" - The
background color
e.g. <body bgcolor="000000"> Your backgroundcolour will be black
*text="rgb_code"
- The text colore.g. <body bgcolor="000000"> Your backgroundcolour will be black
eg. <body text="000000"> - Your text will appear in black
*link="rgb_code" - The text-link color
eg. <body link="000000">
*vlink="rgb_code" - The visited text-link color
eg.<body vlink="000000"> The colour of the links on your page.
*alink="rgb_code" - The active text-link color (when people click on it)
eg.<body alink="000000">
the Rgb-code is a six digit codewhich signifies the color of something. Now can be replaced by the name of the color. However people who don't have a java-compatible browser will not see the colours correctly.
Red - FF0000
Green - 00FF00
Blue - 0000FF
Yellow - FFFF00
White - FFFFFF
Black - 000000
After the BODY tag, the visible HTML is shown as well as just plain text. Nothing special is needed to display text other than
typing it in on your keyboard, however there are certain HTML tags which you must put in for the the text to be shown in a
certain way, to put in images, and other marks.This you will learn in the following steps.
After you have placed all your visible HTML and text, you must now close up the HTML document.
</body>
</html>
Short example.
<html>
<title>The Page's Title</title>
<body bgcolor="rgb_code" text="rgb_code" link="rbg_code">
This is where the visible HTML tags and text goes.
</body>
</html>
First is the most popular tag of all: the <A>tag. The A tag has two labels that are often used, one significantly more used than the other.
The first use of the A tag is to make a link. This is a underlined part of text that jumps you do another place on the internet when you click
on it. That is done by putting in
<a href="http://www.yourserver.com/mine/index.html">Link Name</a>
On the HTML document, it looks like this
Link Name
so when you click on it this will take you to index.html which is located in the rootdirectory of www.yourserver.com . If you have a directory assigned than it should direct to that directory, for instance you want to link to the index.html document that's located in /mine
<a href="http://www.yourserver.com/mine/index.html">Link Name</a>
You can shorten the URL inside the HREF label even more if the place where your desire to link to is on your own
webpage. It would be shortened to
<a href="index.html">Link Name</a>
The second use of the A tag is to create a link to a part of your document. To do this, you put in right before the place where you
would like as the top of the document part
<a name="name"></a>
This is not shown visibly on the page. To link to the part of the document, you put in
<a href="document.html#name">Link Name</a>
Where "document.html" is the URL on your own webpage where you put on the NAME tag, the "#" signifies that this is a link to a
part of the document, and "name" signifies the name you put in the NAME tag. Below is an example of this tag if you still don't
understand what this tag does.
2 The <IMG>tag
The second tag is the IMG tag. This tag allows you to put a picture on your webpage. It is stated by
<img src="http://www.yourhost.com/img/image.gif">
A couple notes before we go on
1.You shorten the URL for the SRC sub-section the same way you do for links.
2.You do not need a /IMG tag for this HTML tag.
3.You can make a picture a link by combining the two tags.
The IMG tag has a few sub-sections. Below is a list of them
src="image.gif" - The image location
width="number" - The specified width of the image
height="number" - The specified height of the image
border="number" - The amount of border an image has (like a frame for a picture)
alt="Text" - The name of the image (this shows when the image is not loaded yet)
Knowing how to change text is essential to create your own professional looking page.
<center>
Centers your text There are no labels
You just put in HTML
<center>Some Centered Text</center>
And you get
Some Centered Text
<br> This is a basic tag for breaking your line : Browsers will show your typed text in one line if you don't use this tag : If you want to continue on the line below you need to enter <br>.
This is one of the few tags that don't have an end tag
<p>
The standard tag for typing text : It points out to the browser that you start a segment of text .
Generally you don't have to close this tag but we advise you to do so anyway because not all browsers will recognize the code correctly.
You should when you want to start a new alinea close the tag </p> and than begin a new <p> section. You can use the label align="left/center/right" If you want the contents aligned in a particular way. The default is left.
<i>
Use this tag if you want to cursivate your text . Don't forget to close this tag </i> when you want your text to be normal again.
<b>
This tag changes your text in a bold way . Again , don't forget to close your tag .
<u>
The tag that underlines your text. Also need to close this one.
<pre>
Using this tag will allow you to enter your source text in the exact way it will appear on the screen. Suppose you enter : " I'm using a <br> tag ".
Without the <pre> you would get
"I'm using a
tag "
When you use the <pre>tag you would get
"I'm using a <br> tag ".
This seems very handy to use but don't exagurate as some browsers have problems with these tags. If you can edit your text in another way we suggest you don't use this tag.
<blink>
let's your text blink
Also requires an ending tag </blink>
<sup>
Writes your text in superscript.
Requires an ending tag </sup>
<sub>
Writes your text in subscript.
Requires an ending tag</sub>
<h>
If you want to change the size of your text you can change the font size but we suggest you use the <h> tag. With this tag we want to tell you a secret : The search-engines will look in the <h> and depending on the size of the <h> tag your site will get listed easier if a keyword is in the <h>tag.
You have different sizes of <h>-tags : 1 Is the largest and 6 the smallest.
<h1>size 1</h1>
<h2>size 2</h2>
<h3>size 3</h3>
<h4>size 4</h4>
<h5>size 5</h5>
<h6>size 6</h6>
The H tag has only one label used for aligning the text
<h1 align="left/right/center"> - The alignment of the H tag on the screen
You have already learnt how to alter your text but not how to change your font , also an essential part of the atmosphere you want to create.
You need to be aware of the fact that not everybody has 100 fonts on their computer so if you don't intend to use arial, verdana or courier , make sure you at least enter one of these three as an alternative.
Also stick with max. 3 lettertypes because if you use more your page won't be very attractive to read.
<basefont>
The basefont tag is somewhat like the <BODY> tag
It states what the all the basic text will look like (which means you will have to put the BASEFONT tag on the top of your page).
The basefont has two labels : size and font style.
The basefont has no end tag.
<basefont="arial" size="number">
- The number you can use ranges from -2 to 6. 0 being normal text size and 6 being the largest.
<face="font_type">
- Controls the font type on the page. Defalt font type is Times New Roman.
<font>
The final step to alter your text is this tag.
It's similar to the base font but the only difference is that you can use this to change the font for specific parts of texts.
The font has some labels too : The most important ones are
<font size="number">
- Just like the H tag in that it controls the size of the text. The number you can use ranges from -2 to 6, 0 being normal text size.
<font align="left/right/center/justified">
- Aligns the text of the FONT tag
<font face="font_type">
- Controls the font type on the page.
<font="arial" color="rgb_code">
-You can control the color of a certain amount of text instead of just the text in general. Tables are not complicated, but you must construct them correctly otherwise. We advise you to not start on an own table until you read this whole chapter.
Just like many other tags tables have a LOT of labels. So many in fact, that we couldn't list them all and chose only the most important ones.
You start with a
<table>
These are the most commonly used labels for the <table> tag
<table border="number">
This is the border around the tables. Usually, webmasters like to set this at 0 or 1. The default is 0 (none).
<table bordercolor="rgb_code">
If your table has a border, this will set the border color.
<table cellpadding="number">
This is the shaded-area for the border. There must be a border for this to be set.
<table cellspacing="number">
This is the spacing (white-area) for the border. There doesn't need to be a border for this to be set.
<table width="number"> This is the width of the table. This can be a pixel range or a percentage.
The
TABLE tag is the main tag but you need others to complete the table.<table>
These are the most commonly used labels for the <table> tag
<table border="number">
This is the border around the tables. Usually, webmasters like to set this at 0 or 1. The default is 0 (none).
<table bordercolor="rgb_code">
If your table has a border, this will set the border color.
<table cellpadding="number">
This is the shaded-area for the border. There must be a border for this to be set.
<table cellspacing="number">
This is the spacing (white-area) for the border. There doesn't need to be a border for this to be set.
<table width="number"> This is the width of the table. This can be a pixel range or a percentage.
<tr>
This tag signals the start of a vertical row. There are not important labels for this tag, you just need to declare this
tag. This is mainly to organize your table
The last tag you need for the TABLE tag is
<td>
This tag signals the start of another horizontal row in a vertical row, or a table cell. You write all your text for the table in the TD
tag. You must have all three, though, or the table will not work. The labels for the TD tag are
<td bgcolor="rgb_code">
This will set the background color of the cell.
<td align="left/right/center">
This sets where the text, pictures, etc. are horizontally located in the cell. The default is left.
<td valign="top/bottom/middle">
This sets where the text, pictures, etc. are vertically located in the cell. The default is middle.
<td colspan="number">
This sets the space that a cell will have based on the that of normal cells.
<td width="number">
This sets the width of the cell. This can be in pixels or in percentage.
Finally, you close some or all of the tags
</td>
</tr>
</table>
< COLLECTION OF TAGS >
<ul>
This tag is used when you have a list that you want to state.
This has only one sub-section you can use. That sub-section is
type="disc/circle/square" - determines the type of bullet you use (more detail below)
Disc - A solid bullet (the default)
Circle - A hollow bullet
Square - a square hollow bullet
- e.g. <ul type=" circle"> will
give you a list with the circle in front of this line
- is the graph
for this html tag
Okay you have the beginning part of the code. Now for the bullets themselves. You put in
<li>
Then the text afterward. The LI tag is designed to automatically start a new line when it is called, so you don't need to use the BR
tag. After you have entered in all the LI tags you need, you close the list by putting in
</ul>
Here is an example of what you would put in
There are multiple operating systems
<ul type="disc">
<li>Windows
<li>Dos
<li>Unix
</ul>
There are multiple operating systems
- Windows
- Dos
- Unix
The OL tag is normally used if you want to make an outline on your page. This tag is stated first by putting in
<ol>
The OL tag (just like the UL tag) has only one label you can use. That label is
type="1/A/a/I/i" - determines the type of number or letter you use for your list
1 - Labels the list items with numbers (the defalt)
A - Label the list items with capital letters
a - Label the list items with lowercase letters
I - Label the list items with capital Roman numerals
A - Label the list items with lowercase Roman numerals
Okay you have the beginning part of the code. Now for the items themselves. You put in (just like the UL tag)
Again don't forget to close your tag.
Here is an example of what you would put in
There are multiple operating systems
<ol type="1">
<li>Windows
<li>Dos
<li>Unix
</ol>
and this is what it would look like
There are multiple operating systems
1.Windows
2.Dos
3.Unix
The last list tag is the Definition List tag or DL tag. The DL tag has no special bullet . It is normally used for definitions because one set of text (the definition) is indented and the other is not.
This tag is stated first by putting in
<dl>
After you put in the DL tag, you have two tags open for you to use . One is indented the
other is not. The unindented text tag is
<dt>
After the DT tag, you put in the text you want. Next, the indented tag is
<dd>
Both tags automatically put in a line break when you start another <DT> <DD> tag, so you don't need to use the <BR> tag. After you have entered in all the <DT>,<DD> tags you need, you close the list by
putting in
</dl>
hr>
Puts out a line that runs horizontally across the screen. The line is plain gray which you can edit .
Here are the main labels
<hrwidth="number%">
- Percentage of the screen that the HR tag covers
<hr width="number">
- Amount of pixels that the HR tag covers
<hr align="left/right/center">
- The alignment of the HR tag on the screen if you specify a width.
<hr size="number">
- Amount of pixels that the hr tag covers vertically.
<hr noshade>
- Deletes the shading below a regular HR tag
<EMBED>
The <embed> tag is used to put most plugin files on your page. The most popular plugins on the internet today that can be used in this tag are REALPLAYER, and SHOCKWAVE.
Remember that not everybody has a super computer to surf the net so if you use the <embed> tag wisely.
The embed tag has a lot of labels . We haven't given you the entire collection but only the most important ones.
< embed src="file.extension">
- This is the URL that the plugin file is from
<width="number">
- This sets the width of the embeded file
<height="number">
- This sets the height of the embedded file
<autostart="true/false">
- This plays the embedded plugin music ) once you load the music's file
<hidden="true/false">
- This makes the embedded plugin hidden from view, but plays like it's in the background.
No comments:
Post a Comment