This is new to me, how do I begin?


1. Creation of a Web Directory
2. HTML overview
3. Creating web pages in Netscape Composer
4. Additional web editing software
5. Placing web pages on the Internet

1. Creation of a Web Directory
The first thing you will need to do is to request that a directory be created for you on the Web server. This enables you to publish your files to the Internet from your computer workstation. For example, if you are a faculty member in the SAC English department, a directory will be created for you on the Web server under the parent directories of SAC/ENGLISH. To request a web page, complete and return the District's WEB PAGE OWNER AGREEMENT FORM. When the directory is created, you will be emailed your password to access the directory.

2. HTML Overview
Next, create your HTML files for your web page. HTML stands for Hypertext Markup Language. A HTML document is a plain ASCII text document that Internet browsers can read and interpret. HTML is comprised of tags such as:

<title>My Homepage</title>

Learning HTML is not difficult, but remembering all of the commands can be a challenge. Numerous books and web sites are available that provide a guide to the code for quick reference. A good working knowledge of basic HTML code can make creating and editing your site much easier. Since HTML documents are created using plain ASCII text, they can be generated using any text editor such as Notepad, Microsoft Word, Word Perfect, Simpletext or any others. Save your file with a .HTM extension rather than .TXT extension. For example, save file as HOMEPG.HTM not HOMEPG.DOC.

Online HTML references:

3. Creating web pages in Netscape Composer
If you would rather utilize a program that will create the code for you then you have several options for WYSIWYG (What You See Is What You Get) software. One of the easiest software to use is Netscape Composer which is part of the free Netscape Browser 4.0 and above package. To use Netscape Composer, open your Netscape Browser and go to FILE > NEW > BLANK PAGE. Once you are at a blank page you can begin adding text, images and links.

Tutorial for Netscape Composer:
http://home.netscape.com/browsers/using/newusers/composer/

Download the latest version of Netscape for free at the ACCD FTP Site:
a. Go to: ftp://ftp.accd.edu/pub/netscape/
b. Then, double click on the file: cc32e475.exe and it will be downloaded to your computer. You may want to place the file in the TEMP file on your hard drive. The download time will vary from a few minutes to an hour or more depending on your connection speed.
c. Once the file is downloaded, execute the installation by going to the cc32e475.exe file on your computer and double clicking it. The installation process will begin.

4. Additional Web Editing Software
You can also use Word Perfect and MS Word for web design. Simply design your web pages as if they were standard WordPerfect or MS Word documents and then SAVE AS > HTML. Unfortunately, both WordPerfect and MS Word are not very flexible editors so you may want to consider using a software program designed for web editing such as FrontPage, Dreamweaver, Go Live, or Netobjects Fusion.

Free Trial Versions of Web Authoring Software are Typically Available at the following Sites:

5. Placing webpages on the Internet
Once your HTML files are created and the District has given you rights to a Directory on the Web server you can publish your files to the Internet. There are several ways to transfer your files from your computer to the Web server. You can FTP your files, map a drive or just drag and drop your files to a shortcut folder on your desktop. One of the easiest way to transfer your HTML files to the Web server is the creation of a shortcut folder on your desktop which will allow you to drag or copy and paste your HTML and image files into your directory.

Directions for placing your HTML and images files in your directory on the Web server:
1. Right Click with your mouse on the "Network Neighborhood" icon on your desktop.
2. From the choices that appear choose "Find Computer."
3. When the Named: box appears type in "WWW"
4. If the "WWW" computer names appears with an icon, double click on the icon.
5. After you double click on the "WWW" icon, a group of computer names should pop-up. If you see "WWW" double click on it.
6 . Then double click on the parent directory name, "SAC."
7. Next you will want to double click on the name of your department (Ex. CHILDDEV or ENGLISH or IIS)
8. Then you should locate your directory within that folder and double click to open it.
9. Once you are in your directory you can confirm that you have rights to it by attempting to alter the contents. Go to FILE > NEW > FOLDER. If you have rights to the directory, it will let you add a new folder. If you do not have rights you will get the message "access denied."
8. Now you can create a shortcut to this directory. Go back one level so that you can see the name of your directory. Right click on your directory with your mouse and choose the option "Create Shortcut." A shortcut will be placed on your desktop.
9. Now you can just drop HTML/GIF/JPG files in the folder on your desktop and they will automatically be placed on the WWW server and the Internet.
10. To confirm that the web page you created is really on-line you need to open your Web Browser (Netscape, Internet Explorer) and type in the web address for your site.

