Search the site:
Home > Capacity development & training > Web page creation > Create your own website Printable

Create your own website

29 August 2007

A Step-by-Step Guide to Building a Website

Creating Basic Web Pages from Scratch

Basic Principles (or, "Key things to remember, that will save you problems later on!")
  • Your IPF fellows web site on is a collection of individual files, written in HTML, inside your public_html folder on the server.
  • Your first web page must be called index.html (not myindex.html or index2.txt, or any other variation) – without this file, no one will find your web pages!
  • Your index.html will contain links to your other pages.
  • Files must be written in HTML (HyperText Markup Language)
  • File names must end with .html (or .htm , but be consistent!)
  • File names are case sensitive (e.g.; CV.html is not the same as cv.html
  • File names canNOT contain spaces, accented characters, or other punctuation.
  • Files must be in your public_html directory/folder
  • You will first create your web site with an HTML editor (like Mozilla Composer or Netscape Composer) on your local computer, THEN you will upload the files with an SFTP client to put them on the server.
  • You use an HTML editor (like Mozilla/Netscape Composer) to create pages, and a browser (like Mozilla/Netscape Navigator) to view pages and to test your pages and links. (You cannot properly view and test page links with an editor (Composer), and you cannot edit your pages in the browser (Navigator).
  • When you wish to make changes to your site, you must make the changes on your local computer, and then upload the changes to the server with an SFTP client.
    Note: When you upload files, they will replace the files that were previously on the server.
  1. Create a Folder for your Web Site

    • create a new empty folder/directory on your local computer where you will save and work with your website files
    • give this folder an obvious name like WebWork or MyWebSite
    • make sure that you know where this folder is located and where to find it from the desktop and from the Save As command
    • do not put anything else into this folder, only your newly created web site files
  2. Open Mozila/Netscape Communicator to Create your first index.html page

    • Mozilla/Netscape Communicator includes several programs including an e-mail client, an Internet browser (Navigator), and an HTML editor (Composer)
    • we will be using both the browser (Navigator) and the editor (Composer)
      Note: Micosoft Internet Explorer does not include an editor, so you cannot use it for creating a basic web site.
    1. In Composer, open a New Blank Page
    2. save this page as index.html inside your WebWork folder
    3. type in the text for your home web page
      • this page should introduce you and your project
      • it should contain links to your other pages which will have more detail on your project and related sites
    4. create at least two lines of text that will be links to your other pages
      for example:
      - My Resume
      - My Research Project
    5. save the page
  3. Create Other pages

    1. while still in Composer, open a New Blank Page
    2. save this page in your WebWork folder
      - you may give the file any name you wish, but it must end with .html
      - do not put any spaces in the file name, file names are case sensitive
      - for example, name the page: resume.html
    3. type, or copy-and-paste text into this file
    4. at the bottom of the page include information about the date the page was created/modified, who created it, and
    5. type a line that says something like: Back to My Home Page
    6. open another New Blank Page and again follow the above steps (1 to 5), but save this file under a different name like: project.html
    7. save the page
  4. Make Links between your pages

    1. return to your index.html page
    2. select (highlight) the line where you wrote "My Resume"
    3. click on the Link (looks like a chain) button, or select Insert -> Link from the menu bar
    4. click on the Choose File button
    5. in your WebWork folder select the resume.html file, and click OK/Open
    6. click the OK/Save button. You have now successfully created a link between your index.html page and your resume.html page
      - all other links that you create will be done in exactly the same way
    7. repeat steps 1 to 6 above, this time creating a link to your project.html page
    8. save the page
  5. Link back to index.html and test the links

    1. While still in Composer, open one of your other pages, like resume.html
    2. select (highlight) the "Back to my Home Page" text you wrote earlier
    3. using the same method described above, make a link to your index.html page
    4. save the page, and repeat this for any other pages you have created
    5. open Mozilla/Netscape Navigator, you can do this one of 3 ways
      - from the Window/Communicator menu, select Navigator
      - from the File menu, select New -> Navigator Window
      - click on the Browse/Preview (ship's wheel) button on the button bar
    6. in Navigator, open your index.html file
    7. click once on the underlined colored text that says My Resume
      - this should take you to the resume.html page that you created
      - Note: with Web pages you only need to click once to activate a link, you do not need to double-click
    8. click once on the underlined colored text that says Back to my Home Page
      - this should take you back to your index.html page where you can follow any other links that you have created
    9. Note: If changes you have made to your page do not appear in Navigator, try the following:
      1. make sure that you have saved your changes after working in Composer
      2. make sure that you have opened the correct version of your page, and that it was saved in your WebWork folder
      3. click on the Reload button, or hold the shift-key and click the Reload button
  6. Congratulations!! You now have a working web site!

    • Now, follow the next steps to share it with the rest of the world.
  7. Use SFTP to put your pages on the server

    1. open your copy of SSH client, or another SFTP client
    2. establish a connection over the Internet to the server
      - Host Name (remote server):
      - User ID/Login: YourUserName
      - Password: the password you set when you first accessed your account
      - Port Number: 22 (you do not need to change this)
    3. in the left column (Local System) of the SSH client, locate your WebWork folder on your local computer
    4. in the right column (Remote System) of the SSH client, locate and open the public_html directory
    5. select your newly created or modified web files on your local computer
    6. transfer these files to the remote server by dragging files from the left side to the right side
      - Note: whenever you transfer files with SFTP, they will replace any files of the same name that are already in the destination folder
      - when you return home, you can use the same process to transfer files from the server to your personal computer by dragging files from the right side to the left side
    7. Remember: you must use SFTP to upload any changes you make to your web site in the future.
  8. Test your Web site on the Internet

    1. open Mozilla/Netscape Navigator, Firefox, or any other web browser
    2. type in the location bar
    3. Viola! your Web site is on the Internet for the rest of the world to see.
  9. Now, keep your web site regularly updated

Advanced Fellow and Project Finder #2
Open Society Institute creative commons