Web Dev Notes

I’ve received questions from several individuals with regards to how I am able to include HTML code in my Wordpress posts. For example, if you want to make a word bold, you type <strong>bold</strong>. So the question is, how then did I write <strong>bold</strong> without the word becoming bold? The other questions I’ve been asked is, “How the heck did you do that indentation?!”. Take a look at this post for example! Can you put blocks of code like this on your page? YES!

The magic behind formatting a post like this is actually very simple. Writing a post in Wordpress is a simplified way of inserting a few paragraphs of HTML formatted text into a web page. When you make a word bold or add a link, the text is surrounded by tags which will tell the browser how to format it’s appearance on the screen. HTML tags always begin with “<”, so as soon the browser encounters this symbol, it will check to see if it is a valid HTML tag, and if so, take the appropriate actions. If you actually just want to display the “<” symbol on screen and have the browser ignore the possibility that it could be HTML code, then you need to instead write the ASCII entity name.

I know many of you just grumbled and felt discouraged at the mention of ASCII entity names, but don’t worry I promise it really is very easy! Basically, all you need to know is that some characters have an ASCII entity name which you can type in your posts to display the character. For example, the ASCII character name for < is:

Try it out! Open up wordpress and type the above ASCII character. When you preview the page, you will see that the character < is displayed instead. The new mystery then is, how did I write the ASCII character above without it being turned into “<”? hmmm…!

• Go here for a full list of ASCII character names

The next question was related to indentation in posts. The first thing I did was put my code within a blockquote. If you are using Wordpress, you can simply highlight text, then click the “b-quote” button to do this. This indents a whole paragraph of text, commonly used for quoting references by bloggers. Next, I surrounded my blockquote with a tag called <pre></pre>. This tag is used to define preformatted text which means that the text enclosed between the tags will be displayed as it is typed. In a nutshell, if you are typing a post in Wordpress and hit the spacebar 20 times between each word, when you hit preview, it will still only show a single space between each word. However, if you use <pre>text to be preformatted here</pre> in your post, then all text between the tags will display your text as it was written, meaning multiple spaces can be displayed.

Try it out. Copy/Paste the below into Wordpress and preview it to see the effect:

<pre>

This is the first line, with no indent.
     This line has 5 spaces in front of it!
          This line has 10 spaces in front of it!

</pre>

Enjoy!

Update:I’d just like to say it’s really interesting how this post first came to be. The only reason I thought about writing on this subject is because readers contacted me asking about it. I am very eager to answer any and all such questions! Please keep the feedback coming so that I can focus on providing content that is of interest to YOU!