Sensible Erection | Profile

Profile - Ankylosaur

Member since Wednesday, 11 November 2009
Last visited on Friday, 24 May 2013

Ankylosaur has posted 189 entries, 4333 comments , has a karma score of 482 and has moderated other SE users +79 Insightful.

Their website is at 35718#Ankylosaur

Ankylosaur has this to say

Basic HTML/CSS Guide For Sensible Erection

URLs in posts:

SE "helpfully" converts URLs (Internet addresses) into links when you put one in a post entry (but not in normal comments). It does this by searching for the string "http:" in your entry text and replacing the attached URL with a link to that address. Unfortunately it doesn't detect when the URL is already being used in a link, messing up manually added links, images, and videos.

To get around this, simply remove the "http:" from any URL in your post (excluding the one in the "entry url" box). Don't forget the ones in YouTube video embed codes. Example:

"http://example.com/" becomes "//example.com/"

This is a technically incorrect usage, but it works because all browsers assume you want to use Hypertext Transfer Protocol ("http") by default. You only need to do this for posts and only on SE. You should keep the "http:" in comment links, images, etc.

Add a link:

<a href="http://example.com/">Link</a>

Add an image:

<img src="http://example.com/image.jpg" width="50" height="50" />

Note: Be sure to add the width and height values! Not doing so will make the page expand in height progressively as the images are downloaded. This can be very annoying if there are many images. Imgur.com and other image hosts don't always add these, so you will have to do it manually. To find the size of an image, right click on it and select "view image info" (Firefox), "properties" (IE), or "open image in new tab" then look in the tab title (Chrome). If you do not have one of these browsers and/or a right mouse button, please visit your local Apple Retail Store and ask a certified Apple Genius™ for assistance.

Write HTML examples without them becoming active HTML:

To display the text "<a href="http://example.com/">Link</a>" without it being converted into a link, you need to use escape codes. These tell the browser to display a character without interpreting it as that character. With HTML, you simply need to replace the characters "<" & ">" with "<" (less than) & ">" (greater than), like so:

<a href="http://example.com/">Link</a>

Write HTML escape codes without them being displayed as the character:

To do what I did above, you need to replace the ampersand ("&") in the escape code with its escape code, "&". So to write "<" you use "&lt;".

Write HTML escape code examples without them being displayed as HTML escape codes:

You need to replace the ampersand again! So to write "&lt;" you use "&amp;lt;".

Write HTML escape code example examples without them being displayed as HTML escape code examples:

Use "&amp;amp;lt;"

Write HTML escape code example example examples without them being displayed as HTML escape code example examples:

Use "&amp;amp;amp;lt;"

Write HTML escape code example example example examples without them being displayed as HTML escape code example example examples:

INCEPTION!

More escape codes:

Besides using them to write a HTML/CSS guide in your SE profile thereby stealing precious hits from ComposerNate, escape codes can be used to add characters that are otherwise difficult to type, normally requiring holding the ALT key and entering some cryptic number.