How to determine your Web page's Internet address:
1. The first part of the web address will be: http://www.accd.edu/sac
2. Following http://www.accd.edu/sac will be a forward slash / and the the name of your department's directory (Ex. http://www.accd.edu/sac/english)
3. Directly following the name of the departmental directory should be a forward slash / and the name of your directory (Ex. http://www.accd.edu/sac/English/smith)
4. Lastly, a forward slash / and the name of your HTML file will follow the name of your directory (Ex. http://www.accd.edu/sac/English/smith/homepg.htm)

Are any templates available for building a Faculty homepage?


Yes. The Instructional Innovation Center created four templates which can be downloaded from the following website:

http://www.accd.edu/sac/sacmain/webinfo/templates.htm

HTML reference and tutorials.


Online HTML references:

How to download royalty free graphics and backgrounds from the Internet.


Numerous web site offer free graphics, backgrounds and animated gifs for downloading. To download a gif of jpg image, simply open your Internet browser (Netscape, Internet Explorer), place your mouse on the image you want to download, then right click with your mouse. In Internet Explorer choose the option "SAVE PICTURE AS" to download it. In Netscape, choose the option "SAVE IMAGE AS" to download it.

To save a background from a web page, open the web page in Netscape, click on a background area and right click with your mouse. Choose the option "SAVE BACKGROUND AS" to download it.

Free graphics can be found at the following web sites:

How to link to SAC homepage from your web page.


When linking to the SAC homepage, link to the following web address: http://www.accd.edu/sac/sacmain/sac.htm

For example if you add the following link to your web page:

Go to SAC Homepage

The HTML code is as follows:

Where to find SAC logos that can be placed on your site.

Logos can be downloaded from the following web site: http://www.accd.edu/sac/sacmain/webinfo/sacbuttn.htm

Recommended fonts which look the identical in all browsers.


When you write plain text on a web page, you may want to choose basic fonts which look identical in all browsers. If you utilize a font which is unusual, those viewing your page may not have that font and their browser will substitute another font which may not look as appealing.

Recommended fonts:

How to update your browsers (Netsape, Internet Explorer) for free from the ACCD FTP site.


Download the latest version of Netscape for free at the ACCD FTP Site:
a. Go to: ftp://ftp.accd.edu/pub/netscape/
b. Then, double click on the file: cc32e475.exe and it will be downloaded to your computer. You may want to place the file in the TEMP file on your hard drive. The download time will vary from a few minutes to an hour or more depending on your connection speed.
c. Once the file is downloaded, execute the installation by going to the cc32e475.exe file on your computer and double clicking it. The installation process will begin.

Download the latest version of Internet Explorer for free at the ACCD FTP Site:
a. Go to: ftp://ftp.accd.edu/pub/ie/
b. Then, double click on the file: ie4stand.exe and it will be downloaded to your computer. You may want to place the file in the TEMP file on your hard drive. The download time will vary from a few minutes to an hour or more depending on your connection speed.
c. Once the file is downloaded, execute the installation by going to the ie4stand.exe file on your computer and double clicking it. The installation process will begin.

The importance of keeping image sizes small.


Visitors typically loose interest in web pages that take over 5 seconds to load. If your graphic images are large (over 20k) you may be loosing traffic to your site:

Tips for keeping image sizes small:
1. Resolution for web images should be 72 dpi (dots per inch). Higher resolution will cause unnecessarily large file size. Most monitors will not be able to display a higher resolution than 72 dpi.
2. The more colors your graphic uses, the more file space the color information will take up.
3. In general, the smaller an image is, the quicker it will load.
4. Use an image slicer to dice images up. Six to ten small images load faster than one large one. Software such as Macromedia Fireworks 3 and Adobe Image Ready have image slicing tools.
5. Graphic Optimizer Software Software such as Ulead Smart Save Pro 3.0, Macromedia Fireworks, Adobe Image Ready optimize images (reduce file size) while retaining image quality.
6. Provide a reduced thumbnail of a large graphic on your main web page, which will link to the larger graphic on a separate page.

Using ALT Tags on Images to assist ADA (Americans with Disabilities Act) compliance.


Good accessibility means that full content is available when one or more of our senses are not being used. While this applies to all people with physical disabilities, it can also apply to those who are not permanently disabled. The World Wide Web Consortium (http://www.w3.org) has released a set of formal standards for building accessible web sites: http://www.w3.org/TR/WAI-WEBCONTENT/ Most guidelines are easily met. To determine if your web pages are ADA compliant, you can submit them to Bobby, a free service which will list any accessibility errors.

One of the main guidelines for accessibility refers to providing a text equivalent for every non-text element. For example, use ALT tags on GIFS and JPGS. An ALT tag is simple a text description of the image. After the image name in the HTML code, add: alt="Description of image"

Example of an ALT tag in HTML code:



Web Accessibility Online Resources:

Validating your HTML code with Netscape.

If you know there is an error in your HTML code, but you cannot determine the problem, viewing your source code in Netscape will assist you. Code that is incorrect will be blinking in a different color from the remainder of the code.

Instructions for viewing your code in Netscape:
1. Open your web page in Netscape
2. Go to VIEW > PAGESOURCE (ctrl + U)
3. The code in error will be in an alternative color and blinking.

Naming HTML files with 8 characters or less.

The standard naming convention for HTML files is 8 characters or less. If you name your HTML files with more than 8 characters, the name of your HTML page will be truncated by web browsers and difficult for your visitors to remember.

For example, "myhomepagebluebackground.html" will be truncated to "myhomep~.html"

Creating a Shortcut to your Webpage.

In the Netscape browser:
a) Open the desired web page on your browser
b) CLICK THE RIGHT SIDE OF THE MOUSE, and select the "Create Shortcut" option from the drop down menu
c) At the next prompt, type in the desired name for the shortcut
d) Click the "OK" button, and the shortcut will be created on your desktop.

