HTML Clinic: Are You Logical Or Physical?

by Kevin A. Siegel

You can format your Web pages using one of two categories of text style: physical and logical.
 
Physical text styles are newer styles found in HTML versions beyond version 2.0. They can be ignored by some browsers. Logical text styles are part of HTML 2.0 and can look exactly like some of the physical text styles. The difference between the two text styles is that when viewed in older browsers, most of the physical text styles would be ignored.
 
Work with Physical Tags
 
  1. Start a Word processor (such as NotePad) and type the phrase IconLogic's Web Site Development Basic
  2. Click in front of the word IconLogic's
  3. Type <B>
  4. Click after the word Basic
  5. Type </B>
  6. Click in front of the phrase "Web Site Development"
  7. Type <U>
  8. Click just to the left of (in front of ) the </B> tag you typed
  9. Type </U>

    Physical Tags

    The tags you just typed, if viewed via a Web browser and assuming the page contained the minimum HTML tags such as the HTML and BODY, will turn your text bold (<B>) and underlined (<U>).

    How physical tags look in a browser

    Combining the bold and underline tags the way you did is known as nesting. Remember to type your tags in reverse order when nesting. In other words, you typed the bold tag, then the underline tag, then the stop underline and then the stop bold.

Work with Logical Tags 

  1. Click in front of some text and type <strong><EM>

    These two tags will display as bold and italic via a Web browser.
  2. Click after the text and type </EM></strong> to close the tags

    Logical tags

    Keep in mind that text tagged with logical tags will typically look identical to physical. However, while they look the same, there is a difference. Not all browsers will display logical styles the same way. You may expect the text to be bold, but end up with plain text that has a different color. On the other hand, if the browser doesn't support physical styles, the text might not get any formatting at all.


Want to learn more about HTML? Attend our HTML Basics class. Click here for more information.

Grammar Workshop: Do I Need a Comma There?

by Jennie Ruby

 
Two kinds of sentences are very close in appearance, but one needs a comma, and one does not. Here are some examples:
  • Morris parked the truck in the reserved space and wondered whether he would get a ticket.
  • Morris parked the truck in the reserved space, and he wondered whether he would get a ticket.
In the first sentence, no comma is required before the word and. This sentence has one subject, Morris, and two verbs, parked and wondered. Since Morris is the subject of both verbs, you do not put a comma before the second verb. If you did, that would be like putting a comma here: Morris, wondered whether he would get a ticket. There is a grammar rule that says you do not separate the subject from the verb. This kind of sentence has what is called a compound predicate: one subject with two verbs.
 
In the second sentence, there are two subjects and two verbs. Even though Morris and he are actually the same person, the word he counts as a separate subject. In effect, you are combining two entire sentences. When you combine two sentences, you need to clearly separate them. A comma is required before the word and to make the separation clear. This kind of sentence is called a compound sentence.
 
By the way, he did not get a ticket. My advice? Use a comma in a compound sentence, do not use a comma in a compound predicate, and do not park in the reserved space unless it is reserved for you.
 

 

About the Author: Jennie Ruby is a veteran IconLogic trainer and author with titles such as "Essentials of Access 2000" and "Editing with MS Word 2003 and Adobe Acrobat 7" to her credit. Jennie specializes in electronic editing. At the American Psychological Association, she was manager of electronic publishing and manager of technical editing and journal production. Jennie has an M.A. from George Washington University and is a Certified Technical Trainer (Chauncey Group). She is a publishing professional with 20 years of experience in writing, editing and desktop publishing.

Search Engine Optimization: Web Page and Blog Updates are Critical to Search Engine Placement

 
Haven't updated your blog for a while? Go ahead and make some edits to your existing blog posts. Google loves it when you do. Google's PageRank algorithm always tests to see how often a web page is updated, and also checks the length of time between changes in a blog post's content. Google rewards these edits with better search engine PageRank, which means you make it closer to the top 10 search results for the keyword phrases that exist in your blog posting.
 
