List of HTML codes

classic Classic list List threaded Threaded
20 messages Options
Reply | Threaded
Open this post in threaded view
|

List of HTML codes

DavidJCobb
Administrator
This post was updated on .

List of HTML codes

Basic formatting

<br>
Line break.
(In HTML, simply hitting "Enter" won't work. Line breaks are ignored, so that we can format our code all nice and neat without it breaking things. You MUST use the BR tag.)
<b>Text</b>
Bold text. (Text)
<i>Text</i>
Italicized text. (Text)
<u>Text</u>
Underlined text. (Text)
<strong>Text</strong>
Strong text. Screen readers add verbal emphasis to this, but not to bold. (Text)
<em>Text</em>
Emphasized text. Screen readers add verbal emphasis to this, but not to italics. If you're a nerd like me, you'll want to use I for book titles and such, and EM for actual emphasis. (Text)
<s>Text</s>
Strikethrough text. (Text)
<code>Text</code>
Code text, inline. (Text)
<a href="http://google.com/">Text</a>
Hyperlink (in this case, to Google). (Text)

CSS formatting

<span style="color:red">Text</span>
Colored text. (Text)
<span style="color:#FF0000">Text</span>
Colored text using hex codes. (Text)
<span style="color:transparent">Text</span>
Invisible text. Good for spoilers. Doesn't work in some older browsers. (Text)
<span style="font-size:24px">Text</span>
Pixel font size. (Text)
<span style="font-size:2em">Text</span>
Double font size. (Text)
<span style="font-size:200%">Text</span>
Double font size. (Text)
<span style="color:red;font-size:2em">Text</span>
Multiple properties. (Text)
<b style="color:red;font-size:2em">Text</b> <i style="color:purple">Text</i>
Multiple properties on other HTML tags. (Text Text)
<span style="color:transparent;font-size:9001em">Text</span>
Don't even think about it.

Objects

<img src="http://i55.tinypic.com/13yi6va.png">
Image.
<p>Paragraph text.</p>
Creates a paragraph with margins above and beneath. If you have multiple consecutive paragraphs, the margins will overlap (rather than stacking and doubling). You don't need BR tags before and after paragraphs, they're automatically set on their own line(s).
<h1>Text</h1>
Heading. It's automatically set on its own line, you don't need BR tags. You can use H1 through H6 for different levels of subheadings. It's bad practice to skip levels (i.e. from H1 to H3), though only nerds like me care about that stuff.
<hr>
Horizontal rule.
See?
<div> ... </div>
DIV tags basically act as invisible subsections. You can apply CSS to them (see below) in order to apply things like text alignment to large sections of your post.

Making an image a link, without a border

<a href="http://reachingperfection.com/"><img src="http://i55.tinypic.com/13yi6va.png" style="border:0"></a>

Unordered list

<ul>
   <li>List item</li>
   <li>List item</li>
</ul>
  • List item
  • List item

Ordered list

<ol>
   <li>List item</li>
   <li>List item</li>
</ol>
  1. List item
  2. List item

Nested lists (OH, WE'RE GETTING EXTREME NOW)

<ul>
   <li>
      List item. The spacing can be done however you want, I did it like this for clarity.
      <ul>
         <li>Nested list item</li>
         <li>This is a UL inside of a LI inside of a UL</li>
         <li>You can also put OLs in LIs in ULs</li>
         <li>You can nest any kind of list inside any other</li>
         <li>And you can nest as deep as you want</li>
         <li>Nested list item</li>
      </ul>
   </li>
   <li>List item</li>
</ul>
  • List item. The spacing can be done however you want, I did it like this for clarity.
    • Nested list item
    • This is a UL inside of a LI inside of a UL
    • You can also put OLs in LIs in ULs
    • You can nest any kind of list inside any other
    • And you can nest as deep as you want
    • Nested list item
  • List item

Definition lists

<dl>
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
   <dt>Definition term</dd>
   <dt>Alternate term/synonym</dt>
   <dd>Definition definition</dd>
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
</ul>
Definition term
Definition definition
Definition term
Alternate term/synonym
Definition definition
Definition term
Definition definition
Definition term
Definition definition

Styled definition lists (skin-based)

<dl class="cobbtastic">
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
   <dt>Definition term</dd>
   <dt>Alternate term/synonym</dt>
   <dd>Definition definition</dd>
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
   <dt>Definition term</dt>
   <dd>Definition definition</dt>
</ul>
Definition term
Definition definition
Definition term
Alternate term/synonym
Definition definition
Definition term
Definition definition
Definition term
Definition definition

Text alignment with DIVs

<div style="text-align:center">
Centered text.<br>
MOAR!<br>
<em>MOAR!!</em><br>
You can change "center" in the tag to "left" or "right".
</div>
Centered text.
MOAR!
MOAR!!
You can change "center" in the tag to "left" or "right".
Reply | Threaded
Open this post in threaded view
|

Re: @ Admins

noklu
Administrator
That's awesome Cobb. I'll quote that. Now, I forgot to mention that it would be useful to sticky miy thread and unsticky the others.
The otters are coming with whiskers honed to razor blades.
Know this and fear.

Email me at xnoklu[at]gmail.com should you need to contact me.
Reply | Threaded
Open this post in threaded view
|

Re: @ Admins

GodlyPerfection
Administrator
In reply to this post by DavidJCobb
Cobb I moved this to its own thread and stickied it in Site Affairs, please change the thread title to "List of HTML codes" or something similar.


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

external memory-2
In reply to this post by DavidJCobb
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator
External Memory wrote
Now, any excuses (besides laziness) for not posting beautiful map threads in your portfolios on RP guys? If they had any before, they don't anymore.

You'll still need HTML/CSS knowledge for anything... out-of-the-box... but this is a good reference for the kinds of formatting you'd find on the average BBCode forum.

Also, I added information on definition lists -- HTML tags used specifically for lists of terms and definitions, like you'd find in a glossary or the start/end of a textbook chapter. In particular, I added a CSS class ("cobbtastic") to the skin that one can leverage to make the lists a tad more stylish and readable.

Cobbtastic
Embodying qualities reminiscent of the local Lord of Awesome, His Awesomeness, DavidJCobb.
definition list
A list of terms and definitions, like those seen in textbooks and reference manuals. HTML contains three special tags -- DL, DT, DD -- specifically intended for use in creating definition lists.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator

New feature added. [skin-based]

It is now possible to create rollover effects when posting with HTML. Take a look at this code:

<div class="rp-rollover">
   <div class="rp-rollover-off">
      Mouse-over me!
   </div>
   <div class="rp-rollover-on">
      YES! OBEY MY WILL, SLAVE!
   </div>
</div>

Here's what that looks like when you post it (I added the indentation for clarity, it won't happen when you use this):

Mouse-over me!
YES! OBEY MY WILL, SLAVE!

The <div> tags are simple containers, you can use any HTML element you want. It's the CSS classes on them that make the magic happen. When a user positions their mouse over the element with the rp-rollover class, the rp-rollover-off element becomes invisible and the rp-rollover-on element becomes visible. When they move the mouse off, it returns to normal.

Note that you cannot nest rollovers.

Do not abuse this feature.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

Dj7291993
Administrator
In reply to this post by DavidJCobb
Hey Cobb, how can I make all of the text in my posts a certain color?  I can't just put it all in a color code anymore.  Well, not if I am typing it in html.  I've tried the older "font color" way, and the newer "span style", but neither will cover the whole body.  I can get them to work, but I have to use the on each section (see my sig).  Any suggestions?

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator
Dj7291993 wrote
Hey Cobb, how can I make all of the text in my posts a certain color? I can't just put it all in a color code anymore. Well, not if I am typing it in html. I've tried the older "font color" way, and the newer "span style", but neither will cover the whole body. I can get them to work, but I have to use the on each section (see my sig). Any suggestions?

Post the code that you're using. Don't bother, I realized what problem you're having.

The Nabble skin auto-applies colors to certain elements, i.e. P, LI, SMALL. If you use CSS (the "span style"), you'll have to put the colors on those elements as well (e.x. <p style="color:#ABCDEF">).

I can look into finding some way to make Nabble not give those elements their own color, and then edit the skin accordingly, if you need me to.

EDIT: You can do this, but it won't work in Internet Explorer 7 or lower. Not that anyone in their right mind would willingly browse the web with an outdated version of IE. Anyway, the code:

<div style="color:#ABCDEF"> 

   <p style="color:inherit"> 
      Text
   </p>

</div>

You'll still need to put STYLE attributes on each P, which I know is a pain in the ass, but if you ever want to change it later, you need only change the one STYLE attribute on the DIV (rather than changing one STYLE attribute for each of your seven-or-so Ps).

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

Dj7291993
Administrator
Ah, ok.  Thanks Cobb.  Kind of annoying, as that means I either have use more code, or stop using the paragraph tag.  :/  If you don't want to mess with the skins, that's fine.  It would be kinda cool if you could set text attributes for all of your posts, without affecting others, but I could see that getting out of hand.  Oh well, guess I'll just have to deal with it.

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

EarlyExecuter
In reply to this post by DavidJCobb
This is pretty cool. As a matter of fact, I'm gonna make another thread with color codes and major hexadecimal color codes. Might take me a couple hours but it'll be worth it :D
Brandon - GT : EarlyExecuter
What I do - I'm a Minigame Creator and Conventional Map Creator.

Need testing on a map or gametype? Just ask me =)

