Citizen Dog by Mark O'Hare for June 26, 2008

I’m posting some my tips on formatting comments, posting (hyper)links and embedding images. I’ll also post other commenter’s tips. Feel free to add any tip or tricks that you come up with.

Here’s a quick refresher in text formattingNote that all the tags are used in pairs (except <hr> and <img src=…>). HTML tags are enclosed in angled brackets with an opening tag <tag> and closing tag </tag>. Shortcut keys use the same character to open and close. Popular font tags:

Attribute (HTML tag, Shortcut key)

Bold (b, *)What you type: This is <b>Bold text<b> or This is *Bold text* What we see: This is Bold textWhat you type: Howdy <b>S</b>tel<b>B</b>el What we see: Howdy StelBel

Italic (I, _)What you type: <i>Howdy<i> or _Howdy_What we see: Howdy

A note about shortcut keys (*, _, -, +,^ ,~). They only work with whole words or phrases. So to emphasize character(s) within a word you must the HTML tag. (see Bold examples above)

Here are some addition font codes;

Subscript (sub, ~)What you type: H₂SO₄What we see: H2SO4

Superscript (sup, ^)What you type: C³IWhat we see: C3I

Insert (ins, +)What you type: This why we <ins>love</ins> fall What we see: This why we love fall

Delete (del, – )What you type: This why we -hate- love fall What we see: This why we hate love fall

Small Text (small)What you type: Hey, <small>Let's see some small text</small>What we see: Hey, Let’s see some small text

Big Text (big)What you type: Another <big>big</big> idea What we see: Another big idea

Tags can be combined for more effects.What you type: *<big>S</big>tel<big>B</big>el*What we see: StelBel

What you type:

<big><big><big>f</big>f</big>f</big>f

<small>f<small>f<small>fff</small>

f</small>f</small>f

<big>f<big>f<big>f<big>f<big>f

</big>f</big>f</big>f</big>What we see:

ffffffffffffffffffffHorizontal Rule (hr)What you type: <hr>Blank line (p)What you type:

Witty comment<p>*Good morning Citizens of Dog*What we see:

Witty comment

Good Morning Citizens of Dog

Here’s how to post images from Bing Images.First here’s your model for images:<img src='URL' width='200'>1.Copy the above into your text editor (Notepad).2.Search in Bing Images for just the right image.3.Left click on it to open the image page.4.Right click on the image5.Select Copy image location or Copy shortcut (This step is browser dependant.)6.Back in Notepad select URL (just letters not the quotes.)7.Paste to replace URL with the image URL.Now the code should look something like this;<img src='http://www.artofbryan.com/cartoons/cartoon10_thmb.jpg' width='200'>8.Select all and paste into the comment box.

To adjust the size, change the width, anything up to 350.To separate the image and text add a paragraph break <p> before/after the image code.The Mac equivalent of Notepad is TextEditIf this is confusing, StelBel can sort you out.

StelBel said, way back whenHere’s what I did:1.Left click on photo. (a larger version will come up on another page.)

2.Right click on the photo. A menu will come up. (If you have Firefox, left click on “Copy image location”, acc. to x_Tech. We have Explorer, so I left clicked on “Copy shortcut”)

3. Paste the URL into a comment box here.

4.Put your blinking cursor at the BEGINNING of the URL and type exactly: <img src=’ no space between ’ and URL

(note: pay attention to the small quote marks ( ’ )…they are important)

5. Then, at the end of the photo URL, put your blinking cursor exactly after where it says .jpg and type:’ width=’200’>

