Using the Favorites Tab
So you took a quick look at the
Actions Bar in HTML Kit, counted 11 tabs and 130+ buttons and then discovered that some of these buttons opened up massive drop-down menus containing a kazillion more buttons.
Then you broke into a cold sweat, panicked, threw your hands up in the air and ran out of the room screaming.
Heh heh...
Don't worry about it...
I pretty much did the same thing.
(And I'm an experienced web author.)
But wait a minute. Come back here. It doesn't have to be like this. Yeah that's right... Come on back and sit yerself down. No, I'm not going to tell you that it was all just a dream. What I am going to tell you is that the Actions Bar, like other components in HTML Kit, is also highly configurable. Yes that's right. You can have it exactly the way you want it.
How?
Well let's start by...
Adding buttons to the Favorites tab
By default, the Favorites tab on the Actions Bar is empty. You can populate the Favorites tab with any buttons appearing on any other Actions Bar tab.
TO ADD A BUTTON TO THE FAVORITES TAB ~
- Right click on the Actions Bar button that you want to add to Favorites
- Click on [+] Add to Favorites
All done.
(Rinse. Repeat.)
TO REMOVE A BUTTON FROM THE FAVORITES TAB ~
- Go to the Favorites tab.
- Right click on the button that you wish to remove.
- Click on [-] Remove from Favorites
TO REMOVE ALL BUTTONS FROM THE FAVORITES TAB ~
- Go to the Favorites tab.
- Right click on any button
- Click on Remove All from Favorites
SOME PARTICULARS ~
- As soon as you add any buttons to it, the Favorites tab will appear first in the line of Actions Bar tabs.
- The order of the buttons on the Favorites tab is configured according to an HTML Kit default setting (i.e. the order can't be changed.)
- If you attempt to add a button to the Favorites tab and you discover that the option [+] Add to Favorites is greyed out (unavailable), it means that this button is already there.
So which buttons should you add to the Favorites tab?
Well here's a couple of recipes...
Beginner Favorites tab configuration
STARTING OUT...
I was a beginner once and this is probably the way I would want to configure things on the Favorites tab if I had no CSS experience and I was still using <font>...</font> tags and such to format all my text.
Using the Beginner Favorites tab configuration, you can:
- Put your text in a web page template
- Define page headings
- Format text typeface, size and color
- Make text bold, italics or underlined
- Drop in horizontal rules
- Make paragraphs and block quotes
- Insert images
- Make hyperlinks
- Make tables
- Make lists
- Convert carriage returns into <br> tags.
...among other things.
None of these 15 buttons contain any massive drop-down menus and if you're just starting out they should easily handle all your web authoring needs.
(Click to close)
The following is a screenshot of the Favorites tab loaded with 15 buttons especially suited for newcomers to HTML editing. Hover your mouse pointer over each button to see the first part of its tooltip as it appears in HTML Kit and to see which Actions Bar tab the button came from. (This will help you quickly locate the button should you wish to add it to your Favorites tab.) Click on the button in the image to jump to more details about exactly what it does in HTML Kit.
Advanced Favorites tab configuration
MY FAVORITES TAB
If you're an advanced web designer then there's not much I can really tell you about how to configure your Favorites tab. You know what your needs are and where your tastes lie so all that remains is to just do it to it. Perhaps my configuration will at least give you some ideas about how to do yours.
If you're a novice web designer then I should explain that I mainly use CSS to format text in my web pages hence I rarely have need for
<font>...</font> tags or
<p>...</p> tags anymore. These are replaced by
<span>...</span> tags and
<div>...</div> tags respectively.
Nor have I need to insert any of the HTML Kit default templates since I construct my own highly specialized templates. For bold or italics font styles, I use keyboard shortcuts and I never use underlining (that's only for hyperlinks, people!)
I initially started out by employing the DIV and SPAN buttons on my Favorites tab but eventually replaced them with HTML Kit plugins that I created which included more options especially suited to creating pages for Iron Spider.
(Click to close)
Here's a screenshot of the 15 buttons that I initially added to my Favorites tab. Hover your mouse pointer over each button to see the first part of its tooltip as it appears in HTML Kit and to see which Actions Bar tab the button came from. (This will help you quickly locate the button should you wish to add it to your Favorites tab.) Click on the button in the image to jump to more details about exactly what it does in HTML Kit.
Description of Actions Bar buttons
Here's a list of the Actions Bar buttons appearing in the
beginner and
advanced Favorites tab configurations that I suggested above. The 'default button' refers to just clicking on the button without opening its drop-down menu (if applicable).
BEGINNER OR
ADVANCED
- Make link... (Objects tab)
- This will open the Tags Wizard to the Hyperlink Anchor dialog. This is a very convenient tool for building hyperlinks to various other pages in your website.
- Insert image... (Objects tab)
- This will open the Tags Wizard to the Image dialog to allow you to insert images into your web page. I absolutely love this little tool most particularly because it will automatically take the dimensions of your image and drop in the
<img>
tag with the width
and height
attributes containing the proper values.
- Format selected text as HTML 4.01 Transitional... (Document tab)
- This will enclose your selected text within the
<body>...</body>
tags of an HTML 4.01 Transitional web page template complete with Document Type Definition (DTD). In other words it will wrap your text in the HTML source code required to turn it into a web page. (Note: Further formatting on your text may be required to apply fonts, colors, paragraphing, etcetera...) The cursor will appear within the <title>...</title>
tags ready for you to enter a title to your web page. The little black arrow opens a drop-down list of other DTDs (If you don't know what a Document Type Definition is then don't worry about it for now and just stick with the default button.)
- Format selected text as 'heading 1' (Document tab)
- The default button will enclose your selected text in
<h1>...</h1>
tags to create a web page heading. The drop-down menu button allows you to select any one of the six web page heading sizes.
- Format selected text as 'center' (Document tab)
- This will enclose your selected text in
<center>...</center>
tags thus placing it in a generic block element and aligning it in the horizontal center of your web page. You can also use this to center images.
- Format selected text as 'paragraph' (Text tab)
- This will enclose your selected text in the
<p>...</p>
tags thus creating a paragraph.
- Format selected text as 'bold' (Text tab)
- This will enclose your selected text in
<b>...</b>
tags thus rendering it in a bold font style.
- Format selected text as 'italic' (Text tab)
- This will enclose your selected text in
<i>...</i>
tags thus rendering it in an italic font style.
- Format selected text as 'font' (Text tab)
- The default button will enclose your selected text in
<font>...</font>
tags with the face
attribute. The cursor will appear between the double quotation marks ready to type in the desired font face value. Example:
<font face="|">Your selected text</font>
The drop-down menu button allows you to choose between various combinations of font
attributes to apply including size and color.
- Format selected text as 'horizontal rule' (Text tab)
- Okay, perhaps the automated generating of tooltips in HTML Kit went a little overboard here because you can't really 'format selected text as a horizontal rule' (*chuckle*). This should more properly read insert a horizontal rule which is what this button will do. Read Horizontal Rules for more information about drawing lines across your web page.
- Format selected text as 'underline' (Text tab)
- This will enclose your selected text in
<u>...</u>
tags thus rendering it in an underlined font style.
- Format selected text as 'block quote' (Text tab)
- This will enclose your selected text in
<blockquote>...</blockquote>
tags thus creating an indented paragraph. This is typically used to indicate that the text is cited from an external source.
- Format selected text as 'comment' (Document tab)
- This will enclose your selected text in an HTML comment tag
<!-- -->
thus making it only visible in the source code.
- Frequently used text tools. (Tools tab)
- In my humble opinion, this is one of the most useful buttons on the HTML Kit Actions Bar. The drop-down list contains options to:
- Change selected text to all UPPERCASE or all lowercase
- Change all selected
<...>
to <...>
- Remove all line breaks (either HTML, carriage returns or both)
- Turn all carriage returns into
<br>
tags (paragraphing for dummies)
- Enclose all lines ending in carriage returns in
<li>...</li>
(instant list)
- Strip all HTML formatting (Remove <...> blocks)
- Make tables
...and more. This button is a MUST-ADD for users of all skill levels.
- Colors (Tools tab)" alt="Colors (Tools tab)
- This opens the Pick Color dialog which permits you -through a graphical user interface- to select a color and convert it into a hexadecimal color code. This is ideal for inserting font color values or background color values.
ADVANCED ONLY
- Tags Wizard (Tools tab)
- A fantastic tool which will no doubt take all the wind out of the sails of hardcore hand coders who think they're something special because they can write up a web page from scratch using just Windows Notepad. (Like me.) The Tags Wizard basically opens a massive drop-down list containing all standard HTML elements. Clicking on any particular element will open its respective Tags Wizard dialog which, in turn, lists all its applicable attributes. Click beside each attribute to reveal a text box to fill in a value. Click on Refresh to have the Quick Pick box list all the values already used with the selected attribute on the current page. Heh heh... There's just no words to describe the convenience that all this offers. But, like I said, suddenly I don't feel so special anymore... (Note: The default button is essentially inactive. You have to open the drop-down menu and pick a tag.)
- HTML Tags (Tools tab)
- This is similar to the Tags Wizard except that there's no 'wizard'. Just tags. The default button will drop in the start and end tag brackets with the cursor placed ready for you to type in the element name. Example:
<|></>
The drop-down menu button opens a list of all standard HTML elements. Click on an element to plunk its start and end tags straight into your document, no muss, no fuss. These will either enclose your pre-selected text or, in the event that no text is selected, it will place the cursor in between them.
- HTML Attributes (Tools tab)
- The HTML Attributes button is especially suited to work in conjunction with the HTML Tags button. Plunk in a tag and then place the cursor in between the element name and the end bracket in the start tag. Then use the default Attributes button to insert
|=""
into your document with the text cursor ready to type in the attribute name. Or use the drop-down button to open a massive list of all standard attributes. Click on the attribute you want to plunk into your start tag. It will automatically be spaced from the element name and the cursor will appear between the double quotation marks ready to type in a value.
- Format selected text as 'div' (Document tab)
- This will enclose your selected text in
<div>...</div>
tags thus rendering it in a generic block element. This is especially suited to formatting blocks of text using CSS.
- Format selected text as 'span' (Document tab)
- This will enclose your selected text in
<span>...</span>
tags thus rendering it in a generic inline element. This is especially suited to inline formatting using CSS.
- CSS Properties (Style tab)
- The default button will enter
style="|: "
into your document with the cursor ready to type in the CSS property. The drop-down menu button will open a massive list of all CSS properties. Click on a property to enter:
style="[PROPERTY NAME]: |"
...where [PROPERTY NAME]
equals the property you selected. The text cursor will appear ready to type in the property value. I imagine that this was intended be to used in conjunction with the HTML Tags button but I question why they didn't make it so that a space was included before 'style=' (which I found annoying enough that I eventually created my own style="|"
plugin which included the space).
- Format selected text as 'code' (Text tab)
- This will enclose your selected text in
<code>...</code>
tags thus rendering it in a monospaced font style.
So you've got your Favorites tab configured just right. Well warp speed, Mister Sulu!
But wait a minute.
Don't tell me.
This is not good enough for you.
You now find that:
- You're distracted by all those other Actions Bar tabs that you don't use.
- You don't like the default ordering of the buttons on the Favorites tab.
- You're running out of space on the Favorites tab.
And you begin thinking, "If only there was a way to create a new Actions Bar with my own custom-made tabs..."
Alrighty then, let's do just that ~>