Every HTML document must contain certain HTML tags. Each document consists of head and body text. The head contains the title and the body contains the actual text that is made up of paragraphs, graphics, and other elements. Browsers expect to see specific information because they are programmed according to HTML specifications.
The required elements are the <html>, <head>, <title> and <body> tags and their corresponding end tags. Some browers may format your HTML file correctly even if these tags are not included, but some browsers will NOT...so make sure you include them.
Ending tags will have a slash before it to close out the corresponding tag.
You can type HTML codes in Upper or Lower case letters, the result will be the same. You should keep your capitalizations consistent throughout your pages. I am suggesting that you type in lower case letters, because HTML coding is going in that direction. I am also suggesting to save file names in lower case letters, because it is much easier to remember your file names if they are all the same. Even the extensions (.htm .jpg .gif) should be in all lower case letters. This will make it easier on you...to have everything in lower case letters!
So let's start our page....Here is what we will start with:
Example: <html> with have a closing tag of </html>.
| Codes we will use | Explanations |
|---|---|
| <html> | opening tag for the html document, this tells our browser the document is written in html. |
| <head> | this section includes special information for web browsers and search engines. |
| <title>name your homepage</title> | this is the name of your document and will be the text that appears at the top of the web browser and is what will appear in a person's bookmark file if they bookmark your site. it is the only part of the head section that is visible to the reader. it is not visible at the top of your actual page. |
| </head> | closing of the head tag. |
| <body> | the body of the document will be between these two tags including text, graphics, tables, frames and other elements. |
| </body> | closing of the body tag. |
| </html> | closing of the html document. |
On your brand new HTML document, key in the codes above, under the Codes We Will Use column. Key in the title of your document, something like...Kathy's Homework Page...between the title tags. One thing about your Title...this is the information that will appear on the top of the browser window when someone opens your page. It is also the information that will be put on someone's computer who Bookmarks your page. Keep this in consideration when putting a title here.
One thing in doing HTML coding...you do not have to worry about white space in your HTML document. White space is all the blank spaces between words and sentences. You will be using codes to put breaks or blank spaces in your document. So, don't be afraid to incorporate some black spaces between your coding. It will make it a lot easier for you to go back to and read later on.
Give each of your codes (above) a line of their own, just like they are in the boxes above. Yes, the Title code can all go on one line.
One trick I like to do is leave a space or two just before the closing BODY tag. I do this to keep the last two tags at the bottom of the page, where they belong. The last two items in the table above will ALWAYS be your last two codes on your HTML document.
The Meta tags. These tags provide information to the Search Engines that will sooner or later pick up on your site to let others know it is out there. These tags go right AFTER the TITLE tags, but BEFORE the closing HEAD tag. Remember this is the section that includes special information for browsers and search engines.
| CODES WE WILL USE, Explanations under it |
|---|
| <meta name="description" content="Name of your Web Page here with a small description."> |
| This is the name or description web browsers will use when describing your site. Typically you should have about 20 words here describing your site, in sentence form. |
| <meta name="keywords" content="computer HTML coding help codes designing web pages"> |
| These will be the key words you will use when describing your page to the web browser. These would be the words someone else would key in to 'find' your page. See the words I used to describe this page. You may use as many words as fit here, do not duplicate them. UPDATE (1-01): This is changing, some say that 4-5 of the most important words describing your site will rate your site higher with search engines. More words water the more important ones down. Also, we used to insert commas between each word here, but commas make each word a separate entity in the search engines. If we omit the commas you can get multiple combinations with your words in the search engines. |
Please note that due to space here (on this page), the above codes may appear on more than one line. They should all go on one line, or whatever will fit on the one line. Let your words flow naturally in your document, this is called word wrapping.
Key in the above codes from the table above, where you were instructed to.
Now I want you to Save your document (Saving tips).
You will be asked to add sentences and items to your page as we go along with the lessons. It is great practice to follow along and do these lessons as intended. When you are done you will have one HTML document to use as a resource for creating future pages. Please name your page: lessons.htm (so....to get to this page on the net you will have to key in your homepage address with the /lessons.htm at the end of it. This is explained further below). Also by naming it lessons.htm we both will know where to find your page.
NOTE: In MOST cases, your very first page that you create will be called index.htm
This is because your server will need to have a page called index.htm for your web address. This page is the one that will be brought up by the browser when someone keys in your homepage address. Visitors do not need to key in the name index.htm to get to your page, just the regular address.
EXAMPLE: My homepage address is: http://www.wcnet.org/~kbrandt. I don't need to key in the index.htm at the end of my web page address to get there. The above page that you go to is named index.htm on my computer and this is what I upload to the server. The server recognizes this as my homepage address.
MORE NOTES: With the Wood County FreeNet you do NOT have to have the extension of .html on your index page. Some other servers you might need to do this for the index page to work. You cannot save a file with a four letter extension (on a PC) to your hard drive. You can, however, change the extension with your WS_FTP program after it is uploaded to your page.
The rest of your documents will have the .htm extension on them. For these pages you will have to key in the whole address to get to them...or link to them from your homepage.
Example: Here is the link to my Graphics page (where you can go to get lots of free graphics on the net)... http://www.wcnet.org/~kbrandt/graphics.htm See how I need to key in the name of the page at the end of the address? Also notice I named it something that pertained to the page.
LESSON NOTE: You will not be able to see anything on your page yet...continue with lesson 2 and then view your page.
Please use the email link below if you have any questions about your lesson.
