Lab 1 part A - Build an XHTML web page

Create a directory for your web pages

You need a directory to keep your web pages in while you work on them, before you put them up on the Internet. The links at the left lead to pages which tell you how to setup at home, and how to set up a windows account at school. You can work at home ( or other place where you have a computer ) or you can work at school. Many students work both at home and at school.

You may wish to carry work between home and your windows account at school using a USB flash drive. At the end of the quarter, you may wish to carry a copy of all of your work from school to home, because the student accounts are destroyed at the end of the quarter.

Build a web page

Now you are ready to build your own web page. Carefully note the following things:

  • The tags are typed in lower case. It makes a difference if you type in lower case small letters or in upper case capital letters. Always type file names, tags, attributes, and other html things in lower case. ( Of course your ordinary text may have some upper case letters. )
  • Always put attribute values in quotes.
  • Always close a singleton tag with space slash, e.g. <br />
  • The contents of a container is indented two or three spaces. If you do not indent, it is hard to find the closing tag that matches the opening tag of the container.

Use notepad as your editor on Windows. If you are a Mac user, use the simple editor. In a Linux system use vi, Emacs, or pico.
DO NOT USE ANY OTHER EDITORS. Many other html editors will put in html tags that you may not want.

You may copy the prototype page, to start your laba.html page. Change the *** marked places in the prototype.

Make three input text controls.
<input type="text" />
Provide an id attribute for each, using the value "x" for the first "y" for the second, and "result" for the third. Put the text X, Y, and Result near the corresponding input text controls. Only in the Result element, use the attribute disabled="disabled" to prevent the user from typing in this field. We will put computed results in the Result field later. Arrange the controls, and the text associated with each control, neatly on the page, but do not put them in a table.

Save your page in your public_html directory. When you save a web page in the notepad editor you must specify - save as - all files. If you do not, notepad will add .txt at the end of the file name. The .txt will be hidden by Windows so you do not see it. The .txt at the end will keep your file from working as an html page. Save it with the name laba.html .

 

Look at your web page. In your browser select -file -open file. Select your web page and open it. If it doesn't look good, use your editor to fix it; save it with -save as -all files; then select -view -reload in your browser.

Get a good browser

JavaScript works differently in different browsers. HTML is mostly consistent between browsers, with minor differences. The biggest pain using JavaScript is the difference between different browsers, and between different versions of the same browser.

You need a good browser. Mozilla Firefox is very good; it is free; I will use it to grade pages. Links are provided to download some of the browsers.

You will find this course easer if you use Firefox. Occasionally we may use Internet Explorer, when we want to see some of the differences.

 

Look at your web page with Firefox.