 |
|
Basics Lesson
The first question that begining HTML programmers ask is, "Where do I write HTML?" That has been made easy for you with the program that we have created. A text window has been provided for you within the "edit" section of any page you wish to create. Click on the pages tab(inside your account) then use the "Page Functions" pull down menu to find edit.
Html can also be created using a word processor or a note pad. When you use one of these the document that you create must be saved as "text only".
Another option is to use a HTML editor. There are many different HTML editors. The way that they work varies widely between products. If you have any questions or would like us to recomend one you can contact us. Click here to email me.
The "M" in HTML stands for "Markup". That is exactly how you will modify text with HTML. When you want to alter the apperance or function of text, you need to surround it with HTML tags, for example:
| <font color="red">This Is Red Text</font> |
| Creates |
| This Is Red Text. |
| or |
| <i>This Is Italicized Text</i> |
| Creates |
| This Is Italicized Text |
Note: HTML is not case sensitive. <B> is the same as <b>
Every HTML tag that you create must have the symbols < > surrounding the command. If you want to underline the word "dog" you would surround the word with the <u> tags. Notice that the tags that follow the text appear the same except they have a "/". The slash tells the browser that the command that you started is now ending. Everything that falls in between the tags will be modified. So your code would look like this.
Creates
Dog
Multipule tags can be used to modify text. If you wanted to have something be underlined and bolded the commands would look like this:
Creates
This is bold and underlined.
The trick to this is ending the tags. The tags need to be ended opposite of the order that they were started. Think of it like looking in a mirror. 1, 2, 3 : 3, 2, 1 or <i><h1><blink>text</blink></h1></i>
There are a few commands that are generaly need to create HTML. However the program that we have created has taken care of these for you. On the other hand if you choose to use "blank pages" or create HTML with any other program you will need to know these commands. The following commands are taken care of for you when you are using one of the following:
- Normal home page
- Contact us page
- Guestbook page
- FAQ page
- Custom page
The first, and most important command, tells the browser that everything following is "HTML":
The <html> tag will be the first thing you enter. The </html> tag is the last thing that you will enter at the bottom of your page.
The next command is the "head" command. This command is used for advanced design such as prelaoding images and scripts(i.e. Javascript). This is where you would find the "meta" tags that are used with search engines. The "title" command would also go in the "head" tags.
The "page title" box has taken care of the "title" command for you. It can be found at the top of most of the pages within our program. Use this text box to name your pages. The title of this page is "Basics Lesson". You can see this at the bottom of your screen. It appears in a box like any open program or web site would. If you are using a PC it will appear on the same line as the "start" button. Here is how it was done for this page:
Finally the "body" command. This command follows the head tags and is used to enclose the text -- that is modified by HTML -- that will create your page. For example:
The </body> tag will end up at the bottom of the page right before the </html> tag.
If you wish to see a list of HTML tags click here.
Another command that will come in handy is a subcommand. A subcommand is like the <font color="red">This Is Red Text</font> that we saw eariler. The main command for this is <font>. The subcommand is color. When you use a subcommand a value(red) is also needed. The value needs to be called for using the = symbol, and the value(red) needs to be enclosed in "quotations". The color can be almost any color as long as it is recognized by the browser, it can also be a color reference number as long as you use the # symbol. For example:
When using sub commands only the main command needs to be ended:
The code used to change to color of a font should look like this:
For a list of sub commands click here.
Note: Not all of the text on a page has to be modified with HTML. However text that is not modified will have a plain appearance.
When you are entering HTML, in our system or any other system, please be aware that the window will only recognize text. This means that any time you use your "enter" or "return" key as well as the "tab" the browser will not be effected. You could actually write a whole webpage on one line. For example if you would enter:
2. Orange
3. Peach
It would appear as:
1. Apple 2. Orange 3. Peach
Note: There is a few exceptions to the rule that says that "all html tags have to be ended". <br> and <p> are some of these exceptions. Don't be fooled there is only a few of them;Click here to see a list. The <p> tag can be used with an ending tag </p>. Use the paragraph tags to surround a paragraph for greater control of its positioning.
Now that you have an idea of how to modify text. It is time to learn how to position the text that you have modifyed. This will be done with "align" commands. These work like the subcommands. A "align" command will be opened then you will need to continue with a value like was done with the subcommands above. The subcommand will be writen into a paragraph tag For example:
The "center" tag can be replaced with "right" and "left" to align the paragraph where you want it. Furthermore "Center" can be used by itself, but "right" and "left" cannot. For example:
To align text vertically the "valign" tag can be used with either "top", "middle", "bottom". For example:
Note:The "align" and "valign" commands can also be used in image and table tags.
Images Lesson / Tables Lesson
List of tags / Fonts and Colors
Since 14 Mar 2001