UPDATE: Notice that this post just became a permanent page, so it’ll be handy if you need a reminder later.
Well, we thought we had a good system of HTML-coding buttons for new folo’s comment box, but the one we got didn’t work so hot. Webmaster riddenword is, I understand, looking into other possibilities, but for now you still gotta do it by hand if you want to tart-up something in a comment.
So here’s a basic tutorial in how to make the "special effects " you see online — the boldface, italics,
indented blockquotes,
hyperlinks, and anything else that’s beyond the site’s ordinary typeface (we get beyond basic, and I’m in over my head, so that’s all I’m gonna try to show you).
First, look at those left- and right-arrow symbols, the "uppercases " of the comma and period keys on your keyboard. Those are essential elements of HTML coding — it just doesn’t happen without them. The other essential character in every pair of coding signals is the / (without which, whatever coding you’ve started will go on forever, which tends to make other people cross with the careless one).
Right, here we go . . .
To make something bold, just in front of that word or phrase, type <strong>. Where you want the boldface to quit, type </strong>. Thus:
<strong>bold</strong> = bold.
To italicize something, right in front of the word or phrase, type <em> and right behind it, </em>. So
<em>italics</em> = italics
To make an indented blockquote, type right in front of the passage <blockquote> and at its end </blockquote>.
<blockquote>indented blockquote</blockquote> =
indented blockquote
Now here’s the most intricate one, but once you get the hang of it, it’s easy too. To make a fancy-schmancy hyperlink instead of just simply cutting-&-pasting the URL of a source you want us to see,
1. type <a href=”[X]“> (note the space between the a and the h, and the pair of quotemarks after the equal sign; see next step for what [X] will be — I just have to put that here now to trick the site — don’t ask). Between the quotemarks,
2. drop in the URL of your source (copied from the address field at screen top). Then
3. right after the right-facing arrow, type whatever text you want us to see, either your own phrasing or perhaps the source’s headline. Finally,
4. snugged-up after the end of that phrase, type </a>. So:
<a href=”http://www.folo.us” mce_href=”http://www.folo.us”>linked text</a> = linked text
Go ahead, experiment (I’m headed to bed soon, so whatever trouble you get into won’t bovvah me, heh) — have fun, you bigtime computer-programmer, you!
lotus, as usual I am impressed. I learn more and more about the law here daily. As a former techie-prime (or should that be geek-prime) I’m impressed with your ability to put HTML in terms that the non-techie can understand. Where were you when I was attempting to make corporate America computer literate?
Good job
Haw, thanks, jester! If I can get it, damn near anybody can.
Me too, jester:
testing I hope this works.
Now if you can show me how to use spell check I’ll be sooo happy.
LOL!
Yer so damn cute.
The simple ones I know how, it’s that damn hyperlink thingy that always gets me.
These things supposed to work in preview?
No, you left out the less than and greater than signs with the /a at the end (you also have to close the address with a close quote). See where I come from greater than and less than signs work instead of []
like this: Insurers Saw Record Gains in Year of Catastrophic Loss
See if that works. Sorry no preview. Preview is your friend.
Sorry.
Sorry.
I’ll practice this somewhere else!
TMI
If anyone is interested
lotus, you’re using bbcode. so is bellesouth.
weirdharold’s link is a very good source for beginners.
LOL, Bud, toldja I’m a Luddite! Here I’d never heard of bbcode ’til this very minute and didn’t even know I’m spoze to capitalize HTML (which always makes me think “hotmail” instead of “Hyper Text Markup Language,” as “bbcode” brings to mind “poem praising Auntie Beeb”).
Anyhow, I had to substitute brackets for the pointers in my examples because if I didn’t, the site would perform the commands instead of showing how to make them, d’oh. I’ve seen demonstrations with the arrows in the right places (for instance, Alan’s over at Y’allP) but can’t figure out for the life of me how they pull that off.
belle, I know, and I’m hoping for Preview too — we’re looking for “plug-ins” that’ll suit, and one with Preview sure would.
IAT, heh, know what you mean!
“Anyhow, I had to substitute brackets for the pointers in my examples because if I didn’t, the site would perform the commands instead of showing how to make them, d’oh.”
[Smacks self on the forehead] D’oh is right, sorry if I confused things.
Actually, belle, you helped me out, proving that I needed to go back and emphasize a couple of things. Refresh the post to see what I mean.
lotus,
I thought you were using bbcode as well until I saw that you were meaning everyone to replace the brackets with the delimiters for HTML tags.
What may work for you is to wrap your illustrations in pre tags, as outlined in the section “Using PRE” of this tutorial.
With pre tags, you should be able to dispense with the bracket confusion above.
Also, it is worth noting that b and i tags, though they still work, are often discouraged on today’s semantic web. The more meaningful “strong” and “em” tags are used instead. Since web content is now translated to many devices that do not have a direct relation to the “printed page,” moving to more meaningful tags and separating content from presentation is A Good Thing(tm). It is more valuable for a blind user of your site with a screenreader, for instance, to have her software “read” aloud a bit of text with emphasis (the em tag) rather than to needlessly try to present it audibly in italics (the i tag).
In common practice, though, yes: i is roughly equivalent to em, while b is roughly equivalent to strong, and the two sets are usually rendered exactly the same by most browsers.
YAY for your help, it_guy! Gonna go try it . . .
Oops.
If that doesn’t work out so well for you, there are always the HTML entities & lt; and & gt; minus the spaces between the ampersound and the next character. They will literally produce a “less than” and “greater than” symbol, so you can use them to construct your tags like so:
Using the following code in a comment:
will render as:
Or:
will render as:
Okay, it_guy, I’m sho’ glad you can show us how to do that . . . I think. Except for that funky trifecta thingie.
(runs away)
Indeed, halfway through my earlier post I thought “Why am I writing this, when I could be reading transcripts of wire taps?”
Please don’t take me the wrong way — I wasn’t trying to imply that I didn’t like your tutorial. To the contrary, I think it is very useful, and shows that you are a very gracious host. Only the best of site owners care enough about visitor comments to help them put their best foot forward in appearance.
Now, after a bit of further research (and installing a sample installation of WordPress for myself), my earlier suggestion to use pre tags didn’t work great for me either. I’m not certain why, and I doubt it really matters.
What did work for me though was to use WP’s built in WYSIWG editor in “Visual” mode, and just type my HTML directly into the post, tags and everything. Then, when I wanted to show the rendered version, I duplicated the line, and used the controls on the toolbar to add the right formatting.
As long as you are entering your post in “Visual” mode (as opposed to “Code” mode), WP apparently changes your brackets to & lt; and & rt; respectively. When viewing the post, the tags show up in the appropriate places (i.e., it should look like it did in the editor).
Anyway, sorry for distracting you from trial proceedings. Back to the main attraction!
EXCELSIOR, it_guy,
weyou finally fixed it!(Now why I didn’t think of that on my own, having suffered it inadvertently so many times, I can’t tell ya.)
Anyhow, on behalf of the community, I thank you.
lotus, Firedoglake dot com is powered by wordpress I believe. I know they used to be and then they switched things over like you did. Check out their site to see all you can do. Also, Jane and Christy have a great community over there as well.
Well, belle, I thought FDL was a lot greater before Jane banned me, just sayin’.
Horrors! That’s terrible! Believe me, I know how that feels, although Yall Politics was the first for me and I have been doing this for at least 12 years!
But Belle, you fail to mention that you’ve now been tossed from Rossmiller for the same behavior, correct?
My Thoughts and belle, if y’all are fixin’ to rumble, please exchange email addresses right now and TAKE IT OFF-BLOG.
I expect this word-to-the-wise to suffice.
Pointing out for full disclosure, but point taken, Lotus.
My Thoughts, in answer to your question, no.
When using the <A HREF=”put your link here”> and </A> macro to show a link, always remember to put that link in quotes. Sometimes strings are embedded in those URLs that will be interpreted by your browswer or the website software as something else.
it_guy 15 and Cujo 29, thanks so much for your suggested improvements, which I’ve added to this post and the permanent-page version of it. I had no idea of the significance of those until you pointed them out.
Cujo may recall with me how delighted some of us summer-’06 FDL commenters were to have a fellow who signed in as “Bat” pipe up. He was participating via a screenreader and a voice-recognition gizmo (when not busy campaigning for local office somewhere in the Upper Midwest). I’ve often thought of him, hoping some town up there to this day benefits from his skills and character in office.
Anyhow, I sure don’t want my programming ignorance to cause trouble for any “Bats” with Southern accents, so I really appreciate the extra care y’all have taken to help them and me out here!
Lotus here is a site that will help some of us with PDF’s. It’s called PDFMeNot.
http://pdfmenot.com/
We would go to a web page instead of downloading the PDF and cluttering up our confusor. I know mines cluttered enough.
Thanks for that, Delta Boy. Is it for the transmitter or the receiver of the pdf to use, or both? NMC’s our major pdf-producer ’round here, but I occasionally do one, so I’m interested too.
I think it will produce the PDF as a web page. It says the 1st one will be a little slow but the next will be faster.
Hmmm, eeenterrrestink!