Want to learn more about SEO? Join Mary later in November for a 2-day live, virtual training event. Click here for more details.
 

 

About the Author: Mary Gillen is a writer, teacher, Web developer, marketer and tech geek… all under one hood. She has owned her own business since 1981, and has more than 13 years experience developing Web applications.

Questions of the Week

Adobe Captivate 3 Question: Why Doesn't My SWF Play?

I published my Captivate 3 lesson and posted the following files: a SWF, a skin SWF and an HTML file. When opening the HTML file, I expected the SWF to play. I know it's on the server… but my browser window is blank. What's up?

 
Answer
 
You're missing the JavaScript file from the group (I see that you didn't mention it among the files you posted). Post the file named standard.js (the file is published when you publish a SWF) and the SWF will play.
 
Adobe Captivate 3 Question: Is There A Quick Way to Switch Languages?
 
I made a Captivate project and I accidentally had it set to the Japanese language option. Is there a way for me to convert the Japanese text to English?
 
Answer
 
There is no way to automatically convert the text captions to English. However, you can export the captions to Word (File > Export), have the text converted or use a free tool like the one found at Google and then import the changes back into Captivate (File > Import).
 
Adobe Captivate 3 Question: Can I Use Captivate 3 on Vista?
 
Is Captivate 3 Vista compliant? I'm thinking of getting a new computer but won't if Captivate isn't going to work on that operating system or is problematic.
 
Answer:
 
Yes, Captivate 3 is Vista-compliant. Captivate 2 is not.
  

Got a question you'd like answered? Email me.

Announcing Our Newest Book…

Integrating Adobe's Technical Communication Suite
 
The Adobe Technical Communication Suite (TCS) is a complete solution for authoring, managing and publishing technical information and training content in multiple formats and languages. The suite combines four powerful programs:
  • Acrobat 3D
  • Adobe FrameMaker 8
  • Adobe RoboHelp 7
  • Adobe Captivate 3
Our new book, Integrating Adobe's Technical Communication Suite will introduce you to Adobe FrameMaker, RoboHelp and Captivate and then get you up and running with the integration process. To learn more about this book, click here.

Adobe RoboHelp 7: Something Revealing About RoboHelp’s Menus

 
Adobe RoboHelp version 7 is arguably the best RoboHelp version ever… and considering that the program has been around for a long time, that's saying something.
 
If you are new to RoboHelp 7, you'll be happy to know that you can customize the keyboard shortcuts, create your own toolbars and arrange your own workspace (known as an Environment).
 
While I just love the RoboHelp 7 interface and very much prefer it to the look and feel of Adobe RoboHelp 6, I'm not a big fan of menus that don't immediately show me all of the available commands.
 
Not sure what I'm babbling about? Start RoboHelp and select any of the menus (the File menu is a great place to start). Notice that the full menu only appears after a delay. Maybe I'm showing my age… or my lack of patience… but I want my menu commands, and I want them now.
 
If you'd like to set RoboHelp up so that you always see the available menu commands, follow these steps:
  1. Choose View > Toolbars > Customize
  2. Select the Options tab
  3. Select Always show full menus

    Always show full RoboHelp 7 menus

  4. Click Close
And that's that… go ahead and check your menus… very revealing!

Want to learn more about Adobe RoboHelp 7? Click here.

Adobe Captivate 3: Publishing a Single SWF with a Skin Playbar

If you intend to import your published Captivate lessons into FrameMaker or RoboHelp, you will likely find yourself in a pickle if your Captivate lesson includes a skin with a playbar. When you import the main SWF into FrameMaker or RoboHelp, you won't see the playbar.
 
You could always solve the problem by not using a skin at all–you could use a BMP playbar. In that case, assuming you publish as a SWF, and don't include the HTML file, you will end up with a single SWF that you could import. However, the problem with BMP playbars is… well, they're BMP playbars. Besides not looking as good as Skin playbars, BMP playbars occupy space on your slides, often covering important areas of the lesson.
 