Popular examples include: accents (á = á, ñ = ñ), legal guff (™ = ™, © = ©), fancy punctuation (— = —, “ ” = “ ”), mathematical/logical symbols (≠ = ≠, ∴ = &there4;), and typesetting arcania (  = nonbreaking space that won't be compacted or cut at line feed,  = soft hyphen that only appears if word needs to be broken at line feed).

Wikipedia has a complete list of all HTML/XML character entity references (a.k.a. escape codes).

Make the text fixed-width:

Use the tag <tt> (teletype) if you just want inline fixed-width like this, or use <pre> (preformatted) if you want fixed-width and the spaces you typed to be preserved, like this:

    SSSS   EEEEE
   S      E
   SSS   EEE
     S  E
 SSSS  EEEEE

The latter is necessary for ASCII art (see example at bottom). Note: SE "helpfully" adds <br/> (line break) tags before line feeds (when you hit the ENTER/RETURN key), so you have to manually replace line-feeds with "<br/>"s to avoid double-spacing (i.e. your ASCII art has to be all on one line).

Other useful HTML tags:

Remember to add a closing tag at the end of the text you are applying these to (e.g.: <b> should be closed with </b> — I refer to this as "wrapping" herein):

<b> or <strong>: Make the text bold/strong like this.

<i> or <em>: Make the text italicized/emphatic like this.

<blockquote>: Make a block of text/images offset from the surrounding text.

<ul>: Make a bullet list (like the one you are reading now). Each bullet point should be wrapped in a <li> tag. There's also an ordered-list variant (<ol>) that adds numbers instead of bullets.

<dl>: Make a fancy-pants dictionary list. Wrap the term in <dt> and the definition in <dd>.

<fieldset>: NO ONE USES THIS BUT WEIRDOS!

<hidecreditcardnumber>: Uses military-grade 1024-bit AES encryption to make it impossible for anyone to read a credit card number wrapped in it except from the computer that it was typed on. It will even hide it in the source code, it's that powerful. Here's my credit card number as an example: ****************

<p>: Paragraph. While very useful elsewhere, not useful on SE since SE automatically adds <br/> tags before line-feeds. Just hit ENTER/RETURN key twice for a new paragraph.

<br/>: Line break. This tag does not have a closing tag; just put it where you want a line-feed. Again, useless on SE — just hit ENTER/RETURN.

<span> or <div>: Generic containers for use with styling (see below). <span> is for inline elements (like one word in a sentence or one sentence in a paragraph), while <div> is for blocks of elements (a paragraph, a bunch of text with images, etc.).

Add style:

You can change many aspects of how your text is displayed using "inline CSS". Simply wrap the text you want to alter in tags (<span>, <b>, <i>, etc. for inline text; <p>, <div>, <blockquote>, etc. for blocks of text) then add a "style=""" attribute inside the leading tag with your desired style declarations like so:

<span style="color:red; font-size:2em;">This will be red and huge! Amazing!</span>

Which will look like this:

This will be red and huge! Amazing!

There are many style settings. They take the form of "style-name:value" and are separated by a semicolon. Here are some useful ones:

font-size: Specify the height unit. "px" for pixels, "em" for relative to the current height (i.e.: "1em" = current height, "2em" = twice as high, "1.5em" = 1.5 current, etc.).

color: You can use color names ("red", "green", "burlywood", "lemonchiffon", etc.) or you can specify a hex value ("#f00" = red, "#0f0" = green, "#deb887" = burly wood, "#fffacd" = lemon chiffon).

background-color: Same as above, only in the background: You can find burly wood at a Lemon Chiffon Party

text-align: Applies to text and images. Values are "left", "right", "center", "justify", and "libertarian".

language: This will translate the tagged text to the specified language. Values are in the form of ISO 639-2 language codes ("ger" = German, "mic" = Mi'kmaq, etc.). By default it assumes the text is in English, but this can be changed using the language-source declaration. As this is a hard computational problem, most browsers rely on tiny, sentient imps living in your computer's power supply unit (PSU) to do the translation. If this does not work on your computer, check to make sure the imps are healthy and well fed by inserting slices of deli meats into your PSU's vent grates.

font-family: Specify either a generic font type ("serif", "sans-serif", or "monospace") or a specific font ("Comic Sans MS", "Papyrus", "Wingdings" — these are the preferred Web fonts; use them liberally). Specific fonts will only work if the viewer has that font installed on their computer, so choose wisely. You can specify alternate fonts by listing them in order, separated with commas.

text-decoration: Values are "overline", "line-through", "underline", and the most useful "blink".

Enter your comment's DOM:

Adding the following to your comment will let you access the DOM and, in this specific case, change all the comment text red:

<script type="text/javascript"> s=document.getElementsByTagName('script'); ts=s[s.length-1]; c=ts.parentNode.parentNode.style; c.color='red'; </script>

I will not go into any more detail about this as it can be used for great evil.

Javascript Gadgets

HideyBox (v.2012-01-11):

Simple concealment of small content.

HideyBox IntelXpand® w/ SmartSnap™ technology (Patent Pending) (v.2012-01-24):

Advanced concealment of longer content. Will add hide button to the bottom of the HideyBox if content is taller than the window. Use of bottom hide button will automagically™ snap you to the top of the HideyBox, for EZ-Read® EnjoyMax™. (Based on suggestion by mrcucumber.)

HideyBox ScrollMax™ (v.2012-01-24):

Advanced concealment of longer content. HideyBox expands to fill the page window vertically, providing scroll bars as needed.

HideyBox WorkSafe™ (v.2011-02-17):

Image won't download (i.e. show up in admin logs) until HideyBox is opened (with code by foobar).

Arbitrary HTML variant. HTML won't be acted upon until opened. Works with embedded videos. Note: All quotation marks must be removed from hidden HTML or else you'll break it.

HideyImage (v.2011-01-04):

Image won't download (i.e. show up in admin logs) until clicked. Click again to hide from view. No one uses this. Be a rebel and try HideyImage today.

NSFW Image
Click to load/hide

That's the Joke

That's the joke.

         ,,,""""""";
         |  /-----\^
         \ / ,___ _|
          \| \_*/_*/
          (|     _)
           /      \
          /  ______\
         /  (____|
   ,,---/|\      /\--,,    __
  ;  \  >\ \____/\|\ ',', (__)
 ;       \\ /----'||  |  \ \ \
 |        \`\     ||  |  |  \ \
 |     |   \ |    |/  |  |  |\ \
 |     |    ||    |  ,'__|  ||\/
 |_____|    `|    |  |/ __\_||__
( ==    )  O |    |  | /  | (___)
(_______)    |____|  ||   \_(___)
 |     |__]  |____|  |_\____(___)
 |     |_____|    |__|      ||

        THAT'S THE JOKE