Index

3.5 Putting Everything Together

Session 3 Html Authoring Intermediary

Resources

3.5.1 Root Directory of WWW and Relative Address of Web Page:

3.5.1.1 Root Directory of Web:

The root directory for placing the web page and subfolders is provided by the web-hosting company. It can be any name but is usually named as "html", "public html" or "www". Sometimes, the web hosting company directs you to the exact folder when you login with the information it provides. The "index.html" or "index.htm" must be put into the root directory as the home page. When visitors type and enter the hyperlink of the web site, the request will invoke a request pointing towards the home page on the www server which is actually the index file in the root directory for hosting the site. The index file is thus the ultimate reference point for all the other web pages and directories/folders.

3.5.1.2 Absolute Address/URL vs Relative Address/URL:

Absolute URL

An Absolute URL is an absolute URL specifying the exact location of a file/directory on the internet. Each absolute URL is unique, which means that if two URLs are identical, they point to the same file, e.g.:

expression:
http://www.um-gallery.com/ or
http://hhcc.um-gallery.net/

code:

Relative URL

A relative URL points to a file/directory in relation to the present file/directory. On www, the index file on the root directory is the common reference file/directory for the relative URL. You cannot use relative url with a browser to get you to the file on the www. It is supposed to be used within an html document, e.g.

Using a Relative URL in an <IMG> tag:
<img src="../images/email.gif" width="..." height="..." /> where

"../" means up one level
"images/" means "going to the subfolder of "images" from where you are.

3.5.2 Designing a Structured Site:

3.5.2.1 Why a Well Structured Site

With an unstructureed site, where a careless designer dumps every file - images, html files, external files, and scripts - into the top-level directory, a simple 10-page Web site could easily have 100 files in the top-level directory. Updating the content of site may implies an immense work in editing every web pages being affected. Eventually they get out of control. Then you will encounter the following problems:

Waste of time to search the content
Waste of time to debug a page
Careless deletion of files and causing deadlink
Redundant and even contradictory content on the web server

3.5.2.2 Navigation Tree and Web Structure

The following is the structure of this workshop which is designed as a virtual website under a actual domain and working like a www. Note that the main pages in the site - index and other critical web-pages are the only ones in the top-level directory. The other files are placed in their proper sub-folder. Each folder has a descriptive name that clearly identifies the types of files it contains. Try to conform to a consistent and expressive naming convention.

File and folder structure of "http://web4dummy.um-gallery.com/"

Imagine an organization like our IO that maintains a fairly large Web site because they use it to communicate with owners, tenants, customers, staff and publicize events. The site contains general information, pictures from different events, and an archive of online newsletters. Even with a basic directory structure, the site's size could quickly get out of control if it is not well structured at the very beginning.

3.5.3 Steps to Build the Web Site:

1. Select a Web Template and copy all the files and subfolders to the root director.
2. Create all the other sub folders and put the element of content in the relevant folders accordingly.
3. Create all the intended html pages by copying and renaming the sample index file repeatedly.
4. Edit the index file to insert all the links which is common to all web pages. Usually these operation appliy to the URLs on the menu bar.
5. Use frame to display the URLs grouped together in the form of side bar, menu or list which may be modified in the future. The URLs are stored in a separate but simple web page contain nothing but the collection of URLs. When its content is updated, all other web pages with frame accessing to this page willl be automatically updated.
6. Work out a good documentation system to manage the archive data. On the internet, all data are supposed to be kept forever. The ever lower cost of digital storage make the accumulation of information possible.

3.5.4 Some more Techniques

3.5.4.1 Redirect of Web Page: Add the following code the the head section of the web page.

seconds : the number of seconds the page is displayed, before performing the redirection.
http://www.otherdomain.com/index.html: any absolute or relative URL that will be displayed after the delay has expired.

3.5.4.2 Use of CGI or Scripting Language:

Not all web hosting company allow their client to use CGI on their server. This may cause security problem on their side. Java script that

3.5.4.3 Use of Custom Made Google Searching Engine:

For the time being, using the google searching engine on web site is free of charge. Open an account with google then you may set up a customized searching engine for your own site. Google generates the code for you. The following is an example for a searching engine customized for our web-site.

code

<form method="get" action="http://www.google.com/search">
<div style="border: 1px solid black; padding: 1px; width: 180px;"> <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" /><br />