(NO spaces between jpg and the quote mark ( ’ ).

6. Click SUBMIT (give it a few seconds. Mine came up one line at a time.)

I hope this is clear. Take it one step at a time. It really looks more difficult than it is.Good luck!

Here’s an even easier method. Now follow closely. Go to photo bucket. In the ‘search site’ type emoteicons (or cats, dogs, whatever) and hit Enter. (You don’t need a photobucket account to do this) When you hover the mouse over an image a Share box appears, click once on the HTML code box. Next in a GoComics comment Paste (CTRL+v), add any text you want and SUBMIT. That’s all there is to it.Hope you could follow all that.

To insert HTML code exact as it should be typed use the “code” tag.You type: <code><big>Big Text</big></code>We see: <big>Big Text</big>The shortcut key for the code tag is @

To post two images side by side try;<img src='URL' width='150'><img src='URL' width='150'>You can post several images as long as the combined width doesn’t exceed 350.See No.6’s 7 “Cyrils” line dancing.

Adding A Link To Your Comment

Here’s the model for a [hyper]link.<a href='URL'>Blue text about link</a>

1.Copy the model to the comment box or to Notepad (Windows) or Textedit (Mac).

2.Find the page you want to link and copy the URL from the address box (the addy).

3.Select the letters URL in the model (but not the quotes).

4.And Paste to replace the URL with the addy.

5.Replace “Blue text about link” with text that describe the link or simply “Click here”.

6.If you’re using Notepad or Textedit copy and paste to the comment box.

7.Submit your post and you’re done.

From the thread at Citizen Dog 12/07/12 Stel, what you’ve done is to reveal the short cut code for <img src='URL' alt=' '>.That’s right, if you enclose anything (except a blank space) within !s GoComics changes it an image link.If you type: !http://img.photobucket.com/albums/v283/robert2k/emoticons/gif.gif!HTML code: <img src='http://img.photobucket.com/albums/v283/robert2k/emoticons/gif.gif ' alt''> We see: That square with the red x means that your browser was expecting a URL (addy) there. (It doesn’t show in all browsers.)

From the thread at Citizen Dog 12/07/12 To size the image add ‘width=’200! immediately after the addy (URL) with no spaces. You type: !http://www.smartkitchen.com/blog/wp-content/uploads/wild-turkeys.jpg'width='200!Result HTML code: <img src='http://www.smartkitchen.com/blog/wp-content/uploads/wild-turkeys.jpg'width='200' alt='' />

We see: She Is Clearly Not Impressed

My brain is too little.

I’ve never tried the “!” tag….

wow, cool!

That code actually uses single quotes, right, X?

X… Do you mean I could actually use single quotes instead of double in even the regular HTML code for pictures?

I’ve noticed that using either <code> </code> or the @ shortcut (which I learned from this page, thanks) for posting visible code changes all the quotes to single… so I’ve thought I had to warn people to change them back…. silly me.OK…. I experimented and that seems to work…. but not for the double quotes that surround any alt text (which AFAIK this site doesn’t show anyway.)I imagine you’d find smart quotes had been substituted if you tried writing code in a word processor…. not a good idea anyway cos of possible hidden control or formatting characters.

I stick to Notepad or directly typing in the comment box. WYSIWYG

and thanks for coming back today and answering the first one!

From the thread at Citizen Dog 2012/09/26 StelBel said, 32 minutes ago@Dry Thank you Sir! Thank you very much! ;-D“One question, how do you know it will need re-sized before you post it? Just by looking at it and thinking it will look too big?”+++++++++++++++++++++++++++Now that you know where to put the size info, just get used to always putting it in. In other words, every time I post a picture, I always put the width between 200 and 300. So, after jpeg, this is what I type:jpeg’width=’250’>The only time that didn’t work was the photo I ended up not using today…no matter what I did, the size wouldn’t change.The limit here used to be 350, but now with these pictures showing up today larger than the comment box, I wonder if GoComics increased its limit?

“Thank you Sir! Thank you very much! ;-DOne question, how do you know it will need re-sized before you post it? Just by looking at it and thinking it will look too big?”+++++++++++++++++++++++In a word YesThe trick is to view the right image. When you search Photobucket you get pages of thumbnail images (images of reduced size). To view the image’s actual size click on it to open its page. The image here is pretty much the size it would be when post to GoComics without the width modifier. If you’re still not sure, at the right side of the page look for Photo info and click the drop down. For photos look for Resolution, for instance your Dogs playing in snow has Resolution: 640 × 480. (if Resolution isn’t listed look at the File size.) The first number (640) is the value we’re interested in as it is the image width. The whole comment box is about 375 wide (biggest image 365 but I tell people 350). Now if you go back to the first Dogs playing in snow you posted you can see just how much bigger an image of 640 than the comment box. Thus the need for the width modifier.

Anyhow, generally speaking a photo will need the width, while small animations like Smileys and emoticons won’t.

TMI?Then just follow StelBel’s advice and add width=‘250’.

From a thread at Citizen Dog 2012/10/03 Okay, ryku7 let’s look at your image post Not sure what you posted but this is what your browser saw.

<img src="*urlthCA5Z7AVS`WIDTH'=`350'">

Little things first. The link must not contain the characters like ` or * or curly (smart) quote marks.Next you must use a valid URL which urlthCA5Z7AVS is not. Please refer to early comments here about Bing Images and Photobucket URLs.

@StelBel Re the overlap:Don’t know what happens but it seems when there’s a unfilled image reference (my term) it will cause an following comment to collapse. Rather metaphysical. Number Two referenced several obsolete avatar images (above) and you can see the result.Note to Number 2: Please don’t delete those, as they are an interesting example.

@ryku7 Re: Big TopYes, please don’t use ten <big> in a row. Some are ok but remember for each <big> there should be a </big> (see the style guide above for examples)

ryku7

Are you here???

yes

ready

still there? Thought you weren’t going to show…

“Smart quotes!!!”

who me no i lesson the i make a decion and beside u are right practie makes perfect

I think the problem is the quotation marks. You may have smart quotes, which can really mess things up. Try replacing the double quotation marks "with and apostrophe ’everywhere it appears in the code. Don’t go creating spaces anywhere.

yo stel try ctrl and – its funny

<img src=‘http://i1049.photobucket.com/albums/s381/pxgtre/happy_halloween_zps449087aa.jpg’ =’250’>

ohh u wasnt talking to me my mistake

stel going to the big top relly fast be right back

<img src=‘http://i1049.photobucket.com/albums/s381/pxgtre/happy_halloween_zps449087aa.jpg’ =’250’>

<img src=‘http://i1049.photobucket.com/albums/s381/pxgtre/happy_halloween_zps449087aa.jpg’=’250’>

THIS is frustrating! it looks right, but yet somethings wrong. Give me a minute or two, ok?

<img src=‘http://i1049.photobucket.com/albums/s381/pxgtre/happy_halloween_zps449087aa.jpg’=’250>

k come to the big top and come and get me when u done k and u might want to order some food its the only way u can enter k or a drink

Tell me where on photobucket did you get this. Something must be missing, but can’t see what. What did you search under and on what page?

under happy and when u get the picture come to the big top comic strip and come and get me note u have to order something to enter that place k

well stel what did u think of the big toppers

see ya

Remember to do all your editing in a pure ASCII editor (Notepad, eg) Whatever editor you used replaced double smart quotes with single smart quotes!

Like this:

Actually you’d also left out the word “width” and got the quotes around the ‘=’ and not the ‘250’

all the was wrong was the missing width the quotes were okay. It should be noted here that when GoComics can’t render the HTML (because of an error in the code) it will replace straight quotes with smart quotes. Then if you try to correct the resulting string without replacing the smart quotes the code fail yet again.

So it’s GoComics themselves that monkey with the quotes? That’s dastardly!

I always found those typos creeping in. That’s why I started doing it all with cut ‘n paste. First I’d find the URL I wanted (image or link) and paste it into Notepad. Then I’d go here and copy/paste the appropriate HTML tag into Notepad. Then assemble the whole thing and copy/paste into the comments box. If it doesn’t display right first time I still have a “virgin” copy in Notepad to tinker with.

That does sound handy. I’ve got Word set to expect a hammer blow if it tries to auto correct my typing!

From a thread at Citizendog/2012/10/26 re posting images from Photobucket’s new format.

x

Tech said some days ago

Okay, the quickest way to insert an image found at Photobucket (new format) is to hover on the gear icon and select Get media links. From the Share the Photo popup click Direct Link copied should appear.Paste the link into the comment box and enclose it in “!” points (StelBel’s secret shortcut) like this.

!http://i252.photobucket.com/albums/hh37/OxFairyDustxO/Puppies/photo_zps66be456a.jpg!

Copy the whole comment (Ctrl-a Ctrl-c) then Submit.

Ooops, that was a bit too big wasn’t it!!In a new comment box paste your saved comment (I told you to copy it didn’t I?)Now change the link by adding the width modifier.

'width='200 and copy the comment again and Submit.

!http://i252.photobucket.com/albums/hh37/OxFairyDustxO/Puppies/photo_zps66be456a.jpg'width='200!

Don’t forget to delete the earlier post.

x_Tech said some hours ago@Dry & StelBel glad you found my post helpful. You’ve probably already noticed that they work with Bing Images or any place you can copy the image location or address.

A small correction here. The ~ is the shortcut for subscript.Note that subscript drops the baseline of the text and small does not.You type: ~Subscripted text~ and <small>small test</small>We see: Subscripted text and small test

Hacking the GoComics AvatarsTo get the full sized image from an avatar means you have to hack the code. This not for the faint hearted. For this example I will use SusanSunshines avatar.

Note some steps are browser dependent (i.e. [Firefox | Internet Explorer]).

1.Right click the avatar and [Copy image location | Copy shortcut] to get the addy (URL).2.Paste the addy into Notepad (or Textedit). Do this twice, so you can keep one good one while you mess with the other. This is the code you will hack.

http://s3.amazonaws.com/avatars.gocomics.com/avatars_gocomicsver3/1445000/1445876/thumb_sunshine.jpg

3.Look for thumb_ or large_ in the code and delete it from one copy only.4.Save your work!5.Next enclose the modified code in ! and Copy

!http://s3.amazonaws.com/avatars.gocomics.com/avatars_gocomicsver3/1445000/1445876/sunshine.jpg!

6.Find an archive page that no one uses (Old Citizen Dog) and Paste and Submit.7.If it worked you should get…

8.If it didn’t work, delete the post and recheck your work. But if it did (and don’t worry about size), right click and [Save Image As | Save Picture As] or if you have the Firefox add on [Upload to Photobucket]9.Delete the post. (Be polite, clean up the work space.)10.Once you have the full avatar image on Photobucket, Flickr or whatever you can size it and post it as you would any image.

It should be noted that if Susan should change her avatar (ya, like that’s goin’ happen) then the link will become invalid as GoComics only keeps the image of the current avatar. So if you like the avatar you should make a copy of the larger image (Step 8).

Whoa!!!

I’ve been posterised!

A person should warn a girl before holding up a giant mirror like that!Good thing I wasn’t drinking my morning ..er afternoon coffee!

And yup, that’s how I do it too….except I leave out a couple of steps cos I don’t eally care whether I preserve the image url once I get there.

I just right-click the image, grab the URL, and paste it into the address bar of a fresh browser window.

Then I click right after the last forward slash (/) and delete “thumb” or “large” and its following underscore (_) click the little arrow at the end, and go there…. just to make sure I like the picture.

At that point I can save the picture in the usual way, if I want it, or just post the URL with exclamation points or the Img src code, adding a width attribute if needed.

X… I answered you on DS too.

That cat can apparently sleep through anything!

Posting, re-posting, flying through space and along the innerwebs…. zzzz…

Horizontal Lines:

Here are some attributes you can add to the <hr> tag.

You type:<hr width='80'><hr width='80%'><hr width='50%'>

We see:

The StelBel Sanction

To post an image, enclose the URL (addy) in “!” exclamation points.

Form a thread at Citizen Dog

Indent TextTo indent text from both the left and the right use <blockquote></blockquote>. This is useful when quote another commentor. You type:

<blockquote> But, I think that since I did -stumble across- discover the “exclamation point one”, it should be heretofore known as *The StelBel Sanction* (soon to be a major motion picture…)!</blockquote><hr width='80%'>

We See:

But, I think that since I did stumble across discover the “exclamation point one”, it should be heretofore known as The StelBel Sanction (soon to be a major motion picture…)!You can add emphasis by adding a horizontal rule. <hr width='80%'> as I did above.

For even more indentation you can enclose blockquotes within blockquotes.

So you can make a wasp-waisted comment

if you just keep putting in blockquotes inside your blockquote tags, and drive everybody right up the wall?

Let’s see whether it works….LOL…

I’ve known the <HR> tag for a long time but didn’t know you could set parameters like pixels or percentage.

Thanks, X!

Okay it’s 6 AM (pst) and my comments keep disappearing. Some of you have mentioned this before but without seeing the comment, it’s hard to debug (yeah, like any invisible sh@t is easy). Pardon me if you know this already but I’ve spent all night on this so I’m going to Rant.

Simply put, GoComics, in their infinite wisdom, no longer allow fancy characters (if it ain’t on your key board you’re SOL).What do I mean "Fancy"_? Well characters like Smart Quotes for one, most anything from the Character Map for another.So what happens? Say you copy another commentors post into yours. If it contains an apostrophe, single or double quotes you’ll notice that they are the curly type (’, “, ”). If your post contains any of these symbols then the entire post just disappears (into that alternate verse where things work you think they should). This also happens if write your comment in Word (with Smart Quote enabled) and then copy to the comment box.The same goes characters and symbols copied from the character map.

So now you’re thinking “Hey, I’ll just copy Bev’s comment into Notepad add my 2¢ worth and copy back to GoComics.” Nope, SorryNotepad retains the curly quotes. So you’ve to Find|Replace them first.

And those of you that use Alt+num to insert symbols, that don’t work no more either.

By now those of you that have had their morning coffee/tea/beverage may have noticed that this comment contains some special characters. ¶

I’ve done this by inserting HTML number codes.I type: One quarter &#188; plus one half &#189; equals = three quarters &#190;You see: One quarter ¼ plus one half ½ equals = three quarters ¾

Not a lot symbols on that page, After I get some sleep I’ll look for more unless someone finds them first (StelBel, Susan?)More

symbols.asp’>Symbols

I am trying to copy my own comments from Ballard St. to here, and they won’t post. They posted at BS and not here. I didn’t use anything that is not on the keyboard. What is going on???

This is gnawing at my last nerve. I’m about a half step away from just quittting GoComics for good.

THREE TIMES, I went through the long series of comments that I copied from Ballard St and replaced all the apostrophes and quotation marks, thinking AHA! That’s what I needed to do. I even broke it up in sections, so that I would be unlikely to miss any. Still, NO LUCK!!!

I am disgusted that I cannot even copy and paste my own comments, much less anyone else’s. You can imagine what swears are coming out of my mouth right now! I give up.

The Unicode characters tables.(These tables include all the characters and symbols in Character Map)

UTF-8 For

numerical HTML encodingof the Unicode character select decimal

go to other block to select the character set (i.e. Currency Symbols, Dingbats)

Use the &#num; to insert symbols/characters. Be sure to use the ending semicolon.

Re: Disappearing comment;Note: If you type your comment in Word or copy a quote from another comment that contains three periods … (horizontal ellipsis) the comment will disappear (surprise!).

When you paste into the comment box place the cursor after last period and Backspace once if all three disappear it was an ellipsis.

Now you can type three periods and submit. And, hopefully, if your comment has no other special characters (anything NOT in the ASCII Character Set) your comment will post.

Happy Birthday X-Tech

Happy Birthday X-Tech

Now I can’t delete my practice-hope I can sometime later

Update

The StelBel SanctionNo long works. Use the HTML tag <img src='URL' width='350'> for posting images.

Good NewsNow we have color for both text and horizontal lines.

For text use: <font color='colorname'>text</font>where colorname can be either a name, like Red or a RGB code number (in the form #rrggbb [more in a bit]1).

For horizontal line (Rules) use:<hr color='colorname' width='80%'>width is optional as is color.

1The RGB code number is three hexadecimal numbers representing the Red, Green, and Blue values of the color. You can use a chart like HTML Color Codes to pick any shade of color that suits you.

For more color name see HTML Color Names if you don’t want mess with hex codes.

Other things you do with lines:

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

<hr align="left" noshade="" size="10" width="50"><hr align="left" color="MediumSeaGreen " size="10" width="50">

Good News

Font SamplesHere’s a sampling of fonts available on Windows systems.If any of the sample fonts look like this font that means it’s not installed on your computer (at least by the same name).

The Times Roman font Comic Sans MS – good for cartoons and suchGabriola – This is DAZZ’s favoriteAlgerian – good for announcements (all caps)Curlz MT – A fun font but you’ll want to make it biggerBradley Hand ITC – for those ransom notesBrush Script MT – for outdoor signs

HTML tag:<font face='fontname'>your text</font>

Disclaimer: While the font may be on your computer doesn’t mean it’s on everyone’s, so result may vary from system to system.

http://photobucket.com/images/aurora%20borealis

Poop.

<width=200>

Double poop.

Oh!!

And as of today, March 18th 2015, the font tag stopped working… along with iFrame, marquee, and putting text over background images.

Will they ever be reinstated?

<Center> no longer works but <blockquote> does.

Tips for the New GoComics:

 

Navigation Tip: Instead of right clicking the strip title and opening in a new tab|window as we use to do, right click on the speech balloon and open in a new tab|window. This way you won’t have to reload your comic page when you want to go to another comic.

 

Screen Name/Avatar: Click on your Avatar (top of the screen to the right of shop) and select My Profile and click EDIT. Then you change your display name and/or update your avatar.

 

Editing a comment: Until you refresh the page pressing Ctrl + Z in the comment box will re-display your comment so you can edit it and then repost it (then you can delete the previous one).

 

Creating a Blank Line: Type Enter Enter &nbsp; Enter Enter (&nbsp; stands for nON bREAKING spACE)