Free Republic
Browse · Search
General/Chat
Topics · Post Article

Skip to comments.

HTML Sandbox 2008
n/a | 5/31/08 | me

Posted on 05/31/2008 9:09:38 PM PDT by sig226

It's time for a new HTML reference so you can make your posts look cool.

HTML means Hyper Text Markup Language. It's a set of simple commands used to format the text of your posts, add images, or links, or change the appearance.

URL is Uniform Resource Locator. It's the name of the page or the picture that you see, the www.http:// stuff. You'll need to use the URL to make links and post pictures.

Quotation Marks Quotes have to be used around the URLs for web pages and images on Free Republic. Some systems do not require this. Ours does.

Once the Free Republic software detects an HTML tag in your post, it will assume the entire thing was written for HTML. This means it will eliminate paragraphs and line breaks that you used to clarify your writing. In order to prevent that, I'll start with the two simplest tags, <br> and <p>. When you use html tags, they disappear when the post is pasted to the board, so don't worry if they look funny or if your post seems to run on.

This is the break tag. <br>
It tells the computer to end the line and start a new one. <br>
Just type it where you want the line to end. <br>

This is the paragraph tag. <p>

It tells the computer to end the line, insert a blank one, then start a new line.

The rest of the tags have to be used with an on tag and an off tag. This is simple enough. One of the most commonly used tags is the italic tag <i>. This tag turns the italics on. When you want the italics to end, turn them off by using the forward slash with the appropriate command, in this case, </i>.

Commonly used tags:
<p> paragraph
<br> line break
These tags are not used in pairs.

Commonly used pairs:
<i> </i>italics
<b> </b>bold characters
<u> </u>underline
<font color = red>This makes the font red.</font color = red> Orange,blue,green,purple,and yellow also work.
<center> </center>

This will put whatever is between the tags in the center of the page
and center justify the margins.

Headline fonts
Headlines add emphasis to an important point.

<h1> SIZE 1 </h1>

<h5> SIZE 5</h5>

You can use 1,2,3,4, or 5. The tags automatically insert a blank line between the headline and your next paragraph.

Sarcasm tag
</sarc> This is the sarcasm tag. It is not a real HTML tag. It is used to mark your witty repartee so that everyone will know you are making a funny. Type an ampersand - & then lt; then /sarc. An & and gt makes the other carat >.

How to create a link:
<a href="http://www.freerepublic.com/home.htm">www.Free Republic.com</a>
A means anchor. H ref means horizontal reference. It's called horizontal because the computer is going across the web to a different page. There are also vertical links that can go to specific points on the same page. What comes after the a href= is where the computer will go. The horizontal reference is the complete URL of the page you want to link. It's in the navigation bar at the top of your web browser. Highlight it and copy it. Make sure you get all of it. Some URLs are surprisingly long, and if you miss some of the URL, the link might not work.
You can type anything between the <a href=></a> parts.
www.Free Republic.com
Click here.
abc12345
All of these links go to the same page, I just typed different things between <a href=></a> tags.

How to add images to your post:
<img src=></img>
The img tags tell the computer to find and insert a picture.
These tags insert this wonderful image from Rush Limbaugh's website:
<img src="http://www.rushlimbaugh.com/home/daily/site_062807/content/01125113.Par.4584.ImageFile.jpg""height=218""width=285"></img>

You need to know the URL of the picture to do this. You can see the picture's URL when you put your cursor on the picture and right click the mouse. You see a small box with "properties" at the bottom. Left click on "properties" and you get a dialog box with the image URL and dimensions. It says Address: next to the URL, with (URL) underneath. Copy the URL and paste it after your img src= tag. Make sure you get all of the URL for the picture. There isn't a lot of space for the URL and sometimes they are very long. The image Size and Dimensions are beneath the URL. Free Republic allocates memory for each image, and if it doesn't know the dimensions of the image, it will allocate more memory than needed. It tells you the width, then the height of the picture. You don't have to tell the computer that the height of that image was 218 and the width was 285, but it saves memory and memory costs money.

This is called a hotlink. The picture is actually on another computer, but we see it here. This causes the other computer to use it's memory and machinery to provide the image. Some sites prevent it, or object to it. You can't hotlink an image from any of Yahoo's GeoCities pages, for example. Yahoo prevents it.

Do Not Cut And Paste List.
Some websites have forbidden us to copy and paste their material, including images. There have been lawsuits over this. The software will mostly prevent you from using the material that has been blocked, but not always. There are also some image sources that are not allowed on the list. Please don't use them. Lawsuits suck.
Link to the Do Not Cut And Paste List


TOPICS: Computers/Internet; Reference
KEYWORDS: faq; html; htmlsandbox; sandbox
Navigation: use the links below to view more comments.
first previous 1-2021-4041-6061-80 ... 361 next last
To: svcw

Well done, too. I’m glad it was useful.


21 posted on 05/31/2008 10:07:34 PM PDT by sig226 (Real power is not the ability to destroy an enemy. It is the willingness to do it.)
[ Post Reply | Private Reply | To 16 | View Replies]

