Home | Internet tutorials | assignments | Computer Tips | Net Assignments

Site Seeing. . . Enhancing your Web Site

� �
Send assignment responces and comments to: [email protected] �
�HTML Resources:

html point A very interesting and helpful html help site

Introduction to HTML 4.0


HTML Interactive Tutorial for Beginners


Beginner's Guide to HTML

Technical Suggestions:

Interactive Technical Tips of the Week(topics to date)

Browser/Editors: �Consider using a WYSIWYG �Brower/Editor like AOLPRESS 2.0. Free (download) http://www.aolpress.com.�if you are a novice. �There are more advanced editors such as QuickSite 3.0. �SRP $50.00 (download) http://www.sitetech.com.

Publicizing Your Web Site:

Beginners Guide to the Internet:

Strategies and Tools: Once you know what you want, you can use the strategies and tools described here to implement those decisions from start to finish. �In either case, it's time to decide: What do you want your web site to contain? �In what sort of environment do you want to create and modify the HTML files that make up your web pages?

More on HTML:

HTML (short for Hypertext Markup Language) is the "tagged language" that underlies all the web pages you see. All "tagged language" means is that there are tags, similar to commands, written between angled brackets like so that they stand out from thecontent and tell the content what to do. That's the Markup part, the "M" in the HTML. �HTML's other major feature is the ability to easily imbed cross-references to otherdocuments. That's the Hypertext part, the "H" and "T" in HTML. �In case you've avoided seeing any HTML so far and want to do so now, click theView Document Source option on Netscape Navigator's View menu (or the equivalentchoice if you're using some other web browser). You'll see the HTML source "code" for this web page that enables you to read it and causes it to look the way it does. One way or another, you're going to have to edit the HTML that determines a page if you want to change the page's contents and appearance. But there's a lot more to it .A few minutes spent now, deciding what you want to do and how you want to do it, will prepare you for the work that needs to be done.

Making the right decisions

Deciding on your site's contents: Web sites can differ in so many ways that there's little point in making specificsuggestions about what yours should contain. But overall,strategicaly,: web pages �should have a clear purpose. Will surfers visiting your site immediately recognize what they are looking at? � Remember, you're completely at the mercy of your visitor'slevel of interest. Keep it clean. Keep it simple. Don't be repetitive; say something once and put in hypertext links to it on other pages rather than saying the same thing twice. The best approach to deciding what content to include and how you want it to look is to check out what others in your market are doing with their web pages. Learn to use yourweb browser's Search functions and find your competitors' web sites as well as those of your suppliers and major customers. Look at what the leading companies in other industries are doing with their web pages. Look at materials you've already got in other media such as print. "Repurpose" the good material �into web pages if it's useful and well written. Make sure it gets broken up into web-page-sized chunks and gets headings added if necessary. But avoid the "shovelware" tendency to sling everything you've got at your web site and see what sticks.

Determining your web site's appearance: In determining your web site appearance ,taste varies, so generalizations are as broad as with content. Be purposeful. Keep it clean. Keep it simple. �Browse the net and see what you like. Some web pages are getting to be much like magazine covers, where the look says as much as the words. You might want to look at Art and the Zen of Web Sites for some useful guidelines. . Because of the way HTML works, it's relatively easy to use a page you like as a template and just change the contents. �

Background Information to help you design your web site: Here are a few reference sites that can lead you to abundant information about designing and implementing good web sites:

HotWired makes a nice Webomatic toolkit available with all sorts of web-related resources.

Netscape's "Creating Web Sites" section can point you to many other resources as well.

Thomas Boutell offers up a World Wide Web FAQ sheet.

The Electronic Freedom Foundation has a Guide to the Internet if you're new to all this and feel a bit overwhelmed.

David Siegel provides design tips and esthetic opinions on his Web Wonk page.

Yahoo has a World Wide Web index page with well over a thousand links, including daily news.

Tools for WWW Providers contains a number of links as well, though they warn that some may be out of date.

