Wayland Business Association

Members Help Information – HTML Tools

There is one field, the "Displayed Description" field (at bottom of the image below), that has special buttons to help you edit your text. Some of the buttons are obvious, very similar to those in various word-processing and other office applications (e.g., B for bold, I for Italics, icons for setting text left, centered and right). Others are less obvious.

CoInfoMain

The editing "toolbar" has three rows. In the first are the common tools (from left) such as Bold, Italics, Underlined, Strike-through. Also there are the paragraph alignment icons... left, centered, right and justified.

Toolbar 222

The last two pull-down menus on far right of the first line (shown below in close up) are less obvious. One is for selecting various preset styles (collections of formatting choices) to apply to a paragraph or text – this is NOT available as we have NOT set up any styles for you to use! The second is the standard HTML paragraph formatting options.... Paragraph (P), Heading1 (H1), Heading2 (H2), etc.

Styles and Formats

To apply a Format option to a whole paragraph you do NOT need to select or highlight the entire paragraph, only place your cursor anywhere in that paragraph.

However, to apply a text formatting option (e.g., bold or italic), you first must select the text you want. For example, to make "printer problems" bold or italic, first you select the words, then click the icon. The result will be display in the window instantly – that is you do not have to save it to see it. You DO have to hit the Save button at the bottom of the page to save any and all changes you make on the page.

Edit Window

The icons on the second line may, in part, be familiar. From the left, you can set a number of lines to be a bulleted list (shown below) or a numbered list. Next you have icons to indent our outdent a paragraph. The next group of two icons is for undoing and redoing an action.

HTML Edit - Make Bulleted List

Then, in the middle of the second line, it gets interesting. The icons that look like a chain and a broken chain are used to make a hyperlink to a page or a Web site or to set a file download. Use these ONLY if you have some knowledge of HTML. We'll give one example.... linking to a Web site: www.greenwoodassociates.com.

In the field "Displayed Description" we've entered a line that says, 'Click here to visit our Web site.' First we highlight the text, then we clicked the "link" icon (closed chain links) which pops open a new window to create/insert/edit a link.

VERY IMPORTANT NOTE: if you want to link to any page on the World Wide Web, you must START your Link/URL with "http://" then, the www.domainname.com. So the entry should look as shown below, "http://www.greenwoodassociates.com". The other options are to control where the page opens (ours will pop open a new window vs. replace the viewed page with the new link), and we gave it a title.

Setting Links

BE SURE to click the "Update" button to save your link. Then also be sure to hit the Save button at the bottom of the edit page to save ALL changes and additions! (We can't remind you enough to hit SAVE!!!)

Finally, a brief note about the button on the far right of the second line.... that simple says, "HTML." This is the "Edit HTML Source" button. This is only for those who know what they are doing, or who want – really want – a headache. The image below shows you the HTML source behind what you see in the edit window. The window is what you call "WYSIWYG" –– pronounced whizzy-wig –– and meaning 'what-you-see-is-what-you-get.' Old timers will remember this being real important when word processors on PCs were first introduced – it was a really selling point. Then Apple's first computer made it the norm. If you ever used a product called "Word Perfect," you'll really this a "Reveal Codes." HTML or hypertext markup language is nothing more than a modern version of the 60s' and 70s' "embedded codes" word processing. OK... enuf history...

HTML puts simplied codes in front of an at the end of a string of characters to control formatting. It's that simple. The code pair for bold is: <b> and </b>. And for a headline, <H2> and </H2>, and so on. It gets trickier, but that's the overview (and probably more than you ever wanted to know). The only time you will really need to view the HTML source is when there is a problem.... When the WYSIWYG view doesn't seem to be showing what you want, you might find your text or whatever is on the wrong side of one code or another. So, you go into the code editor window, make your change.... and hit "Update" which is the "Save" button!

HTML Editing

There are a few other buttons that are either obvious at this point ... or you won't need them!

Good luck, and call if you need help.

 

Return to top

Return to Members' Help Index

Other

If you need further help using the Web site, please call Webmaster Cliff Kolovson of Pointed Communications at 508-655-9696 weekdays during normal business hours.

© Copyright 2006 – Wayland Business Association