Home Page of RDScience

Lab 2: HTML Continued

You need to view the source of this page!

What You Should Remenber from Last Week

Tags that we (more or less) met last week

  1. head tags, body tags, title tags. Opening and closing in each case. The title tags are within the head tags. Nearly everything elso is in the body.
  2. Header tags: h1, h2 h3 etc. tects give smaller and smaller headings. Again: opening and closing headings apply.
  3. Bold and italics: text can be made bold or italics suing (opening and closing) italics tags.
  4. Line breaks and horizontal rules. You may have notices that an HTML web page shuffles the text to fit the width of the window, and ignores new lines in your text. If you want to force a new line use a break tab "br". Two or more act to space text vertically. A horizontal rule tab "hr" puts a line across the page.
  5. lists. Lists are inclosed in opening and closing tags that can be unordered ul tags or ordered ol tags (bullets vs numbers). Each element starts with a li tag. This is an ol list, the previous list was ul.

Images

"On the internet no one knows if you are a dog -but everyone knows what your cat looks like"
Ollem and Lily: Two of my cats
If you look at the img tag that put the cats on the page you will see that it includes the source of the picture data. In this case this is just the file name in quotes. This only works if the picture file is in the same folder/directory as the html file. Note that within the tag I have also defined an 'alt' value. This is shown when a browser can't find or handle the image file. It is also displayed when

Image file formats

boring diagram
Images can be slow to send over the web. For that reason we use a technique called 'data compression' which cuts down on the amount of data that needs to be sent. Data compression techniques fall into two categories lossy and lossless. JPEG, which we use for photo like images, does not really send enough information to give the correct colour value for each pixel in the image. If we accept some reduction in image quality we can save a lot of time and memory with our images. Sometimes however it is unacceptable to loose any information whatsoever (e.g. some scientific images). The gif format uses a compression technique that takes advantage of large areas with the same colour -as is the case in the diagram above. Giff is a lossless method except that in some situations colours are altered slightly or dithered (the illusion of a tint is created by mixing pixels of more than one similar tint in a group of pixels. There are newer and better formats but just at the moment I am not sure whether all browsers can handle them. So for use photos 'jpeg', for diagrams 'gif'.

Hyperlinks

How do we create a link to another page? The tag is called an anchor tag - there is an opening a tag and a closing /a tag and whater is in between is the text or image that when clicked will take you to that page. The opening tag must contain a HREF parameter which tells the computer where to go. If the file is in the current directory just the file name can be used, but otherwise the full url should be used starting with http:// or whatever. Check out the following (including looking at the source code). Check out wikipedia
RDC weather station data
Note: you can design a button as a small gif in the paint program and use it throughout your page.

Tables

The idea of a table is quite simple. There are opening and closing table tabs (with various optional parameters). There are opening and closing tr (row) tabs -one for each row set between the opening and closing table tabs. For each row there are a fixed number of opening and closing th (table header on top row) or td (table data) tabs and inside these are the contents of the cells in the table. Compare the following source and web page:
Technology Use Difficulty
Html Basic web pages 2/5
CSS Control of style and layout across many pages 4/5
Java Applets Small Programs run in web pages -on user's computer 4/5
Obviously we can make the cell contents links. But we can also put images in them
This design is created with 4 small graphic (.gif) files. Here I created a pattern with one button in the middle. Two common tricks are: Split a single image up into an array of smaller tiles. Put them together as a grid and you get what appears to ne one image but that individual part can be different links. Also, cells can be empty. This means that you can use tables to space things out, though there are ways that give you more control.
Graphical elements arranged using a table.

Colour: the body tag

I have set a background colour and changes the text colour. This sort of thing can be done in the opening body tag. The colours are described as hexadecimal red green blue values. Black is 000000. White is FFFFFF. Red is FF0000, Green is 00FF00, and blue 0000FF. I'll explain more in class.

What I want you to do

I want you to spend the next 2 weeks making a web page. I will be absent next week due to a hospital appointment. You can however, contact me by e-mail up to next wednesday (20th). I will then be away from my e-mail for a few days. The content of the page is up to you. Use appropriately the formatting techniques on this page. Have links, graphics. I need to have something from each of you e-mailed to me by the 28th even if you want to improve it later.

If you need ideas: I would like you to get involved in the project. Obviously yoiu can get full marks from a page that contains a good selection of the ideas above properly used. My preference would be for you to work on something that is meaningful to yourself. My preference is for web pages that have real content rather than technical wizardry. If you don't have access to a digital camera and need it then e-mail me.