In the Internet Explorer browser:
a) Open the desired web page on your browser
b) CLICK THE RIGHT SIDE OF THE MOUSE, and select the "Create Shortcut" option from the drop down menu
c) Click the "OK" button, and the shortcut will be created on your desktop
d) At the desktop shortcut icon, click the name that appears (on the shortcut), and then you can edit it as desired

High contrast backgrounds and text.


Using high-contrast hues can improve the readability of type on a color background. For example, black text on a white background is readable, but black text on a dark blue background would be difficult to read.

Issues with the display of white text on dark backgrounds (can create printing problems).

Typically Internet Explorer will print web pages which consist of white text on a dark background correctly.

Unfortunately, if you attempt to print a web page with white text on a dark background in Netscape, usually the text will not print out. This may discourage visitors from capturing information from your site. If you have a web page with white text and a dark background, you may wish to provide them instructions for printing the page correctly in Netscape.

Netscape instructions for printing a web page with white text on a dark background:
1. Open the web page with the white text and dark background.
2. Go to (in Netscape 4.0 and up) EDIT > PREFERENCES > APPEARANCE > COLORS
3. Change the TEXT COLOR to BLACK and change the BACKGROUND COLOR to WHITE
4. Click on the option "ALWAYS USE MY COLORS OVERRIDING DOCUMENT"
5. Click OK. Then go to FILE > PRINT.
6. Now the web pages will print correctly.
7. Once you are done printing, you may want to return your Netscape Preferences to their previous settings.

