Testing BBCodes and Smilies

[Bob Kuczewski]

Testing the [comment] tag:

This text should appear.



This text should also appear.

Here's what was typed:

This text should appear.

[comment]This text should be a comment.[comment]

This text should also appear.

As you can see, the "comment" tag makes the enclosed text "invisible" (note that the text can still be seen if the user uses their browser's "view source" feature).

The comment tag can also be used in line:

It was a blue glider.

Here's what was typed:

It was a [comment]red[/comment] blue glider.

[Bob Kuczewski]

This is a test of the "table1" style

Top Left	Top Right
Bottom Left	Bottom Right

Top Left		Top Right
Bottom Left	Bottom Middle	Bottom Right

1	2	3
4	5	6
7	8	9

[Bob Kuczewski]

Working on vimeo using Bill's link:

https://vimeo.com/129279596

[vimeo]129279596[/vimeo]

Still not working yet.

[Bill Cummings]

Bob,
At times I get a flash of this, (see attachment Hawks format.) then it usually quickly switches to the correct page.
This one time the download was buffering a long time and allowed me to stop the download and get a snippet capture so that I can show you what is happening, more so, recently. Only sporadically in the past.
Any idea about why this is happening?

Hawks format..JPG (67.69 KiB) Viewed 7340 times

[Bob Kuczewski]

Any idea about why this is happening?

Good question Bill!!!!!

I've seen that myself as well, and I've come up with my own conjecture ... which I'll share.

In the early days, all web pages were "pure HTML" which meant that each whole page was loaded as one file (except for pictures). But for a variety of reasons, most modern web pages contain a much more limited HTML file which is augmented by a "Cascading Style Sheet" (or CSS) file. The HTML file supplies the raw content without a lot of fancy formatting. The fancy formatting (and I mean really fancy) is now typically supplied in a separate style sheet. You can include the CSS right in the HTML page, but then it has to be included in every page. But if you have a separate "style sheet" file, then all of the HTML pages can share that same style sheet. The advantage of that is you can just change the style sheet in one place and it will change how ALL of the web site's HTML pages are displayed.

So what I think is happening in the example that you've given is that the web page itself has been loaded, but for some reason, it's taking a little longer to load the associated style sheet. So the browser shows you what it's got so far (the basic text without the formatting), and then it reformats it to look "nice" when the style sheet catches up.

How does that sound?

By the way, you can experiment with HTML and CSS pretty easily on your own computer. Just create a text file and name it something that ends with ".html" or ".htm" (like ... Bills_Page.htm). Then just type in some text, and open it with your browser. The text will appear pretty plain in the browser. But you can start to spiff it up with some HTML "tags". Here's an example of some text you might save to a file:

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Then you can spiff it up by making the first three words bold:

<b>We the People</b> of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

That's similar to using the [b] BBCode. In fact, the [b] BBCode actually gets translated into the HTML bold tag <b> when the page is displayed. You can see that (in spades) by using your browser's "Show Source" option to see all the codes that go into making up a web page (including this one).

By the way, if anyone is interested, I'd be happy to give a short course on HTML coding for web pages. Just let me know.

[Bill Cummings]

So by -----(oh darn it, now I’m starting sentences with, “So.”) clicking “Show Source,” I could teach myself how everyone is doing it. (?)
Years ago a tech. guy told me there is a program that once you are done you can submit it to see if the code meets normal standards. How does one do that?

[Bob Kuczewski]

So by -----(oh darn it, now I’m starting sentences with, “So.”) clicking “Show Source,” I could teach myself how everyone is doing it. (?)

Yup. But I have to warn you that most web pages in these modern times are generated by machines that spew out all kinds of gobbletygook that's hard to make heads or tails from. It'll scare you right off!!

For example, if you show the "source" of this page you're reading, it'll be so full of HTML tags that you won't hardly recognize anything on the page at all.  

So to make it easier, open up a new browser window and go to http://torreyhawks.org. Then use "Show Source" on that page. That's a nice simple page that I wrote about 7 years ago when we founded the Torrey Hawks (we've stayed pretty true to our founding principles all these years). Here's what it looks like:

<html>

<body bgcolor="#a0b7d0">

<center><img src="homepage.jpg"></center>

<hr>
<center>
<h2>
<b>
The Torrey Hawks Hang Gliding Club is dedicated to promoting and<br>
protecting the sport of Hang Gliding at the Torrey Pines Gliderport.
</b>
</h2>
</center>
<hr>
<p>
<ul>
<h3>
<li><a href="ABOUT.HTM">Mission Statement and By-Laws</a><p>
<li><a href="http://ushawks.org/forum/viewforum.php?f=4">Torrey Hawks Club Forum</a><p>
<li><a href="HIST.HTM">Historical Photos from 1977 and 1986</a><p>
<li><a href="TOUR.HTM">Flying Tour of the Torrey Pines Coastline from May 5, 2006</a><p>
<li><a href="founder/founder.htm">Founder's Page</a><p>
<li><a href="INDEX.HTM">Contact: &nbsp; (858)&nbsp;204-7499</a> - or - <a href="mailto:bobkuczewski@gmail.com">bobkuczewski@gmail.com</a><p>
</ul>
</h3>
</ul>

</body>

</html>

You'll see that the page starts and ends with an "html" tag that tells the browser that ... it's an HTML page!!

Then it has a "body" tag that includes a background color (bgolor="#a0b7d0"). That's what makes the background blue. If you change those numbers you'll get different colors.

After that, there's an image file named "homepage.jpg" shown centered with an "img" tag ("img" is how they write "image" when they're trying to save two keystrokes ). That particular image shows our Torrey Hawks logo.