The HTML Writers' Guild has an HTML Resources page.

Picking the right approach to editing web pages �HTML was designed to be an easy means of communicating across networks, so it's not particularly complicated or hard to learn. And the good news is that you can choose from among several ways of generating the tagged language files you need. �You may be able to use your word processing �or editor software and generatecorresponding HTML files more or less automatically.You can use software that may work a like the word processor you use now and hides from you the fairly unattractive HTML files it generates.You can use software that lets you see the HTML files you're writing but gives you buttons and other tools that insert tags for you in ways that are meant to be intuitive. �You may be able to convert word processing formats into "rough and ready" HTML files.

You can edit the HTML files directly with any plain-text editor, from the simplest editing utility in your operating system to a full-on software engineering tool like emacs. �You can get somebody you know to do it for you. The knowledge is spreading fast. You can hire somebody who designs and develops web sites professionally. While the best designers charge significant fees, if you're an organization whose image is important, it may be money well spent. It tends to be cheaper than other forms of advertising and promotion. And if you look around enough, you can probably find somebody nearby who will do it for you reasonably. In some areas it's even becoming a buyer's market with package deals and published prices. Just be a little careful, since skill levels and design sense vary widely. �So how do you decide which approach is right for you? Well, if you'd prefer to find somebody or hire somebody, go do that. Browse around some other sites first and see what you like so you can communicate your wishes with examples. But if you'd rather do it yourself or at least see what's involved, here's how you might set up a software environment and a process for developing your own web pages. Refer to Software resources you can use for a number of links to other sites concerned with webpage design. Be guided by the way you like to work now. �Do you like to work with complex software tools that, once learned, enable you to do a lot with a few keystrokes and mouse clicks? �Do you use paragraph styles in your word processor? �If you do, choose page creation software that works in a similar fashion. Just do a little homework, pick well, and expect a learning curve along with the opportunity to invent workarounds to occasional software-induced obstacles. Once you get the hang of it you'll be more productive, because there's a lot of repetitive tasks in cranking out HTML. And you can also automate publishing procedures so that you can specify your FTP login, password, and default remote directory once and publish a file you've edited directly into your preview directory with one click of your mouse. Do you prefer to work more intimately and directly with the files themselves rather than having to figure out a bunch of software that's about as mature and standardized as word processors were a decade ago?

You'll have more control and spend less time figuring out your tools. �If so, do you prefer to automate tasks you do routinely in order to be more productive? The best HTML editors enable you to set up sophisticated customized production environments that match the environment you're publishing into. If you're webmastering, you'll be spending most of your time in this environment. Or is simplicity such a virtue in your eyes that you'd rather just do what you're doing than figure out some other way to get it done? Sooner or later, you'll find yourself making last-minute tweaks to files you're uploading with your FTP software, which you should set so that it views the contents of files you're transferring with a plain-vanilla text editor you can use to make careful �of last-minute changes to typos and bad links. �Even if you work primarily with a high-level tool such as Netscape Navigator Gold, consider spending some time learning to edit HTML directly anyway. If you do a lot of web page work, it's likely you're going to find it easier in the long run to learn a simpler tool as well that lets you edit the HTML files directly once they'recreated. �If you're using a combined browser and editor like Netscape Navigator Gold �to edit an existing file containing nested bulleted lists, for instance, you may find yourself trying in vain to cut a few paragraphs to paste it elsewhere and getting acryptic error message about some tables you never knew you created and couldn't find if you tried. �Or if you get to clicking those handy little buttons with too much enthusiasm, what looks right on the screen may contain some pretty gnarly HTML by the time you're done. �You're going to have to go in there and clean up. �Once you've learned your spectrum of tools, link them together so that so that they can pass files from one piece of software to another like a bucket brigade. With a little work you can set up a complete web-creation environment composed of a WYSIWYG word-processor, like AOLPRESS a powerful HTML editor, FTP software, and a plain text editor.

