|
|
I know when I was first thrown into the World Wide Web a few years back, I was totally bewildered. What did all those funny things mean? I had to ask my sister to tell me how to do everything. Now, I sit in Science class and write HTML code for my latest Charity Case quite happily. But the one thing I wanted when I was first introduced to HTML code was a help page that didn't talk technical, which is probably what most people want. So it seems only natural to add one to my site, eh?
1. How do I start?:
1a. The header - the foundations for the page2. Adding the oomph factor:
1b. Colour codes
1c. Body characteristics - text colour, background, all that stuff
1d. Links, horizontal lines and images
2a. Emphasis3. Getting out there:
2b. Tables
2c. Lists
3a. Search engines
3b. Meta tags
2. Adding the oomph factor:1a. The header
This tells the browser (the program you're using to view this page, basically) what the page is called and, in a way, what it looks like. It usually goes something like this:<HEAD> <TITLE>My Page</TITLE> <X-SAS-WINDOW TOP=88 BOTTOM=443 LEFT=8 RIGHT=541></HEAD>The Title is what appears in the uppermost bar on your browser, above the 'help', 'home', 'search' etc buttons and the address field. On this page, it says Alk-Align Web Design, as you can see, because that's the name of my page.
The <X-SAS-WINDOW TOP=88 BOTTOM=443 LEFT=8 RIGHT=541> has actually baffled me for years. I have no idea what it means, but the page doesn't quite seem to work without it. If anyone knows....? I'm here, still wondering.1b. Colour codes
This is one of those topics which would take forever to explain in full. Basically, every colour on the net has its own six-digit number that identifies it to the browser. For example, plain red is #FFOOOO, green (fluro!) is #00FF00, and blue is #0000FF. Yellow, of course, is a mixture of red and green... sort that out! It's #FFFF00, anyway. Here's a list of some of the most common ones:
#FFFFFF This is white, in case the background isn't on and you can't see it... #FFFFFF
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF That's #00FFFF
#FF00FF
#DD0000
#00DD00 #00DD00
#0000DD
#DDDD00 #DDDD00
#00DDDD #00DDDD
#DD00DD
I could go on for a very long time. The idea is that the more common ones are divisable by three: 33, 66, 99, CC, FF. Also DD is often found, and you can find things like D7 and D9, and all sorts. If you have a graphics program you can play with the colours and use one of the tools on them to find out the code. I use Graphic Converter for that.1c. Body characteristics
This is what the bar looks like on this page: <BODY TEXT="#DD0000" BGCOLOR="#FFFFFF" LINK="#0000DD" VLINK="#FFCC66" BACKGROUND="images/water.jpg"> Body always appears at the start of it, no matter what follows. I could screw up the order however I wanted, but BODY would always have to be at the start. TEXT= refers to the text colour - the colour codes are explained above. BGCOLOR= is the background colour. Mine's white, because the regular grey is a pain and I have a background image so I don't need to think up a stylish color to match everything. LINK= is the link colour, and VLINK= is the visited link colour. You can also have ALINK= which is the colour of the link while you're holding it down with your mouse, but I don't use that. BACKGROUND= is the background image, if you have one. The 'images/' just means I keep my pictures in a seperate directory, but you don't need to.1d. Links, horizontal lines and images
The best part of making a webpage is the tedious task of writing out the HTML code to do this stuff. Ok, it's not that long, or hard, or anything, but I usually end up copying and pasting it.
Links go like this: <A HREF="page.html">go to my page</A>. It doesn't have to be .html - .htm means exactly the same, as long as the page and link have the same label, and .txt is also very common. This means that the file you're linking to has only plain text on it, and no HTML or other code.
Horizontal lines: <hr>. That's the simplest you can get, as far as lines go. Mine also have ' width="95%"' attached in there, which means that the line only covers 95% of the page width. I understand you can also use ' size=10' or any number, to indicate the thickness. 10 would be the number of pixels down the line covers.
Images: <img src="myimage.jpg">. JPEG is the kind of image I use most, along with a lot of the web industry, but you can also use .gif, with which you can make animated gifs, if you know how.
2. Getting out there:2a. Emphasis
Mostly this is done by the bold, italic and underline functions. (respectively <b>,<i> and <u>, but don't forget to close them! </b>,</i>,</u>) This breaks up long pieces of text, gets your point across, and makes the page more interesting.
You can also use font size to do that, like this - <font size="2">. The lower the number, the bigger the text, but I'm pretty sure it doesn't go too small... I usually use <font size="-1"> for my text, and it works pretty well for me.
Headers provide bigger text than normal font. The biggest size is 1, and it goes down to 6. It's written like this: <h1>heading</h1>.2b. Tables
Usually these are used for graphics pages and things. The code goes something like this:
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="50%"><P ALIGN=CENTER> <IMG SRC="picture1.jpg" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></TD>
<TD WIDTH="50%"><P ALIGN=CENTER> <IMG SRC="picture2.jpg" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></TD></TR>
<TR>
<TD><P ALIGN=CENTER><B><FONT SIZE="-1">Picture1 explanation</TD>
<TD><P ALIGN=CENTER><B><FONT SIZE="-1">Picture2 explanation</TD></TR>
</TABLE>
And if you think that's confusing, you should see the page source for it. Basically, you can have as many rows across as you can fit on the screen, but remember to change the percentage before the 'P ALIGN=CENTER' bit... for three, 33%, four 25%, and so on. If you want more rows down, just repeat the code.2c. Lists
These are a lot easier than tables! There's three diferent bullet styles that I know of - circles (outlined) discs (filled in circles) and squares (outlined). This is what the source for the list on the front page looks like:
<UL TYPE=disc>
<LI><a href="background.html">Background Archives</a>
<LI><a href="html.html">HTML Handy Hints</a>
<LI><a href="crdesign.html">Need Some Help on the Creative Side?</a>
<LI><a href="mailto:question@alkalign.htmlplanet.com">Mail Me</a> If You Have a Question or Anything
<LI><a href="mylinks.html">A List of All My 'Charity Cases'</a>
<LI><a href="links.html">Other web designing, background providing, helpful places to visit</a>
</UL>
If you want a circle bullet, use 'circle' instead of 'disc' in the first row - likewise, use 'square' for a square bullet.
For numbering, the standard is <OL> instead of <UL TYPE=??>, although you still use LI at the start of every line. With small lettering, use OL TYPE=a, large lettering is OL TYPE=A, large roman numerals is OL TYPE=I, small roman numerals is OL TYPE=i. The unnumbered standard is <UL>, and Description (unnumbered, unbulleted) is like this:
<DL>
<DT><a href="background.html">Background Archives</a>
<DT><a href="html.html">HTML Handy Hints</a>
</DL>
3a. Search engines
The main ones are Looksmart, Netscape, Excite, Infoseek and BeSeen, I guess. If you click on the 'search' button on your browser, you can get to one, and you should be able to get your site into the files - it will depend on the search engine. The page on our browser is Netscape, and from there we can also get Looksmart, Excite and Infoseek - the URL is http://home.netscape.com/home/internet-search.html.3b. Meta tags
These are useful, because when search engines are scanning websites, it will pick up the meta tags on your page. Try putting this in your header, just before or after the TITLE:
<META NAME="Author" CONTENT="yourname"><META NAME="Key" CONTENT="some keywords about your site, seperated by commas">
Then the search engines will pick up your page when someone searches for one of those words, and traffic to your site is increased.