00 Introduction

Editing HTML, CSS and Javascript

Before we put Javascript into a web page we should have some understanding of HTML and CSS. All you really need is a simple text editor like Notepad (Standard Windows App) but enhanced text editors like Notepad++ or Brackets make editing easier. These programs use visual tools to make the code easier to read. Brackets also gives a 'live preview' of your web page. You can watch this simple and informative introduction to HTML and CSS using Notepad.

Web sites usually contain more than one web page. These pages are usually "linked" using hyper-text-links. Some of the web pages will also contain links to other web sites. Most of your web pages will also contain graphics. Web page graphics are not "imbedded" in the document unlike most word processors that keep a copy of the graphic within the file comprising the document. Therefore your graphics must be organised as well.

Organization is key

Lets start with your web site before it gets put on the internet. Most web sites are generated and stored on the web site designer's computer and then a copy is uploaded to a special server computer that makes your site available via http protocol. In order to make this work effectively you want the structure of the file organization on your computer to reflect the way the same files are stored on the web page server. For a simple web site a single directory named for that web site will work. Try to use a single word with no spaces. Make a subdirectory in your web site folder called images.

Rogers web site is about tropical fish. So far his site has a page for

    • fresh water fish,

    • salt water fish,

    • links to other web sites

    • and a main page called index.html.

Most web servers use a protocol whereby the default web page is called index.html. When Roger Marinara puts his web site onto a server under a domain called 'fish' the address will be http://fish. There is no need to add index.html to the end of the address since the server software will load it as the default. If Roger had called his main or opening page anything else, say fish.htm, then his address becomes http://fish/fish.htm. Notice that Roger has all his graphics stored in a folder called images. Also notice that the file names reflect the pages contents and that all the names are single, simple words.

Web sites that are organized into a single directory like this can usually be tested to see if all the "local" links (links from page to page) work before the contents are uploaded to the server. Since you are going to be publishing a number of Javascript assignments to the Internet you can use your index page to list the assignments and provide handy hypertext links.

This is Roger's startup or index page. This page should contain a statement of purpose, simple, clean graphics and easy to use links to the content pages.

Site Content

• Items that must appear on a student's web site home page are:

    • a statement that indicates that the page was created by a student and the purpose of the page;

    • teacher 's name and link back to the school or teacher web site.

    • prepared statement regarding Copyright materials, Links to External Sites, and Purpose of Site must be included where appropriate.

    • The web site content and design should be of high quality with correct and valid information throughout;

    • Consider the audience (children,youth,adults) of student web pages. Use an appropriate reading level and keep the content brief and succinct.

    • All information should be scrutinized for spelling and grammatical errors.

    • It is important to keep web pages current.

    • Only material for which the student has copyright permission may be posted.

    • No advertising is permitted on any student web site.

Review

    • HTML is easier to edit using a WYSIWYG editor.

    • Web site organization is key to success.

    • graphics should be copyed to the images folder first, then placed on the web page

    • The default web page is index.html

    • "local" links can be tested before uploading

    • http://chatt.hdsb.ca/~username should be your web site URL

Practice

Job 01 : Create an index page using a text editor. Create a second copyright page that contains the following text edited to suit your site.

Copyright

• Unless otherwise stated,the information,images,and graphics on this web site are the property of Mike Druiven. As such,they may not be used in any way without the express written permission of the author.

Links to External Sites

• This web site contains links or pointers to information created and maintained by other organizations. While these links are checked on a regular basis by a school web site moderator, we are not responsible for the content of these sites and do not control or guarantee the accuracy, reliability, or appropriateness of this outside information. Any questions concerning this webpage/web site should be directed to the author.

Purpose of a Teacher and Student Web Site

• The contents of the webpage/web site are subject to periodic change. The contents are to include only Javascript assignments linked to the index page.

Required Forms

• Authorization for Use of Photos and/or Video Clips on a School Supervised Web Site

• Copyright Permission

-Permission Request for Use of Copyrighted Material is filed by the classroom teacher for all copyright material on this site.

Milton, Ontario, Canada. © 2019