< P>
< hr>
See how much you've learned already??? Wow--that's impressive!!
Just remember that everything you "code" into html has to be in brackets, and the closing has to be in brackets with a forward slash in front of it. It's easy!
Your page should look about like this:
| A good page about Cucumbers
|
Okay..now before you get TOO mad at me, I wanna explain something. If your title and your head are going to be the same, you don't NEED to retype them every time. You can type in < HEAD> < TITLE> A good page about cucumbers < /title> one time, and that does it. The only time you really need to type it in twice is if the Head says something that the Title doesn't. Are you mad??
By now it should be obvious how to make the commands, so from here on, we're just going to look at a few of the most common ones.
1. Text Alignment:
There are several commands used for Paragraph Alignment. The first one is < P Align="Left">, which obviously aligns all text to the left margin of the page. Next would be the same commands for "Right" and for "Center".
Easy enough, I would hope: < P Align="Right">, etc.
A Neat Trick:
To make a LIST, with "bullets" instead of numbers, the command is < UL> (Unordered List) - then for each item that you want to have a "bullet" beside it, do a < LI> (List Item) - again, be sure that when you < LI>, you also do a < /LI> afterwards.
There is a similar command for a more formal list using numbers - the command for that, oddly enough, is < OL> - Ordered List. The < LI>Command is still the same.
As in all things, any time you command something to BEGIN make sure that you command it to END. For some reason this one always gets me!
ANOTHER Neat Trick:
An easy command to INDENT your text was a trick I learned from Dr. Burns of HTML Goodies.
What he does is simply do either an < OL> or a < UL>, and then never list anything as an item in the list. You can move the text as far to the left as you want to by doing several of these. BE SURE that for every one you begin, you have to end it. Works that way all the time!
A (sometimes) unpleasant side effect of Indenting text this way is that for every space that you indent on the left hand side of the page, the right also compensates by moving itself in towards the center.
the CORRECT way to indent ONLY the left side is by use of special html characters. At this point you won't need to use many of these - in fact, I don't use many either.
THIS ONE though, I DO use. The code for a single space is very hard to enter, since all it does, is make a space no matter how I treat it...so I will tell/show you how to make it.
Inside the bracket, on the left side, you'll need to add an ampersand (&)just to the left of the nbsp; It would look a little like this: <& nbsp;> (without the space between the ampersand and the "n"). Do as many of these as you need to get ONLY the left side of the text to indent (like a paragraph).
2. Fonts:
As mentioned before, there are a lot of things we can do with Fonts. We can < I>Italicize, < B>Bold, < U>Underline< /U> them, etc.
We can also tell what KIND of font we want, i.e. Arial, Courier, Gothic, Times New Roman, etc. BUT I would advise to make sure whatever font you use, it is in the system of the user who is reading it. Otherwise, it just reverts back to whatever they have set as a "default". Typically, because of this, I don't specify fonts.
The command for this is < Font Style="Arial"> for example.
As mentioned earlier, font colors are just whatever you want to use to make it look good. Simple as that!
3. Images:
MOST images are still jpg format, I believe - format itself isn't very important, as long as you give the proper command to identify what you are using.
Placing an image is just a little tricky. Do you want the image centered? Will there be text above and below, wrapping down one side or another? Will it start with the picture and have text immediately under it?
Each of these choices (ultimately you'll probably wind up using all of them at one time or another) is different.
I strongly advise resizing the picture before you include it. Not only does this save space from your html host, it also makes it much easier to work with. Yes, there are commands to resize a pic, but unless you know that you want a 480 by 640 pixel size for instance, you're better off using a program like Irfanview to help resize it BEFORE you add it.
Once you get it resized to the dimensions you want, you'll need to save it and then upload it. On 50 Megs this is very easy: just find where the file is that you saved, and click on Upload. Then, when it asks where the file is, give it the name, including the suffix. Be careful of the case...it IS ""case sensitive". If you named it a lower case name, then it will have to be called that name or your page will never find it. Html is good, but it ONLY does what you tell it to do.
So you have it added, now you want to put it on your page. The html command for this is easy: < img src="filename.jpg"> (Of course if it is a bitmap, the designation is .bmp, gif is just .gif, etc. Straight forward, again. The image source is whatever you named it in whatever format it came from.
NOTE: IF you feel that you want to resize a picture, using html, the command is: < IMG SRC="filename.jpg" HEIGHT="Y" WIDTH="X">, where what you are saying is you want to place the Image Source, whatever NAME you have called it, in whatever FORMAT it is. Then you'll need to add in whatever height and width you want it to be, in pixels.
These make wonderful buttons - make them as bitmaps, size them pretty large, then put them on your website, and resize them to something smaller...i.e. 30 pixels by 30 pixels, just as an example.
PLACING THE IMAGE
Using html, pictures can be placed in either of three different places, right, center or left. You'll want to learn this because it's common to see a picture, with text to the right, or left, or centered underneath it.
Here's HOW (with just a little explanation, of course).
- First, you need to break the margins. The command for this is < BR CLEAR="LEFT"> (or "Right", or "ALL" - beginning to see a pattern here?? Good!) I use "ALL" which eliminates anything else.
- Next you'll need to insert where you want the picture to be, with respect to the text. For instance, if you want a nice picture on the right side, with the text on the left, to flow underneath the picture later, the command is: < IMG SRC="filename.jpg" HEIGHT="640" WIDTH="480" ALIGN="RIGHT">
The image will appear on the left side of the page with the text wrapping around next to the image, until there is enough text to get under it.
Tables:
I'm going to use this one, just as an example, then I'll show you how to make this. This is a Table from one of my other websites:
|
|
| Our Founding Fathers |
| William Penn |
Roger Sherman |
Benjamin Franklin |
You'll notice that it has room for a HEADING, and Three Columns, with two items in each column. You can make the background any color you want, the fonts any size, color, or style you want, the columns as many or as few as you want, and the number of items any way you want them. It's ALL up to you!
A lot of people hate Tables; I love them, and almost never write a page without at least a few scattered around. You've seen some on these pages, without knowing it. One of the most useful parts of a Table Command is the ability to completely change everything about the fonts, background color, etc. and then go right back to what you were doing.
Here's the html for this Table with, of course, an explanation:
< P Align="Center">
< TABLE>
< TABLE WIDTH="550" BGCOLOR="Bisque" BORDER="3" CELLSPACING="4" CELLPADDING="4">
< TR>
< TD ALIGN="CENTER">
< TR>
< TD ALIGN="center" COLSPAN="3">Our Founding Fathers
< /TD>
< /TR>
< TR>
< TD ALIGN = "center">< FONT SIZE="2">< FONT COLOR="BLACK">< B>William Penn< /B>
< /TD>
< TD ALIGN = "center">< FONT SIZE="2">< FONT COLOR=BLACK>< B>Roger Sherman< /B>< /TD>
< TD ALIGN = "center">< FONT SIZE="2">< FONT COLOR=BLACK>< B>Benjamin Franklin< /B>< /TD>
< /TR>
< /TABLE>
So here's all we did. First of all we said that we wanted to center it: < P Align="Center">,
then we said we wanted to create a < Table>, then we gave it some arbitrary Width, a background color, a border of 3 pixels
all the way around it (again, completely arbitrary, could have been fatter if we wanted to make it that way), then we allowed some
space inside each box, to keep it consistent, and a little padding for the same reason. Think pixels here and you'll see that we aren't really calling for a lot.
Then we asked for a Table ROW < TR>, and centered inside it, we gave it some text "Our Founding Father" in this case, of course.
Then we closed the Table Data < /TD> and the Table Row < /TR> to get ready for the next cell(s).
In the last TR (Table Row) we had THREE Table Data cells. The first was Wm. Penn, then the next was Roger Sherman, and the last one was old Ben.
Then the only thing left was to close the Table Row, and close the Table and we're done!
Not nearly as difficult as it looks when you analyze what you're doing, right?? Right?? Right??
At this point, I think we've probably exposed you to enough of the "Basics" so you'll see that it's really NOT magic, and it's really NOT all that hard.
IF you should have problems though, you can always email me at Texan56@mailcity.com.
Now GO and create the greatest website ever made!!
