CWA's Guide to Establishing and Maintaining Local Websites
Getting Down to the Nitty Gritty
This section deals specifically with the technical mechanics of site design and implementation, and is aimed primarily at Webmasters, designers, and anyone who may be involved in setting up your site.
| The Language of the Web: A Brief Overview* |
The code used to format text, graphics, and other items for the Web is called hypertext markup language (HTML). HTML code lets the browser know how to display items on your computer. For an example of the most basic HTML codes, see Figure 1 (the shaded areas are HTML codes), and to see how that code looks through your browser, see Figure 2. Most of these codes, which are also known as tags, come complete with an opening tag, e.g., <HTML>, and a closing tag, </HTML>.
Most HTML tags need closing tags, which usually look the same as the primary tag but have a slash before their content. Closing tags tell your computer when to stop applying a certain style or attribute to the content it is displaying. For example, in Figure 1 below, <B> tells the computer to begin bolding text at "Local" and </B> tells the computer to stop bolding text after "123."
If more that one attribute is applied to the same section of text, the tags can not overlap. To bold and italicize "Local 123," the correct format would be:
<B><I>Local 123</I></B>
not
<B><I>Local 123</B></I>
If a tag is opened within another tag, it must be closed within that tag as well.
Figure 1: Local 123 Home Page - HTML Tags
<HTML>
<HEAD>
<TITLE>CWA Local 123 Home Page</TITLE>
</HEAD>
<BODY>
<CENTER><H1>CWA Local 123</H1></CENTER>
<CENTER><H2>Home Page</H2></CENTER>
<HR>
<P>Welcome to the home page of <B>Local 123</B>, the union representing CWA members working for XYZ Communications in Somewhere, USA. For more information, contact:
<BLOCKQUOTE>
Jane Doe, President<BR>
CWA Local 123<BR>
101 Main Street<BR>
Somewhere, USA 10001
</BLOCKQUOTE>
</P>
</BODY>
</HTML>
Figure 2:
Following is a detailed explanation of the four most basic HTML tags you will use in every document you create:
Container Tags
<HTML></HTML>: This tag tells your browser that this is an HTML document that gets housed on the Web. It is required.
<HEAD></HEAD>: These tags are used for internal identification purposes. The information between them is not displayed on the main screen of the browser.
<TITLE></TITLE>: This tag contains the name of your Web page. In most browsers, the title appears in the band at the very top, above the main window of the browser. The title is very important because it is the main place where most search engines (e.g., Lycos or Alta Vista) will look to see if your page fits with the searcher's request. If a title is not specified, the search engines will label your page "Untitled" or "no title," and this will make it more difficult for the searcher to determine whether he or she needs your information.
<BODY></BODY>: These tags define the main portion (text included) of your document. The content within shows up in the main window of the browser.
Formatting Tags
Here are some of the basic tags used to format text on a Web page:
<H1></H1>: The "header" tags are used for headlines, and they exist in various text size levels, ranging from 1 to 6, <H1> to <H6>. The most frequently used tags are <H1>, <H2>, and <H3>. <H1> produces the largest text while <H6> produces the smallest.
<P></P>: These tags are used to identify a normal paragraph with standard size text. The paragraph is aligned with the left side of the screen by default. Using <P> tags creates a double line break above and below the paragraph.
<BR>: This tag inserts a single line break. It does not require a closing </BR> tag.
<CENTER></CENTER>: These tags are used to center text on the viewer's screen.
<B></B>: These tags create boldface letters.
<U></U>: These tags are used for underlining text. However, underlining should be used sparingly because the viewer may confuse it with hyperlinks.
<I></I>: These tags are used for italics.
<HR: This tag inserts a horizontal rule, or line, into the Web page. It does not require a closing </HR> tag.
<BLOCKQUOTE></BLOCKQUOTE>: These tags are used for left and right margin indents.
<SUP></SUP>: These tags are used for superscripting, ordinal numbers (e.g., 5th), and footnotes.
<SMALL></SMALL>: These tags are used for small text that is surrounded by larger text.
Creating Your Own Web Pages
Here's a simple HTML exercise for you to try on your own:
- Open the text editor on your computer (WordPad is available on most PCs; SimpleText is available on most Macs), and type in all of the text in Figure 1.
- Save the document as a plain text file ("Text Document"), and give it a name with either a .htm or a .html extension, e.g., 123.html. (You also might want to create a new directory in which to store your Web documents.)
- Open your browser and in the Address or Location field, type in the location of your document, e.g., c:\Web\123.html. The document should appear as it does in Figure 2. If not, toggle back to your text editor and check your typing. (You may have forgotten to close a tag, for example.)
- After you have coded Local 123's home page, try experimenting with the text and formatting tags to add other elements to your homepage. Be sure not to change or eliminate the container tags, however, because they are necessary Web page elements. After experimenting, you may want to save any additional changes under a different document name, e.g., mylocal.html, on your computer.
Note: When naming the home (main) file of your Web site, check with your Web hosting service for the name they have assigned to the default page of your Web site. Variations include "index.html", "index.htm", "default.html", "default.htm", etc.
* (Note: Portions of these HTML scripting instructions were adapted with permission from the American Federation of State, County and Municipal Employees (AFSCME) Webmaster's Corner. See www.afscme.org/publications/Webmstr.htm for additional information.)
Now that you have mastered basic HTML, you may wish to continue to develop and expand your skills and also learn how to create tables, frames and cascading style sheets, and how to add graphics, color, and hyperlinks. Following are a few online resources that may help:
HTML
One of the best ways to learn about HTML is to view documents that are already on the Web. When you see an interesting Web site, you can view the underlying code simply by clicking on "View" and "Page Source" (in Netscape) or simply "Source" (in Internet Explorer). To copy the code, highlight and copy it, then open up a text editor (be sure to have container tags included first) and paste it in.
Forms and CGI
If you want to put a guest book or a mail-in form on your Web site, you may need to use common gateway interface (CGI) scripts in Perl or C or another programming language. (However, some Web hosting services, such at AT&T WorldNet, will supply these scripts for you on their Web hosting platform.) If you plan to create the scripts on your own, following are some places that offer online CGI tutorials, free CGI scripts, and CGI script-writing software:
Active Server Pages (ASP)
ASPs are server-generated pages, which can call other programs to access databases and can display different versions of a Web site to different viewers. ASP consists of ASP scripts but it is not itself a computer language; instead it supports various scripting languages, such as "VBScript" or "JScript." For details regarding ASP scripting, see the CNET Builder.com Intro to ASP section, located at builder.cnet.com/webbuilding/pages/Programming/ASPIntro/?tag=st.bl.3882.dir1.bl_ASPIntro and experiment with coding and starter scripts. A note of caution: be sure to check with your Web hosting service before using ASP on your site since not all hosting services support it.
Java
Java is a highly interactive programming language that creates custom animation programs known as "applets." These animated programs are platform independent and are small enough to travel over standard phone lines; once they reach their destination, they expand. The beauty of Java is that it is highly accessible and compatible. Java may be employed on any operating system and is supported on the major browsers without requiring a plug-in. The HTML tag for Java is <APPLET>.
Java gets compiled when coded, meaning that it goes through a post-processing step that finalizes the code and completes the programming process. The compiled code is not visible to the end user.
Most Java applets require very little modification and are actually easier to use than CGI because the directory structure is less complicated and no special commands are necessary to make them work.
Java can also be used in the same way as CGI and ASP to dynamically generate Web content through use of "servlets." On high volume Web sites, Java is much faster than GCI because the Web server does not need to begin a new process each time a request is made. Here are a few Java resources:
JavaScript
Despite its name, JavaScript is not related to full-fledged Java. Basically, JavaScript lets you add features such as scrolling text into a Web page or create a button "rollover" (a change in color or texture when the user moves the mouse pointer over it). JavaScript is also responsible for the miniature browser windows that sometimes pop up on your screen when you click on a link. Unlike Java, JavaScript gets compiled on your end user's machine, meaning that the raw code is embedded inside HTML documents. The programming advantage is that you can "view the source" of a JavaScript Web page and cut and paste the elements that you want onto your site. It is common courtesy, however, to credit your JavaScript source.
JavaScript is even easier to use than Java because one does not need to have a separate file to make the application work. The code is incorporated right into your HTML document. Here are a few places where you can pick up free Javascript application codes:
| Behind the Design: An Overview of Graphics |
Obtaining Graphics
One of the easiest ways to get graphics for your Web site is to "borrow" them from other Web locations. (To do this, you right click on the image and save it in a directory, then import it into your HTML editor or drag it across the desktop.) Using graphics from the Web is okay to do as long as you are taking basic generic elements and not copying an original copyrighted graphic that belongs to an artist who created it. The rule of thumb here is that if you're not sure, don't use it.
One Web-ready graphic that is permissible to copy is the CWA logo, available at www.cwa-union.org/resources/local-website-tools/cwa-logos.html. Also, you may be able to borrow graphics from other local Websites if you get the local's permission first.
Following are some Web sites that offer generic GIFs and clip art:
Creating Your Own Graphics
The other way to get graphics for your site is to create them yourself. As noted previously, you will need to have a graphics program installed on your computer in order to create and modify graphics for your Web site. The most popular program is Adobe Photoshop, but this program also is expensive and complex, and usually requires that the person using it be trained in how it works. Other less expensive and less complex programs include Paint Shop Pro or Corel Photo Paint.
You can find out more about how to create and upload Web-ready graphics by visiting the following Web sites:
Graphics Files Defined
When it comes to identifying Web graphics, three basic file types exist: GIFs, JPEGs, and PNGs. It's easy to convert JPEGs, GIFs, and PNGs from other file formats, such as PICT, BMP, TGA, TIFF, or EPS, by using Photoshop or other graphics software. No matter which file type you use, however, your image file size should not be larger than 20K, and total images on a page should not be more than 50K, in order to ensure quick downloading time.
- GIF files explained: GIF (.gif) stands for Graphic Interchange Format. GIFs are generally used to compress graphics such as logos, illustrations, or cartoons but can also be used for photographic images. Several types of GIF files exist: transparent GIFs, are used to create the illusion of irregularly shaped artwork; interlaced GIFs are designed to help the end viewer get a rough idea of your visuals and to make a decision whether to wait or to move on before the image finishes loading. For animated GIFs, multiple images are stored as separate blocks within one single GIF document; when that document is viewed, the multiple images display, one at a time, and produce "streaming animation."
- JPEG files explained: JPEG (.jpg) is the abbreviation for Joint Photographic Experts Group. JPEG's are generally used only for photos. The exception is when a graphic is combined with a photograph; then it may be saved as a JPEG.
- PNG files explained: PNG (.png), which stands for Portable Network Graphics, is a "lossless" compression method, meaning that no quality loss is involved in the conversion process. This is a relatively new cross-platform Web file format and is gaining popularity among Web designers.
| Setting Up Bulletin Boards and E-Mail Discussion Lists |
Many local Web sites offer chat areas, e-mail comments sections, forums, bulletin boards, or e-mail discussion lists (also called "listservs"). These are places where members can touch base and discuss issues related to the union or specific local activities. If you decide to incorporate any of these items, please note that it will be difficult to monitor all postings. Also, the local may be held responsible for violations of labor or FEC regulations (see Legal section).
Following are some sample bulletin-board rules and disclaimers:
- CWA Local 9430 -- "CWA does not assume responsibility for the accuracy of the statements and/or opinions of the letters written to our Web site in electronic form. We will be more than willing to print any rebuttals to any of the opinions expressed in this publication."
- NABET-CWA Local 31 -- "Rules: Posting of people's names, phone numbers, e-mail addresses, or any personal information is prohibited. Profanity, slander, and defamation of character are prohibited. NABET/CWA bears no responsibility for the content of posts. Members must exercise prudent judgement when posting comments. If you know you don't belong here, please leave now. All posts leave an IP address footprint. Offending posts will be removed."
Many ISPs and Web hosting services will create and maintain chat areas, bulletin boards, and listservs for you. To find out more, contact your ISP or hosting service directly.
Following are some sources for listserv or forum hosting:
- Bravenet Web Services www.bravenet.com
- FanBlast www.fanmass.com
- Delphi Forums, Inc. www.delphiforums.com/ - a free Web resource for people who want to create and participate in active online communities, or "forums."
- L-Soft www.lsoft.com - uses LISTSERV® e-mail list management software to provide e-mail solutions for electronic newsletters, discussion groups and personalized, direct e-mail messaging.
| What's Involved in Sound and Video |
Because the Web will increasingly involve the convergence of any and all mediums, you may want to at least become familiar with the process involved in adding sound or video to your site, even if you are not yet prepared to actually incorporate these elements just yet. If you do wish to include such files on your site, be sure to consider the capabilities of your members' computers and offer them other options, such as text, for receiving the materials.
| An Overview of Sound Files |
Scanning, digitizing, or otherwise creating sound files may be either easy or complex, depending on how professional you want the outcome to be. If possible, try to start out with the highest-quality sound available (24-bit is ideal) and downscale for your audience (to 8-bit) later.
Recording Your Own Sound
Many computers have a microphone and sound-editing software installed, which you can use to record narration or sound effects. However, keep in mind that the result will likely not be very professional sounding, so if you want to record professional-quality sound, hire a professional.
Keep in mind, also, that just as graphics have acceptable file-size limitations, so do sound files. The quality of the output will depend on the resolution you choose.
File Formats
Many types of audio files are found and used on Web sites, and which one you use may depend on several factors, including the type of computer system and authoring software you are using. Here is a brief look at several popular formats:
- MPEG - This is a popular, high-quality audio compression format, which usually requires sophisticated hardware that is often available only to professionals. Your audience will need to download a converter application to hear these files. When authoring, MPEGs should be saved with the .mpg extension.
- RealAudio - The first example of streaming audio on the Web, these files are transported in "packets" or bits, so that the entire file doesn't have to be downloaded before listening to it. Because the quality is not great, RealAudio files are best used for narration and not for music or other sounds. A RealAudio player must be installed on your system to hear these files. To record such files using a RealAudio encoder, visit www.realaudio.com. Your site provider must also pay RealAudio a licensing fee before you may offer such files from your site.
- WAVE - This file format was developed by Microsoft and IBM and is native to Windows platforms, although it may also be played on a Mac. The extension for the file is .wav when authoring.
| A Brief Overview of Video |
There are two main types of streaming: progressive streaming (on demand) and real-time streaming (live or in real-time). Progressive streaming takes a compressed video file and downloads it to your hard drive via HTTP over the Internet. Real-time streaming is usually broadcast to your browser directly from a server. Real-time streaming uses RTSP (real time streaming protocol) so you'll need access to a special video streaming server.
Progressive streaming is the easiest route for beginners as it requires no special server. You can use a standard Web server to upload your compressed video file. Quality is generally better using progressive streaming than with real-time.
The three main video formats on the Web are RealVideo, Quicktime and Windows Media.
RealVideo is the most popular and widespread video format used on the Web. You must buy the server software to use it; the cost after software purchase is based on connection usage.
Windows Media from Microsoft is also widespread. Although Windows runs its own proprietary server protocol (not the standard RTSP), it's free and it runs on the widely available Windows Server Platforms.
QuickTime Streaming Server from Apple is the third major format. It's an open standard and available on multi-platform servers from UNIX to NT, and it's free.
Forward to Appendix of Sites and Resources
Back to Maintaining Your Site
