HTML SANDBOX 2021

[Hebrews 11:6]

HTML SANDBOX 2021

We are so blessed by Jim and John Robinson, and by God through them, with this marvelous website. FreeRepublic has many capabilities you can use to refine your posts, to make your points more emphatically and dramatically.

Many posters have given us previous versions of this Sandbox, but since the most recent was in 2016, it's now well past time for another.

"HTML" is Hyper Text Markup Language, which can make your typing-text fancier and more useful. You supply invisible commands to produce remarkable effects. These commands are encased in left and right carets, like this: <command>.*

Before beginning, ALWAYS remember The Three Rules of HTML Posting:

1. PREVIEW! 2. PREVIEW! 3. PREVIEW!

CONTENTS
1. TEXT
2. FONTS
3. TEXT BLOCKS
4. LINKS/PICTURES/VIDEOS
5. TABLES

1. TEXT

Here are basic ON and OFF commands—note that each must be terminated with </command>.

Feature	What You Type	Result
BOLD	<B>my text</B>	my text
UNDERLINE	<U>my text</U>	my text
ITALIC	<i>my text</i>	my text
STRIKE	<S>my text</S>	my text
SUPERSCRIPT	<SUP>my text</SUP>	my text
SUBSCRIPT	<SUB>my text</SUB>	my text

You can combine these as you wish:
<B><U><I>my text</B></U></I> = my text

2. FONTS

A. FONT SIZES
We can choose from 7 sizes, 1-7:

