Wednesday, July 20, 2011

HTML Code: The Beginning - Displaying Code in Blogger (&lt displays <), Bold Code , and a Horizontal Breaker

Edit: 07-20-11 I started this post over 6 months ago, but I never published it. I am truncating it as of now and posting what I have so far. More will come.

Well it finally came. The day to talk about HTML code. I knew it existed, knew a little bit about it, but now I have begun immersion, full immersion (I'm kind of excited to learn this new "code;" I know such a dork).

Ok, so I knew HTML existed due to Blogger and the "Edit HTML" tab under the posting editor, and I think I have done some in Microsoft FrontPage as well for my advisor's website. I've been trying to use it mostly as I have posted before. So I had copied and pasted one post about LaTex line spacing and page breaking which had created a mess in HTML. The post looked fine. It was a carbon copy of what I had copied and pasted style-wise. However, I now decided that I wanted to clean the post up a bit since there were some unnecessary links, colors, and font sizes.

Well first I tried to do the cleaning up and editing in the "Compose" tab. Yeah, that didn't work or help. It seems to layer the HTML code. What I mean by that is that I tried to reduce the font size so I clicked Blogger's Normal style (really annoying that they don't have the normal choice of 12pt, 14pt, etc.) which "fixed" it visually. When I published or viewed the post, however, the fixes were wrong. Some of the fonts were too small. So I jumped into the HTML editor and tried to find the font controller. No problem as it was called something like style = font size etc., but the issue was due to all the other junk surrounding it such as "span" blah, blah blah. I tried to mess around with it to no avail (began getting span errors, etc). So I simply copied the preview (which it appear around the editor; I have never seen it do that before) and pasted it into the HTML which was nice, neat, and straightforward. I then bolded what I wanted hi-lighted by clicking the bold button. It simply puts a <b></b> around your text that you want bolded (I found out how to display the less than and greater than signs for displaying the HTML code in a Wordpress blog here: The Blog Herald - Writing and Publishing Code in Your WordPress Blog Posts). In order to show the less than sign the code & l t must be written without the spaces. In order to display the code without the code displaying the character then the ampersand code &lt must be used. Then I wanted to add...



Here are some links to some HTML coding help and information. I found these while trying to figure out how to insert and horizontal line for breaks in my blog. The code for a simple horizontal line is <hr> which looks like this &lthr&gt wrapped in <code> . Remember to close <code> with </code> , or you will get something like this which only changes the font and the rest of the post will be in courier typewritter font!

HTML Made Really Easy - http://www.jmarshall.com/easy/html/

How to add horizontal line to webpage - http://www.rogersplaceblog.com/2008/02/how-to-add-horizontal-line-to-webpage.html

WordPress.com Blog Bling: Signatures and Writing Code - http://lorelle.wordpress.com/2007/02/04/wordpresscom-blog-bling-signatures-and-writing-code/

Writing Code in Your Posts - http://codex.wordpress.org/Writing_Code_in_Your_Posts

No comments:

Post a Comment