STFU && RTFM

If you’ve ever written a website in HTML, you are probably familiar with the MailTo-command, used to automatically start a new email message when the link is clicked. However, you can do so much more with the command. Here are some examples:
 

• Address message to multiple recipients
• Add entry in the “Subject” field
• Add entry in the “Copy To” or “CC” field
• Add entry in the “Blind Copy To” or “BCC” field
• Add entry in the “Body” field

 
Now, I’m sure you’re wondering how exactly we get the code to do this. Here’s how (click the link to see the effect):
 

• Simple MailTo
  • <a href=”mailto:recipient@server.tld”>
• MailTo with Multiple Recipients
  • <a href=”mailto:recipient@server.tld,recipient2@server.tld”>
• MailTo with Subject
  • <a href=”mailto:recipient@server.tld?subject=Comments from website”>
• MailTo with a Copy
  • <a href=”mailto:recipient@server.tld?cc=recipient2@server.tld”>
• MailTo with a Blind Copy
  • <a href=”mailto:recipient@server.tld?bcc=recipient2@server.tld”>
• MailTo with message already started in Body
  <a href=”mailto:recipient@server.tld?body=I am having trouble finding information on “>
• MailTo with multiline message in Body
  • <a href=”mailto:recipient@server.tld?body=The message’s first paragraph.%0A%0aSecond paragraph.%0A%0AThird Paragraph.”>
  • NOTE: Use “%0A” for a new line, use “%0A%0A” for a new line preceded by a blank line.

 
Of course, you can also combine the effect:
 

• MailTo with Subject, a Recipient, a Copy and a Blind Copy
  • <a href=”mailto:recipient@server.tld?subject=MailTo Comments&cc=recipient2@server.tld&bcc=id@internet.node”>

When writing my last post I had a problem that parts of the code was parsed into the page, meaning that the result, instead of the actual code, was seen. As you can see in the post, I solved the problem, and here’s how:
 
By replacing the lesser than symbol (<) with “&lt;”, the greater than symbol (>) with “&gt;” and the ampersand symbol (&) with “&amp;”.
 
The solution to this, and a lot of very handy cheat sheets can be found at ILoveJackDaniels.com

As you may or may not know, I’m maintaining not one, but two wikis. One of these is my personal website. In both I’ve added an infobox on the right to make some articles stick out. Here’s how it looks:
 

 
How have I done this you ask? It is really boxes within a box. Let’s go through it line by line. I start with a comment:

<!–Recently added articles–>

 
The comment is followed by the actual code that creates the outside box:
 

{|style=”width:33%; border-spacing:15px; margin:0px;” align=right

 
The above code states that the box width should be 33% of the total window, the spacing around the border should be 15 pixels, it should have no margin and be aligned to the right. We close it at the bottom of the code like this:
 

|}

 
This is only part of the solution though, we need another line to make the box look right. Here it is:
 

|style=”border:1px solid #cedff2;”|

 
This line creates a solid border of one pixel, and colors it a specific blue. These two lines of code gives us the border like so:
 

 
Now that we have the border, or framework, up and running, let’s add some content:
 

{| width=”100%” “

 
This creates a new box. We need a little bit more though:
 

! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently added articles</h2>

 
We add some text, “Recently added articles”, a background color for this box. We set the font size to 120%, make it bold, and add a solid border. We align the text to the left, and make sure the text aligns correctly. Once more we close the code as above.
 
Now we’re starting to make things happen. Here’s how it looks now:
 

 
Now we need to start adding some text and links. We do this inside the second box, and here’s what we type:
 

|-
|
*[[Home Entertainment system/Sound system | Sound system (5.1)]] (April 18th, 2008)
*[[Taking Screenshots of DVD's]] (April 16th, 2008)
*[[Home Entertainment system/Flat-panel TV | Flat-panel TV]] (April 11th, 2008)
*[[My favorite Firefox extensions]] (March 31st, 2008)
*[[Second day stew]] (March 24th, 2008)

The first two lines place the text correctly into the box, as a table. The subsequent lines start out with a star, which creates a bullet point, and then a link to the article. Once that is done we add the date it’s been added (In this case, but other information could be entered at need or will).
 
What we have now looks like this:
 

 
We then go on to add another box like the one above, for an end result that, codewise, looks like this:
 

<!–Recently added articles–>
{|style=”width:33%; border-spacing:15px; margin:0px;” align=right
|style=”border:1px solid #cedff2;”|
{| width=”100%” background:#f5faff;”
! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently added articles</h2>
|-
|
*[[Home Entertainment system/Sound system | Sound system (5.1)]] (April 18th, 2008)
*[[Taking Screenshots of DVD's]] (April 16th, 2008)
*[[Home Entertainment system/Flat-panel TV | Flat-panel TV]] (April 11th, 2008)
*[[My favorite Firefox extensions]] (March 31st, 2008)
*[[Second day stew]] (March 24th, 2008)
|}
<!–Recently edited articles–>
{| width=”100%” background:#f5faff;”
! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently edited articles</h2>
|-
|
*[[My on-site troubleshooting kit]] (April 22nd, 2008)
*[[Reading List]] (April 19th, 2008)
*[[Customizing MediaWiki]] (April 16th, 2008)
|}
|}
<!–Recently added and edited articles info box ends–>

 
Here’s how the finished result looks like: