Posted on 09/20/2010 11:32:29 AM PDT by ShadowAce
Yep...you remember too!
As an ancillary to he none closed tags we also had some threads or posts with outright HTML bombs in them that turned the whole thread to never ending gibberish.
I think that John has closed most of those loop holes for such stuff now so that every post is filtered and closed by the posting software.
Gotta get to it!
Anytime u need a private HTML lesson, just let me know ;)
Oh really????
BUMP!
JerseyHigh(Zoo)lander’s School For Kids Who Can’t HTML Good:
1. go to http://www.getfirefox.com
2. download and install firefox browser.
3. Open Firefox browser.
4. go to https://addons.mozilla.org/en-US/firefox/addon/1449/
5. Download Xinha Here! extension
6. go to https://addons.mozilla.org/en-US/firefox/addon/748/
7. Download and install the Greasemonkey extension for Firefox browser.
8. Shutdown and restart Firefox browser.
9. Go to http://userscripts.org/scripts/show/13598
10. Download and install the FR Posting Form Enhancer (hat tip to Freeper Cynwoody who developed this addon)
11. Go to http://userscripts.org/scripts/show/8972
12. Download and install the FR Tree Viewer (hat tip to Freeper Cynwoody who developed this addon)
13. Restart Firefox Browser.
14. Go to http://www.freerepublic.com/tag/*/index and sign in.
15. Bookmark http://www.freerepublic.com/tag/*/index
Ok... now what did you just do?
Firefox is a well known browser.
Xinha Here! is...
http://www.hypercubed.com/projects/firefox/
Portable WYSIWYG editor! No matter what site you’re visiting you can launch a WYSIWYG right in your browser.
Xinha Here! is a wrapper for the Xinha HTML editor that enables WYSIWYG editing in any HTML textarea and text input elements. Xinha Here! opens Xinha editor on the client side. This allows you to edit the field data in a WYSIWYG editor on any website without coping and pasting to a secondary editor. To use Xinha Here! simply select Xinha Here! from the context menu of the desired textarea or text input element. Up will pop a Xinha WYSIWYG HTML editor. Press OK and the raw HTML is pushed back to the original text box. Simple as that.
Because the Xinha editor is installed on your local machine rather then a server it is both portable (use it on any website) and faster (files don’t need to be transfered over the net). This extension goes great with the SpellBound spell checker extension.
Greasemonkey is...
Allows you to customize the way a webpage displays using small bits of JavaScript.
Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.
Free Republic Posting Form Enhancer is...
http://cynwoody.appspot.com/fr_posting_form_enhancer.html
Free Republic Posting Form Enhancer (FRPFE) is a user script that modifies the forum’s posting form to help with the entry of common HTML tags and to make better use of available screen real estate. It allows you more room to enter a post, and it displays the post preview at full window width, giving you a more accurate rendition of how your post will look when added to the thread. Free Republic is a political discussion site.
FRPFE makes the following changes to the posting page, immediately after it is loaded:
* Adds a toolbar above the reply box designed to save typing when entering HTML tags (see below).
* Makes the input elements and content boxes use the full width of the browser window.
* Reduces the To: box to a single line.
* Expands the Your Reply: box vertically, so that it takes up about half the height of the browser window.
* Lightens up the borders on the various content boxes.
* Adds keyboard shortcuts that allow you to activate the spell check, post preview, and post functions while keying in the reply box (see below).
For full usage details, please see the script homepage.
FR Tree Viewer is....
http://cynwoody.appspot.com/fr_tree_viewer.html
Free Republic Posting Form Enhancer
Free Republic Posting Form Enhancer (FRPFE) is a user script that modifies the forum’s posting form to help with the entry of common HTML tags and to make better use of available screen real estate. It allows you more room to enter a post, and it displays the post preview at full window width, giving you a more accurate rendition of how your post will look when added to the thread. Free Republic is a political discussion site.
FRPFE makes the following changes to the posting page, immediately after it is loaded:
* Adds a toolbar above the reply box designed to save typing when entering HTML tags (see below).
* Makes the input elements and content boxes use the full width of the browser window.
* Reduces the To: box to a single line.
* Expands the Your Reply: box vertically, so that it takes up about half the height of the browser window.
* Lightens up the borders on the various content boxes.
* Adds keyboard shortcuts that allow you to activate the spell check, post preview, and post functions while keying in the reply box (see below).
For full usage details, please see the script homepage.
Optional... download https://addons.mozilla.org/en-US/firefox/addon/655/
View Source Chart 3.02
so you can view, copy, and paste html source from various websites to post to FR. Especially useful when posting articles.
The <tr> tag represents a row for the table
The <td> tag represents a cell (or column) inside the row.
Now, with that in mind, let's create a simple table:
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
And this is what the table would look like published:
A | B | C |
X | Y | Z |
Notice that by looking at the code, you can tell how many rows and columns are included just by looking at the code. The two opening <tr> tags indicate two rows and the three opening <td> tags on each line represents three data cells (or three columns).
So if you wanted to add another row, you would just start with another <tr> and so forth....
Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:
<table border="2">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this:
A | B | C |
X | Y | Z |
You can change the color of a table border by simply adding the bordercolor attribute.
<table border="2" bordercolor="red">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
And here's what it would look like...
A | B | C |
X | Y | Z |
You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes.
The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.
<table border="2" cellspacing="10" cellpadding="3">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
This is what the table would look like now...
A | B | C |
X | Y | Z |
See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell.
If you want a table to have a single border (with no border around the letters), simply set the cellspacing to "0" and your table will look like this....
A | B | C |
X | Y | Z |
You can specify the width of a table by using either a percentage or a pixel width.
<table width="100%" border="2">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like.
A | B | C |
X | Y | Z |
As we mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:
<table width="300" border="2">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
The table would look like this:
A | B | C |
X | Y | Z |
Sometimes you may not always want your columns to be the same width. If this is the case, you need to set values on your table data <td> cells. Again, you can set them by using percentages or pixel widths.
<table width="300" border="2">
<tr>
<td width="70%">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td width="70%">X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
This is what this table would look like.
A | B | C |
X | Y | Z |
See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally.
Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table equally (roughly 45 pixels a piece).
You could also have expressed the column widths of this table in pixels instead of percentages. The code would have looked like this:
<table width="300" border="2">
<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
</table>
A | B | C |
A | B | C |
See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table.
What's the Difference Between Using Percentages and Pixel Widths?
Many people prefer to express their table width and column widths in percentages because that will ensure that the table takes up the same amount of screen no matter how big or small the screen resolution is.
If someone is using a 21 inch monitor to view your site and you have a table width set to 300 pixels, the table will show up very small on their screen. However if you set the table width to 70%, it will take up 70% of the screen no matter what size monitor the person is using.
Or, let's say you create a table that is 760 pixels wide and someone has a 15 inch monitor set to a 640x480 resolution, then that person will have to scroll left and right just to see the entire table.
On the other hand, if you set the table width to 100%, the table will fit the screen no matter what resolution the browser is set to.
So it's really up to you to decide what's the best layout for your tables. Personally I prefer to use percentages. That way the table takes up the same amount of screen no matter what size monitor/resolution people are using.
You can also set the table height by adding the height tag to the table code.
<table height="250" width="300" border="2">
<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
</table>
Which will produce the following table:
A | B | C |
A | B | C |
The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.
<table width="300" border="2">
<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
</table>
A | B | C |
A | B | C |
See how the first column is aligned to the center? You can also right align the columns by using the align="right" inside the <td> cells.
So far we've kept the table cell alignment at the default, which is the middle. Notice in the above table that the A, B, and C are all three aligned in the middle of their cells. Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:
<table height="250" width="300" border="2">
<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>
</table>
A | B | C |
A | B | C |
I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top. You can also align to the "bottom" or the "middle".
As we mentioned earlier, most left and right navigations are created using tables. All you do is create a table with one row, two columns and no border. Then align both of your columns to the top (using the valign tag) so your text will start in the top of the columns, not the middle. Then depending on if you're going to have a right or left navigation, you'll make one column significantly smaller than the other.
Here's a simple left navigation layout:
<table width="100%" border="0">
<tr>
<td valign="top" width="25%">Left Nav Links Here</td>
<td valign="top" width="75%">Body Here</td>
</tr>
</table>
And here's what it would look like:
Left Nav Links Here | Body Here |
Notice I set the border to "0" but it's still showing in the example. I just did that to show how the layout would look. If you set your border to "0" you won't see any lines around your table.
So there ya have it! That's a general overview of tables. There's so much more you can do with them, but if you can understand the basic layout, you'll be able to do so much with the design of your web site.
Great Replies by ShadowAce | 1 |
Poor Replies by ShadowAce | 0 |
.
U bet, I have a degree in web-design and I would LOVE to give u a private lesson!
bump
+
mark
bkmrk
Disclaimer: Opinions posted on Free Republic are those of the individual posters and do not necessarily represent the opinion of Free Republic or its management. All materials posted herein are protected by copyright law and the exemption for fair use of copyrighted works.