Developing your page content

Using Netscape Navigator Gold to edit and publish your web pages Netscape Navigator Gold can be configured in a number of different ways, depending on how your web site is or will be organized and how you like to work. �AQuickStart page may be available which aollows you to work quickly, simply, and effectively. It is appropriate if you are creating a new site or are willing to edit any links in an existing site so that all your pages and images are stored in the same directory: �When your web site is created ,specified an FTP location when uploading files to your site.Type that location in the Navigator dialog box's Publish to (FTP or HTTP): text box. .Type the FTP login name you specified when you registered with ISP in the dialog box's User name: text box. �Type the FTP password you specified when you registered in the dialog box's User name: text box. .Click the Save password checkbox if one exists. �.Make sure the Maintain links checkbox is not checked.. .Make sure the �Keep images with document . .In the HTML source: text box specify the text editor or HTML editor you want to use when editing the HTML file directly. Windows 95 users can simply type this: notepad .If you're using Netscape on a Wintel platform, from the Options menu choose Save Options. Netscape Navigator Gold is now configured so you can upload and download filesautomatically, as long as you keep all you r web pages and images in the same directory. Make sure that all the hypertext links in your web pages use rel ative references such as ./imagefile.gif and ./about.html rather than absolute links like http://www.mysite.com/products.html. To find out more about absolute and relative references read �Creating hypertext links to other pages. Downloading your we b pages so you can e dit them �.Use Netscape Navigator Gold to reach your site and the web page you want to edit. page. Make sure the Save images with document checkbox is checked. �.If you expect to replace an existing file, make sure you save it under the same name as the original file you download. �Editing your web pages You can edit your pages directly using Navigator Gold in much the same way as you'd use word processing software. Online help and tutorials typically show you the way.. As soon as you finish editing and save the document using Notepad's File menu, a �Netscape Navigator Gold dialog box will inquire whether you want to see the changes you made using Notepad. �Upload your web pages once they're edited .When you've finished editing your page using Navigator Gold, choose Publish.,or similiar command....Decide whether you want to include the images contained in the document. If you've changed them or replaced them as part of the process of editing your page, you should certainly upload them. If you haven't changed them, you w on't need to upload them as long as you're publishing the file to the same directory from which you downloaded it, but uploading them won't hurt. If you decide to include all the files in the same folder (or directory) as the file you've edited, make sure that none of them are earlier versions of files already in your preview directory, since anyfiles you include will overwrite any existing files of the same name. � Navigate to your preview directory or maximize the browser and verify that the page, its images, and its links are all correct.