<input name="q" size="23" maxlength="255" value="" type="text" /> <br />
<input value="Google Search" type="submit" />
<p><input name="sitesearch" value="www.um-gallery.com" checked="checked" type="checkbox" /> <span style="color: rgb(0, 0, 102);">only search
www.um-gallery.com</span><br />

</p>
</div>
</form>

The engine look like the following:

3.5.4.4 Optimization for Searching Engine:

The leading search engines, such as Google, Bing and Yahoo!, use crawlers to find pages for their algorithmic search results. Pages that are linked from other search engine indexed pages do not need to be submitted because they are found automatically. Search engine crawlers may look at a number of different factors when crawling a site. Not every page is indexed by the search engines. Distance of pages from the root directory of a site may also be a factor in whether or not pages get crawled. The following are methods for a site builder to increase the prominence of his site.

Cross linking between pages of the same website

Writing content that includes frequently searched keyword phrase

Updating content so as to keep search engines crawling back frequently

Adding relevant keywords to a web page's meta data, including the title tag and meta description

URL normalization of web pages accessible via multiple urls

using the "canonical" meta tag or via 301 redirects

Note that search engines sometimes have problems with crawling sites with certain kinds of graphic content, flash files, portable document format files, and dynamic content.

3.5.4.5 Building a Vertual Site:

Some web-hosting companies provide their clients a control panel to simplify the building of virtual domain. In some other case, you have to create a .htaccess file and upload to the root directory of the site (working with unix system with Apache as web server). However, on a PC, you may not be able to open a file with a "dot"(.). Just use whatever name and then rename it after you upload the file to the server. The following is the code for making a subfolder a virtual domain:

code in the ".htaccess" file in the root directory of our website:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/blog/
RewriteRule (.*) /blog/$1
RewriteCond %{HTTP_HOST} ^imagebank.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/imagebank/
RewriteRule (.*) /imagebank/$1
RewriteCond %{HTTP_HOST} ^videoworks.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/videoworks/
RewriteRule (.*) /videoworks/$1
RewriteCond %{HTTP_HOST} ^hhcc.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/hhcc/
RewriteRule (.*) /hhcc/$1
RewriteCond %{HTTP_HOST} ^essence.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/essence/
RewriteRule (.*) /essence/$1
RewriteCond %{HTTP_HOST} ^web4dummy.um-gallery.net$
RewriteCond %{REQUEST_URI} !^/web4dummy/
RewriteRule (.*) /web4dummy/$1

3.5.4.6 Password Protecting a Folder

Protecting files on your website from unauthorized users requires two files- the ".htaccess" file and ".htpasswd" file:

The .htaccess Code

copyAuthType Basic
AuthName "restricted area"
AuthUserFile /home/davidwalsh/html/protect-me-dir/.htpasswd
require valid-user

The above code protects a directory called "protect-me-dir" at root level. The "AuthUserFile" value is always specific to your hosting configuration.

The .htpasswd Code

copydavidwalsh:daWHfZrDLB88.
rodstewart:roFulYxC2.8ws
cssexpert:csmnmq.M8T5ho

The .htpasswd file contains the usernames and passwords of allowed users. One per line. The passwords are MD5'd for security purposes.

To generate encrypted passwords that meeting the security standard for your .htpasswd file, you can use my .htaccess password generator or other password generating software.

3.5.4.7 Setting Email Account:

Go to the control panel of the web-hosting company and find out the function for maintain the email server. Gnerally speaking, you may set up a number of email accounts, their password and storage limit. Some value added functions like auto forwarding or auto reply may be available depending on the policy of the service provider.

Resources:

1 Free Web Page Template Released under OSM(Open Source Movement) License

Site / Owner	URL
oswd.org	http://www.oswd.org/
Open Web Design	http://www.openwebdesign.org/
Open source Template Site	http://opensourcetemplates.org/
Open Source Web Templates oswt	http://www.oswt.co.uk/browse_designs.php
Themebot	http://themebot.com/free-website-templates/

2 Web Clip Art under Free License:

2.1 Still Image

