About
About Flu Wiki
How To Navigate
New? Start Here!
Search FW Forum
Forum Rules
Simple HTML I
Simple HTML II
Forum Shorthand
Recent Active Diaries
RSS Feed

Search




Advanced Search

Flu Wiki Forum
Welcome to the conversation Forum of Flu Wiki

This is an international website intended to remain accessible to as many people as possible. The opinions expressed here are those of the individual posters who remain solely responsible for the content of their messages.
The use of good judgement during the discussion of controversial issues would be greatly appreciated.

gardner's html sandbox

by: gardner

Sat Nov 18, 2006 at 18:35:33 PM EST


(basics, and now appears in the About box as 'Simple HTML' - promoted by DemFromCT)

See also HTML making a list
see also HTML tables without white space
All HTML rules use American spelling - color, not colour.
- DemFromCT

Some basic HTML:

gardner :: gardner's html sandbox
HTML code tells the computer software what you want to do. It looks like this:

< b > your word here < / b >

Code is in angle brackets < >. In most cases you put the code on both sides of the word or phrase you want put in boldface or italics. The slash mark / means "end bold" or "end italics" or whatnot. Note: If you forget to put in the slash mark, the computer will continue bolding forever and ever.

Note: The code that follows has extra space marks between the angle brackets and what's between them (< b >). This is just for demonstration purposes. You have to remove the space marks to make it work.

So for basic fancy fonts:

  < b > bold text < / b > (with spaces removed) creates: bold text

others:

< i > < /i > italics
< u > < / u > underscored
< strike > < / strike > strikethrough
< tt > < / tt > typewriter text
< sup > < / sup > superscriptsuperscript
< sub > < / sub > subscriptsubscript

Blockquotes for quoting people or just for emphasis

< blockquote > < / blockquote > 

blockquote

To change the size of the font:

< font size = 3 > < / font > 3 is the normal. Try other sizes between 1 and 7

(Note: leave the space between "font" and "size." It shouldn't be "fontsize")

< font size = 1 > < / font >  smaller

< font size = 3 > < / font >  normal

< font size = 5 > < / font >  larger

< font size = 7 > < / font >  HEY YOU

To change the font color:
(Again, leave the space between "font" and "color." And remember it must be spelled "color," not "colour")

< font color = blue > < / font > makes blue

< font color = red > < / font > makes red

< font color = yellow > < / font > makes yellow

< font color = orange > < / font > makes orange

< font color = green > < / font > makes green

< font color = purple > < / font > makes purple

To make a hyperlink
(Note: leave the space between the "a" and "href" in the first bit.)

< a href = " put URL between the quotes " > click here < / a >

makes:

click here

You can also simply post the URL by itself, even a very long one. The software will abbreviate it automatically, so there is no fear of sidescroll:

http://www.fluwikie2...

To insert a horizontal rule

put < hr > where you want a line across the screen. For this command, there is no "ending" command with a slash mark.

To align a paragraph Left, Right, or Center

Left is the standard. But with:

< p align = right> in front of your paragraph, it will align right. (Note: leave the space between "p" and "align" and there is no "end alignment" code with a slash mark at the end of the paragraph)

you can align a paragraph to the right, but you have to have enough to say to actually make a paragraph. Or if you don't have much to say at the moment, you can just blather on for a while if you want to.

The next paragraph will go back to left alignment automatically. You don't have to tell it to align left. You have to put the align right code in again if you want it to align right.

Or to < p align = center >

align center

That's all I remember right now.

You can experiment in the comments below or you can start a new diary of your own to experiment in. In both comments and diaries, you can hit "preview" to see if your html worked right. In a diary (but not in comments), you can go back after you post it and change things and experiment more. A diary you create to experiment in can be deleted if you don't want to save it, or you can just keep it for later experiments.

Tags: , , (All Tags)
Print Friendly View Send As Email

gardner's html sandbox | 84 comments
so is html clumsy to use
YES IT IS.

But once you get used to it, it's not so bad. I made up a cheat sheet with the tags I used a while back.

wonderful thank you!!! n/t

[ Parent ]
testing font sizes
So, it seems you can also make text a little smaller with < small > < / small>

And you can make text a little larger with < big > < / big >.

excellent

you can also do
< span style="font-size: 0.8em;" > sig < /span >

and get fine control. Again, the space between span and style is the only space you leave. You can adjust that 0.8 up or down.

[ Parent ]
And as I just figured out
< span style="font-style: normal; font-size: 0.8em;">signature line< /span>

gets you what I have now.

[ Parent ]
you are now
in the About box ;-)
[ Parent ]
Thanks! n/t