�Editing web page text �Now you can flesh out the content of your web pages by editing the HTML files directly.If you're using Netscape Navigator Gold or another high-level WYSIWYG HTML editor,all you have to do is select and edit text in the same way as you would with a word processor. But this page tells you how to work directly with HTML files using a plain-text editor or an HTML editor. Editing text directly within an HTML file .Navigate back to your web site's home page if you didn't in the previous step, so you can see how it looks. �Start up your FTP client software. You may use software you already have or download it from our Software resources you can use page. If you want to knowmore about how this procedure works, here's more information. �.Connect to the FTP address . If you configured your FTP software so that /preview is the initial directory on the remote host, you'll be in the right place. If you went to your web site's home directory instead, use your FTP software to navigate to the preview subdirectory. �You should see a list of files on the remote system. If you used �a wizard to create a prototype web site, you'll see a file called home.html. This is your home page. If you uploaded a file you created otherwise, your home page will normally be called index.html. .Use your FTP software to download your home page to a convenient location on your local computer. It's a good idea to create a separate directory for the pages you'll be working on so they don't become confused with o ther files. You're now ready to edit the file. �Editing existing pages .Simply look for a paragraph of text you want to change and highlight it..Type the text you would like to see on your home page. It will replace the highlighted text and line breaks. HTML ignores any "carriage returns" you insert by pressing the Enter key on your keyboard, so you can add new lines whenever itmakes it easier for you to read or work. Just be careful not to leave out any spaces between words. .Repeat the selection and typing procedure for the text sections underneath however many headings you specified when you were creating the page with a Home page wizard.. �Preview your edited pages with an HTML editor or browser .If you're using an HTML editor that lets you preview or otherwise display the page, do so now. Otherwise, use a web browser such as Netscape Navigator to look at the file. If you made your changes carefully, you should see the words youtyped replacing the original lines of "Text text text text, Text text text text." If the appearance isn't what you expect, look back at the changes you made. I particular, make sure you didn't accidentally delete an angle bracket that encloses an HTML tag. Note: If you see no changes at all, you may be looking at an earlier version of the file temporarily saved in your computer's memory or hard disk; this is called caching. You can click your web browser's Reload button or choose Reload from your browser's View menu to replace it with the most recently saved version. If you're using Netscape Navigator and still don't see changes that should be there, choose Network Preferences from Navigator's Options menu, set memory cache and disk cache to 0, and then click the two Clear Cache Now buttons. .If you're using a plain text editor, you'll need to save the file and then look at it with your web browser, or use your FTP software to upload the edited and saved copy back to your preview directory. Then make sure your web browser is pointed to the right page. Then click your web browser's Reload button or choose Reload from your browser's View menu to replace it with the most recently saved version. �Repeat these steps to replace text in any other web pages you created.

Creating hypertext links to other pages: A hypertext link is an HTML tag which specifies what web page or image will be displayed when the tagged text or image is clicked. Web pages exist in a flexible environment because HTML was designed to be as open as possible, so there are several different ways you can specify hypertext links: Absolute links to the location of the web page or image, such as "http://www.yourcompany.com/logo.gif." No matterwhere in the world someone is when they see a link like this, if they click it they will go to your site and see your logo. Relative links that are dependent on the location of the current page, such as "./logo.gif" or even just "logo.gif." In effect, these links say, "Starting from this page, look in the same directory for an image called logo.gif." Another relative link would be "./images/banner.jpg," which says, in effect, "Starting from this page, look for a subdirectory called images, and in it look for banner.jpg." �There are several things you should pay attention to here: Both types of reference are expressed in conventional Unix syntax, which uses forward slashes ( / ) to separate directories rather than the backslashes ( \ ) used by Windows and MS-DOS platforms. �If you're developing your web pages on one of these machines, you may need to change your backslashes to forward slashes before you upload your files to your GlobalCenter web site's preview directory. In some cases this can be done automatically, through a preference or option in your HTML editor or FTP software. This may be an explicit option such as "Convert to Unix format" or it may be implicitly set up when you define the host type to which you're connecting as "UNIX (standard) or "Sun Solaris." �A single dot (.), in Unix, means "the current directory." This also works in the Windows / MS-DOS environment. It's are commended way to express a relative link because it leaves nothing to chance: "./logo.gif" means the same thing as"logo.gif" but it's unambiguous both to the GlobalCenter server and to anybody reviewing or updating your pages. �A double dot (..), in Unix, means "the parent directory of the current directory." This also works in Windows environments. It's a recommended way to express a relative link because it leaves nothing to chance. For instance, if you choose "Document Source" from the Netscape Navigator View directory while looking at this page, you'll see that the hypertext link in the next paragraph looks like this: ../../hpublish.shtml �That's an unambiguous way of saying, "Starting in the directory in which this web page is located, navigate up one directory and then up another directory and then look for the file called hpublish.shtml. You can safely use absolute references to web sites other than your own.