If you'd like to keep the Skin playbar, and still publish just a single SWF, read on.
  1. Open a Captivate project and rename it (some of the steps below cannot be undone… if you don't like the results, you'll need a backup of your project to start over)
  2. Choose Project > Skin
  3. On the Playback Control tab, select a skin from the Skin drop-down menu
  4. Still on the Playback Control tab, select the Bottom Position

    Bottom Position

  5. On the Borders tab, deselect Show Borders (remove the check mark from the box)

    Turning off the skin's borders

  6. Click OK

  7. Choose Project > Resize Project
  8. Remove the check mark from Maintain aspect ratio

  9. Increase the project's Height by 32 pixels (this will leave room for your playbar at the bottom of your published SWF)
  10. From the If new size is larger area, select Keep project the same size and fill background with color

  11. If necessary, change the Background color to White
  12. If necessary, select Top Center from the Position project drop-down menu

    TopCenter

  13. Click Finish
  14. You will be alerted that you cannot undo your changes… click Yes

  15. Choose File > Publish
  16. Select Flash (SWF) from the Publish options at the left of the dialog box
  17. From the Folder area, select a publish destination

    SWF options

  18. From the Output Options area, deselect Export HTML (click OK when you are warned that your project may not display correctly in a Web browser)

    Export HTML deselected

  19. Click Publish
If you were to browse to the folder containing your published project, you would see that just one SWF has been published.

One SWF

 
 
Import the SWF into RoboHelp or FrameMaker, or open the SWF with a Web browser, and you'll see that the SWF includes the Skin's playbar–even though there isn't a Skin SWF.


Do you have a Captivate production problem that's making you pull your hair out? Email your problem and let others learn solutions from your experience.
 

 
Want to learn more about Adobe Captivate 3? Click here.

Adobe FrameMaker 8: Reference Pages Part 1… What Are They?

 
FrameMaker 8 offers three types of pages: Body, Master and Reference.
 
Body pages are where you will do most of your work. This is where you flow your text and place pictures.
 
Master pages are for the repeating elements: the headers, footers, logos–items you want to appear on every page and in the same position.
 
So what's the role of those pesky Reference pages? Lots of good stuff, which I will help you explore over the next few weeks.
 
Let's start with the basics. In a new default document, when you chose View > Reference Pages, you land on a page that looks like this:
 
Four frames, three of which contain ruling lines, and four text labels.
 
You see four frames, three of which contain ruling lines, and four text labels. The labels are for your convenience, they don't do anything except call out the names of the frames.
 
Try this: click on the edge of one of the four frames and look at the middle of the status bar at the bottom of the page–that's where the all-important frame name appears. OK, so what do we do with them?
 
The first two are used automatically when you insert a footnote or a table footnote into your document. FrameMaker calls in the appropriate frame and places it above the first footnote on the page. Regular footnotes get a rule, with space below, and table footnotes just get a bit of space (that's why there isn't anything in the TableFootnote frame).
 
If you don't like the way the footnotes look in your document, change its appearance on the Reference Page. You can make the footnote frames taller or shorter to control the vertical spacing above the first footnote, or modify how the line looks (make it longer or shorter, move it up or down within the frame, or change its color, width or style).
 
Try changing the Footnote rule on the Reference Page so that it looks like this:
 
Changing the Footnote rule
 
And you will change all the footnotes on the Body pages so that they'll look like this:
 
Result of changes made on the Reference page
 
And you thought you were stuck with the default footnote rules! Tune in next week for more on Reference page rules.
 

Want to learn more about Adobe FrameMaker? Come to our upcoming Introduction to FrameMaker 8 class. All you need is a computer with fast Internet access, a headset and the current version of FrameMaker (the 30-day trial version of the software works fine). You can ask all the questions you like because all virtual classes are led by a live instructor–this is not pre-recorded content.

 

About the author: Barbara Binder is the president and founder of Rocky Mountain Training. Barbara has been a trainer for nearly two decades and was recently recognized by Adobe as one of the top trainers world-wide for 2007. 

