Web editing webmaster authoring

HTML-Kit Tutorial Page



Here I have this page opened in the HTML_Kit Editor window. You toggle between Editor and Preview with the tabs on the bottom left corner of the window. Lets go through this a few lines at a time.

But first, open up HTML_Kit and open a new document and erase everything in it. Then come back to this page and View Source, either from the View Menu or by right-Clicking on the page and choosing View Source. Now copy everything on the page(Ctrl-A, then Ctrl-C). Return to HTML_Kit and paste everything into the blank document.

The first three lines are the DOCTYPE and also opens the html tag. These will be the same on all of your pages.

Line 5 opens the head tag. Nested in the html tag is the head and body. Things important to browsers and search engines are in the head, the meat of your page is in the body.

Line 6 is the Title of your page. This is very important. Give it a unique name that also explains a bit about your site. This is the name that goes into visitors bookmarks when they add your site to their favorites list. It is also used by search engines to catalog you page.

Line 7 is an important META tag. It is a sentence describing your site. Use as many key, descriptive words as possible.

Line 8 is also an important META tag. List keywords followed by a comma. Don't repeat anything and use plurals when possible. Some search engines use these tags to catalog your page. Google does not, but only 40% of my hits come via Google.

Line 9 is an optional tag, ignore it.

Line 10 is your character set. It tells your browser what to expect.

Using HTML_Kit to develope your site

Line 11 is my FavIcon tag, ignore it too, unless you want to use an Icon when you get bookmarked. It is a 16 pixel square image saved on your server. Google "favicon generator" to make your own.

Line 12 is the link to my Cascading Style Sheet. Lots more on that in the Cascading Style Sheet section here.

Line 13 closes the head tag and Line 14 opens the body tag.

When you first looked at the html source, it seems a bit overwhelming, but when you look at it a line at a time, it is a lot easier. Delete line 9 and line 11. Change the title to the name of your page, and do your own Description and Keywords. Keep the link to my Cascading Style Sheet, we will use mine until you do your own. Erase everything from line 16 to just in front of the last two lines. Then do a Save As and save the page on your computer as index.html. This will grow into your home page.




Now we are going to get to the interesting part. We are moving to the creation of the body of your page. This is intertwined with Cascading Style Sheets, so we will move to that area and dig in: The Body





If you like my site please vote for it by clicking the Digg button. It only takes a minute and it is important to us.

Thanks, Steve