[ Parent ]
making lists
List of entertainment for SIP.

  1. books I haven't read yet

    • books I've never gotten around to for some reason

    • books I feel I ought to have read

    • books I've been saying for years that I HAVE read because I'm embarrassed to admit I haven't

  2. books I want to read again

    • books I started but never finished

    • books whose details I can't remember

    • books whose details I remember but want to read through again

apologies to Italo Calvino

code for that
< ol > Ordered List (numbered list starts)
< li > List Item on ordered list
< ul > Unnumbered list starts as a subcategory
< li > list item
< li > list item
< li > list item
< /ul > Unnumbered list ends
< li > Another List Item on Ordered List
<  ul > Second Unnumbered list subcategory
< li > list item
< li > list item
< li > list item
< / ul > Second unnumbered list ends
< / ol > Ordered list ends
[ Parent ]
lists
I just noticed that I didn't put in

< / li> after each list item, but it seems to have worked anyway.

A mystery.

[ Parent ]
more on code for lists
I said in a comment above that a list seems to work whether or not you include the < / li > at the end of each list item. This is an experiment to see what difference it makes.

This is a list with the < / li >.

  • Books You Haven't Read

  • Books You Needn't Read

    • Books Made For Purposes Other Than Reading

    • Books Read Even Before You Open Them Since They Belong To The Category Of Books Read Before Being Written

  • Books That If You Had More Than One Life You Would Certainly Also Read But Unfortunately Your Days Are Numbered

  • Books You Mean To Read But There Are Others You Must Read First

  • Books Too Expensive Now And You'll Wait Till They're Remaindered

  • Books Ditto When They Come Out In Paperback

the code for that is:
< ul > start main list
< li > book < / li >
< ul > start subcategory
< li > book in subcategory < / li >
< / ul > end subcategory
< li > book < / li >
< / ul > end main list

And this is a list without the < / li >:

  • Books You Can Borrow From Somebody
  • Books That Everybody's Read So It's As If You Had Read Them Too
    • Books You've Been Planning To Read For Ages
    • Books You've Been Hunting Down For Years Without Success
    • Books Dealing With Something You're Working On At The Moment
    • Books You Want To Own So They'll Be Handy Just In Case
    • Books You Could Put Aside Maybe To Read This Summer
    • Books You Need To Go With Other Books On Your Shelves
    • Books That Fill You With Sudden, Inexplicable Curiosity, Not Easily Justified

  • Books Read Long Ago Which It's Now Time To Reread
  • Books You've Always Pretended To Have Read And Now It's Time To Sit Down And Really Read Them.

the code for that was:
< ul > start main list
< li > book
< ul > start subcategory
< li > book in subcategory
< / ul > end subcategory
< li > book
< / ul > end main list

Okay then. It seems adding the < / li > after each line item adds a line break after each item, so if you want a tight, condensed list, you can leave it off. The main problem with that seems to be that if you have a subcategory in the list, the code < / ul > ending the subcategory adds a line break that breaks up the nice tight appearance of the list.

Does that seem right?

And FWIW, that is Italo Calvino's  famous list of books in the first chapter of his book If On a Winter's Night a Traveler. It's much better in context, which you can find here.

yes but you can make it tighter by skipping spaces and
line breaks.

< ul >< li >line< li >line 2 < /li > < /ul >

looks like

  • line
  • line 2

[ Parent ]
line breaks
IIRC, line breaks and spaces don't matter in some cases in html. 

I am putting different numbers of space marks between these two letters, but html will reduce it the amount of space:

one space mark:
A B

5 space marks:
A  B

10 space marks:
A  B

And

< ul >< li >item 1< li >item 2< li >item 3< /ul >

makes:

  • item 1
  • item 2
  • item 3

and

< ul >
< li >item 1
< li >item 2
< li >item 3
< /ul >

makes


  • item 1
  • item 2
  • item 3

and even

< ul >

< li >item 1

< li >item 2

< li >item 3

< /ul >

makes


  • item 1
  • item 2
  • item 3

I think the code < / li > or < / ul > itself adds a line break after it automatically.

I think it something in html so that programmers can arrange it in a way so that they can see clearly what they are doing (adding spaces and line breaks to keep track of long strings of code), without it changing the final appearance.

