back to index

WEB PAGE WORKSHOP

Biodiversity: Animals in Danger

Appendix B. How to write your .htm document.

  1. Create a folder called "animals_in_danger" (see Appendix C for help).

  2. Create a text file called "index.htm" (see Appendix C for help).

  3. Edit "index.htm" (open it with Notepad++).

  4. Write these codes:

    <html><head><title> Animals in Danger </title></head>
    <body bgcolor="#RRGGBB">¹
    <font face="Comic Sans MS" size="4">
    <a href="species.htm"> Animal's common name </a> ²
    </body>
    </html>
    ¹ Combine letters from AA to FF to mix your own colour: RR = red code; GG = green code; BB = blue code.
    For example, the background colour of this page is #BBFFDD.
    ² species = the scientific name of your animal (example: Felix_catus).
    Animal's common name = the common name of your animal (example: cat)



  5. Save index.htm. If it appears as "index" in the File Explorer, go to Appendix D.
    If it appears as "index.txt", change the file name from "index.htm": select the file, press F2, press the "END" key, delete "txt", write "htm" and press ENTER.

  6. Double click on "index.htm" to open it with your Internet browser (Mozilla Firefox, Internet Explorer, etc).
    If it opens with notepad, go to Appendix D.

  7. Check your work.

  8. Make a copy of "index.htm" and rename it to "species.htm" (use your species scientific name) (see Appendix C for help).²

  9. Open species.htm with Notepad++.

  10. Edit species.htm: replace the codes in the fourth line to include a link to the index:

    <a href="index.htm"> Back to index </a>

  11. Add a horizontal line, then press ENTER three or four times to leave some empty lines for your information.:

    <hr>

  12. Write your information.
    Separate lines with <br>, and separate paragraphs with <br><br>.
    Separate sections with <hr>.
    Save your work from time to time, and check it by clicking on the "refresh" button in your Internet browser (the icon with the arrows).

  13. Add images to your web page using these codes:

    <img src="photo1.jpg" align="left"> (the photo appears to the left of the text).
    <img src="photo2.jpg" align="right"> (the photo appears to the right of the text).

  14. E-mail your files (index.htm and species.htm, and all the pictures you are using) to your teacher.

  15. If you have problems, send an e-mail to your teacher with your .htm files and your question. If the problem is with an image, send your teacher the image file, too.
    You can also read the Frequently Asked Questions section.

back to index