The basic steps in creating a working website , according to witiger.com
- used in MRK 410, MGTC50, GNED 136
last updated 2005 Aug 31


 
Since our page was created in 2002, several other people in the Web have referenced it, or linked to it, as can be seen in the example screen capture to the left.
Some of the material in this unit refers to the text i-Net+ Guide to Internet Technologies, by Andrews,  which is a recommended text for students in MGTC50 but not required for students in MRK 410 or GNED 136
see  www.witiger.com/ecommerce/ecommercetexts.htm
.
 
.. Learning Objectives

When students have read this material, and followed the links as indicated, and attended the class in which this material has been discussed, they 
    will know the steps to follow to make a basic web page
    understand what has to be done at each of those steps
    will know the names of the additional steps to make a working e-commerce site

.
Creating a
Basic
Web 
Page
 to create a basic web page you need

  1. computer
  2. modem in the computer
  3. an account with an ISP Internet Service Provider company
     - the account has to include web page hosting - meaning some place on which to put the pages
    3B - a domain name
        (optional - because some ISP's let you put up web pages under their domain)
  4. browser - to see web pages (eg. Netscape, Internet Explorer)
  5. content to put on the pages on the web site
  6. software to make and edit web pages (HTML editors)
  7. software to send the pages to the hosting server

.
Creating a
Basic
Web 
Page
to create a working e-commerce site, you need

 1. a product or service to sell
 2. a domain name that is registered and hosted
 3. web page describing the product/service (steps 3 ~ 7 from the above list)
 4. marketing
 5. a payment system 
 6. shipping methods (for physical products)
 7. a mechanism to deal with customer service inquiries and returns
 8. people to carry out the tasks of 1-7
 9. money to pay for the people, domain registration, hosting
 10. good luck 
       - it is a very "competitive" thing to establish a new e-commerce site, 
       many things can go wrong and you need a bit of luck and hard work to be successful

.
 to create a basic web page you need 
# 3- Hosting
(see  http://www.witiger.com/ecommerce/ISPs.htm for issues associated with Internet Service Providers and hosting)

Select an internet service provider to host the site
- meaning somebody who will allow you to have the files for your webpage on a modem enabled computer (server), with a large hard drive, which has hardware good enough that it can handle a lot of incoming calls - ie. hits on the site

.
to create a basic web page you need 
# 3B - a Domain Name - if you want your own domain you need to buy it from a Domain Registrar
  o choose what words you want for a domain name
  o select a company which is an official domain registrant
  o buy the domain name through the domain registrant
If you want some detailed information on the registration process, go to this page on the witiger.com site http://www.witiger.com/ecommerce/domainnames~register.htm
see  http://www.witiger.com/ecommerce/domainnamesregister.htm
.
to create a basic web page you need
# 4. The browser you are using may not be sufficient in order to see some of the content on some  pages on the web, you may need plug-ins.
 
. In order to see the wide diversity of images and sound available on the WWW in 2004, it is necessary to obtain particular plug-ins [also called Browser Extensions] because Netscape and Internet Explorer (the two most popular browsers) are not always installed in a way that allows you to see 95% of all the images, and hear all the audio, on pages you might visit.

WTGR


 

A plug-in, sometimes called a browser extension, enhances the ability of the browser to see and read content (images and text) on the displayed page, which your browser might not normally be able to see with the standard installation.
-- from i-Net+ Guide text page (193-198 2nd ed.) (p. 185 1st. ed.)

.
http://home.netscape.com/plugins/?cp=odpntcr
 http://channels.netscape.com/ns/browsers/plugins.jsp
go to this page and look around at the plugins available from the Netscape site
.
Most plug-ins are developed by third party vendors who create plug-ins and make them available through various web sites.
Some of these sites are listed below
Apple QuickTime Adobe Acrobat Reader
- allows you to read PDF files
Macromedia Flash Player
- allows you to see Flash - which is common on "splash" pages since 2003
 
Shockwave by Macromedia

 

RealPlayer, allows you to see various sound and moving image files
..
to create a basic web page you need 
5. Content to put on the pages on the web site
content is usually described as including
  • text (a fancy way of saying the words on the page)
  • images (photos and drawings + moving images)
  • audio (sounds in different file formats)
The main reason why websites take along time to build is not due to the technical considerations of making the web page files, or uploading, but rather due to the time taken in decision making, and consultations that go into choosing what to say, then making the images (sometimes original photos need to be taken - then scanned), then seeing how it will all fit together; which can involved many people giving opinions about the appearance. 
 
  • text - the arrangement of words you put on the site. Sometimes this is easy as copying out words from the existing PR material, sometimes it has to be written from scratch.
  • images - sometimes these can be cut and pasted from other sites, sometimes new photos, or diagrams have to be created, and then image editors have to be used to size and shape the images so they will fit on the page and be of a size (in bytes) that will load fast
    • static images
      • .jpeg (highly compressed files) - load fast, lower quality
      • .gif
      • .bmp (high quality, cannot be seen in older browsers ie. Netscape 4.7)
    • moving images
      • real player  files (.rp)
      • movie files (.mpeg)
  • audio
    • .wav files
    • .midi files
    • MP3 files 
.
to create a basic web page you need ...
6. software to make and edit web pages (HTML editors)
  • simple editors are Netscape Composer, Frontpage
  • complicated editors are Dreamweaver, HoTMetaL 6.0
To make the pages, with the text, images and audio, people usually use what is called a "web page editor". Editors are software programs that allow you to make pages (ending in .htm)  without having to key in all the complicated HTML code. There are 2 basic editors, WYSIWYG Editors, and HTML Editors. 

WYSIWYG is just a slang for What You See Is What You Get

Rick Darnell says that "one of the main drawbacks to working with HTML is that many Web page editors don't display a page the way it will look on a browser ...this situation is changing with the advent of WYSIWYG editors that display a page using the standard accepted by most browsers."

 Tag Editors - provide the author with direct control of the tags. Requires reasonably good understanding of HTML.
 Representational Editors (also called WYSIWYG editors) - use menus and wizards to allow you to roughly see how it will look, as you go. Requires minimum knowledge of raw HTML.

To make a simple page, you can use the WYSIWYG Editor capability within Netscape. Netscape includes, in their browser, a capability called Netscape Composer - it lets you type up a page with simple menu driven commands much like typing in a word.DOC - all you have to do is save the file as ".htm" for it to be a web page. 

.
.
to create a basic web page you need ...
6. HTML Authoring tools AKA Web Editors 

The purpose in discussing these various editors is not intended to make you proficient in making complete web sites, rather simply "empower" you with making a basic web page with which to complete your project for the course. You should NOT burden yourself with learning HTML code from scratch, rather you should pick a WYSIWYG editor and use it to make your pages.
 
Andrews book page page (105-108 2nd ed.) 
  • - the Andrews book is used by students in MGTC50 at UofT
  • The Andrews book describes some of the more popular editors (circa 2002 - 2004)
       o Microsoft Frontpage
       o Dreamweaver
       o Allaire Home Site
       o HoTMetaL Pro by Softquad
       o Netscape Composer

    For the purposes of this course, it might be best to use Netscape Composer 4.8 - which is free, and can be downloaded free from www.netscape.com
     http://channels.netscape.com/ns/browsers/archive.jsp
    Prof. Richardson recommends using Netscape Composer 4.8 because it arranges images and links more simply than the advanced version in Netscape Composer 7.1

    .
    direct link to Tucows to create a basic web page you need ...
    6  - HTML Authoring tools

    Go to Tucows  www.tucows.com  (click on icon to the left) to browse through several of the Advanced HTML editors. You will find HoTMetaL, HotDog and WPC on the list as well as others.
    the text  has a descriptive list of several editors on page 131-133
     
    http://www.hotmetal.com/ HoTMetaL Pro, is the product of a SoftQuad Software Inc., a Canadian company formerly based in Toronto. Various sources say HoTMetaL has the largest number of users but in 2003 SoftQuad sold the company to Corel in Ottawa so it might not be supported in the future.

    mentioned on page 106 in the i-Net Guide text 2nd ed.
    mentioned on page 132 in the i-Net Guide text (1st ed.)

    .
    Chpt 3
    Build Your Own Web Site

    HTML Structure
    page 105 - 106
     

    to create a basic web page you need ...
    6 - HTML Authoring tools

    Regardless of what editor you use, a basic page has some key structural elements which you need to know - even if you will not be the person making the web pages, it helps to understand these fundamentals.
     

    . One of the characteristics of the "new economy" is that people cannot afford to be only aware of the theoretical aspects and ignorant of the practical aspects- things overlap too much.

    So, what we are saying is that you may be the person strategizing about the marketing aspects of the web page (and hire someone else to do the HTML) but you do need to something about the basics).

    Like going to a garage to get your car fixed and the mechanic spins a line about needing a new alternator for $3,000. You don't need to know how an alternator works, but you do need to know that it won't costs $3,000 and roughly what part of the car it is in [it's in the engine and used to run the electrical services of the car - off the power off the engine] http://www.misterfixit.com/alterntr.htm

    WTGR

    .
    Chpt 3
    Build Your Own Web Site

    HTML Structure
    page 105 - 106

    to create a basic web page you need
    #  6. HTML Authoring tools - Editing the Page: Web Document Structure Tags

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
     
    <HTML> tag
      <HEAD> tag
        <META> tag
        <TITLE> tag</TITLE> 
      </HEAD> tag
      <BODY> tag
      </BODY> tag
    </HTML>
    see also page 105 in the i-Net Guide  text
    Case Western Reserve University has an extensive web site about how to make web sites and the basics of HTML coding.
     http://www.cwru.edu/help/introHTML/TCh2.html
    This page specifically talks about the document structure tags in  simple to understand format.

    .
    . Here is an example of why you would need to know about the HTML document structure tags on a page, even if you were in marketing and someone else designed the page.
    To "get found", search engines use META TAGS as part of the information they use to index, categorize,  and retrieve pages. 
    See www.witiger.com/ecommerce/searchengineranking.htm

    META TAGS are located within the HEAD TAGS on a page. This information is a collection of choice words used to help the page rank high in searches - if you know this, you can look at the HTML code on competitors' pages and see what words they used in their META TAGS, and change your META TAGS accordingly.

    Another example:
    The words in the HEADER TAGS, between the TITLE TAGS, are the words that show up when someone bookmarks a page. This would be helpful for you to know so you can change those words to reflect what you want viewers to expect.

    For instance, the title tags for this page are
    <title>7 Steps In Making a Working Website</title>, which shows up in the upper left hand corner of the browser when you are viewing the page, and are the words which show up when you bookmark this page.

    WTGR
    .
    to create a basic web page you need ...
     7. Publishing the content
          software to send the pages to the hosting server

    FTP = File Transfer Protocol

    Once you have made the pages, either in an editor like Netscape Composer, or HoTMetaL, or
    Frontpage, you need to "upload" these pages to the server which is hosting your site. This means your ISP must give you a URL, something like www.isp.com/~mysection and a password, which you then use to upload.

    Uploading is easy using a program like WS-FTP. 
    It's like using Windows Explorer - with the left hand of the screen showing the files on your computer, and the right half of the screen showing the files on your server.
    The screen capture below shows what FTP looks like
    The left half of the screen are the files on your computer, the right half are the files on the server hosting your site. To "FTP" the files up to your site you basically click on the files on the left, and drag them to the right hand side.

    click to view larger

    -  if you do not have WS FTP you can download it from  www.witiger.com/downloads/

    .
     
    witiger.com
      CONTACTIMAIN PAGE I NEWS GALLERY IE-BIZ SHORTCUTS I INT'L BIZ SHORTCUTS  IMKTG&BUSINESS I TEACHING SCHEDULE  IMISTAKES ITEXTS USED IIMAGESIRANKI
    .