We learned to use an editor program called "notepad" to create text files. This program wants to save files with files extension of .txt. However, it is essential
that we save files with an extension of.html. To do this when you use the "saveas" function you must put the filename in double quotes, such as "mypage.html".
If we are browsing an html document we can see the code that is used to make that page by going to the "page" menu (button at top right of page) and selecting "view source". You can then
cut and paste anything you like into you own page (provided you don't steal intellectual property).
To make a browser look at a file on your (windows) computer, you can enter a c:\ in the URL box hit enter and then you will be able to navigate to your file.
When You have made changes to you html file you must do 2 things in order to see them: save the file and then hit the refresh button on the browser (two green arrows, next to the URL).
HTML tags are created using the less than and greater than symbols. Often the come in pairs with the second one starting with the forward slash symbol "/".
Tags that we (more or less) met last week
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.
Header tags: h1, h2 h3 etc. tects give smaller and smaller headings. Again: opening and closing headings apply.
Bold and italics: text can be made bold or italics suing (opening and closing) italics tags.
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.
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"
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
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
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:
Instructional page: how to make a recipe. Make or mend something. About an instrument that you play..
Some sport that you are involved with: rules? technique?
About yourself (if you don't mind it being on the web).
In Red Deer, where all the good restaurants/sports bars/theatres and cinemas ...(something that interests you)? Info, opinions (not libelous) links to their web sites.
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.
