code in your comments 101
For anybody who wants to use italics to quote a relevant passage or to hyperlink to a profile or post, but has been wondering how it's done, here are some instructions to get you started, and I'm sure others will have more to add.
If you've used HTML before, this won't be anything new. If it is new to you, don't hesitate to ask if you have any questions.
Basically you're going to wrap the text you want to alter in pairs of instructions (essentially start and stop) surrounded by angled brackets (the lesser than and greater than characters).
Update: I originally used square brackets [] so that the examples would appear as code but have now updated the examples to use angled brackets and still show up as code — see below for how to do this with character entities.
Some examples...
<em>your italicized text here</em>
'em' is short for emphasis; 'i' should work too but can't say that I've bothered trying it. Update: dyar confirmed it does.
<b>your bold text here</b>
You could use 'strong' instead of 'b' which would be better in a webpage but is longer to type so I confess to using the short option in this forum.
<a href="full URL here">your linked text here</a>
This is just like the previous one, with an a in place of the b, except we've added some additional instructions in the opening tag to tell it not only that is should be a link, but where that link should go when someone clicks on it.
Optional: add a 'tooltip' to your link.
<a href="http://www.etc.." title="tooltip text here">hover here</a>
I have a suggestion for using links in comments. If you put them in as you go, the lines become too long, the box gets scroll bars, and you have barely enough room to see what you're doing anymore. So what I do (when I remember to) is write my comment with tags as I go but leaving the URL empty until I'm done, then pasting it in last.
So my opening link tags would look like this: <a href=""> until I paste in the URL between the quotes.
I don't know what other code is permitted but these are the tools most used in the forums now, and they will really help to connect conversations that are split across different profile pages and forum posts.
You can see several tag experiments in the comments below; anything that does work I will add here.
Update: character entities work! [Thanks cdn!]
Basic format is to start with an ampersand (&) and end with a semicolon(;) and in between put either the mnemonic or a hash(#) and the number. There are lots of sites with reference charts etc., here's one or two.
Share your favorites!
Arrows (left, up, right, down) are #'s 8592-8595.
The < and > used for html tags can be done with < and >, and I was able to show you that without it turning into < and > because I used & for the ampersand (&).
Update: blockquote [Thank you Jen!]
Text in between blockquote tags will be set off from the rest of the text. Here's how to use it:
<blockquote cite="url">Your blockquoted text goes here.</blockquote>
How it looks will depend on your web browser and the CSS styles of the website. The cite="url" part is optional but if your blockquote is a quote from a web page, put the URL of the source there.
I'll update the end of this post to become a blockquote example:
Did you find this useful? — Leave a comment here or at my page, add me to your friends, or help me earn points by asking me to send you a set or two.
Get updates with RSS
Be the first to know about new products and free stuff from IconBuffet. Subscribe to our RSS feed:
Find work or post a listing at Authentic Jobs.
ehooton on Apr 07, 2007
Thanks for the great tutorial!
Luckybeitia on Apr 07, 2007
That was very usefull!! Thanks
dyar on Apr 07, 2007
[i][/i] works also replacing [] with <>
travisseitler on Apr 07, 2007
That's really [strong]interesting[/strong] and [strong]useful[/strong]!
travisseitler on Apr 07, 2007
(However, one wonders why [b]em[/b] replaces the deprecated "i" tag, but [b]strong[/b] is not likewise adopted to replace the equally-deprecated "b" tag.)
travisseitler on Apr 07, 2007
LOL! I just need to pay closer attention... [test]
epidemix on Apr 07, 2007
<u>foo</u> <s>bar</s>
mik on Apr 07, 2007
experiments..
<ins>ins</ins>
<del>del</del>
<strike>strike</strike>
<ul><li>list item in ul</li></ul>
<small>small</small>
@dyar Thanks for confirming i works too.
@travisseitler Thanks for confirming strong works - eventually. ;)
I have added a title attribute to a link tag, but if and how it appears as a tool-tip depends on the browser.
justG on Apr 09, 2007
Regarding the textbox being too small, a tip for OmniWeb (OS X) users: click on the wee "+" box in the text box's scrollbar area to pop open a nice, big, floating editing window. Text entered in it will automatically appear in the text box when the window is closed. This is the first and only site on which I've used that thing, but now that I've discovered it, I find it quite handy.
cdn on Apr 09, 2007
Actually, I just pasted it ↓ in, I didn't use its entity then or now...
tamashii on Apr 09, 2007
Quotation marks & Apostrophes
8216 ‘ ‘ left single quotation mark
8217 ’ ’ right single quotation mark
8220 “ “ left double quotation mark
8221 ” ” right double quotation mark
They’re my favorite because they’re the right ones to use.
dgtlb on Apr 11, 2007
@travisseitler: maybe b/c is much shorter than , and we are lazy.
dgtlb on Apr 11, 2007
ha, me so funny... meant [b] shorter than [strong]. trial and error i suppose. but you know what i mean. dont ya?
rajr19 on Apr 11, 2007
test
<span>hola</span>
rajr19 on Apr 11, 2007
nooo. didn't work. does this?
smalltide on Apr 16, 2007
Just curious if it strips the style attribute on this bold red text.
smalltide on Apr 16, 2007
oh well
fuseunderground on Apr 16, 2007
has someone turned on bold for the whole page? lol
dishg on Apr 16, 2007
let me try 'un-bold'ing it...
dishg on Apr 16, 2007
sweeet =)
LoopyMind on Apr 16, 2007
as far as URL's go...i'm just leazy...
MobiTec on Apr 16, 2007
Albert Einstein: <q>Do not worry about your difficulties in Mathematics. I can assure you mine are still greater.</q>
Luckybeitia on Apr 16, 2007
unbolding ...
Luckybeitia on Apr 16, 2007
doesn't work hehe
Grusella on Apr 16, 2007
Nice tutorial!!
By the way, here is my test:
Bold using strong tag
Bold using b tag
Italics using em tag
Italics using i tag
<u>Underlined?? using u tag</u>
<s>strikethrough using s tag</s>
<strike>strikethrough using strike tag</strike>
<tt>Teletype text using tt tag</tt>
Grusella on Apr 16, 2007
My Profile
mattdetails on Apr 16, 2007
hmm weird
mattdetails on Apr 16, 2007
I think I might have fixed it ;)
mik on Apr 16, 2007
Wow, craziness! An opening <strong> tag in dgtlb's comment carried through, oblivious, until mattdetails (thanks!) used a closing </strong> tag.
justG on Apr 16, 2007
I don't think that anyone but one of the chefs can fix the orphaned tag, tho' I'm not certain of that.
Jen on Apr 19, 2007
Does
Jen on Apr 19, 2007
found another one Mik! blockquote
Candy on Apr 19, 2007
useful! ha.
zelexir on Apr 19, 2007
<<center>So what htmltags really works?<</center>
lparziale on Apr 19, 2007
Nice tutorial
socrates on Apr 19, 2007
<blink>sorry had to try worst HTML tag ever</blink>
lparziale on Apr 19, 2007
<center>Last center did not work - but it normally doesn't in blogs.</center>
mik on Apr 19, 2007
@Jen: Thanks for the new discovery! I had tried <q> (sorry folks, doesn't work) but not blockquote.
@socrates: Shh! Don't resurrect such painful memories!
dyar on Apr 19, 2007
Avatars
we'll see if target=_blank works
dyar on Apr 19, 2007
The link works but it doesn't open it in a new window.
Candy on Apr 19, 2007
Oh god. If blink worked I'd have a headache. I don't even thik thats widely supported by many browsers anymore.
slypix on Apr 24, 2007
awesome tutorial mik.
electricnet
on Apr 24, 2007
Yes, when you open tags, they aren't automatically closed, but as we saw, you can remove that by typing an ending tag in another comment. However, seeing as the profile box on profile pages is in reverse chronological order, you'll actually have to close any bold tags before they appear, making it impossible to fix an all bolded page due to an unclosed tag, so you'd actually have to delete the message that's causing errors to make it go away. :O
opello on Apr 25, 2007
The chefs might consider fixing that aspect, detecting unclosed tags is pretty trivial with a stack. :)
The <blockquote> tag seems a bit out of step with the other styles on the page though. I would have thought indented from the comment body, instead of wider than the regular comment.
But, I guess it's just opinion.
electricnet
on Apr 25, 2007
Blockquote also works when it's wider, in my opinion. As long as it's not the same width. However, when in 100% wide places, like in blog entry as seen above, it's the same width, and it doesn't really look blockquote-ish.
grilix on Apr 26, 2007
lists (<ul></ul>) and divs(<div></div>) doesn't works.
justG on Apr 26, 2007
Yeah.. that's a good thing. The extent to which the text of a post can be styled should really be left to the site's designers, not to users. The style attribute in one of the allowed tags would let us basically do what we want wrt style/format, which has the potential to render the forums... hideous.
electricnet
on Apr 26, 2007
I wouldn't expect the style attribute to be allowed either. It'll be MADNESS! ;D
tamashii on Apr 26, 2007
I wish they allowed named anchors within the page.
For example if I could put < a name="01">Item 01< /a> and at the top (or anywhere) have a link to that name, that would be very helpful indeed.
predrag on May 16, 2007
You can add title="xyz", too.
example: go to my profile
mik on Jun 18, 2007
update - incorporated title attribute, as shown by predrag above, with hyperlink instructions.
aemcg on Jun 21, 2007
I just wanted to see it work
Liquix
on Jun 21, 2007
Bolding text is fun =p
cdncx on Jun 21, 2007
tamashii : what about elements with ids - modern browser can link to those with fragments
tamashii on Jun 21, 2007
@cdncx: sure - but these forums don't allow that code, apparently.
mik on Jun 21, 2007
We can't add our own anchors but there are existing ones we can use. For instance, tamashii's comment above mine has an id of "comment_117007" so this link will go directly to that comment. Since you're here that's not very useful I guess. How about a link to my box?
prophetessjanet on Jun 22, 2007
thanks for the tutor...j
raj47i on Jun 29, 2007
Really useful!
anti on Jun 29, 2007
Firefox users can use the extention It's All Text! and edit the posts right in their favorite text editor.
gswd on Jul 05, 2007
As would be indicated by anti's post, the blockquote does not behave well in the forum responses. You need to make sure you come down a few lines, otherwise it will be hidden under your avatar.
bdelisio on Jul 12, 2007
jameshilton did some testing and found this
jameshilton on Jul 12, 2007
Blinking hell!
To make titles blink, scroll or to change the font as i did in my Blog
<blink>BLINK TAG</blink>
<marquee>SCROLLING TAG</marquee>
<font>FACE TAG</font>
Don't bother, the masters don't like it!
KatieK on Jul 12, 2007
And now the strike tag doesn't work. D'oh!
tamashii on Jul 12, 2007
I'm sorry - not allowing these type of tags in posts is pointless… I do not agree with this kind of moderation over the forum.
austingirl on Jul 12, 2007
Once again, I must agree with tamashii on the point that I do not agree with this kind of moderation over the forum, either. I can understand with the blinking (epileptics), but the rest is just fun (creativity). Besides, I learned something new. I enjoy learning and creativity.
mik on Jul 12, 2007
More than just creativity of presentation, tags like 'del' have structural meaning. And considering web designers are a significant slice of the population at IB, allowing 'code' seems like a good and harmless idea to me.
Are these decisions of what to allow or not just part of some more general settings or are the chefs picking and choosing? I would have assumed the former until something that used to work was changed.
mik on Jul 12, 2007
@tamashii- I am jealous of people agreeing with you. Or am I too late and you're not being jealous anymore?
jameshilton on Jul 12, 2007
Hey Guys, I'm sorry i caused the loss of the strike tag, i was just experimenting with the tags. I'm a little upset with the Chiefs for blocking my blog and disabling html in the blog title.
katylava on Jul 12, 2007
they might not be disabling the tags permanently... if it were my site, my first step would be to disable them all until i could figure out which ones should be allowed.
tamashii on Jul 12, 2007
@mik: no no - i am still jealous
iconmaster on Jul 12, 2007
It was simply easiest to disable HTML in thread titles. I'm not against the use of strikethrough, for example; but it's more development effort than we want to invest at this time to allow some and not others.
Allowed code in the blog contents wasn't changed.
robbyrice on Jul 12, 2007
so that's what the twitter was about.
Laurwren on Jul 18, 2007
Mik is one of the most helpful people I know on IB! Thanks for all your efforts.
mik on Jul 19, 2007
^blushing
Thank you Laurwren and all the others who have thanked me here and on my page. I'm so glad so many people have found this useful, not only at IB but on their own websites as well!
All thanks is happily shared with everyone who contributed to the information here, and of course the IB chefs — especially the ones who deal with code as well as icons.
SawanM
on Aug 30, 2007
starboard on Sep 19, 2007
thanks. :D
aleang on Oct 25, 2007
I'm still having problem on making the POP UP message on text (title="..."?)
thedudedean on Oct 26, 2007
Just so you know alt and title tags work as well. But img tags do not.
mik on Oct 26, 2007
@aleang: Can you post an example of what you've tried, and we'll figure out what you need?
mik on Nov 29, 2007
bump, due to same topic coming up fresh
supertux on Nov 29, 2007
How do I link within a page (or to a spot within another page)? Its been a while since I've coded....
soprano on Nov 29, 2007
Like this: <a href="#yellow">yellow banner</a> produces yellow banner.
supertux on Nov 29, 2007
Please excuse my ignorance, but how do you know what the tags are called. Ex. how did you know the banner tag was "#yellow"?
dyar on Nov 29, 2007
View Source - your above post is "comment_298209"
alethiophile on Nov 29, 2007
Testing (it probably won't work):
alethiophile on Nov 29, 2007
Ok, it knows to hide the tags (will put my text below), but it doesn't execute it.
I did:
<script type="text/javascript">
alert("Test")
</script>
supertux on Nov 30, 2007
Thanks- dyar. My first comment.
alethiophile on Nov 30, 2007
I wish scripts would work. Oh well...
alethiophile on Nov 30, 2007
Though, with scripts, you can do most anything to a Web page, so it's probably prudent that they don't let you.
alethiophile on Nov 30, 2007
Testing:
<form>
<input>
</input>
</form>
alethiophile on Nov 30, 2007
Nope.
supertux on Dec 09, 2007
Also, to contribute to this thread, I have discovered a useful method of producing bullets (as in a list), however it really has nothing to do with HTML.
• On the mac, you press Option - 8
• I do not know how it is done on windows, but I'm sure you can always cut-and-paste. ;)
emanaton on Dec 09, 2007
This is a code block test:
<code>
.gooberpease {
color: red;
}
</code>
emanaton on Dec 09, 2007
Bummer... guess not...
emanaton on Dec 09, 2007
This is a pre block test:
<pre>
.gooberpease {
color: red;
}
</pre>
emanaton on Dec 09, 2007
Double bummer...
supertux on Dec 09, 2007
lol. This thread is the HTML lab of IB.
:)
iamback on Jan 30, 2008
super-new here, and I just found this. I'd already guessed some of it (after wondering about BBCode, Textile, MarkDown and such), until it hit me that some real HTML might be allowed.
I'm really missing code and pre, of course! :(
Still, a useful writeup - bookmarked, thanks.
louiemctool on Feb 29, 2008
• this is a bulleted item. use bullet tag...
:)
louiemctool on Feb 29, 2008
which, if'n ye didn't know, is •
:D
emanaton on Mar 13, 2008
Greetings All,
• The problem with useing • instead of the traditional <ul><li> tags is that you lose the nice text indentation when the line wraps.
• However, if you are just a little bit clever, there is a hackish way
around this by using line breaks and the char! =o) what
you do is manually break the line (press enter) and put
at the beginning of the new line. It's not perfect, but it creates the
desired effect if you're into it.
Emanaton dot com
§ » IB Pagan × § » IB Geek Girl Fanboy of csmaccath × § » IB Group 2 × § » IB ReallyMe × § » The Pirates × § » IB Monks
awm on Mar 17, 2008
great info
B3llit0 on Apr 22, 2008
See if we can glitch the HTML:
</body>
</html>
B3llit0 on Apr 22, 2008
MUAHAHA EVERYTHING FROM THE ABOVE POST ON IS BOLD! Now for some endless italics, etc…
B3llit0 on Apr 22, 2008
Haha, I screwed up the text styles at the bottom of the page. Don't close the tags and it works…
iqon on Apr 22, 2008
ARRRRR
B3llit0 on Apr 22, 2008
all ur texts are belong to us. u has closed my bold tag. I puts back nao. i blockquotes rest of page nao!
B3llit0 on Apr 22, 2008
onoez, doesn't work.
MrDee on Apr 22, 2008
better now?
anti on Apr 22, 2008
now.
miranoriel on May 05, 2008
Maaaaaaan, there really oughta be a search function for this site.
Really.
emanaton on May 05, 2008
@miranoriel: but there IS! From google...:
site:www.iconbuffet.com miranoriel
iqon on May 05, 2008
whoisgregg created a very nice search page
miranoriel on May 05, 2008
@emanaton: *blink* wooooo i see meeee...
@iqon: <paris>That's hot.</paris>
But shouldn't that be something that's incorporated into the site itself? It just seems counter-intuitive to go out and use a separate search utility because the site lacks its own. If whoisgregg could come up with something so slick and handy, I simply wonder why it couldn't be done by the chefs. *shrug*
Sorry about the off-topic musings, mik.
And now back to your regularly scheduled shooooo...
MrDee on May 22, 2008
any way to do colour? (or color if you spell funny)
soprano on Jul 16, 2008
I don't think so.
B3llit0 on Jul 17, 2008
I wish we could do CSS.
louiemctool on Jul 17, 2008
technically, you COULD just make a stylesheet for use with the Stylish plugin...
i use the one the esteemed THiC made.
:D