Home    Ambient    Cerulean    MyGarmin

Monday, January 1, 2007

Blogger Tip: HTML code in a post

You can embed HTML code within a post. The code can range in complexity from a single HTML element to well-formed HTML script. In the latter case, you can include CSS, Javascript, jQuery and other features for building webpages.

To enter and edit HTML code, switch the editor to HTML View.

The following element will display a paragraph with the phrase 'Hello world!!':

<p>Hello world!!</p>

The following code will display a paragraph with the phrase 'Hello world!! (click to hide)' in red text. When the text is clicked, the paragraph will be hidden:

<style>
#p_1 { color:red; }
</style>
<script>
function hide() {
  var e = document.getElementById("p_1");
  e.style.display="none";
}
</script>  
<p id="p_1" onclick="hide()">Hello world!! 
  (click to hide)</p>

This code lacks the <html>, <head> and <body> elements of a well-formed webpage because those are in the template that Blogger provides. The code gets placed within the <body> element of that template. As such, the <style> and <script> elements are not placed in the <head> element, which is where they belong. Hopefully things render ok anyway (even Blogger places some of its own <style> and <script> elements within <body>).

Blogger Tips