Don't be serious! Have fun!

Do the world a favor by not drinking and driving, nor texting and driving. You save lives every day.
R.I.P Lyla <3 - 16/06/11 - Accident : Drunk Driver hit our car.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator
In reply to this post by DavidJCobb

New feature added. [skin-based]

It is now possible to create (static) progress bars when posting with HTML. Take a look at this code:

<div class="rp-progress-bar">
   <i style="width:65%"></i>
   <span>Progress: 65%</span>
</div>

Here's what that looks like when you post it:

Progress: 65%

The <div> tags are a container for the progress bar. The I tag is the green strip in the background; you must set its width manually, as a % value. The contents of the SPAN tag are showed as centered text in the bar.

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

GodlyPerfection
Administrator
I didn't realize you were adding new features and what not... you fucking rock sir. If anyone tells you otherwise then they should cut themselves... lol. :P No you are not allowed to tell yourself otherwise.

Btw, is it possible to use images for the rollover code?


URL: http://i55.tinypic.com/13yi6va.png

Wanna help spread the word about ReachingPerfection.com at other sites? Use the image above and link back to us.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator
GodlyPerfection wrote
I didn't realize you were adding new features and what not... you fucking rock sir. If anyone tells you otherwise then they should cut themselves... lol. :P No you are not allowed to tell yourself otherwise.