<font size=1>my text</font> = my text
<font size=4>my text</font> = my text
<font size=7>my text</font> = my text
^{Special trick if you want text even tinier than Size 1: use Superscript, or Subscript; it wont align with adjacent text, but that won't matter if you give it its own line, like this.}

B. FONT COLORS
We can choose from many, many colors.
The ON-OFF command is

<font color=my choice>my text</font color=my choice>

To choose a color, you have two options:

1. type in a common color name, like Red or Blue:
<font color=red>mytext</font color=red> = my text

OR

2. visit one of these websites, for a much larger variety:
HTML Color Codes
HTML Color Names
Either type in the color name or the code:
<font color=#01DF01>mytext</font color> = my text
If you plan on using these sites, I suggest you bookmark them NOW!

C. FONT FACES
We can choose from many, many font-faces. Here are several examples:

<font face=Broadway>My Text</font face=Broadway>=My Text

<font face=Chiller>My Text</font face=Chiller> = My Text

ALSO: Arial, Cooper Black, Courier, Forte, Georgia, Helvetica, Impact, Jokerman, Magneto, Mistral, Playbill, STENCIL

If you don't see what you want here, enter a Font Name from your Word Processor and then Preview to see if FR supports it.

3. TEXT BLOCKS

A. LINES
To force a new line, use the BREAK command: <BR>
Then, you'll be down here. All your active commands are unaffected.
To insert multiple lines, use multiple <BR>s.


B. PARAGRAPHS
To force a new line PLUS a blank line, use the PARAGRAPH command: <P>

Then, you'll be down here. Some active commands are terminated.


C. INDENTING
Four times already in this document I've indented blocks of text, using the <blockquote> command. Of course, its terminator is </blockquote>. I'll use it again here while I mention some fine-points:

1. Be aware that Blockquote also indents the Right margin.

2. You can use multiple Blockquotes simultaneously to narrow the text even more.

3. Don't forget to terminate your Blockquote(s).

D. CENTERING
To center your text: <center>my text</center>.

E. NUMBERING To create a numbered list: <OL> <LI>first term <LI>second term <LI>third term </OL> Yields: first term second term third term

F. BULLETING To create a bulleted list: <UL> <LI>first term <LI>second term <LI>third term </UL> Yields: first term second term third term

G. SEPARATING
To separate blocks of text, install a Horizontal Rule, at the width, size (height) and alignment you specify:

<hr width="25%"> yields

---

<hr width="75%"> yields

---

Specify different heights (in pixels, not %) and alignment (left or center):

<hr width="50%" size="10" align="left"> yields

---

Fill in (with grey only) using NOSHADE:

<hr width="50%" size="10" NOSHADE> yields

---

4. LINKS, PICTURES & VIDEOS

A. LINKS
You can easily provide a link to another website. To do that, first copy that site's address, called its URL (Universal Resource Locater). The URL is that https//: address at the top of that site's window in your browser. (Whatever you link to must be a live internet site—sorry, you cannot link to your computer.)

Here is the link command:

<a href="URL">my text</a>

Your text is however you want to label your link—usually that website's name, but you're free to label it as you wish. Here is an example: I'll link to Bible Gateway's site, but I'll give it a different label.

<a href="https://www.biblegateway.com/passage/?search=Genesis+1&version=NIV">God's Good News</a>

which yields God's Good News


B. PICTURES
Posting pictures could not be any easier! (But, as for links, the picture must be somewhere on the internet, not on your hard drive. Image hosting sites can solve this for you.)

Here is the picture command:

<img src="Image Link"/>

Doesn't that look easy? There are just two minor things to keep in mind:

1. Right-click on the picture, click on "Copy Image Link", and then paste it into your command!
(Firefox and MS Edge call it "Image Link", but Brave calls it "image address".)

2. You will want to control your picture's width, as a percentage of the screen's width. Here's how:

To add a Width limit: <img src="Image Link" width="x%"/>

Here is Mount Rushmore:

<img src="https://a57.foxnews.com/a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2020/01/640/320/1862/1048/MountRushmore1.jpg?ve=1&tl=1?ve=1&tl=1" width="30%"/>

which yields



Now, let's increase it from 30% to 80%--and let's center it:

C. VIDEOS
Sorry, FR does not support embedding videos. The best we have are GIFs, those short videos which last several seconds and then repeat endlessly.

5. TABLES
FIRST, let's look at two exquisite examples:

This first example shows the traditional use of tables: displaying organized data. Obviously, it is a masterpiece.

This second example shows tables being used to achieve a stunning artistic effect. The poster has embedded tables within other tables and added text and pictures.

Did you notice above when I put two columns of text (E & F) side-by-side? That was a rudimentary table. The reason it does not look like a table is that I did not give it a border.

I don't really have anything to add to the 2016 Sandbox's discussion on tables. I just wanted you to know that tables can do more than merely presenting facts and figures, so I'll leave it at that.

By the way, that excellent Sandbox also discusses Footnotes extensively.

Finally, ALWAYS remember The Three Rules of HTML Posting:

1. PREVIEW!

2. PREVIEW!

3. PREVIEW!

(Yep, this is another table.)

---

* Throughout this document, I've used a special trick, which you should never need to use; but you'll wonder how I did it if I don't explain it. It involves the dozens of left-and right-carets (< and >) I showed.

If I were simply to type < and >, you would not see them, because HTML makes them invisible. So instead, I typed & lt; and & gt; WITHOUT THE SPACE AFTER THE &. Then, they become math symbols: "less than", lt, and "greater than", gt—and now HTML ignores them.

That leads to another point you may well use. I wondered how the previous Sandbox poster was able to show carets, so I investigated. While on the page I right-clicked and then clicked on "View Page Source." (I'm using Firefox, and your browser may use a different term.) Once I arrived at the Source, I navigated around until I saw how it was done. I've used that method previously to learn from others; in fact, that's how I learned about Tables.

[Hebrews 11:6]

I use it daily. What a labor-saver!

It has a couple of minor omissions and one more significant shortcoming: you can use it on replies but not when composing a post.

[Maris Crane]

I have a question that is probably stupid, but I am not an IT professional, so it is sensible to me.

Last week, when I would answer a post, there appeared the ending to my WORD or PHRASE and it is driving me nuts.

I HATE IT. If that is going to be the way posts answers are written, I won’t answer anyone any more.

I try to be as careful as possible in choosing my words to type...I DON’T APPRECIATE HAVING THE WORDS AND PHRASES CHOSEN FOR ME.

If this is just me, then please discontinue it.
If this is just the way things will be, I just won’t post anymore.

I suppose that will make many of you guys happy.

[Hebrews 11:6]

That sounds like it would be aggravating.

FR does not auto-complete users’ posts. Instead, I suggest it may have been your input-device’s software acting up.

Hope you can clear it up.

[Impy]

[Paul R.]

Is there an easy way to use html on FR to create symbols not on std. keyboards? For example, “does not equal”. (”=” with a slash through it.)

[daniel1212]

Is there an easy way to use html on FR to create symbols not on std. keyboards? For example, “does not equal”. (”=” with a slash through it.)

Like this (https://yaytext.com/slash/ enables:

≠

And or you can use quicktextpaste

And or the Firefox bbCodeWebEx (or a Chrome version) via creating a custom tag. Thank God for such.

[Perseverando]

TEST

[mbrfl]

Not exactly an HTML question, but does anyone know if there’s a way to turn off auto-suggest? The newest version is extremely annoying and distracting.

[Hebrews 11:6]

I don’t believe FR has that. So, sounds like either your operating system or your browser. Which suggests you check your Settings.

[mbrfl]

Thank you. I’ll check into it.

[GOPJ]

bump to the top

[DoodleBob]

Ht Travis

Ballot harvesting

[upchuck]

Just here to change screen tag.

[DoodleBob]

Let me preface this by saying, yes I’m logged in.

I got a new iPad. When I manually type in <img src=“ for a picture and then paste the URL as I’ve always done, when I preview I get a small box with a question mark.

HOWEVER, if I copy THE SAME img src SYNTAX from a prior post, it works perfectly.

The ONLY thing I can guess is causing the trouble, is that when I type img it shows up with an underline; I guess that means it’s considered a typo by my new iPad.

I don’t want to constantly copy and past html code from my notepad. Anybody have any ideas how to fix this problem? Thank you.

[ShadowAce]

I'm assuming that you are including the closing portion of the tag as well? It was not listed in your post.

<img src="">

[Yo-Yo]

I got a new iPad. When I manually type in <img src=“ for a picture and then paste the URL as I’ve always done, when I preview I get a small box with a question mark.

I have this issue with my iPhone when I attempt to paste URLs for either links or pics.

What I have found is that

1) I cannot easily capture the URL of a pic with my iPhone, I just cannot paste the correct URL for some reason, and

B) When I cut and paste a URL for a web page the iOS adds a leading space to the pasted URL, and I have to manually delete this space between the first " and the start of the URL (usually http://). If I do not delete this leading space, the URL is broken and does not work in FR.

Hope this helps.

[DoodleBob]

That’s is correct. Here’s an example.

I have saved in my iPad’s Notes app, a collection of html coded go-to pics, gifs, and prior posts for quick access and posting.

This img syntax came from a prior post. Please note I omitted the greater than and less than brackets so you could see it here.

img src ="https://media.tenor.com/images/87732ea95ee70a9fc4a48054d3db7339/tenor.gif"

When I add the <> brackets, we see a familiar gif…

Now, I’m going to manually type img src and add the url…on my screen I see a box with a question mark. Parenthetically, my iPad does the same ‘add a blank space’ annoying thing that Yo-Yo has happening. But I removed the space and it’s still a question mark.

FWIW, with my new iPad I also cannot add a hyperlink by manually typing “a href”. I have to copy an old html-coded hyperlink from Notes, paste it, and swap out the old with the new hyperlink.

[ShadowAce]

omit the space between src and =

[Yo-Yo]

It almost sounds like the font set your iPad is using has a different Unicode number for < and > than what FR's text editor is expecting, so it doesn't treat them as HTML delineators.

But that is WAAAAAAAY above my paygrade.

And again I reiterate that I have a similar problem with my iOS on my iPhone. So much so that when I'm posting from my phone I don't even try to add pics or hyperlinks.

I use Safari exclusively, but if you have Chrome or another browser on your iPad, do you get the same poor results with that browser? The issue could be within Safari, too. Dunno.

[ShadowAce]

Here's what I am seeing when I do the "View Selection Source" on Firefox:

<p>Now, I’m going to manually type img src and add the url…on my screen I see a box with a question mark. Parenthetically, my iPad does the same ‘add a blank space’ annoying thing that Yo-Yo has happening. But I removed the space and it’s still a question mark.</p><p><img src="“"></p><p>FWIW, with my new ...

It looks like your manual typing of the source URL is not working.