To: gogov

I learned it here also. And have since used it on my MySpace page! :~) I know that BTTT means Bump To The Top, but how do you bump a thread to the top?? lol


22 posted on 05/31/2008 10:23:12 PM PDT by My hearts in London - Everett (I'd rather be single than wish I was.)
[ Post Reply | Private Reply | To 9 | View Replies]

To: sig226

Gosh. Computerese that I actually know? Wow!


23 posted on 05/31/2008 10:47:18 PM PDT by onedoug
[ Post Reply | Private Reply | To 1 | View Replies]

To: sig226

*bump*


24 posted on 05/31/2008 10:57:14 PM PDT by VR-21
[ Post Reply | Private Reply | To 1 | View Replies]

Comment #25 Removed by Moderator

To: Swordmaker
but you are required to end the list with a proper <ul> before you continue entering your comment.

I think you meant </ul> before you continue...

26 posted on 05/31/2008 11:19:48 PM PDT by jellybean (Write in Fred! - Proud Ann-droid and a Steyn-aholic)
[ Post Reply | Private Reply | To 25 | View Replies]

To: Swordmaker
You might also want to add the <blockquote> </blockquote> tags to your list. This pair or tags causes the text inside to be indented below the preceding text. The blockquote tags are useful for quoting text from an outside source such as a book.
Here's what blockquoted text looks like.

27 posted on 05/31/2008 11:25:55 PM PDT by SeeSharp
[ Post Reply | Private Reply | To 25 | View Replies]

To: All

Bulleted or Numbered Lists

There are two types of lists: Unordered and Ordered.

An "Unordered List" command, <ul>, will set the start of a list that is indented two characters, with items started by a bullet. Like this

An "Ordered List" command, <ol>, will start the list indented one character, with each item numbered in order.

  1. Item one
  2. Item two
  3. Item three
Mark each line of either list type by preceding the line with a "List Item" command: <li>

<li> This is the first item in my list
<lt> This is the second item in my list

Depending on the list type this results in either:

or:

  1. This is the first item in my list
  2. This is the second item in my list

Different ways of listing Ordered Lists

In addition to using numbers to lead your lists, you can also use both upper and lower case letters.

If you want your "Ordered List" to be preceded by upper case "Alphabetic Characters" instead of numerals, define your list type like this <ol type="A">.

This results in a list looking like this:

  1. This is the first item in my list
  2. This is the second item in my list

If you want your list preceded by lower case letters, use a lower case "a" like this <ol type="a">.

This results in a list looking like this:

  1. This is the first item in my list
  2. This is the second item in my list

You must complete the list with the off switch </ul> for unordered lists or </ol> for ordered lists.

Types of Unordered Lists

You can use three different leading bullets in an Unordered List: Disk (the default), Circle, or Square.

Defining the type of an "Unordered List" is done like this <ul type="disk">

This makes a list with the default round, filled in bullet looking like this:

Using a type like this <ul type="circle">.

This results in a list looking like this:

And finally, using a type like this <ul type="square">.

This results in a list looking like this:

This can get complex with using nested listings:

<ul>
<li>This is the first main item in my list
<li>This is a second main item in my list
<ul>
<li>This is the first sub-item in my list
<li>This is the second sub-item in my list
</ul>
</li>
<li>This is the third main item in my list
</ul>

Results in a "Nested List"

Note: the default "Unordered List" with a disk bullet does not require the <ul> command on FreeRepublic, you can start a list at any time merely by preceding the first item with <li> but you are required to end the list with a proper </ul> before you continue entering your comment.
28 posted on 05/31/2008 11:32:07 PM PDT by Swordmaker (Remember, the proper pronunciation of IE is "AAAAIIIIIEEEEEEE!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: jellybean; Admin Moderator
Thanks, You are correct. I saw that and corrected the posting with some improvements in Reply #28 below. I am going to have the admin moderator delete the reply #25 because the revised version is better, I think.
29 posted on 05/31/2008 11:35:51 PM PDT by Swordmaker (Remember, the proper pronunciation of IE is "AAAAIIIIIEEEEEEE!)
[ Post Reply | Private Reply | To 26 | View Replies]

To: Swordmaker
You're welcome! It was/is a very good tutorial, but the final comment would have confused those just learning HTML.

Do you want to tackle the <table> tag next? I can give it a shot, but not until after I get some sleep. :)

30 posted on 05/31/2008 11:56:29 PM PDT by jellybean (Write in Fred! - Proud Ann-droid and a Steyn-aholic)
[ Post Reply | Private Reply | To 29 | View Replies]

To: My hearts in London - Everett

Hmmm, bump a thread to the top...How to. Well, you put bttt and that post makes it show up more often in the most recent category. I think


31 posted on 06/01/2008 12:06:13 AM PDT by gogov
[ Post Reply | Private Reply | To 22 | View Replies]

To: svcw

I remember when I did. It was great. Can you post a picture?


32 posted on 06/01/2008 12:07:21 AM PDT by gogov
[ Post Reply | Private Reply | To 16 | View Replies]

To: Swordmaker

Oh my gosh. Eight years later and I am still learning from the HTML sandbox.

This should be mandatory reading for all FReepers.


33 posted on 06/01/2008 12:09:28 AM PDT by gogov
[ Post Reply | Private Reply | To 28 | View Replies]

To: SeeSharp; All
You just did... but let me add an example that might help:

Here comes a really long quotation which adds white space on either side, inside of the main text body's margins. The command to start a blockquote is <blockquote>.

Be careful on spelling on this command... it's long and you can easily misspell it. For example, <blockqwote> will not work because it is misspelled.

Here is that really long quote:

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.

There went a really long quote. Well, actually, it was a really short speech, but a long quote.

Once the blockquote is finished, turn off the attribute with the </blockquote> command.

Note, that the <blockquote> attribute continues until it is switched off with </blockquote>, spanning across paragraphs, tables, etc.
You can also nest blockquotes an unlimited number of times... which can get silly, so use it sparingly.

Lists that are incorporated into a blockquote will indent from the left margin of the blockquote.

  • This is a list item
  • This is another list item
  • This is another list item
When the list is closed, the formatting returns to the previous blockquote level.

For every opening <blockquote> command, there must be a closing </blockquote> command. Only when every <blockquote> is closed will the margins return to normal.

Like this. This example has finally returned to the normal margins that this post started with but it took TWO consecutive </blockquote>s in a row to do it. E.G. </blockquote></blockquote>

Blockquoting comes in quite handy when you are replying to a long post and want to set off parts of the original you are quoting from your replies. It makes it easier for readers to understand. In addition to italicizing the person you are quoting, setting off your replies in blockquotes will better differentiate between his comment and your reply. Like this example using SeeSharp's comment to me about blockquotes:


You might also want to add the <blockquote> </blockquote> tags to your list. This pair or tags causes the text inside to be indented below the preceding text. The blockquote tags are useful for quoting text from an outside source such as a book.

Yes, I can see the need for a good explanation of using blockquotes in the HTML Sandbox. Thanks for the suggestion. In fact, I am implementing it even as we correspond... neat, huh?


If your answer is going to be longer than the quotation, you might want to reverse which is blockquoted.

P.S. Those horizontal rules were created by simply placing <hr><p> on a line by itself.

34 posted on 06/01/2008 12:21:53 AM PDT by Swordmaker (Remember, the proper pronunciation of IE is "AAAAIIIIIEEEEEEE!)
[ Post Reply | Private Reply | To 27 | View Replies]

To: jellybean
Do you want to tackle the <table> tag next? I can give it a shot, but not until after I get some sleep. :)

Why don't you give it a go in the morning. I spent the day recovering a client's data from a failed upgrade where his backups were on the same HD as the OS... not good... and i'm pooped. I'll look forward to seeing it. ;^)>

35 posted on 06/01/2008 12:24:53 AM PDT by Swordmaker (Remember, the proper pronunciation of IE is "AAAAIIIIIEEEEEEE!)
[ Post Reply | Private Reply | To 30 | View Replies]

To: All
Testing

36 posted on 06/01/2008 12:35:29 AM PDT by wastedyears (Like a bat outta Hell.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: sig226
Quotation Marks Quotes have to be used around the URLs for web pages and images on Free Republic. Some systems do not require this. Ours does.
From what I can tell, users do not need to use quotation marks around URLs. It seems that the posting software here automatically adds them.

So, from the users point of view, I don't think they are required.

37 posted on 06/01/2008 12:43:39 AM PDT by ThePythonicCow (By their false faith in Man as God, the left would destroy us. They call this faith change.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: sig226

38 posted on 06/01/2008 12:43:46 AM PDT by BIGLOOK
[ Post Reply | Private Reply | To 1 | View Replies]

To: Swordmaker
One of my favorite tricks is to type <blockquote> as <ul>. A list with no <li> list entries ends up displaying just as does a <blockquote>, and <ul> is easier to type.

I also like to <blockquote> (well, <ul>) my quotes, in addition to italicizing them, such as I just did, at the top of this present reply. By now, I can type <ul><i> ...</i></ul> in my sleep ;).

39 posted on 06/01/2008 12:52:41 AM PDT by ThePythonicCow (By their false faith in Man as God, the left would destroy us. They call this faith change.)
[ Post Reply | Private Reply | To 34 | View Replies]

To: sig226
It's time for a new HTML reference so you can make your posts look cool. weeeeeeeee LOL fun stuff, i think i broke a cherry but i'm not sure which one. i shall look this thread over more carefully. Thanks Sig
40 posted on 06/01/2008 2:01:19 AM PDT by SouthDixie (We are but angels with one wing, it takes two to fly.)
[ Post Reply | Private Reply | To 1 | View Replies]


Navigation: use the links below to view more comments.
first previous 1-2021-4041-6061-80 ... 361 next last

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.

Free Republic
Browse · Search
General/Chat
Topics · Post Article

FreeRepublic, LLC, PO BOX 9771, FRESNO, CA 93794
FreeRepublic.com is powered by software copyright 2000-2008 John Robinson