Then there a "Horizontal Rule" (hr) and a "heading 2" (h2 - no that's not a hang gliding rating).

The site description is enclosed in "Bold" (b) tags and has a "break" (br) to split it just where I wanted.

A little further down, there's an "Unordered List" (ul) which is a list that uses "bullets" instead of numbers.

Within the list everything is "heading 3" (h3 - not a hang gliding rating either).

And then within the list are a bunch of "List Items" (li) and "Anchors" (a href=) which make links to other web pages and web sites.

Finally, there's a bunch of "closing" tags that match the opening tags. Just like in BBCode, HTML closing tags have a leading "/" inside the brackets.

So there's a quick intro to HTML (Hyper Text Markup Language).   

Years ago a tech. guy told me there is a program that once you are done you can submit it to see if the code meets normal standards. How does one do that?

There are a number of programs (and web sites) that can do that, so I don't know which one he mentioned. I typically try to keep things pretty simple, and then it works on almost all web browsers. I think the Torrey Hawks web site would look just fine in Windows 3.1 (if anyone can remember that far back). The more new nifty features you put in your web pages, the fewer browsers are capable of showing them properly.

By the way, while I was typing this, I decided to create a Java program that lets you type HTML in one window and see how it's displayed in another window. Here's what that program looks like when it's running:

HTML_Editor.png (187.23 KiB) Viewed 7327 times

And here's the Java program that does that:

Code: Select all

import javax.swing.*;
import javax.swing.text.*;
import java.awt.*;
import java.awt.event.*;


public class HTML_Editor extends JFrame implements KeyListener{

  JTextArea t;
  JEditorPane p;

  HTML_Editor(String title, String[] args) {
    setSize(800,600);
    setTitle(title);

    String content = "<html>\n<body>\n<h1>Hello HTML!!</h1>\n</body>\n</html>";

    this.t = new JTextArea();
    this.t.addKeyListener ( this );
    this.t.setText ( content );

    this.p = new JEditorPane();
    this.p.setContentType ( "text/html" );
    this.p.setText ( content );

    JSplitPane panels = new JSplitPane ( JSplitPane.HORIZONTAL_SPLIT, true, this.t, this.p );
    panels.setDividerLocation ( 0.5 );

    this.add ( panels );
    this.setVisible(true);
    this.addKeyListener ( this );
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  }

  public void copy_text() {
    this.p.setText ( this.t.getText() );
  }

  public void keyPressed(KeyEvent e) {
    copy_text();
  }
  public void keyReleased(KeyEvent e) {
    copy_text();
  }
  public void keyTyped(KeyEvent e) {
    copy_text();
  }

  public static void main(String[] args) {
    HTML_Editor editor = new HTML_Editor ( "HTML Editor", args );
  }
}

[Bob Kuczewski]

This is a test of the new "tablez" BBCode:

Button Gwinnett Lyman Hall George Walton

William Hooper Joseph Hewes John Penn Edward Rutledge Thomas Heyward, Jr. Thomas Lynch, Jr. Arthur Middleton

John Hancock Samuel Chase William Paca Thomas Stone Charles Carroll of Carrollton George Wythe Richard Henry Lee Thomas Jefferson Benjamin Harrison Thomas Nelson, Jr. Francis Lightfoot Lee Carter Braxton

Robert Morris Benjamin Rush Benjamin Franklin John Morton George Clymer James Smith George Taylor James Wilson George Ross Caesar Rodney George Read Thomas McKean

William Floyd Philip Livingston Francis Lewis Lewis Morris Richard Stockton John Witherspoon Francis Hopkinson John Hart Abraham Clark

Josiah Bartlett William Whipple Samuel Adams John Adams Robert Treat Paine Elbridge Gerry Stephen Hopkins William Ellery Roger Sherman Samuel Huntington William Williams Oliver Wolcott Matthew Thornton

[Bill Cummings]

Bob, I don't know if this is what you were trying to tell me about making a link to a post mid-page but I think I can do it this way.
See if I got this right.

Link to desired post on mid page - How to!.JPG (43.57 KiB) Viewed 6974 times

[Bob Kuczewski]

I think that's it Bill!!

Sorry I hadn't visited the Free Speech Zone in a while.

In fact, I'm here to test out a new BBCode that allows indenting of entire paragraphs. Rick's writing is really great, and I hate to see him struggling with our single line indents (1,2,4,...). So I've added a new "left=" tag that lets you indent a paragraph or a series of paragraphs.

As a test, here's a quote from Wikipedia's featured article today:

New Worlds is a British science fiction magazine that began in 1936 as a fanzine called Novae Terrae. It was first published professionally in 1946, edited by John Carnell. It was the leading British science fiction publication during the period to 1960 described by historian Mike Ashley as the magazine's "Golden Age". Early issues featured John Wyndham's "The Living Lies", under his John Beynon alias, and "Inheritance", an early story by Arthur C. Clarke. "Escapement" by J. G. Ballard appeared in the December 1956 issue; this was Ballard's first professionally published work, and he went on to become a significant figure in science fiction in the 1960s. After 1964, when Michael Moorcock became editor, the magazine featured experimental and avant-garde material, and it became the focus of the modernist New Wave of science fiction. Reaction among the science fiction community was mixed, with partisans and opponents of the New Wave debating the merits of New Worlds in the columns of fanzines, such as Speculation. Several of the regular contributors during this period, including Brian Aldiss and Thomas M. Disch, became major names in science fiction.

Here are some of their "On This Day in History" items:

1759 – The second of two strong earthquakes struck the Levant and destroyed all the villages in the Beqaa Valley.

1795 – Stanisław II Augustus, the last King of Poland, was forced to abdicate after the Third Partition of the Polish–Lithuanian Commonwealth.

1917 – World War I: German troops invaded Portuguese East Africa (fighting pictured) in an attempt to escape superior British forces to the north and resupply from captured Portuguese materiel.

1947 – McCarthyism: Executives from movie studios agreed to blacklist ten screenwriters and directors who were jailed for refusing to give testimony to the House Un-American Activities Committee.

1975 – Upon Suriname's independence from the Netherlands, Johan Ferrier became its first president.

That last example used both the "left=" code for indenting, and the "first=" code for the first line in a paragraph. In this example I used "left=70" to indent everything 70 pixels, and then I used "first=-45" to bring the first line back to the left to give the "hanging" indent look. As always, you can quote this post to see what it actually looks like in BBCode.