HTML Clinic: Heading and Paragraph Tags

by Kevin A. Siegel

 
There are six levels of headings within HTML, numbered H1 to H6. Think of your headings in order of importance. H1 is the largest and should be the most important; H6 is the smallest and least important. The font you get when you choose a heading is not in your control. Each browser selects fonts based on the preferences of the person viewing your document.
 
Heading and paragraph tags create vertical space in your Web document. The exact amount of space is not up to you. Instead, vertical space is controlled by the browser.
 
Add Headings Tags
  1. Open your template (you learned how to create a template last week)
  2. Click just below the BODY start tag
  3. Type <H1>Module 01: basic tags</H1>
  4. Press [return] twice to add some white space between the tags
  5. Type <H3>Welcome…</H3>
     
    Heading tags added to a page
  6. Save your work.

    This is how the page will look in a Web browser:

    Web page with heading tags

Add Paragraph Tags

  1. Click after the <H3>Welcome…</H3> tag
  2. Press [return]
  3. Type <P>to IconLogic's Web Site Development Basic. These materials will not only teach you HTML, the programming language that web pages are written in, but through our project based approach we will teach you a methodology for constructing a basic web site with links and graphics all in one day!</P>

     Paragraph tags added to the page

  4. Save your work.

    This is how the page will look if viewed in a browser:

    How paragraph tags look when viewed in a Web browser

Next week:

Physical and Logical tags.


Want to learn more about HTML? Attend our HTML Basics class. Click here for more information.

A Contract: Friend or Foe?

By Quinn McDonald

 
Is it smart to stick to a contract or work on a handshake?
 
Contracts are the backbone of business. Whether it's clicking on 'agree' when we want to access a website or signing our name to an unread cell phone contract, we are surrounded by pages of fine print. The question is, do you want to run your business that way? Is it a help or a problem?
 
 
A contract spells out what you and the client expect from each other. Like a good negotiation, a good contract benefits both parties. What makes a good contract?
  • Clear language
  • Easy-to-understand rules
  • Agreements for both parties
  • Concise language, the basic minimum to get the point across

But times have made the contract seem loathsome, and in our litigious society, the perception is not who signed a contract, but who has the most powerful lawyer to break a contract.

What are your choices? You can work with a handshake, and many people still do. Sometimes, all you need is to make sure you and your client agree. These ideas aren't legally binding, but may work for you and your client. They have elements of both a handshake deal and a contract.
 
Careful Communication Replaces Contract
 
You can replace a contract with a good conversation and a follow-up email. Sit down (or call) your client and have a talk about what each of you will do and not do. Agree to details. Take notes, then follow it up with an email. Make sure the client returns an email that agrees, then keep both emails.
 

An email agreement means you'll have to follow up. If you sell items, you may have to keep inventory, and check up on items sold. Communication is the key in this case. And as trust is built, less checking up is required.

 

Limit Client Decisions

 
Be clear about what you offer and let the client know it ahead of time. This is often done in a letter of agreement. If you provide a service, this is a good way to be clear about what you offer, what you do not include, payment amounts and schedules and some basic understandings.
 
If you are a designer, you can spell out your process and make it as clearly defined as if you had a contract.  Clients pick a choice from a set number of designs, typefaces and colors. Interior designers or graphic artists can insist clients take color swatches to make sure the colors/size they loved at the initial meeting is still what they want when they are back at their own office.
 
Once the initial choices are made, ask for 50% payment up front, before you start work. A charge card payment makes a pretty good contract. Limiting what a client can change also limits what a client can be unhappy with. Include delivery dates and a clear list of what will be delivered and when.
 
Whether you create and have clients follow the letter of a contract or not, communication is still the best answer to solving problems. Nothing will guarantee success at every turn, but good communication, keeping e-mails, providing color swatches and payment in advance are all good ways to keep problems from happening.
 


About the Author:
Quinn McDonald is a writer and nationally-known speaker who has achieved the "Professional" designation from the National Speakers Association. Contact Quinn through her website, QuinnCreative.com.