Basic HTML for Red Staters

By Neil Stevens Comments (39) / Email this page » / Leave a comment »

Or: So you've decided to use an image...

Greetings, Red State writer! If you're reading this document, you've looked at the features in the Filtered HTML formatting option, and have decided instead to use full HTML features in your post. Here is how to do it.

A warning before I begin, though: HTML is cold and unforgiving, causing terrible errors to the whole page if you make a single letter mistake. Every slash, every quote, every greater-than and less-than sign is important. Please preview before posting when using HTML. And try to use Firefox when posting, because it will help you catch errors more easily.

Boldface: To emphasize text in bold, write it like this:

<strong>Text to be made bold here</strong>

Italics: To emphasize text in italics, write it like this:

<em>Text to be italicized here</em>

Monospace: To format text in a monospaced face, write it like this:

<code>Text to be monospaced here</code>

A note on using multiple features at once: strong, em, and other elements cannot be overlapped. So you can't do this:

<strong>This text is bold <em> This text is bold and italic </strong> This text is italic </em>

They can be nested though. You can place an em entirely inside a strong, or a strong entirely inside an em. And the same goes for links and all other HTML. So this works:

<strong>This text is bold <em> This text is bold and italic </em></strong><em> This text is italic </em>

Blockquotes: To mark a group of text as a large quote, write it like this:

<blockquote>Place as many paragraphs, images, or other material as you want in here, as a quote. Even other quotes should work.</blockquote>

Links: To add a link to another webpage, write it like this:

<a href="http://your.full.link.here/etc">Descriptive text to put as link text here; don't just say "Click here"</a>

Images: To add an image, write it like this:

<img src="http://your.full.link.here/etc" alt="Descriptive text here"/>

Writing special symbols: You may notice that <, >, &, " have meaning in HTML. How then does one write these symbols for display in HTML? The answer is to use what is called an entity.

Every letter, number, or symbol that can be represented on the computer has an HTML entity. Most things can be written directly, though, so for ordinary text you don't have to use them. But when you need them, just write the entity out in place of the symbol you want. Here is a list of useful entities:

  • &trade; gives ™
  • &amp; gives &
  • &lt; gives <
  • &gt; gives >
  • &quot; gives "

Using these you can even give HTML examples, as I have here, without having to give clunky instructions like "remove the spaces."

More tips will be added as help is requested on them.

I've found that it's very helpful to use Google Images to find thumbnails to illustrate a point. The reason is that Google does all the hard work of finding those images, resizing them to manageable dimensions, and caching them so they don't disappear on you.

For example, my picture of Gonzo was obtained by typing "GONZO" into Google Images and then right-clicking on the image and copying the URL to the cached thumbnail at Google. You can see that URL by right clicking on Gonzo and inspecting the URL.
 

 

 

I found my image of Howard Dean at ACORN in the same fashion. You'll notice that when you mouse over this image, it takes you to the same page that Google does when you click on it at Google itself.

How do you do it? You wrap (or nest) the IMG tag inside an A tag. The inner IMG tag loads the image, the outer A tag provides the link to the destination. Think about that for a second and it's pretty straightforward.

Finally, how do I maintain spacing between paragraphs here at RedState? You'll notice that there is a space between Gonzo and Howard. I use a very simple trick (there are others):

Between the paragraphs, I paste a few of the following strings, just with the spaces removed:

& nbsp ; < br >

Remove the spaces from the above string and paste it in between paragraphs a few times to give some padding between them. In this post, there are three of those sitting invisbly between the picture of Gonzo and the picture of Sir Howard.

Finally, to stop the text from mashing up against the side of the image it's wrapping around, use the "hspace" parameter inside the img tag, like this:

< img src = "http : // www. somesite. com. / picture. jpg " hspace = 5 >

That causes the browser to add a little whitespace border on each side of the image. Quick and simple.

And remember: The Preview Button is Your Friend!

If you want spacing to be more accessible and future-proof, do it like this:

Wrap each paragraph in a <p></p> pair. The P stands for paragraph. I only do that for my diaries though.

