Friday, June 22, 2007

HTML Tags in post

Thanks to Sherrykins for suggesting I do a post on this subject.

If you need to display html tags in your post. e.g:

<p>This is a paragraph</p>

you have to use special techniques to make them show up.

Using textarea

A 'textarea' element creates a multi-line text element.Here is an example:

The following html:

Creates the following:

i.e. You use the normal html coding but enclose it in a textarea. Unlike the normal html coding, where only one space shows up, however many there is in your html, all spaces show up in textareas. e.g. You can indent lines by just using spaces within the textarea.

Using Entities

Another method of showing html code (e.g. < > ") is to use special characters or numbers called 'entities'. You may be familiar with some of these already e.g. to create extra spaces in your page. These entities are also used for symbols that do not appear on your keyboard (e.g. © ® and ÷ ).

Example:

To get this:

<a href="html://mypage.com">Page</a>

I used the following in my html area:

&lt;a href="html://mypage.com&quot;&gt;Page&lt;/a&gt;

Html editing programs may create the coding for you if you type the html tags in the text area rather than the html area so it is a matter of copying the created code into your blog post editors html window.

Another method is to use a utility that creates the entities for you. You can find an example on the JavaScript Kit site here:

Cut & Paste HTML to Entities (form) script



4 comments:

Sherrykins said...

Sue, Thank you so much for the explaination for putting html tags in a post. You have been a great help and source of information to me.

BTW......thanks for the mention.

Sueblimely said...

Glad I can be of help - just hope I explained it clearly enough.

Sherrykins said...

Sueblimely,
You did a great job explaining this and I have practiced it on my test blog. Thanks again.

Now I have one more question to ask of you. Take a look at this post of yours and explain to me how you make the line on the left side next to the code.

Sueblimely said...

I will be doing more posts about styling/CSS as I go along.

Basically: I just added a class to the division where the code is, giving it:

left padding - for space between border and text,
left margin - space between left edge and border
left border.

CSS:

.code {
margin-left:20px;
padding-left:14px;
border-left:2px solid #CCCCCC;
}

Cheers, Sue

Friday, June 22, 2007

HTML Tags in post

Thanks to Sherrykins for suggesting I do a post on this subject.

If you need to display html tags in your post. e.g:

<p>This is a paragraph</p>

you have to use special techniques to make them show up.

Using textarea

A 'textarea' element creates a multi-line text element.Here is an example:

The following html:

Creates the following:

i.e. You use the normal html coding but enclose it in a textarea. Unlike the normal html coding, where only one space shows up, however many there is in your html, all spaces show up in textareas. e.g. You can indent lines by just using spaces within the textarea.

Using Entities

Another method of showing html code (e.g. < > ") is to use special characters or numbers called 'entities'. You may be familiar with some of these already e.g. to create extra spaces in your page. These entities are also used for symbols that do not appear on your keyboard (e.g. © ® and ÷ ).

Example:

To get this:

<a href="html://mypage.com">Page</a>

I used the following in my html area:

&lt;a href="html://mypage.com&quot;&gt;Page&lt;/a&gt;

Html editing programs may create the coding for you if you type the html tags in the text area rather than the html area so it is a matter of copying the created code into your blog post editors html window.

Another method is to use a utility that creates the entities for you. You can find an example on the JavaScript Kit site here:

Cut & Paste HTML to Entities (form) script



4 comments:

Sherrykins said...

Sue, Thank you so much for the explaination for putting html tags in a post. You have been a great help and source of information to me.

BTW......thanks for the mention.

Sueblimely said...

Glad I can be of help - just hope I explained it clearly enough.

Sherrykins said...

Sueblimely,
You did a great job explaining this and I have practiced it on my test blog. Thanks again.

Now I have one more question to ask of you. Take a look at this post of yours and explain to me how you make the line on the left side next to the code.

Sueblimely said...

I will be doing more posts about styling/CSS as I go along.

Basically: I just added a class to the division where the code is, giving it:

left padding - for space between border and text,
left margin - space between left edge and border
left border.

CSS:

.code {
margin-left:20px;
padding-left:14px;
border-left:2px solid #CCCCCC;
}

Cheers, Sue