Arachnophelia HTML Editor Tutorial

ODDS & ENDS

THE COMMENT TAG

Make it easy on yourself!. Learn to use the comment tag. This is simply a way to make yourself notes within your html document that will not be displayed when the document is viewed. Al you have to do is place an "!" after the < and the browser will ignore whats between the tags.
Use comments to seperate sections of your page, highlight things you use often, and explanations or instructions to yourself so that when you come back latter to edit you know what is what on your page.
Below is an example of commented html and the results below that. As I said earlier, you could make a whole page like this table below.

<table width=100%> <tr> <!**********this is the left margin of the page**********> <td width=125 valign=top bgcolor=#5c5c5c > <b><center><font color=#e4e4e4>Menu</font></center></b><P> <center> <img src="webthing.gif" width="32" height="32" alt=""></center><P> </div> </td> <!************end of left margin*************> <!******************center area begins*********> <td bgcolor="#dbdbdb"><P><BR> <blockquote> <div align="center"> <font size="+1"><b>Table Example</b></font></div> <BR> You can put whatver you want here, text pictures, anything you like and everything will stay between the borders since this area is the center cell of the table. </td> <!*****************end center area**********> <!*************begin right margin***********> <td width=125 valign=top bgcolor="#5c5c5c"> <b><center>Menu</center></b><P> <center> <img src="webthing.gif" width="32" height="32" alt=""><P> </center> </td> </tr> </table> <!*****************end right margin**************> </body> </html>

Menu

Table Example

You can put whatver you want here, text pictures, anything you like and everything will stay between the borders since this area is the center cell of the table.
Menu

THE "PRE" TAG
This is another slick trick to keep from typing so many <br> tags over and over. This works similar to the formatting in a word processor and inserts breaks on a carridge return.

I inserted the pre tag just above this line. Typed in a few lines of text so that you can see what it does. I think I have typed more on this tutorial than I have in 7 years on the net including the old text chat days!
This is what the code looks like:

<b><u>THE "PRE" TAG</u></b> <ul> <li>This is another slick trick to keep from typing so many <br> tags over and over. This works similar to the formatting in a word processor and inserts breaks on a carridge return. <pre> <li><font size="+1">I inserted the pre tag just above this line. Typed in a few lines of text so that you can see what it does. I think I have typed more on this tutorial than I have in 7 years on the net including the old text chat days! <li>This is what the code looks like: </pre>

META-TAGS

Meta-tags are used in the head section of your document to describe severl things such as the type of document , the author, content, rating, and a description of the site. These tags are read by the search engines in order to index your content and classify the page in the correct search catagories. I have installed a Meta-Tag creator on my site you can use to create yours as well as a submission page to submit your sight to the search engines for indexing. this is what my meta-tags look like:
<head> <title>Arachnophelia HTML Editor Tutorial</title> <LINK REL="SHORTCUT ICON" HREF="http://www.slydevil.net/favicon.ico"> <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Slydevil"> <meta name="distributor" content="Slydevil's Lair"> <meta name="copyright" content="slydevil.net"> <meta name="keywords" content="Slydevil,chat,audio,audio chat,video chat, system help,mplayer,hearme,html,web design,myrtle beach,south carolina, software,freeware,shareware,html editor"> <meta name="description" content="Lots of good links to help and software. Also many good audio & Video chat programs"> <meta name="generator" content="SpyderTag V1.0!"> <meta name="robots" content="index"> <meta name="language" content="EN"> <meta name="rating" content="general"> </head>

You can generate your own tags HERE . Just copy and paste them into the head section of your document.

Once you have your meta-tags in all your documents and your site up and running, you will want to submit it to search engines for indexing so that people can find the site. My automated submission page is located HERE

LINKS

Here are a few links to web resources which will help you with your creation and publishing.
Graphics

Free Graphics To download individual files, click on the button to view each group, then either click the right mouse button over each and save, or click the left mouse button to go straight to the file. You can also download zipped files of each group.
BULL'S BEAUTIFUL BORDERS & BORDER SETSGraphics, backgrounds, borders, bars and buttons here! Floral, kaleidoscope, quilted bars and buttons, wild wallpaper, subtle backgrounds for your web site! Gold bars & buttons, buttons with text, and more..
Backgrounds & Borders Welcome to Backgrounds & Borders! Here you will find a wide variety of different types of Backgrounds & Borders, easily grouped into convienient classifications.
Icon Archive The Icon Archive is a collection of icon sets of over 7000 high quality icons in gif & ico format. View the icons or download the original packages of icon sets for PC (zip) or MAC (sit/hqx) provided by the authors with all original readme files. Pay attention to the readme files before using the icons!
NerdBird's Graphics This is a site that contains jpg's, gif's and animated gif's of various kinds. You will not find any X-rated images here, so if that's what you're looking for, you're better off somewhere else. But you will find images that can be used as web page backgrounds or webpage buttons and other illustrations.
Java Resources

The JavaScript Source The JavaScript Source is an excellent JavaScript resource with tons of "cut and paste" JavaScript examples for your Web pages. All for free!
Magic Buttons So, if there are "automated" tools that do this, why should I mess around with inserting the code by hand? Same reason you should learn to author HTML by hand... flexibility, power and confidence. The flexibility to always be able to do what you want to do without having to wrestle with some editor.
The JavaScript Source ...Special site features are listed at the top, such as Message Forum, Contributing a Script, site FAQs, etc., and the JavaScript categories are included near the bottom. You may also search The JavaScript Source
Freewarejava.com, an excellent starting point to everything Java™ technology on the net!
Webmaster Tools is a suite of wizards designed to make some of your more repetitive coding tasks easier. Using our wizards and copy and paste you eleiminate any typing errors. Simply type in the variables and click a button to produce the script. Copy and paste the script into your document and you are away. It couldn't be easier.
More Tutorials

Advanced HTML Tutorials..Learn how to use forms, music, meta tags, tables, and frames!
Getting Started with FTP...So, you need to use ftp to transfer your files? Sounds like trouble, doesn't it? Well, no need to worry, it's not as bad as it sounds. FTP stands for File Transfer Protocol, which is just another way to transfer files over phone lines.
Frames Tutor ...This tutorial is one in a series of PageTutor tutorials and is also available for download a zip file. Learn in the comfort and privacy of your own home.
Javascript Tutor ...This free online version contains the first couple lessons that cover some basic topics.
Stone's Throw Qwik & Easy HTML Guide ...A color coded guide to learning HTML in minutes! Used in University HTML courses! Used by people around the world!

Home | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7