Site / Owner	License/Remarks
http://www.freegraphicsworld.com/	Creative Commons Attribution 3.0 license.
http://www.free-graphics.com/	Claimed to be in public domain
http://www.specialweb.com/original/	Claimed to be in public domain
http://www.hellasmultimedia.com/webimages/	free for non-commercial purpose
http://openclipart.org/	Claimed to be in public domain
http://www.clker.com/	derived from creative commons CC0 public domain dedication
http://www.barrysclipart.com/	Not all of them are free. See the license
http://icons.mysitemyway.com/	claimed to be free on home page
http://thevintagemoth.blogspot.com/	not free for all

2.2 Gif Animation

Site / Owner	License/Remarks
http://www.hellasmultimedia.com/webimages/anim-htm/anim.htm	free for non commercial purpose
http://www.animatedgif.net/	Claimed to be in public domain

2.3 Photograph

Site / Owner	License / Remarks
freerangestock.com	Claimed to be totally free stock photography and textures! Free stock photography for commercial or non-commercial use at freerangestock.com. Please read their very sensible terms of use: use them to illustrate and embellish YOUR work, but don't sell THEIR work as your sole content, whether it be in a clip art collection or on a t-shirt, mug, or some other print-on-demand product. A photo credit is appreciated.
MorgueFile Free Photo Archive	Free photos available for commercial or personal use. Browse by category or search by individual tags.
http://www.imageafter.com/	Free graphics and textures (great for background-images) available for commercial and noncommercial use. Lots of nature, architecture, industry, miscellaneous objects, and abstract patterns.
http://www.pixelperfectdigital.com/free_stock_photos/	Great selection of sharp-looking stock photos on many categories, including some striking-looking photomanips plus a selection of "cartoon" smiley faces expressing different moods. For commercial and noncommercial use, except for use in company logos and print-on-demand (you can't sell their graphics). Website graphics a-ok, no link needed.
http://www.freefoto.com/index.jsp	Large stock photography library. All images available for comemrcial/noncommercial use with link and attribution.
http://www.bigfoto.com/	"themes" tab, which covers everything else -- people (with a nice collection of hands doing things), nature, food, fountains, fireworks and more! Terms: They ask for a link to Bigfoto.
http://freestockphotos.com/	Excellent photos in certain categories: Animals, Athens, Christian, Egypt, Israel, Near East, Plants, Rome, Scenery, Sky. Up to 10 may be used without fee. Must retain freestockphotos.com watermark and/or link back to site with freestockphotos.com. See Copyright/Terms of Use
http://publicdomainpictures.net/	An excellent collection of free photographs. They ask for credit and a link back.
http://www.public-domain-image.com/	Public domain photos, fairly good quality and a large collection. No rights reserved, no linkback needed.
http://openphoto.net/	Large archive of Creative Commons photos organized by category. Check the licensing for each photo (they use the CC icons I explained above).
http://www.wildlife-pictures-online.com/free-stockpictures.html	Three pages of safari photos of African wildlife: zebras, lions, cheetahs, etc. Terms: Credit and a link back to the site.
http://karenswhimsy.com/public-domain-images/	Vintage postcards, old Victorian illustrations, architectural drawings, fairies, flowers, butterflies, medieval costume and design, and much more from this rich collection of Public Domain images drawn from old books

2.4 Flash Icon

Site /Owner	License / Remarks
http://www.flashmo.com/	Free flash templates, back link to the site required
http://www.ffiles.com/	Over 1500 flash template, registration is required
http://www.adobeflash.com/download/flash_animations/	Claimed to be free without license notice
http://www.ffiles.com/flash/animations/	Claimed to be free on homepage, no license notice
http://www.flashbuttons.com/	?

3 Graphic Tools

3.1 Drawing Tools

3.1.1 Commercial Software

Software	Author/Vendor	Official Web/Download Site
Illustrator	Adobe
Coreldraw	Corel

2.3.1.2 Freeware

Software	Author/Vendor	Official Web/Download Site
Inkscape
OpenOffice Draw

3.2 Image Editing Tools

3.2.1 Commercial Software

Software	Author/Vendor	Official Web/Download Site
Photoshop	Adobe
Corel Photopaint	Corel

3.2.2 Freeware

Software	Author/Vendor	Official Web/Download Site
GIMP	gimp.org	http://www.gimp.org/downloads/
picasa	Google	http://picasa.google.com/

Practicum 3:

Building an official web-site for an organization such as "Hung Hom Commercial Center" which is optimized for frequent update of notices, minutes and events with all your knowledge and technique. Your may choose a template from thre following open source web template sites or use the template provided in the practicum 3 package (under construction).