How do you write HTML to appear in your blog?

Now and again, especially if writing about code you will want to display an example of source code in your blog, and if you are writing about HTML you may want to display some tags. If you are using Blogger, or mny other blogging tools it is likely instead of showing you HTML example the blog software will process the tags and render the output rather than displaying the code. How do you get round this?

Two things, first and most simply for any source code use the <code> tags.

function foobar(){ return true;}

Second, more especially for HTML use the following &lt; for < less-than symbols and use &gt; for all > greater than symbols. This will allow your source to appear on the page and not get processed:

<table>
<tbody>

etc etc...

How do you get a HTML table TD cell to wrap consistently?

I have just had some fun working with a HTML table. I just a table with five cells each of which I had initially set widths on each TD element. When the data for each cell was less than the predefined widths everything displays fine but as soon as the data exceeds the width I found the cell sometimes wrapped but usually kept the table expanding (The data I was trying to get to wrap was a URL - so just a continuous string without spaces) I think had the data included spaces the mishaped table would not have been so bad.

The solution I found was to embed a DIV within each TD that I wanted tied to a specific width - and within the DIV style or CLASS set a width explicitly. This found kept the table aligned!


<table>
<tbody>
<tr>
<td width="100px">
</td>
<td width="200px">
<div>class="widthclass" OR style="width:200px">
data....
</div>
</td>
</tr>
</tbody>
</table>


Hou do you get a hyperlink to run some code instead of linking to another location?

I was just working on a web page today and the design was such that there were multiple hyperlinks, two were to other pages but the third was a function to validate a portion of the current page. My problem was, how do I run some javascript instead of setting the anchor to another page?

I first tried to use an onclick handler without a url - now this did work but as a side effect of not having a url link the hyper link was not drawn showing the underline and coloring. So I added a url but of course the onclick functioned correctly but the page then navigated away.

Finally, and successfully, if you specify javascript:functionname() in the anchor href- where functionname() is defined in the script somewhere in your html document it works a charm. Additionally, after the javascript: you actually add multiple commands as long as they are semi-colon delimited. Obviously this can get a bit messy so better to have all the code in the function but the option is there!

How and why do you url encode and decode?

Well less of me and more of a guy called Brian Wilson. I had a file that I wanted to url encode - since the filename I had used was littered with spaces and at the time couldn't precisely remember what to change!

Anyway to cut a long story short if you want to know the whys and hows or url encoding go visit Brian's page - http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

The cool thing is he has placed some code on the site so you can actually encode your unencoded url! Very useful, giving you the details of the JavaScript functions String.charCodeAt and String.fromCharCode.

How do you populate a new email from an HTML onclick code?

I have used HTML links before with the href set to mailto:address@blah.com, which always work a treat. Today though needed the same functionality as a straightforward mailto link but via an onclick event of a DIV I'm using as a button.

Not difficult once you know how, and I also found out a couple of neat new tricks for populating the mail client with values.

All the onclick code requires is:

onclick="self.location = 'mailto:help@selfhelpsupemarket.com'"

This works just as a normal mailto. What I found out looking this up is you can pre-populate the cc, bcc, subject and the message body as well which coule be very useful! I imagine the following works for a normal link as well as the onclick, additionally the testing I did was with an Outlook 2007 client so I don't know how other clients will behave but here's the code anyway!

Simply append to the mailto: email address a query string using cc, bcc, subject and or body fields to pre-populate the client mail message with the appropriate fields filled. All the fields are optional so you only need to use the fields appropriate to your task. All fields and values need to be separated with ampersand.

A couple of examples:

mailto:steve@t.com?subject=hello from website&cc=info@test.com

So create a new email to be sent to steve@t.com, cc'd to info@t.com with a subject of hello from website.

mailto:steve@t.com?subject=hello from website&body=Dear Steve,

This one will create a new message again to steve@t.com with the same subject but the message body is started with Dear Steve.

How do you subscript or superscript html text without affecting the paragraph line spacing?

Bit of a long title today but a simple request!

I have only one character in some text that I would like to subscript. Initially I used html 'sub' element which I can't deny does work but if you have multiple lines of text the line that displays the subscript will end up having a greater line height than the others which in my pedantic world caused nightmares!

Let's see if I can demonstrate here:

line₁ with a subscript number 1 after line
some other lines follow this one without any super or sub script features.
some other lines follow this one without any super or sub script features.

There is another way though which now allows me to sleep at night : ) hurrah. Simply use a span around your subscript item (or super) and set it style to:

position: relative;top: 0.3em;

from this you can obviously change the top value to choose the character position and in fact make it superscript. Here is the updated version below:

line1 with a subscript number 1 after line
and some superscript using a top of -0.3em easy.
some other lines follow this one without any super or sub script features.

better?!

How do you get an image to appear in an DIV, paths?

This is a silly one. I have used without a problem the CSS background-image: statement including backgrounds for DIVs, until today that is....

I have an html document in the root folder, along with two sub folders: a resorces folder for my stylesheet style.css and an images folder for all the images. Before the lightbulb switched on I referenced my images as background-image:url('images/image_name.jpg') BUT to my frustration for a good half an hour was the images did not appear - now I was trying to use a background for a DIV but it could have been any images.

The light bulb moment - I feel daft for admitting to the problem but I have seen it before and still did not remember... so the issue is simply this - the path used is relative to the stylesheet loaded and NOT the HTML document as I imagined. So, I originally used '/images/imagename.jpg' which is relative to the html, and what I needed for it to work was actually a path like '../images/imagename.jpg' which is because the stylesheet is in a resources folder, so the path needs to be a parent folder above before navigating to the images folder.

Like I said a real simple one to solve, but when I was convinced in my mind the path should be relative to the root folder it took quite a bit of head bashing to get it fixed!

How do you get a DIV to centre in Internet Explorer?

I have had the problem a number of times and I can never for the life of me remember the solution! So I hope writing it up here will allow it to sink into to my brain, or at least I can come here to find out!

Ok so you have HTML DIV that you would like to be presented in the centre of your browser. First off you need to set the width and set the left and right margins to auto at the DIV level:

width:800px;margin-left:auto;margin-right:auto;

Then, to get IE to play ball you need to include a text-align:center style to your HTML body so I''ve just added the following to my stylesheet:

body {text-align:center}

Hope this helps!