How To Use The HubPages HTML Editor In Your Text Capsules
Using the Built in HTML Editor
Sometimes when entering your text in the HubPages
Text Capsule, you might want to fine-tune its appearance. While the
built-in toolbar has all the same options that can be found on the HTML
editor, there may be times when those toolbar buttons just don't work
exactly the way you want them too! For instance, I've had trouble
getting the "blockquote" button to work from the toolbar, so I used the HMTL editor to set the places where I wanted the quotation to begin and end.
The following HTML tags are allowed in the HTML editor found in the
text capsule:
- <a> - anchor tag, used for links
- <blockquote> - used for indenting material quoted from another source
- <br> - line break
- <strong> - bold text
- <em> - italic text
- <u> - underlined text
- <p> - paragraph break
- <pre> - preformatted, fixed width text
- <sup> - superscipt text
- <sub> - subscript text
- <h2> - large headline text (same font used for the Capsule Subtitle)
- <h3> - medium headline text
- <h4> - small headline text
- <ol> - ordered list, with numbers
- <ul> - unordered (bulleted) list
- <li> - list item
How To Access the HTML Editor In The Text Capsule
While editing text, just click the "HTML" button at the far left of the toolbar:
This launches the HTML Editor in a separate window:
At the top of the editor is the list of allowed tags - notice that you can't use all the tags that a standard HTML editor allows! You'll also see the "Clean Up HTML" button. I like to click this before I begin - it applies the HTML line breaks and makes the text easier to read. You can also click this before exiting the editor to make sure that your HTML tags are properly coded - any invalid tags will be removed.
What Do The Different Tags Do?
These are all of the HTML Tags are allowed, with an example for each
one:
<a> This is the anchor tag, used for
links. For example,
<a href="https://hubpages.com/@www">HupPages</a>
will create this hyperlink to the Hubpages homepage: HubPages
<blockquote> This tag created indented text for use when quoting material from another source. For example,
<blockquote>"Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."</blockquote>
will create this block of text:
"Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
<br> Inserts a line break in the text - the same result as pressing Enter in the text editor. This tag id not paired with an end tag like most others, and the HTML Editor will modify any <br> tags you enter with a built-in end tag, resulting in <br />
<strong> Creates bold-faced text. For example,
This text is in <strong>bold-face</strong>
results in: This text is in bold-face
<em> Works the same as the <strong> tags to create italic text. So,
This text is in <em>italics</em>
results in: This text is in italics
<u> Again like the last two, but for underlined text. So,
This text is in <u>underlined</u>
results in: This text is in underlined
<p> Creates a paragraph break. This is different from the <br> tag in two ways; first it does have a paired end tag, and second it creates a bit of extra space before and after the block of text between the start and end tags. Inside the HTML Editor, this paragraph is coded like so:
<p>
<p> Creates a paragraph break. This is different from the <br> tag in two ways; first it does have a paired end tag, and second it creates a bit of extra space before and after the block of text between the start and end tags. Inside the HTML Editor, this paragraph is coded like so:
</p>
<pre> Creates preformatted, fixed width text. Text inside the <pre> tag
is fixed width and preserves spaces and line breaks within the text
<sup> This tag creates superscipted text. For example,
This text is <sup>superscripted</sup> from the other text
results in: This text is superscripted from the other text
<sub> Same as the <sup> tag except the text is subscripted. For example,
This text is <sub>subscripted</sub> from the other text
results in: This text is subscripted from the other text
<h2> Is used for large headline text.
This is text with the <h2> tag
<h3> Medium headline text.
This is text with the <h3> tag
<h4> Small headline text.
This is text with the <h4> tag
<ol> Creates an ordered, or numbered, list. It in used in conjunction with the <li> tag below.
<ul> Creates and unordered bulletted list and also requires the <li> tag>.
<li> Creates the list items within an <ol> or <ul> tag set. For example:
<ol>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
</ol>
results in
- List item 1
- List item 2
- List item 3
and
<ul>
<li> List item</li>
<li> List item</li>
<li> List item</li>
</ul>
results in
- List item
- List item
- List item
Final Steps
After you've finished entering your HTML code, you can cancel the changes by clicking the "Discard Changes" button. If you're satisfied with your work, click the "Update to Editor" button:
A pop-up window will appear:
Click OK to return back to the text editor and check out your results!
Conclusion
So I hoped you've learned a thing or two about using the HTML Editor in the Text Capsule! I've found that it comes in handy when I can't get the text in the capsule to look the way I want it to using the toolbar buttons. And, if you're a big geek like me, sometimes you just want to tag your HTML the old-fashioned way!
Did you enjoy this hub? If so please leave a comment. Otherwise I feel like I'm talking to myself when I publish these hubs!
Comments
Dude, saving the hubs one at a time!Great hub thanks for helping us out with some of the more confusing parts of coding and stuff. Yes I voted^
Thanks for this! Helpful as usual.
Wow! More to learn. I will learn this and impliment it into my pages. Thanks. I just completed my website and had to learn the basics of HTML... Flag up and awesome...
This is really useful but I do not understand how to implement tags for example kontera tags. The instructions are something similar to this: "Copy and paste the tag into your site's HTML source code. Be sure to paste the tag right before the closing HTML tag on all your site's pages."
Please help me.
Useful. Bookmarked for future reference. Thanks.
This is really helpful, thank you so much, bookmarked for reference!
Thanks Edweirdo for writing another useful hub. I have bookmarked a few of your hubs in the past for future reference and will be bookmarking this one as well.
Very good lens. Thanks ed. Unfortunately, we cannot change the text or we can put widget and pictures. I hope hubpages allow us to put widget and pictures in HTML capsule.
I think you are right, Ed.
Would you say, please, why HP admin did limit the usages of HTML?
Thanks for the information about html in this hub which clearly explains all the options available.
Hi, Edweirdo. I'm brand spankin' new on HubPages and I found this Hub very helpful. I'll definitely be coming back to ask questions.
Hi there. This is a great hub - I will refer back to it when I write my next hub. I might even ask you a question or two - I'm known as "the questioner" among people I know.
Thanks for the lesson!
Ooh, thanks so much! I'm not HTML savvy so I am happy to finally have some instructions for making minor changes to hubs. Definitely bookmarking this one for future reference.
Thanks for taking the time to help us all - Iam pretty ignorant when it comes to doing anything other than writing on a computer- have yet to get game enough to attempt allthse referral, links etc services -just wrote that to let you know how much I appreciate your hub - thank you
Now I have learnt something really useful and will try it out on my next Hub. I have often been very frustrated with the appearance of the text in my Hubs and this will help considerably.
Thanks so much!
Love and peace
Tony
Welcome to Hubpages.
Hubpages is a great place to learn and grow. I've learned so much here. I've been a member for 12 months ago. I appreciate your Hub. Great tips on HTML. Not to many people understand how to tweak their Hubs.
I joined RedGage today and came across one of your links and I saw you belong to Hubpages. Way to go, good luck and over time you will realize how you can supplement your income. The extra money comes in handy. Nice to meet you and best of luck.
I'm still lernin' myself. I'm a commercial typesetter and sometimes HTML formatting drives me crazy. I've been tempted more than once to set my text in a layout app like Quark and then convert it to a PDF and then convert it to a jpg, and place it as a photo.
That seems easier sometimes LOL
But then, what's the point of a key word.
Anyway, my question is: your example text is a different color than your main copy. How do you do that? From black text to gray text...
:)
Thanks for the information. I thought html was banned from hubs.
26