But I'm not sure. Still something of a mystery to me.

I'm a classicist, not a computer programer, Jim! (said in best Dr. McCoy voice from Star Trek

[ Parent ]
I'm no expert
just sayin' that

< ul >< li >line< /li >< li >line 2 < /li > < /ul >

looks like

 

  • line
  • line 2

and

  < ul >< li >line< /li >
  < li >line 2 < /li > < /ul >

looks like

  • line

  • line 2

so the tightness has to do with the space and line break after the first string.

[ Parent ]
interesting
This shows how far I got into html. (about 1/4 of the way into making lists and no farther). :-)

Okay, I think I might have figured it out. (maybe)

not adding the < / li > eliminates line breaks so that

< ul >
< li >line 1
< li >line 2
< li >line 2
< /ul >

makes:


  • line 1
  • line 2
  • line 2

and:

< ul >< li >line 1< li >line 2< li >line 2< /ul >

also makes:

  • line 1
  • line 2
  • line 2

But if you include the < / li >, you can eliminate the line breaks by writing it all in one line. So that

< ul >
< li >line 1< /li >
< li >line 2< /li >
< li >line 2< /li >
< /ul >

makes:


  • line 1

  • line 2

  • line 2

but writing it as one line eliminates the line breaks and makes it tighter

< ul >< li >line 1< /li >< li >line 2< /li >< li >line 2< /li >< /ul >

makes:

  • line 1
  • line 2
  • line 2

Very interesting. I don't think I truly understand this stuff at all. Good thing all this is just in a sandbox.  :-)

[ Parent ]
I write the < /li > part
and that way I control how much space between the lines by how many carriage returns I do. But there's no one right way, I suppose.

I just like to get in the habit of closing commands that I open.

[ Parent ]
very wise
I have been out of practice on html. And I never did much with lists or anything more complicated than that.
[ Parent ]
Moving out of my comfort zone
Okay, let's see if I can make words into a link, using Gardner's instructions:

Gardner says: < a href = " put URL between the quotes " > click here < / a >

makes:

click here

I want to make the headline of the article I was reading, when so politely interrupted by DemFromCt about this new forum playground, into a link:

< a href = " http://news.ninemsn.... " > World may have averted bird flu pandemic < / a >

No, I must have done it wrong. I don't see any sign that the words have become the link.

Will practice some more when I am closer to awake...

It's the spaces
The spaces after < and before > in the example are there so the code will be reproduced instead of processed. In your live example, leave those spaces out. But keep the space between a and href.

[ Parent ]
Do we still need to use TinyURL? n/t

[ Parent ]
nope
just cut and paste, because the software will truncate it automatically.

http://www.newfluwik...

[ Parent ]
You might need TinyURL on occasion
Theoretically this software will accept a raw link and shorten it for publication. But I just pasted a link into my own sandbox from the Toronto Star, a site notorious for having links long enough to break software, and I didn't get a link. If you can master the HTML necessary to do one of these, you'll be alright. 'Cos that's the same Toronto Star link and it works. But if you want to paste in raw links, you may need TinyURL for the occasional really long one.
[ Parent ]
links
It looks like you did it right, but just take out all the space marks except for the one space between the "a" and the "href" in < a href . . . >

When I type it in as an example, I have to put extra spaces in otherwise the computer reads it as code and it wouldn't show up on the screen at all.

[ Parent ]
To be up to current standards
You should always put in the closing tags with the / in them.

For instance, with paragraphs you should always have the
< /p > (without the spaces) on the ends of the paragraphs.

There will come a time when that will be required for things to work properly. May as well get the hang of it now.

Combine font attributes
Larger and blue?

How's this?

Done this way:
< font color = blue size = 5 >How's this?< /font >

That gets rid of some coding.

Another way
Bold, larger, blue, italicized:

< span style="font-weight: bold; font-size: 1.8em; color: blue; font-style: italic;">Howdy!< /span>

Howdy!

cool!!
advanced class!!

hey, teach, at your leisure... do you know why there's white space above a table, and how to get rid of it so the table follows this paragraph??








row 1, cell 1 row 1, cell 2
row 2, cell 1  

[ Parent ]
table formatting
Table follows paragraph - sadly you have to squash your table code together to get all the whitespace out.  Maybe there's another way...

(cellcontents1)(cellcontents2)(cellcontents3)
(cellcontents4)(cellcontents5)(cellcontents6)

