PUBLICATIONS 
BASICS TUTORIAL ON PCS AND USE OF THE INTERNET
WEBSITE CREATION
OVERVIEW
This page introduces you to all the delights of designing, uploading, marketing and maintaining a website.
DESIGN
Introduction
The design of a website involves the following stages not necessarily in the order shown):
- Training in the basics of HTML, JavaScripts, Active Server Pages (ASPs), the Common Gateway Interface (CGI) with Practical Extraction And Report Language (PERL) or PHP: Hypertext Preprocessor (a recursive acronym for PHP) scripts and their interfaces to a database such as MySQL (don't try to be too thorough initially, because you will learn more by adapting existing code).
- Planning, ie deciding its purpose, expected audience, structure, image, style, navigation methods, webspace, domain name, server and search facilities, together with which software tools are to be used.
- Acquisition and adaption of HTML, JavaScript, VBScript, ASP, Perl, PHP, etc codes, image and background files from various sources and other websites on the Internet. The website you're looking at is essentially client-side and only contains HTML code, JavaScript code and images (two animated), together with a server-side web counter (provided free by a third party), a couple of (animated) advertising images and a couple of search engines (Google and Ask Jeeves). You are free to copy and adapt any of it, except the tutorial itself (which is copyrighted of course), the two ads (which are irrelevant to you) and the two search engines (which have to be arranged).
- Design of images and backgrounds (in graphics software applications).
- Design of client-side (limited to your website) or server-side scripts (if you're an experienced programmer or you are familiar with code for scripts).
- Design of the web pages that will make up your website with an HTML structure and main content, but sometimes with images, scripts and other elements.
- Testing your website in your browser (and possibly the other main browsers if you want to make sure they present your site adequately, if not perfectly, because there are differences!). Testing may also be appropriate in a local server, eg for ASP or PHP scripts (see 'Training' below).
Training
Before embarking on this journey, you need to be mentally prepared and this section advises what you should do. You first need to understand why you can't have full control of what visitors to your website will see. How your website is seen by visitors depends on:
- Which browsers (Microsoft Internet Explorer or Netscape Navigator or Opera, etc) and, in particular, which version of that browser is being used in the visitors' computers. The various suppliers have yet to adopt an agreed standard; this is understandable in older versions, but it is very sad and hardly professional to prolong their commercially-oriented differences. Having said that, MS IE6+ does seem to accommodate all balls-breaking JavaScript and multimedia content I've thrown at it, while NN 7+ and Opera 7.01+ remain noticeably indifferent to a lot of it, so maybe it's time to acknowledge the MS leadership at the same time as curbing its monopoly (will that provoke some response?).
- How the visitors' browsers are configured, eg are they Java-enabled and are Cookies (files sent to the visitor's Temporary Internet Files folder with an expiry date and specific details related to the visit - ostensibly to help the site to relate more easily to the visitor's next visit) (Ref 40) enabled (as set in the MS Windows Control Panel 'Internet Options' dialogue)?
- How the visitors' display monitors are configured, ie the number of horizontal and vertical pixels (800x600, 640x480, etc) and the colour resolution (16-bit, 256-bit, etc), as set in the MS Windows Control Panel 'Display' dialogue.
- How the visitors' Internet Security software ad-blocking elements (or any other software that blocks ads) are configured.
You should then be given an appreciation of what all those frightful nerdy things like CSS, DHTML, XML, XHTML, DOM, ASP, CGI, Perl, PHP and JavaScript are and how they relate to each other, to stop you pulling your hair out. So here we go (and I hope you realise the value of this assembly in one small place of such details, resulting from considerable research) .....
- You will by now know that HTML is the very simple tag-based language on which web pages are based. Its latest standard is now mostly accepted by the latest versions of the main browsers (but there may still be some small differences).
- DHTML (Dynamic HTML) is merely the name given to the scenario in which a Document Object Model (DOM) in a browser changes HTML and Cascading Style Sheet (CSS) code using 'client-side' (as opposed to 'server-side') scripting. Such scripting is frequently JavaScript would you believe. Significant DOMs first appeared in Internet Explorer 4 and Netscape Navigator 4 and one part of a DOM is an event model which defines those elements in scripts that can trigger changes, eg 'mouseover'. The most common script languages are JavaScript (of Netscape origins) and VBScript (Microsoft). Actually, CSSs are the essence of DHTML; these allow you to make smaller, faster pages and to easily maintain many pages at once, with more precise control over layouts, colours, fonts and backgrounds, etc.
- XML (eXtended Mark-up Language) is a tag-based mark-up language based on the Standardised General Mark-up Language (SGML), each application of which requires a tailored Document Type Definition (DTD). The SGML is accommodated by the Adobe Framemaker software Application for the creation of large publications.
- ASP is a server-side facility that's made available for dynamic web pages when a Windows NT-based web server is used.
- The CGI is a protocol that's made available on many web servers to route (server-side) scripts to their associated (server-side) software applications, normally Perl and PHP.
You should now have some synergy with all that follows.....
Learn the basics of HTML straight from the horses mouth, ie the W3C, ably represented by Dave Raggett (Ref 8). Dave's tutorial helps you to accommodate the different browsers in your HTML code. It leads you from basic HTML to Advanced HTML and to a bonus 'Adding a Touch of Style' section. It then lists sources of even more details that include important stuff on CSSs and DHTML.
Then you should learn the basics of JavaScript. There are other sources of learning, but I suggest you start by reading WebTeacher (Ref 10).
JavaScripts allow dynamic effects on your pages, as illustrated by the following examples....
This script enables a web page to display a snapshot of the User's system Time and Date applicable when that page is first loaded in a browser, with a personalised welcome that's related to the time of day.
This script, courtesy Travelshop, displays a continuously updating world clock, allowing the User to see the time at any instant in many locations around the world.
Then you should become familiar with CGI. CGI is the method by which a web server can obtain data from (or send data to) databases, documents and other programs, and present that data to viewers via the web. More simply stated, CGI is programming for the web to add a counter, a form to let visitors send you mail or place an order, or something similar. A CGI program (script) can be written in any language such as PHP or PERL.
To learn the basics of PHP, go to the free tutorial at The PHP Group Ref 11. To learn a bit about PERL, go to Ref 12. Remember that there are many ready-made Perl scripts out there, if you still think you have the patience to learn the basics of programming in PERL for CGI.
ASP is used by some websites that are hosted by a server supporting ASP. I believe this means there is a Microsoft Windows NT Server or an improved Windows 2000 Server or now an even more advanced Windows 2003 Server at the host. A page comprising html code, images and text is modified by ASP code, which has opening and closing tags placed anywhere on the page. The page is then given a .asp suffix in place of the .htm or .html one to identify it on the server. The instructions in this code are then acted on at the server before the file is downloaded to a requesting browser. In Window XP Professional, there is an optional facility called an Internet Information Server (IIS) which allows a website designer to preview .asp pages before uploading them to the public server. Further details on ASP are available at Ref 46.
Planning
A What You See Is What You Get (WYSIWYG) editor such as FrontPage, CoolPage or Dreamweaver makes life for a starter much easier, because it allows you to see the page design resulting from its code and then to preview in your browser what visitors will see in theirs before you upload it to its allocated webspace (so get one if you possibly can!). On the subject of browsers, if you're really serious you could also download and install the free versions of the Netscape Navigator and Opera browsers (assuming you've already got MS Internet Explorer), so that you can see what visitors with these browsers would see (there are differences!).
You don't have to re-invent the wheel, so look at other websites to get ideas and acquire a copy of anything you can use (see 'Acquisitions' below). Look at, but don't be limited to, similar websites to the one you are planning (do a bit of 'lateral' thinking).
Note in particular the page structures and navigation methods used. Note particularly the differences between a site in which pages are based on 'frames' and one that is not: On a page in a site based on 'frames', navigation buttons (the navbar) and contact details are always visible, regardless of its scrollable length (an obvious elegance, the downside of which is that some search engine spiders and older browsers can't see it, so it's a good idea to provide an optional 'noframes' - based site, accessed via the 'noframes' html tags you may have learned about earlier in this tutorial).
If it's a commercial website, you need to decide on a budget for domain names, server and search facilities and if it's a non-commercial website it's common sense to use all those facilities that are free - let's not spend money (see 'Costs' below) when we don't need to, unless you're very keen to attract millions of visitors of course!
On a large sheet of paper, draw what you think is a family tree of the website you want, ie a hierarchy of pages represented by boxes. Decide if it's to be based on frames or not and decide on the navigation method(s) to be used.
To be continued...
Acquisitions
When looking at a web page containing something you can use, view its HTML and other code in Notepad or your preferred HTML editor:
- HTML code. Right-click on any blank area of the page and select View Source or select View>Source via your browser Menu bar to bring up a display in your HTML editor normally Notepad). Highlight and copy any code you think you can use for pasting and modification in your own (offline) pages.
- Images. Any image that you like (which will normally have a .jpg, .jpeg or .gif extension) can be copied to your hard drive by right-clicking on it, then selecting Save Image To>Browse>the folder to go to, and then following the presented dialogues (an image file won't contain a virus).
- Scripts. Where you want to copy a script on a page, part of the script may refer to associated files, eg with the extension .js (for JavaScript). To copy each of these essential associated files (which reside in the same folder on the website as the calling HTML file), the way to do it is to replace the .htm or .html file in the URL shown in the address bar with the name of the file (eg something.js'), select Go and when a dialogue opens select a folder to save to then Save. When it's virus-checked, move it to the folder containing the associated HTML file in your offline website and it will then play its role in life (provided all links, as well as everything else associated with your website are correctly adjusted, using common sense!). Apart from that, you need to see if the script also needs images that have to be captured from the page as described above.
- General. It's often impossible to capture all the images you need in a Java Script, etc, using the above procedure, so remember that you can simply save a page (with all its assets) to your hard drive, via the (old faithful) File>Save route, for you to pick the bones of the resulting folders and files on your hard drive where you (sensibly) saved it at your leisure!
Design and Test
Design your pages. Wherever possible, decide to make all your HTML files '.htm' (not a mixture of '.htm' and '.html', because you'll forget ther full names and it's one less button to press!).
Note: In the following descriptions, examples of HTML and other code are displayed red.
Create a folder at a suitable location on your hard drive with an appropriate name, eg 'mysite', for the files in your website, eg in My Documents>My Webs. Add a folder inside this folder called, say, 'assets' to contain image files, etc. Place all files for the site in the 'mysite' folder unless otherwise advised. Place all images and other assets in the 'assets' folder, except for '.swf' (Flash) and '.js' (JavaScript backing) files, which need to be in the same folders as their associated HTML files (or they get lonely and don't cooperate).
From your planning, you will have decided on a 'frames' based or a 'no-frames' based site:
- Frames-based. When it's to be frames-based, decide on how the frameset(s) is(are) to be structured, ie what frames do you want and where? An example frameset contains a fixed frame at the top of the page for a logo and your navigation buttons (called, say, top_fm), a fixed frame at the bottom of the page for contact and copyright details (called, say, bottom_fm ) and a (central) frame for your optional pages (called, say main_fm), that may or may not have scrollbars. The following procedures will assume that this configuration is adopted....
- First create the two files you want in the fixed frames as normal HTML files called, say, logo_navbar.htm and contact.htm (to create the menu or navigation buttons for the former, you will need to have decided on the structure for your site and listed your pages during the Planning phase and the 'target' for all the menu items or buttons is 'main_fm'.
- Then create the page you want to be initially displayed in the frame called main_fm, ie on the site's entry page or the page entered from a 'Flash intro' ('movie') page, as a normal HTML file and call it, say, start.htm.
- Then create the frameset (as a frameset file), specifying the HTML code for the three frames.
- Then (if you're going to create a 'no-frames' version of your website) allow for visitors who can't see frames by adding HTML code based on the following example in the frameset file:
- Then you create all the other pages (and their sub-pages, etc) that you want to be optionally selected for display in the frame called 'main_frame' as HTML files, making sure that the file names match the hyperlinks from the menu or buttons in the logo_navbar.htm file.
To be continued...
Details updated: June 15 2010
|
Translate this page to (what may be a useful selection of) other languages below (restore to English at the top of the page) |