Web safe colors.

When a graphic is loaded into a web browser, the browser uses its’ own color pallet to display the image. As a result, your images may not appear as intended. As a result, companies that develop web browser software have come up with some solutions. Most of the common web browsers have adopted a common pallet called the Browser Safe Pallet to reduce pallet problems. There is a standard palette of 216 colors that are common between Mac and PC platforms.

Web safe color resources:

HTML color design for disabled users.

When designing a web page, be sure that all information is conveyed by context and not by color. Also, the foreground and background color combinations of web pages should provide sufficient contrast.

HTML color design resources:

Importance of adding "Date Last Updated" information to your home page.

Your web pages will have more topical interest f your visitors can deduce when the page was last updated. Simply add a "Site Last Updated xx/xx/xx" statement somewhere on your web site.

How to identify the creator of each web page with a name and Email address link.

Visitors to your site will often have questions about the web site, your department, or the college. It is helpful to provide the Web master's name and email address on each web page for easy access.

For example, you could add a statement such as, "For questions about this site, please Email John Smith at jsmith@accd.edu."

The pitfalls of excessive flashing animations.

A graphic that flashes a few times when a visitor first enters your site can be eye-catching, but graphics that flash continually may annoy your visitors. When you design your gif animations you may want to consider limiting the looping (number of times it plays) to 3 or 4 times.

How to check web pages for consistency in multiple browsers.


HTML code interacts differently with certain browsers. Open your web pages in current versions of both Internet Explorer and Netscape to check for any discrepancies of link colors, table size or font.

How to test your web page appearance in differing resolutions (ex. 640 x 480 and 800 x 600).

The three most common screen resolutions (the number of pixels across and from top to bottom on a monitor) are 640 x 480, 800 x 600 and 1024 x 768. It is a good idea to check your web pages in each resolution. Web pages viewed 640 x 480 resolution may appear huge, while they may appear tiny in 1024 x 768.

Instructions for adjusting your screen resolution:
1. In Windows 95/98/NT, go to START > SETTINGS > CONTROL PANEL.
2. Once you are in the CONTROL PANEL, double click on the DISPLAY icon.
3. Go to the SETTINGS tab and drag the SCREEN AREA bar up or down to change the resolution.
4. Click OK and the settings will take effect.
5. Open your browser and view your web pages.
6. To return your resolution to it's original settings, to back to START > SETTINGS > CONTROL PANEL > DISPLAY > SCREEN AREA and return your resolution to its previous combination.

Including sound on your web page.

If you choose to add audio to your web site, include audio that is quiet and soothing or audio that the visitor can turn off easily. Keep in mind that visitors could be surfing from the office.

Creating an alternative to sites which require plug-ins.


In general, you may loose traffic to your site if you require a plug-in (software that provides additional functionality) on your home page. You may want to allow your visitors to go to your homepage and see what you are about, then they can decide if getting to the rest of your web pages is worth downloading or running the plug-in.

List of common plug-ins:

Blocking Search Engines.


Search engines detect web pages through meta tags which are used to provide information that describes the properties of a document. Block search engines or robots from locating temporary or experimental web sites (ex. student compositions or class-specific projects) by adding the following meta-tag to your HTML code. <meta name="robots" content="noindex"> This tag should be inserted in the HTML coding as shown in the example below:

Submitting to Search Engines.


A search engine is a program that takes key words from your site and searches a database of Web pages giving you back a list of pages that might be helpful. To ensure that your webpages can be successfully discovered by search engines, you need to include a description of the content in a meta tag (meta tags provide information that describes the properties of a document.) Ex. <meta name="keywords" content="San Antonio College, English, ENGL 1301, John Smith"> This tag should be inserted in the HTML coding as shown in the example below:



Once you have inserted meta tags in your webpage, you can submit them to search engine sites. Information on the procedure for submitting your pages is listed below:

.