Btw, is it possible to use images for the rollover code?

Yeah, I just add these things whenever I do something interesting in a forum post, and I feel like others might find it useful.

Rollover functionality should work for images, yeah. Here's a basic hover with inline-block set, so that the "trigger" area doesn't expand to fit as much width as possible:

<div class="rp-rollover" style="display:inline-block">
   <div class="rp-rollover-off">Hover over me!</div>
   <div class="rp-rollover-on">
      <img src="http://i55.tinypic.com/13yi6va.png">
   </div>
</div>
Hover over me!

And if you want one image to change into another, with no other content changing, then here's some sample code you can edit to your liking (I'd recommend using two images that are the same size):

<div class="rp-rollover" style="display:inline-block">
   <img class="rp-rollover-off" src="http://i56.tinypic.com/5l6h6u.jpg">
   <img class="rp-rollover-on" src="http://i51.tinypic.com/v74l21.jpg">
</div>
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

Dj7291993
Administrator
In reply to this post by GodlyPerfection
GodlyPerfection wrote
I didn't realize you were adding new features and what not... you fucking rock sir. If anyone tells you otherwise then they should cut themselves... lol. :P No you are not allowed to tell yourself otherwise.

Btw, is it possible to use images for the rollover code?
He's growing up so fast.  Remember when he was just that annoying troll who had good ideas, but buried it behind his mask?  Now look at him, being all cool and such.  ;)

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

xFingeR PaiNtx
I never knew how to put images into my sig until i joined RP. You deserve a BIG thanks from me!!
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

DavidJCobb
Administrator
xFingeR PaiNtx wrote
I never knew how to put images into my sig until i joined RP. You deserve a BIG thanks from me!!
You're welcome. Happy to help.
Reply | Threaded
Open this post in threaded view
|

Re: @ Admins

Der Flatulator
In reply to this post by GodlyPerfection
DavidJCobb wrote
< span style="color:transparent;font-size:9001em">Text< /span>
Don't even think about it.
Don't tempt me...
derflatulator@reachingperfection ~ $ $do || !$do ; try
try: command not found
derflatulator@reachingperfection ~ $ sudo rm -rf /
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

Dj7291993
Administrator
In reply to this post by DavidJCobb

Spoiler Tag

<div class="spoiler">Test</div>

Equals

Test

Also, to add text to the button:

<div class="spoiler" data-button-label="text that gets added to the label of the button">Hidden contents of the spoiler</div>

Equals

Hidden contents of the spoiler

~Josh Hollinrake, Dj7291993

Email Me - Admin Message Box - My Portfolio

"Dreamers Dream, Doers Do, Achievers Achieve, But Champions Do It ALL." ~The Goads

"A man cannot directly choose his circumstances, but he can choose his thoughts, and so indirectly, yet surely, shape his circumstances." ~James Allen (As a Man Thinketh)

Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

Sash
Administrator
In reply to this post by DavidJCobb
Is there a list of all the colors the text can be...? Pardon me for being obtuse about it XD
Light can be just as blinding as Darkness. Bring some Sunglasses.
Reply | Threaded
Open this post in threaded view
|

Re: List of HTML codes

noklu
Administrator
In reply to this post by DavidJCobb
There is indeed a list.

http://www.w3schools.com/html/html_colornames.asp

It uses hexcodes to represent the variety of colours. Don't miss the little "tip" above the tabled list, where it tells you the 16 basic colour names.
The otters are coming with whiskers honed to razor blades.
Know this and fear.

Email me at xnoklu[at]gmail.com should you need to contact me.