�Adding graphics to your web pages : You can use the techniques you learned in the last section to edit any text in any web page. Now let's look at how you can add or replace graphical elements such as backgrounds, horizontal lines, buttons, and icons. Adding graphics using Navigator Gold If you're using Netscape Navigator Gold or another high-level WYSIWYG HTML editor, all you have to do is select the image you want to change and choose Image... from the Properties menu. If you're inserting an image rather than replacing one, choose Image... from the Insert menu. Then specify the URL or file location of the image you want to use in the Image file name text box. Click the Copy image to thedocument's location checkbox if you specified a file and want it moved to your preview directory when you upload the file. Adding graphics using a plain-text or HTML editor �If you're using a plain-text editor or an HTML editor that lets you work directly with the HTML file, follow these steps: .Navigate back to your web site's home page if you didn't in the previous step, so you can see how it looks. �Start up your FTP client software. If you don't already have a copy, you should download a program from our Software �resources you can use page. If you want to know more about how FTP software works, get some help. �.Connect to the FTP address . If you configured your FTP �software so that /preview is the initial directory on the remote host, you'll be in the right place. If you went to your web site's home directory instead, use your FTP software to navigate to the preview subdirectory. �.You should see a list of files on the remote system, including one called products.html. This is the products page you created . .Use your FTP software to download your products page to a convenient location on your local computer. You're now ready to edit the file. .Open the file with a plain text editor or HTML editor. � Using Netscape Navigator, navigate to the GlobalCenter clip art web directory page. Click Backgrounds to display a list of background types you can use. � Browse through the available backgrounds until you find one you would like to use for your products page. .Position your mouse above the background image and click your right mouse button. If you're using a one-button mouse on a Macintosh, that's the button you want to click. � .Choose Copy this Image Location from a popup menu. �.Return to the products.html file you're editing and look for the line near the top that describes the background for the page. Exactly what it says depends on the background you chose when using a wizard, but it will look something like this: �


�.If you wish to experiment further, try adding other graphical elements from the GlobalCenter clip art collection. Just makesure that the image file location is placed within quotation marks inside an HTML tag. Of course, you can use the same approach to add graphic elements from anywhere else on the World Wide Web, or from your own computersystem. Just make sure that you don't use material copyrighted by others without their permission. . . .

Publishing your web pages: �A�preview directory is also where you should upload any files you've edited, eitherusing FTP software or the Publish function in such programs as Netscape Navigator Gold and Hot Dog Pro or Hot Dog32. If you configure these programs so that the default "Publish" directory on the GlobalCenter web server is the FTP directory specified in the confirmation letter you received from GlobalCenter once your web location wasestablished, you can automatically upload files to that directory every time you publish or use FTP.Once you've uploaded files to your preview directory, you should review them there with your web browser, checking each link to make sure it takes you to the page you want and otherwise verifying the form and function of your web pages. Once you're satisfied with them, the next step is to publish them to your world-viewable web site. Back up any existing files If you haven't yet published any files from your preview directory, you can omit this step. But if you already have a world-viewable site, you'll probably want to download the existing files and make a backup. Here's how: .Make sure that you've navigated to your web site. �Publish your pages. If you want to know more about how this procedure works, get some help. See for yourself what ite visitors will see.Check your hypertext links to make sure that everything works .

Administering your web site: Enhancing your web site content shows you how to make preliminary design and content decisions, decide on a set of tools to use, download anything you need, configure yourtools, and change the look and feel of your web pages. Now you should spend a few minutes learning about the different aspects of site maintenance you are responsible for. Once you understand what's involved and have worked with your site for awhile, you'll agree that it couldn't be much easier. Learn how to publish the files in your preview directory so that they appear in your"real" web site where everyone in the world can see them. �Learn how to back up and download files so that you can keep a copy on your own computer in case you introduce errors or for other reasons want to revert to an earlier version. �Learn how the subdirectories that make up your site are organized, including where to put the files you edit and any files you want your visitors to be able to download. .


Music map
30 k 30 k 30 k 34 k 36 k

Music Player(5 Tunes) Click on 1 of 5 marbles
This page was last authored and updated 20 December,1998 by�Charles W. Schilling PhD

Return to kaleidocope site


Return to site Seeing Home page
Home | Internet tutorials | assignments | Computer Tips | Net Assignments