< CENTER >< TABLE BORDER=1 CELLSPACING=0 CELLPADDING=10 >< TR >< TD >(cellcontents1)< /TD >< TD >(cellcontents2)< /TD >< TD >(cellcontents3)< /TD >< /TR >< TR >< TD >(cellcontents4)< /TD >< TD >(cellcontents5)< /TD >< TD >(cellcontents6)< /TD >< /TR >< /TABLE >< /CENTER >

[ Parent ]
another try - progressively removing carriage returns from code

One column:



 
 
 
100

< h4 >< font color='blue' >One column:< /font >< /h4 >
< table border="1" >
  < tr >
  < td >100< /td >
  < /tr >
< /table >

One column:



 
100

< h4 >< font color='blue' >One column:< /font >< /h4 >
< table border="1" >
  < tr >< td >100< /td >< /tr >
< /table >

One column:


100

< h4 >< font color='blue' >One column:< /font >< /h4 >
< table border="1" >< tr >< td >100< /td >< /tr >< /table >


[ Parent ]
An explanation maybe (but not a solution)
Blogspot seems to have the same issue - here's an explanation.

http://blogger-trick...

[ Parent ]
white space in code
Try taking out the breaks < br> also.
[ Parent ]
Path Forward tries again...
Gardner and Pogge explain re:

< a href = " put URL between the quotes " > click here < / a >

that I should take out ALL the spaces except the space between the "a" and "href" in the first bit. That's what I failed to do completely on my first try: I left SOME of the spaces in, in addition to the space between "a" and "href".

So:

World may have averted bird flu pandemic

Should turn into a link for the words
"World may have averted bird flu pandemic," if I did it right this time.

Woo Hoo! It worked. Path Forward is now on the "High Path" toward HTML literacy for beginners! Try and stop me now, chickens!

Looks great! (n/t)

[ Parent ]
well done! n/t




All 'safety concerns' are hypothetical.  If not, they'd be called side effects...
[ Parent ]
Comment signature
I want a signature like your' anon_22, but I want it to be in italics, and smaller.  I'll give it a try here:

I am not like other birds of prey<\i><\font>

I am not like other birds of prey....

[ Parent ]
whoa.....I am really impressed with myself. 1st try too.


I am not like other birds of prey....
[ Parent ]
Test
here goes....

I am not like other birds of prey....
[ Parent ]
Font repair

[ Parent ]
Alrighty!
You got it now!
[ Parent ]
Online HTML Tutorials
This site seems to cover all the basics:

Ted’s Comprehensive HTML Tutorial

Good resource
That's a good one Irene!

I like this one too...

http://www.w3schools...

[ Parent ]
commonground sig
Great job!  I like have a personal sig. This place is wild.
It's going to take a while to get use to everything, but you seem to be doing good. 

United we stand: Divided we fall
www.flunewsnetwork.com
Happy Thanksgiving to Everyone
Hi Cottontop, this is becoming fun.  Which I really shouldn't be doing right now.....should be packing!!!  I've got to try out this numbered list again.


    Clean Refrigerator out
    Wash Floors
    Clean Bathrooms
    Hop in the car and get the heck out of here


I am not like other birds of prey....
[ Parent ]
I can't get the numbers to appear.


I am not like other birds of prey....
[ Parent ]
Once again....

    pack remaing stuff from refrigerator

  1. don't forget the cat.....

  2. pack litter box

  3. bring litter to get to immediately.....



I am not like other birds of prey....
[ Parent ]
great


I am not like other birds of prey....
[ Parent ]
numbered lists
< ol >
< li >list item< /li >
< li >list item< /li >
< li >list item< /li >
< / ol >

should make (when you remove the space marks within the < >.


  1. list item

  2. list item

  3. list item


[ Parent ]
staggered list
Is my computer acting up again or are those really staggered, the list items not lining up with the numbers.

Interesting!  :-)

[ Parent ]
Your computer is fine.
Once more....


  1. heck with the cat, grab the bottle of wine instead

  3. throw away all food in fridge when emptying

  5. fill car with gas



I am not like other birds of prey....
[ Parent ]
oh my .....

  1. kill the cat

  2. drink wine NOW

  3. stop trying to make numbered lists