As for adding a margin, the preferred way to do that would be like this:

<img src="http://www.hakubi.us/foundation/data/saigon-evacuation" alt="The Murtha/Pelosi Plan for Iraq" style="margin: 5px"/>

That style thing can contain many different attributes all separated by semicolons. In the future I'll document how to do those pullout quotes that the RS Editors so often use, if anyone's interested.

--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

I've tried using the <p></p> pair before and it hadn't worked. I got the impression the first time that it was being stripped out. Maybe that tag is "allowed" now by Drupal. But thanks for the style tip: Neil is using CSS which is officially better than the old way of doing it because it will be supported in the future.

And yes, I'm absolutely restricting my lessons to code that is XHTML-compatible, since that's the future of the web.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

Are very nice to have in the armamentarium, so go right ahead. Like everything HTML, just don't abuse it.

You can also use < b > and < / b > (without the spaces, of course) for bold, or < i > and < / i > for italics.

Some others that folks might not know: < blockquote > will make your text appear

like this... just make sure you type < / blockquote > at the end of it

to return it to normal.

And < tt > will make your text look like this:

This is TT text, which is a monospacing tool used to make each letter the exact same width - so you can type tables, charts, etc. and get them perfectly lined up.

Also in regards to images, if you've got one that's large and would be obnoxious to post, you can alter it with "width" and "height" commands, like this:

Original Picture

which was done with this command string (w/o the spaces at the beginning and end):
< img src="http://www.palinforgovernor.com/SarahPalinSm.jpg" >

Sized Picture

which was done with this line:
< img src="http://www.palinforgovernor.com/SarahPalinSm.jpg" width="50" height="75" >

Hope that helps a little more!

--------
Sometimes the hardest thing and the right thing are the same. -The Fray, "All At Once"

If you take a very large image, and scale it down small, it will still require that everyone download that very large image, and it will use more memory on everyone's computer.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

We'll have to talk at some point about image hosting. I'm thinking of getting a dedicated connection and setting up a separate image server specifically for RedState users. People could upload their images there, but for now Neil's general point obtains:

Remember that whenever the browser loads an image, it loads the WHOLE image, regardless of the size parameters that tell it how to scale it on the screen. Be careful that you're not asking your visitor to download a 10-megabyte TIFF resized to 40x40.

Is fast and fun at Photobucket

It's free, you can use it to size your photos and it generates all appropriate tags for use in posting, eBay, whatever. Simply upload and image, size it, copy and paste the tag into your post and viola, your done.

It will even build you slide shows, it serves all the images from it's servers, so you don't eat up someone elses bandwidth.

Example above.

Mahmoud Ahmadinejad - "We did not have
a revolution in order to have democracy."

View The World With HinzSight

Previewing will help catch most problems, but if you're ending with special coding and leave off the closing < / whatever > tag, you might not realize it and you'll tick a bunch of people off because everything from there down is bold, Italicized, etc.
--
Bipartisanship = give + take. Republicans give. Democrats take.

Drupal is still not as careful as the old Scoop platform was about enforcing closing tags: that means you have to do it.

