Formatting the post :: Fine Tuning the HTML Code

... From 15
Compose Mode » HTML Code  
 
In composing the post body, whenever we use the tool buttons on the tool bar or the keyboard shortcuts, to apply the various character and paragraph formatting options, certain HTML code gets added up to the post text. This would happen for formatting both in the compose mode as well as the HTML mode.

• Where does the Code get added up?

The code gets added up to the content that you key into the text area. The code enables the content you enter to be formatted according to the options you choose. The code getting added up would not be visible in the Compose mode. You have to switch to the HTML mode to notice the code.

If we select the content and choose the formatting option to apply to the selected content, the opening tag would get added up just before the beginning of the selection and the closing tag just after the end of the selection.

If we choose the formatting options and then start typing the content,

  1. The code relating to the character formatting options would not be included until you key in the first character.
  2. The code relating to the paragraph formatting options, the code gets added up immediately on your choosing the formatting option (lists and blockquote).

Move To  

Code added for Character Formatting  
 
The code that gets added up for character formatting options

<span>

Span is an inline element. That is the reason it can start anywhere within a a line. It is best suited for handling character formatting. Spans can be nested, i.e. you can place a span within another span.

Blogger program uses <span> to hold a set of characters appearing continuously and are to be formatted with the same character formatting option. On choosing a character formatting option, the blogger program adds the <span> tag at the beginning of the selected content (text and other characters) and the </span> tag at the end of the selection.

Blogger program depends totally on the style attribute to format the post content. Therefore, the character formatting options that you choose are defined in the form of style properties within the <span> (opening span tag) after the tag/element name.

Code added for Paragraph Formatting  
 
The code that gets added up for paragraph formatting options.

<div>

A division is an invisible rectangular container. It is capable of holding all the elements which can be present within the body of a html document. A division can be as large as your total document and can be as small as to hold a single paragraph.

Division is a block level element i.e. every division starts on a new line. Divisions can also be nested i.e. you can place a division within another division.

Blogger program uses a division to hold all the content that appears continuously and is to be formatted with the same paragraph formatting options. When you select some content and choose the paragraph alignment option, the blogger program adds a <div> at the beginning of the selection and </div>, at the end of the selection. The style attribute that defines the alignment option would be included within the opening tag.

<blockquote>

When you select some content and choose the block quote tool a <blockquote> tag is added at the beginning of the selection and a </blockquote> tag is added at the end of the selection. Only the tags without any attributes or style properties within the tags are added up.

If you click on the blockquote tool button without selecting any content, the <blockquote></blockquote> tags without any content in between would get added up. These tags would not be visible in the Compose mode. You need to switch to the HTML mode to view them. You can enter content to be formatted as block quote even in the HTML mode by typing it in between the tags.

<ol>

When you select some content and click the numbered list tool button a <ol> tag is added at the beginning of the selection and a </ol> tag is added at the end of the selection. Each part of the selection that had been separated using carriage return (ENTER key) would be delimited by a <li> tag at the beginning and a </li> tag at the end.

Only the tags without any attributes or style properties within the tags are added up.

If you are using the Numbered List tool button without selecting any content, then the <ol><li></li></ol> tags without any content in between would get added up. These tags would not be visible in the Compose mode. You need to switch to the HTML mode to view them. You can enter content to be formatted as an ordered list even in the HTML mode by typing it in between the tags.

<ul>

When you select some content and click the numbered list tool button a <ul> tag is added at the beginning of the selection and a </ul> tag is added at the end of the selection. Each part of the selection that had been separated using carriage return (ENTER key) would be delimited by a <li> tag at the beginning and a </li> tag at the end.

Only the tags without any attributes or style properties within the tags are added up.

If you are using the Numbered List tool button without selecting any content, then the <ul><li></li></ul> tags without any content in between would get added up. These tags would not be visible in the Compose mode. You need to switch to the HTML mode to view them. You can enter content to be formatted as an ordered list even in the HTML mode by typing it in between the tags.

Move To  

Analysing the added HTML Code  
 
After you have keyed placed content and applied formats to them in the compose mode and switched to the HTML mode, you can notice a lot of jumbled up HTML code.

To have an understanding of the code, copy the code from within the text box (when in html mode) and paste it in a notepad window.

Start from the beginning, locate the various tags and press enter key immediately after the tag so that each tag lies on a distinct line.

This way you can ensure that each tag is visible distinctly to give you a better understanding. Create extra space between the actual content and the tags binding it so that you would be able to interpret what the tag does easily.

• Caution!!

Please be careful in carrying on such an exercise from within the text area for composing the post in HTML mode.

The CARRIAGE RETURNS you place in the HTML mode would be retained intact when you switch to the Compose mode.

This would be important if you have chosen the settings to convert carriage returns to line breaks, wherein the spaces would be converted to line breaks while the post is being published.

Fine Tuning the Code  
 

• Removing Unnecessary Code

Unnecessary code may be

» Code doing nothing

Such code would appear with the starting and ending HTML tags in succession without any text between. This code has no function at all and can surely be removed. [Eg: <div style="text-align:right;"> </div>]

» Repeated Code

Where you have applied multiple formatting options at different times for the same content (mostly for character formatting), you may find that instead of just adding additional style property for the second and subsequent formatting options chosen, separate <span> tags for character formatting and <div> tags for paragraph formatting are added for each formatting option chosen.

Such code can be reduced by moving the style properties into a single <span> or <div> tag as the case may be. This is because multiple style properties can be defined within the same style attribute.

[<span style="font-weight:bold;"> <span style="font-size:180%;">Some Text </span></span>]
Can be combined to
[<span style="font-weight:bold; font-size:180%"> some text </span>]

Though unnecessary code may not affect your formatting, it goes onto add to the size of the file holding your blog post. If your blog post is large, it would count.

If you are not sure of this please do not remove the code as it may affect the appearance of your posting.

Initially you may get a bit confused, irritated,.... but do this 2/3 times and you are on. You would easily be able to control or fine tune the HTML code that is being added to format the text for your posting. This is one route for you to create an understanding on HTML/CSS.

• Caution!! » Removing Code ⇒ Removing End Tags also

Note that removing a HTML tag implies removing both the beginning and ending tags. For every beginning HTML tag the blogger program adds an ending tag. Therefore when you are removing one tag as unnecessary, ensure that you remove the related end HTML tag also.

• This may be Convenient!!!

  1. Make the HTML mode active.
  2. Type in the text that you want to appear in the post (without formatting it) in the text area.
  3. Switch to the Compose mode. Apply the first format you intend.
  4. Switch to the HTML mode again. Check if any unnecessary code is getting added. Remove that if you feel it is unnecessary.
  5. Check in the Compose mode again to ensure that the format stays intact.
  6. Repeat this for all the text formatting.
Author Credit : The Edifier ... Continued Page 17

Move To  

♣ Copyright � Krishbhavara. All rights reserved
♣ Site optimized for Internet Explorer 5.5 and above