I am not like other birds of prey....
[ Parent ]
re: oh my
1. Throw away all food cat might eat
2. Fill car with wine
3. Use gas to burn broken solar cooker
[ Parent ]
Another try at html, using Gardner's instructions
I am going to make a list a la Gardner1

  • first item in italics and red

  • second item underscored and in blue

  • final item in black with no special characteristics


    • 1 At least I am going to try

    Well, I can't get the red line lined up with the bullet point, for love or money (actually, I haven't tried money... )

    hmmm....
    there's a space there that snuck in somewhere.

    < li>< br >
    first item in italics and red

    is how the code appears... that means that the < br > got in there... that's code for carriage return or line break.

    Of course, there are no spaces in the real code, but if i leave the spaces out, it's invisible.

    BTW, we found that posting the html exactly as you did it on the old yellow forum is a good way to diagnose a problem, because html doesn't work over there.

    And the linky thing, y'know,

    [[url | link ]] can be shown here because that doesn't work here. ;)

    [ Parent ]
    Testing
    the slow infected bird flew over the lazy dog

    Could it be H5N1?

    testing
    testing

    Our children change our lives, whether they live or not.
    www.misschildren.org

    [ Parent ]
    testing again
    testing again

    Our children change our lives, whether they live or not.
    www.misschildren.org

    [ Parent ]
    end

    [ Parent ]
    end
    test
    [ Parent ]
    Font repair...
    .
    [ Parent ]
    An easy way to change text size

    If you want to just make text size larger or smaller than the default text size, do it this way:

    Apples
    < big >Apples< /big >

    Apples
    (default text size)

    Apples
    < small >Apples< /small >

    It's a lot easier to remember. :-)

    testing
    testing

    Our children change our lives, whether they live or not.
    www.misschildren.org

    help
    ok, I need help LOL

    Here is my code for my signature

    < p align=center >
    < font color="purple" > Our children change our lives, whether they live or not. < /font > < br >

    < font size = 1 >
    < font color="magenta" >
    < a href = "http://www.misschild... > www.misschildren.org < br >

    < a href = "http://www.memorybox... > www.memoryboxes.org < /a > < br >

    My quote is fine and the first link is fine but I can't make the second link even show up.  What am I doing wrong?

    Our children change our lives, whether they live or not.
    www.misschildren.org

    test
    test
    [ Parent ]
    More font maintenance n/t

    [ Parent ]
    Testing by a newbie
    bold or italic or both

    red, green, and blue

    Here is a link to cnn.com

    test
    test font size
    Test bold
    Test start bold without stopping.
    Test bold continues
    Test bold continues in new comment.
    Test bold stop
    Test bold stop in new commet.
    Test bold 2
    Test start bold 2 w/out stop.
    Test bold 4 continue
    Test bold 4 in Reply in thread with open bold.
    [ Parent ]
    Test bold 2 continues
    Test bold continues in new comment. Expect to be bold.
    Test bold 4 in Reply
    Test bold 4 in Reply. Expect to be bold.
    [ Parent ]
    Test bold 4 continue
    Test bold 4 in Reply. Expect stop bold.
    [ Parent ]
    Test bold 4 continue
    Test bold 4 in Reply. Expect to be bold.
    [ Parent ]
    Test bold 2 stop
    Test bold 2 stop in new comment.
    Test bold 2a stop
    Test bold 2a stop in new comment.
    Test bold 3
    Test bold 3 in new comment.
    Test Ital stop
    Turn off italics in Comment. Expect stop ital.
    Test spcl char 1
    A?
    A?
    ??????<>
    ?
    [ Parent ]
    Test spcl char 2
    ?
    A?
    A?
    [ Parent ]
    Test spcl char 3
    ?
    A?
    A?
    [ Parent ]
    Test spcl char 4

    ATM
    ATM
    ATM
    ATM
    ATM

    A?
    A?

    [ Parent ]
    How about pictures?
    How do you insert a photograph? -k

    www.EmergencyHomePreparation.org -- A 'card-catalog' style of prepping information.   -
    gardner's html sandbox | 84 comments
    Menu

    Make a New Account

    Username:

    Password:



    Forget your username or password?


    Active Users
    Currently 1 user(s) logged on.

    Contact
      DemFromCT
      pogge
      Bronco Bill
      SusanC (emeritus)
      Melanie (In Memoriam)
      Flu Wiki (active wiki resource)
      How To Add To Flu Wiki
      Get Pandemic Ready (How To Start Prepping)
      Citizen's Guide v 2.0
      Effect Measure
      Dude's FTP

     

    Home
    Powered by: SoapBlox