Simple rule: if you type an opening tag, make sure there is a closing tag. IMG tags are an exception: they require no closing tag (aaargh!) but everything else does. Make sure that all your tags come in pairs: <i>...</i> and so on. Got bitten by that myself once...heh. :-(

I did some programming, when I had to write in open/close intruction pairs I would write both immediately then insert whatever in between. By writing both immediately I had less chance of screwing it up! It's not fool proof, you have to remember to do it.

You can also find lists of special characters that you can insert with an ampersand followed by something followed by a semicolon. For example & nbsp ; (without the spaces) forces in a blank character and can be used to 'omit' the text part of a post. Most common around here is & trade ; as used in BushLied™, KnownFact™, etc.
--
Bipartisanship = give + take. Republicans give. Democrats take.

I printed all that out. I struggle so much with this stuff!

Also, could you tell me where to go to find my old comments? I don't know where to go to check responses or try to find something I've written that I need to refer to. (A lot from the old Redstate. Are they just gone?)

Thank you again.

Life is not fair, but It's still a Wonderful Life!

Click your user name, then click Track, to see discussions that you've participated in, that have recently had new activity.

Something as easy as the old Your Comments page isn't available yet, though.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

...a definite yes or no on whether this feature is possible and forthcoming?

Madhouse Thought & Conservative News and Views

I also haven't heard back on my major request: that we remove the reply form from the main comment pages, so that people will quit breaking threading by accident.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

I've done that on more than one occasion thinking I had clicked "reply to this" or rushing and not paying close enough attention!

Madhouse Thought & Conservative News and Views

www.fairtax.org
Sick of Government Expansion? Liberty-Minded Republican? Check This Out... Republican Liberty Caucus!!!
www.rlc.org http://www.republicanliberty.org/

You can also have your link open in a new window by placing target="_New" after the url.

That way you don't have to direct the reader away from your post.

At least as far as your adversarial thing that's going on in this thread with me. I didn't use the P tag and the CODE tags because when I tried them they weren't working. I'm glad they're working for you, but unless I'm mistaken Clayton can configure which tags work for which users individually.

Your comment just reminded me of that, and I put it in. Sorry if I came off that way, because I really didn't mean to.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

I was being "clunky" because the CODE tag wasn't working for me. I tried it three times before I put the spaces in.

CODE wasn't going to do what you wanted, because it's the logical markup replacement for TT. It doesn't and can't escape anything inside it.

I know code works in RS, because I used code for everything monospaced in this diary.

Sorry again. When I think about it I can see why you reacted like that. But I really didn't mean to snipe at you, honest.
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

I can write escape sequences as well as anybody else, in fact I can write them in EBCDIC octal (I think...it was a long time ago.) I used the "clunky" way of writing it, as well as the older, deprecated tags because they have worked reliably for me.

Wow, Republicans really are troglodytes (Says the guy who remembers using a hex editor to cheat in Civilization and Curse of the Azure Bonds).
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

And perhaps another website, but you'd be surprised to know that until very recently there were a relatively large number of central computers at places you'd might not suspect still talking in EBCDIC. Insurance companies, in particular, are very slow to change when they find something that works. Why, right over here in my living room I've got the still-functional console to an IBM 370-138. It's a piece of modern art now.

We do need to have round two of our software debate sometime, too.

take care,
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

I bought a BEAUTIFUL IBM eServer, symmetric multiprocessor Pentium III 1.2Ghz (dual) system fully populated with functional 18 GB SCSI-160, fully configurable RAID and 2GB of RAM the other day on eBay for $75.

$75. Read that again.

This machine came out of Utah and it is PRISTINE inside and out. It was a failover server and you can eat off the inside of the chassis. It's going to be one of our three servers here at the new business and is absolutely spotless inside and out. I always strive to stay one generation behind the curve because I don't have the money to play the cutting edge. Save a lot of money that way.

Just wow.

I've traditionally saved money by assembling my own servers, but you have me beat!
--
If you're seeing shades of gray, it's because you're not looking close enough to see the black and white dots.

Come to think about, that's Al Gore's targeted electric bill for the average US household in 2011 - aka Gore(v)'s 5 Year Plan.

If you know where to look and are in the right place at the right time. That machine will work perfectly as a print server or a basic web server for at least three more years for a grand total of $75 bux. plus shipping.

And it's an IBM machine. Hot-swappable drives, quality hardware, meticulous bombproof construction. Runs like a scalded cat. Keep your eyes open for things like that, even eBay has them sometimes.

You're a jewel.

I meant what I said and I said what I meant. An elephant's faithful 100 percent.

You're a jewel.

I meant what I said and I said what I meant. An elephant's faithful 100 percent.

Beautiful. I've been looking for something like this for months, and just came across it. Thanks.

**********************************
And statesmen at her council met
Who knew the seasons when to take
Occasion by the hand, and make
The bounds of freedom wider yet
- Tennyson, _To the Queen_

 
Redstate Network Login:
(lost password?)


©2008 Eagle Publishing, Inc. All rights reserved. Legal, Copyright, and Terms of Service