 |
|
|
|
|
|
|
|
Home |
Meaning of Life |
There a God? |
of Christ |
Catholic Faith |
Camillo |
|
|
|
|
|
|
|
|
Home |
Meaning of Life |
There a God? |
of Christ |
Catholic Faith |
Camillo |
|
|
 |
 |
|||||
The index of contents on the left was easily built with just one simple Table command. All of the links actually work. By the time you finish reading this article you will be able to build any table you wish, from the simplest to the most complex. You can add one to your website, even if you are using a "control panel" system. Your Index can contain whatever you wish to put in it. There is no limit as to how long (or short) it can be, or what it can look like. It can also have pictures and logos in it, anywhere you please. The background can be pink, like ours, or any color at all, or no color at all. You can also use your own background graphic in it. You have complete control over the size of the text, the color of the text, and the location of the text. You are in command. You can make the size of the box anything at all. You specify the width, and if you wish, also the length. It is normal to run it down the left side of the page, but you could just as easily locate it on the right side. It can start at the top of a page, or be located anywhere down the page. It can be just as long as needed, ending when the content is complete, or it can continue to run to the bottom of the page. This is exciting, isn't it? To build our simple one cell table, we start with a [table] command. You will add four options into it: 1. border 2. cellpadding 3. cellspacing 4. align Border is the width, in pixels, of the box line that you may want to draw around it. Our pink Index has no border, so we write border="0" (There are 72 pixels to an inch, so one eighth of and inch would be 9 pixels.) Borders rarely look good. Always leave this setting at zero. Cellpadding is the room you leave between the text and the walls of the Index. In our example, we wanted the words to come right up close, so we only ordered up a 3 pixel separation. So we write cellpadding="3" Include the quotation marks. Cellspacing is the room between the edge of the Index and the rest of your page. In our pink example, we wrote cellspacing="8" which gives us 12/72 or 1/6 of an inch over to this explanation. [Note: it is actually the space between the wall of the cell and the wall of the whole outside table that encloses the cell. But we have no border lines, so our explanation is the practical one.] Align is whether we want the Index to appear in the middle, on the left, or on the right of our page. We wanted it on the left, so we wrote align="left" Our whole table command, then, is [table border=0 cellpadding="3" cellspacing="8" align="left"] Be careful to allow just one space between options, use no commas, and close each actual option choice in quotation marks. All commands, or "tags" as they are called, are always enclosed in angle brackets. I can't show you how those really look, but they are the little wedge thingies over the period and the comma on your keyboard. We are substituting regular brackets for this discussion, because we are severely limited by our host's ability to show programming characters. Anything at all inside of these wedges are HTML commands, and will not print, but will tell the computer to do all kinds of strange and wonderful things. For each cell of a table (remember, we have only one cell in our simple Index) we can also specify various options. They can be different for each cell. The options we will need are: 1. width 2. height 3. bgcolor 4. align 5. valign Width is how wide this particular cell will be, in pixels. We could also tell it how wide to be as a percent of the page width, but we will go into that later, after we have built our Index. Our pink Index is 142 pixels wide, just wide enough, we found through experimenting, to hold our longest line without running over to a second line. So we write width="142" Height is how high our Index (cell) is. If we leave out this option, the program willl automatically start our cell where we start our text or picture, and end it when we have nothing more that goes in it. This is what we want for our simple Index, so we will not use this option here. But if we wanted our Index to be a pink box all the way down the left side of our page, with just empty space at the bottom, we would specify the height we would want in pixels. We would have to measure our page and if it were 20 inches long, we would specify 72 times 20 equals 1440 pixels, so we would write height="1440" and then perhaps fine tune it after we saw it. bgcolor means background color. But it is the background only of this particular cell. Each cell, if we had more than one, could have a different background color. Our choices of colors can be found at a website called HTML Goodies Our pink color is called "mistyrose" so we would write bgcolor="mistyrose" align means whether our text and pictures are right, left, or center oriented inside the cell. It is just like the option you have in a word processor program like Word, and like that, you will usually choose a left orientation, lining up with the left margin, and use other ways to center certain text. For our pink example, we will write align="left" valign means vertical alignment. The only thing you need to worry about here is to specify that your content start at the top of the cell, so we write valign="top" So for our pink Index example, our table data tag, or td for short, would look like this: [td width="142" bgcolor="mistyrose" align="left" valign="top"] The order in which we specify our four options inside the tag does not matter. We could also simply leave out any of them that do not apply. You are now ready to write a "program" that will put a pink box, just like the one above, onto the left side of your own website. For the time being it will be empty. But filling it up is as easy (exactly the same in fact) as filling up any of your pages. We will write a [table] tag, then a row tag, then a data tag for the first cell of that first row, but then we will not add any data yet. We will have to add a height="200" to the data tag, or with no text, it will be very short indeed. Then we will write a "close data" tag, then a "close row" tag, then a "close table" tag, in that order. First tag to be opened is last to be closed, always. Close all tags in reverse order. So here is our program: [table border="0" cellpadding="3" cellspacing="8" align="left"] [tr] [td width="142 bgcolor="mistyrose" align="left" valign="top" height="200"] [/td] [/tr] [/table]
Now begin your first article by typing in our program at the top, right at the beginning. Now save these changes and preview the page. You should see a pink box just like the one on the left, absolutely empty. If anything is wrong, use Control-c, Control-v to copy directly from this page to yours. Then try to see where you typed it wrong the first time.  Writing Another Program and Filling it With Stuff
Let's do another simple one. We'll just make it display the names of our main pages (like the buttons at the top). We won't specify a background color, so it will be white, like our page mat. We'll make it more narrow. We'll also center all the text within the cell. The type will be larger, and all in bold.
That's the finished Index on the left. We'll build it next. But First, you have to understand how text and graphics (your content) get inside your table. So easy. Just list it all in between the td (table data) tag and the /td (end table data) tag. That's it. A good way to do this is to first write out, in one of your Article Boxes, all of the text and links that you want to show in your index cell. Then copy it into your table program, just after the long td tag and just in front of the close table data (/td) tag. The way it looked before you moved it into the Index will be the way it looks after you move it in! The significance of this statement is that it must be narrow enough to fit into the narrow index, or the lines will run over and double up. You will see what I mean once you do it. You have to play with the width of the cell, and the length of the lines, and the size of the type, to make it look the way you want it to look. Planning ahead has been known to help also! For useful html tags like bold and underline, see the end of this page. Getting graphics (pictures) into a cell is tricky. But we don't need to do that for this little Index, so first we will list its program. We will indicate in red type where we inserted our text, which we copied from another article. We deleted the article we copied it from right after we got it into the Index. Here is the program: [tr] [td width="121" align="center" valign="top"] I inserted my text (all the text was links this time) in here. [/td] [/tr] [/table] In the main table tag, we specified that it have no border lines, that the distance from the text to the edge be no closer than 3 pixels, that the cell itself be 12 pixels away from the rest of the page, and we put the table (Index) on the left side of the page. In the table data (td) tag, we specified a width of 121 pixels, we centered everything automatically by specifying align=center, and we made sure that the text would start at the top of the cell with the valign="top". We did not specify a height, so it will be the size of the text we put in it. We did not specify a background color (bgcolor), so by default it is white, like our page mat. Make a mental note that the width of the entire table is the cell width of 121 pixels, plus two times the space we leave on each side between the cell and the outside of the table (cellspacing). In this case the whole table is 121+12+12=145 pixels wide. The rest of the page always comes right up to the table edge, but with no border lines showing, it just looks like an empty space between the data cell and the rest of the page. If you don't understand it, just forget it.
Getting pictures into your Index is very simple, yet slightly tricky. First, you have to have a picture. It has to be rather small--our little rose is only 80 by 57 pixels. If you don't have Photoshop Elements (which you should have) or something similar, there are free picture re-sizers on the net. Then all you have to do is use an "image search" tag, that tells the program where to find your picture. It looks like this: [img src="images/graphics/littlerose.jpg"] where "littlerose.jpg" is the name you gave it in your computer. But the program won't look all over your computer for it. It only looks in a file in your web host's computer, usually called "images/graphics." Which means we have to first get our little rose into that file. Check with your web host. They will tell you where to upload it into their server. So we just put that tag wherever we want the picture to show up, right in the middle of text if we want to, anywhere at all. The picture will appear in your Index, just like magic. [table border="0" cellpadding="3" cellspacing="12" align="left"] [tr] [td valign="left" width="160" bgcolor="lemonchiffon"] A few "P" (new paragraph) tags for spacing, and a "center" tag to center the rose. See our explanation of these tags at the end of this page. [img src="images/graphics/littlerose.jpg"] The rest of our text went here. That put the picture on top. But it could have gone anywhere. [/td] [/tr] [/table] Remember, each tag must be enclosed in angle brackets, not the regular brackets that we show on this page. In the main table tag, we specified that it have no border lines, that the distance from the text to the edge be no closer than 3 pixels, that the cell itself be 12 pixels away from the rest of the page, and we put the table (Index) on the left side of the page. In the table data (td) tag, we specified a width of 160 pixels, and we called for a background color for this cell of "lemonchiffon" from the chart. We did not specify a height, so it will just be the size of the text we put in it. Preparing your content is faster if you know a few common tags. Let's look at how we can underline, use italics, use bold type, force an end of line break, force a paragraph break, and center both text and pictures. You should also know the font command, which tells us the size and color of the type and even how to change font styles. This all comes in very handy if you have a website. All of these tags are part of a programming language that is used to build websites, called HTML>. Five of these commands must be closed up after we have come to the end of the text that we want them to be applied to. Two, the "force end of line" and the "paragraph" tag are used alone, because they do not apply to a specific block of text. They just are where they are. You can use either small or capital letters to make any of these tags, but be consistent for a given tag, or you might have a problem. [BR] is the break, or "force end of line" tag. It is like hitting the return bar on a typewriter. [P] is the paragraph tag. It is like a break tag, but it also skips a line before the next text or picture starts. You can use it many times in a row, to leave various amounts of space before or after text or a graphic picture. [u] is the underline tag. We place it just before the text we want to underline. Then right after the text, we have to remember to put the close tag, which is [/u.] [i] is the italicize tag. We place it just before the text we want to italicize. This has to be closed also, with [/i], or it will italicize the rest of your website. [b] is the bold tag. Same instructions. Close with [/b]. [center] is the center command. It will center anything, including text and graphic pictures. Close it with [/center] when you want things to be left oriented again. [font] is the font command. Just like the [table] and [td] commands we already know, we have to specify exactly which options we want, and include them inside the tag. Two popular options are: 1. size 2. color Size is the type size, and the possible values are the numbers 1 through 9. 1 is the smallest, and is the type size we used in the first pink Index at the top of this page. 2 is the size you are reading now. 3 is larger, and so on. color is the color of the type. You can specify many colors, by going to HTML Goodies and selecting one from the chart. But this time you will have to use the six digit code instead of the English name. Inside the font tag you put a # sign in front of the six digit code and enclose all seven spaces in quotation marks. If we want to start using a larger type size, and want the type color to be a dark green, we would insert a font tag thus:  | Tables1 | Guest writers | Secondary Links | | Return Home | The Meaning of Life | Is There a God? | Prayer | Teachings of Christ | Our Catholic Faith | Don Camillo | Links | |
||||||
 |
 |
