Faith Christian Academy's Computer Club (Banner)
Noah Quinn Joe Cameron


BBC Basic Free Demo
CSS Primer(PDF)
Gimp 2.8 Image Editor
Paint.NET Image Editor
Inkscape 64 bit Windows installer
Inkscape 32 bit Windows installer
ADW Cleaner

May 25, 2018

Glad everybody was able to make it to the last club of the year! I hope you all have a good summer and have fun playing with the Raspberry Pi Zeros. The site that has many goodies is RasberryPi.Org If any of you might be interested in getting together over the summer and working on some stuff, drop me a note at and I'll see what we can set up. Have a great summer!

April 12, 2018

Hello Quinn and Joe. Today we talked a bit about the two ways CSS commands can be used in HTML; in-line or in a style section. Most of the time it is best to set up a sheet as a section at the top of your page or even in a seperate file that you can reference from many pages. This way you can set up your styles for the main bits of your page and use them over and over. The in-line commands are handy if you want to change something just once here or there. If you look at the source for this page, you will see my style sheet up at the start of the page. As an example of an in-line, I've changed the color of the head for this paragraph to green with a style command.

March 1, 2018

Good to see you again today. We went over how CSS style sheets can be set up to change styles based on system events like "hover". We also looked at a java script can display images on the HTML5 canvas object. If you want to play around with it, it is saved in the Computer Club directory in a file called "java.html".
Joe wanted to know how to change the small icon that shows on the browser tab. First, it has to be in an ICO format (gimp can save it that way) 64x64 pixels is a nice size to work with as it scales down to the tiny icons well. On a main web page, all you have to do is name it favicon.ICO and it will display there. On your pages, you will need a reference to it on your page like this:
<link rel="shortcut icon" href="./myicon.ico"> and as long as the file is in your directory it should show up.

February 1, 2018

It's been sometime since I've updated our club page, I did take down the Christmas lights... but it doesn't mean we havn't been doing things. Joe has put together a few things on his page, and I made some wallpaper from Quinn's duck-monstor and pasted it on her page. I'm glad to see Noah looking at the code that makes up this page and hope he finds the comments useful.
Today, I hope to go over some more Java Script. The W3school's web site is a nice place to look up commands and test your code. You can cut and paste in to and out of their site so if you get a nice little code thing going, you can move it to your page. Java and Java Script are a very important set of tools used by most of the big web sites and phone applications. The reason it is such a popular language is because it can be moved to many different hardware platforms. Examples would be phones, tablets, desktops, smart watches, etc.
Java Script is a small subset of the Java language, but the general format is similar enough for it to be a good starting point to learn.

Here is a bit of javascript I modified from Joe:

November 9, 2017

Greetings. Today we went over a different way that images are displayed. Vector graphic vs bit mapped images. Both types of images have different advantages and are constructed quite differently, that is why we have two programs for dealing with them. We have been using Paint.NET which is a nice simple bitmap editing software. Today we started using Inkscape. Inkscape uses vector based drawing tools to create a mathematical description of shapes and then gives properties to them. The advantage to this way of creating a drawing is scale. You can enlarge a vector drawing to any size and it will look the same because it will be drawing the image based on the description and not a series of dots as with a bit mapped image. I've added links to the Inkscape program on the download section, make sure you install the proper one for your system, ether the 32 bit version or the 64 bit version. They also have Mac OS and Linux on their website.
Have fun until next time! (P.S. Did I put the Xmas lights up too early?)

October 5, 2017

Hey everyone! I'm glad to see most everyone made it today, but we still are missing Cameron. We got to use the Paint.NET program a bit today, after I figured out why my password wasn't working. I've set up a download link on the left of the page so you can download the program from here directly and install it at home. I showed Joe the "" program on the Z-drive in the computer club directory. It is a simple program that runs a couple of sprites about the screen. I've included many comments in the program to help you get started if your interested in some graphic programming. See you next week.

September 28, 2017

Hello my four brave Computer Club members. Last time we met, we discussed what kind of things you are interested in about the computer. I also discussed some different styles of programming; liner and object oriented.
For Noah, I did a bit of research into the ease of learning Photo Shop vs Gimp. From what I have read, it seems that both are about the same difficulty level. I did find a program that is a simplified photo editor and paint program called "Paint.NET". I've copied the install program on the "Z" drive. It is from the same folks that did the paint program that is in windows, but it is a greatly improved version. I've played with it a bit and it seems to be a good introduction to most of the common photo editing concepts, and should be a good primer to the more complicated versions photo editing software.
I've created your directories on the lab server ("Z" drive->Computer Club). I have some sample HTML files that you can modify with your own content. I will upload them to the web so that you can have your own page linked with the buttons at the top of this page.
why do I have you do a web page for programming you might ask? Well, HTML is a simple language that has a very basic syntax that you can program in with almost no special tools or programs. It can be created in any text editor, and once saved, any browser can display it and will let you see the effect you have created.
HTML started out simple, but over the years, it has gotten to be much more than the text markup language it started as. With HTML 5 you can create interactive content and complicated graphics but you can still start out with the simple stuff and play with it until you get the hang of it.
You can find a lot of help with the HTML on this page. Go down to the bottom and you will find an introduction, as well as links on the sides of this page. I'll see how you do with your pages, and we can see where it takes us. Have fun!

May 25, 2017

Well guys, that year sure went by quick. We didn't get nearly as far as I had hoped but I think we covered some interesting things.
I've put together some flash drives for you, with the BBC Basic program, Gimp, Wings 3d and Eggbert. If you get a chance this summer, work with them and we will have a jump on next year if we have clubs together again.
Have a great summer!

March 23, 2017

Hello, I have put together a program for you to look at in the Computer Club folder. It is called "" I put a lot of remark statements so that you can get a feel of how to use the sprites in BBC basic. You can copy the program into your personal directory and make changes to it. You will need to also copy the two ".ICO" icon files that it is using as sprites. Sprites can also be made from ".BMP" bitmap files and also ".ANI" animated icon files, but strait icons are the easist to get started with. I've also copied a small icon editing program into the folder that I used to make the icons. It is called VariIconSetup.exe and is a free program to use, so you can take a copy of it if you would like.
Play with these sprites a bit, as we will be using sprites for the characters in our game. Have fun!

February 23, 2017

Greetings my friends. I have finally figured out why I couldn't get any pictures to show up on my Wings3d surfaces! Seems I had fiddled with the shaders and changed it from "Hemispherical Lighting" to "Gooch Tone". It seems that anything other than "Hemispherical Lighting" does not show textures. Here is a great tutorial on how to do the surfaces: Peter Chovanec's Simple Barrel UV Mapping Try it, I think you will like the results.

February 9,2017

Hi Guys, good to see you again. We got to take a look at the beginning of our game program. If you want to have a look at it you can find it on the Z drive under computer club called "".
I'll keep adding to the structure and comments and try to give you an idea of how a program goes together. I'll see if I can link to it here on our web page so you can download it and follow along.
Some of the parts to look at would be the "subroutines", "functions" and "procedures". These are the building blocks most programs use to stay organized. When you build a collection of them that you use regularly and with other programs, you can put them into a collection called a "library".
(I'm using a library to make the connection between computers, if you want to look at the code in the library, you can find it under the bbc-basic installed program directory, like "c:\program files\BBC BASIC for Windows\LIB\SOCKLIB.BBC")
I'll see you again on the 23rd. Have fun and keep learning!

January 26, 2017

Well, it's been a while since I've been healthy enough to make it to club, it is sure a pleasure to see all of you. We did a bit of an outline for a multi-computer game of hachy-sack, except we will use our characters head instead of foot. I think we should be able to use sprites of different sizes to give it a bit of perspective and a 3D feel without getting in too deep.
I'll put together a list of the things we will have to build, and then we will figure who will be best at each section.
Since there are only 5.5 hours of club time left this year, we might have to do a bit of homework. If you guys could look at some of the BBC Basic program examples, it might help speed things along and give you some of the terms used in the programs.
I'll try and keep up with posts here so we can keep moving along.

December 1, 2016

Hi guys, I hope everyone had a great Thanksgiving. I didn't post after our last meeting, but I did update the webpages if anybody made any changes to their pages.
We spent some time playing with Eggbert, and I showed you how to change the graphics if you want to insert your own artwork. If want to find the files, look in the Computer Club directory under Eggbert, then under your name and you will find your own set of Eggbert files there. Under the IMAGE08 directory are several files that have the extention ".BLP". The one that contains the player 1 animation frames is called "BLUPI000.BLP". If you want to play with this file, first make a copy, and rename it "BLUPI000.BAK" (This way, if things go bad, you can put it back). Then rename "BLUPI000.BLP" to "BLUPI000.BMP". Now you will be able to open it with Paint or Gimp and make changes to it.
If you want to change a background tile, open the directory IMAGE16 and you will see a bunch of files called "DECORxxx.BLP" (the xxx being a 3 digit number). Each one of these files can be changed, I would make a backup as before, rename it "DECORExxx.BMP"
To use your modified animation frame file or background file, you have to rename it back to the extension ".BLP" so that the program can recognize it.
Eggbert's SOUND directory also has files that can be modified. The ones called "MUSICxxx.BLP" are Midi music files and can be accessed if you rename them "MUSICxxx.MID". The "SOUNDxxx.BLP" are standard Wave files and can be accessed by renaming them "SOUNDxxx.WAV". As before, you will have to name them back to ".BLP" to get the program to read it.
If you guys have any interest in working on Eggbert or your web page at home, you can bring in a flash drive and copy the directory with your name on it to your flash drive. Just make sure when you bring it back to copy it to the same place in the Computer Club directory -- Eggbert files under the Eggbert directory, and your web page files under your name directory.

October 13, 2016

Good to see everybody today! I see most of you were able to change your web pages up a bit.

Now the question is do you know how you did it and what commands are effected by the changes. One of the questions I received was how do I make an image stretch to fill the page. If you are using it as background image, the commands are under the CSS section of your page. To find out how to alter the settings for it w3Schools css background will explain it nicely. Unfortunately there is not a stretch command, however you can resize the image and center it on the page. Their are some other ways to do it, but we might have to dig in a bit deeper into the HTML and browser properties to make it work.

I did some digging and here is the CSS trick for making a background image fill whatever size screen you have, add this to the body section of your css style section:
background: url("./something.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

I hope you have a good couple of weeks and will see you next club day.

October 6, 2016

Hello there all you computer clubbers! My apologies for not being with you sooner this year. This is the first week I have been able to type with both hands, and still with a bit of difficulty. About a month ago, I fell and broke my right humerus bone. It was not funny(humorous) as the name would imply. I now have a titanium bar and two screws holding my arm together, it has been an experience I hope none of you ever have to endure.

All that aside, I am glad to be back here in Computer Club. The last three years I took some of the talent from this club and started the Robotics and Electronics Club. Those guys all graduated last year and are in college so I'm back looking for the next bunch of brains that might be interested in moving on to the next level.

I thought this year we might concentrate on some app creation in a language called BBC Basic. It is a language that is fast to learn, yet powerful enough to write windows apps that are quite complex.

The other area I would like to work on with you is a 3D modeling program called Wings3D. In this day of 3D printing, it would be a nice head start for you to learn how to create 3D models in the computer. Wings3D is a free program that you can use here and download it at home as well. It has all the basics and can export to many fancier programs should you outgrow its abilities. If you students are willing to put some time into these things, I promise you will have a head start if you are interested in going into engineering or computer science, or even cranking out a computer game, robot or drone.

Looking forward to a great year with you, I hope we can learn and have fun. And as always, if you have an area of interest that is computer related, just let me know and I will try and help you out as best as I can.

Mr. Thomas

May 8, 2013

Where has the year gone? This is the last computer club of the year! I have enjoyed having you students here, and I hope some of you have gained some knowledge. If you have any computer questions or would like to continue to add to your web page, you can always contact me by e-mail and I will get back to you soon. My e-mail address is and I'm always glad to hear from you.

February 13, 2013

Welcome new computer clubbers David, Ashley, Eli, Tommy N. and Autumn. You should be able to find a sample set of files for your web page in the Computer Club directory of the Z: drive. You will need to rename the "sample.htm" to "Your Name.htm" Make sure to cap your first and last name and place one space between them. You can edit the file with notepad, look for the notes I've put in it to make it easy for you to modify your page to your liking. If you have questions, ask me, Mr. DeOms or the Computer Club Vets and we will help you get started.

January 23, 2013

Hey all you gamers before you get lost in your games, I would like to see a screen shot of your game on your web page. Here is how you do it:

  • bring up the game you are playing
  • press the ALT and PTRSCN keys at the same time
  • open "paint" program
  • press "Paste" button
  • press "Resize" botton
  • resize the picture to 500 pixels wide
  • press "Select" button
  • select the now smaller image
  • press "Crop" button to have only the image
  • save the image in your directory
  • Use the img command to place it on your page.

  • January 2, 2013

    Happy New Year! Welcome back to Computer Club. For the new year, you no longer have to go to the TCbits site to find Computer Club. Our new address is: If you have any links or graphics that have the TCbits address included in them, you will have to change them. I hope this new address will make it more easy to show your site to friends and family...

    December 19, 2012

    What a great present for Christmas: the "Wall of Shame" is empty!! Thank you for working on your webpages and maybe even learning a thing or two. I hope all of you have a Merry Christmas and will see you again in the New Year.

    December 5, 2012

    Yeah! All most everybody has removed themselves from the "Wall of Shame"! Thanks for your efforts, I sure hope to see more of your pictures and interests in the future. Also thanks to Mr. DeOms and some of the CC-Vets for jumping in and getting people off the wall.

    November 28, 2012

    The Wall of Shame:
  • Liz Ellis
  • Seven Brown
  • Michele Brooks
  • Jake Mayhew
  • Patrick Boehler
  • Natalie Newland
  • Tommy Peifer
  • Chris Rankin
  • Ben DeOms
  • Nick Millner
  • Jon Marsceau
  • These are the folks that have not made any effort to modify the content of their webpage. I'm hoping that in the next two computer clubs these pages will have some changes... if not, I hope the owners will find another club.

    October 24, 2012

    Hi everybody. One of the basic things many people seem to have trouble understanding about web pages is pixels. Pixels are the dots that make up the computer screen, on most modern sceens the dots are squares. The screens in the lab are 1280 pixels wide by 1024 pixels high. When we are placing an item on our web page, we can add a width and or height command to define its size. One of the common mistakes made on web pages is to place a photo from a megapixel camera on a page, and adjust the size with the height and width commands only. While this works, it requires the browser to download a very large photo and then convert it to the size to display on the screen. This takes a lot of extra time.
    To give you an example, my camera takes pictures at 2592x1944 pixels and the file size around 2,200,000 bytes. So on a lab screen, you would only be able to see the top quarter of the picture if it is displayed at full resolution. If I use Gimp to resize the image to 500 pixels wide, the file size is down to 75,000 bytes, about a 30th of the file size, and still a good size on the screen. If you want to make the full size photo available to the viewer, you can make the photo into a link and link to the full size file. Here is an example of a photo (500 pixels wide) with a link to a larger file:

    September 26, 2012

    I see a few of the newcomers were able to make some changes to the sample HTML file. HTML can be a bit confusing to start with, but most of the commands have the same or close to the same structures. Have a read through last years review, click here and that should help you along a bit. For you veterans, please help the newcomers get started. One of the best ways to make sure you know a topic is to teach it to someone else.

    September 12, 2012

    Today, the newcomers will start their web pages. You should be able to find a sample HTML file in the Computer Club directory under your name. I have put many comments in this file to help you get started. If you need help with commands, the links on this page take you to some HTML reference sites that are very helpful. Also, you can ask the veterans (the Matts, Trey, Brad B., Dale and Jordan) they can point you in the proper direction.
    A few words about browsers. We have installed Google's Chrome browser on all the machines here in the lab. The Chrome browser has some excellent tools for inspecting web pages and scripts that they might contain. to view the code behind the page that is being displayed just press "CTRL" and "U" keys and the source will display. For the Javascript console, press "CTRL", "SHIFT" and "J".

    September 5, 2012

    Welcome everyone! I hope everybody had a good summer and is ready for a new school year and a new Computer Club. Since we have a large group this semester, Mr. DeOms has offered to help out. I'm not sure if we will break the club into sections, we can discuss this in club today. Also I would like to hear from you as to what topics you might like to cover in Computer Club this year. Please let me know.

    March 7, 2012

    I'm glad some of you have been playing with Javascript. You can make your pages interactive and do all kinds of programming with this powerful scripting language. Once you start doing a bit of scripting, you will run into a situation where it is not working as you expect. A bracket or a capital letter out of place will cause the script to stop and do nothing. fortunately, the folks at Google have given us a powerful tool to "Debug" our programs, it is called a Javascript Debugger. You can open it in the Chrome Browser by pressing [Ctrl][Shift][J] all at the same time. If you click on the script tab, it will display the code and any error messages that have occurred in the script. You can also add variables to "listen" to so you can see what they are containing as different points in time.

    February 1, 2012

    Welcome new Computer Clubbers! This is a first for the Computer Club, female members. I hope the guys will behave themselves now that we have the XX chromosome represented.

    For you new members, this is where I keep a log of past clubs and info that you might find helpful. If you scroll down to the bottom of this page you will find a brief description of how web pages work, and an introduction to the HTML commands we use. You can also right click on this page and select "view source" to look at the commands I've used here. This page is created by hand with the same set of commands we have gone over in club, so if you see something you like, cut it and paste it into your own page.

    January 4, 2012

    Hey guys, wanted to show you some more of what you can do with javascript. This bouncing box is not an animated GIF, but instead a simple math object being drawn on a special area of the webpage called a "canvas". I found this code at and have tweaked it a bit. You can look at the source and see what it is doing. If you paste the script and the "canvas" line into your webpage, it should work. From there you can change some of the numbers to see what happens. Have fun!

    December 7, 2011

    guys! I've stuck an Java Script in this paragraph and am wondering if you can find it. What it does is pull the system "Date()" variable into "d" variable object, then uses the "GetHours()" function of "d" to pull the hour from the system time (Date() returns date and time) and loads it into the variable "time". Then it compares the value of "time" (using an "if" statement), and depending what it finds, it starts this paragraph with "Good morning", "good day", "good afternoon" or "good evening". My favorite place to experiment with Javascripts is . Their site has examples and listings for the commands, and lets you try them out in your browser. Look at the source code for this page and you can see what I've done with the script.

    November 9, 2011

    abbytalk.gif Last time we spent some time animating with Gimp. Gimp is a bit confusing when you are working with layers, just make sure that the layer you see is the one you are working with. Use the layer dock to keep track of where you are. Once you have your animation working in gimp you will need to save it as an GIF file. Gimp will ask you if you want to flatten or save the layers as a animation. It will also let you choose to loop the animation and what the default frame pause time. Once you have a GIF file, you can use it on your web page just like any other image file.

    September 28, 2011

    If you have been wondering why your pages hadn't been updated, it was because I hadn't installed my FTP client on my new install of Windows 7 and updated my info. I use FTP to transfer your files from the server in the lab to the server that hosts the TCbits website. I also had to separate Eggbert from your personal directories to avoid coping it every time I want to update your sites. If you are looking for your copy of Eggbert, it will be in the Eggbert directory under your name.

    Since I'm on the topic of FTP I suppose I should share what it is, and how it is used. FTP stands for File Transfer Protocol. It is a set of commands that are exchanged with a server that allow files to be uploaded and downloaded. Sometimes you can download from an FTP site directly using your web browser as most browsers can sent the requests for downloads. For the ability to upload files, it is easiest to use an FTP client program. The FTP client I like to use is called Filezilla. To start an FTP session you have to log on to the FTP server with an user name and password. FTP clients function somewhat like Windows file explorer, except it will have two sides, your local files, and the files on the server. The clients will let you pick files and move them back and forth.

    Many web hosting companies provide an interface to edit and exchange files with the server using your web browser alone. These interfaces generally work well if you are modifying a few files, however, when it gets more complex, FTP makes life much easier.

    Now that I've got everything set up again, any new changes you make today will show up on your pages tonight.

    September 14, 2011

    Welcome to Computer Club! We have seven new members this semester as well as eight veterans. For you new members, I thought we would do a bit of review to get you up to speed. Some HTML Basics:
    • HTML pages are separated into two sections: The "head" and the "body". The head section has control information that does not display. The body is where the text and pictures go.

    • HTML commands are surrounded by the greater than and less than symbols < >

    • Most HTML commands require an end command which is the command with a "/" in front of it. <center> </center> would be an example.

    • HTML ignores line breaks and extra spaces. It will run all text to the end of a container (page, box, cell) unless it gets a new paragraph<p>, header<h1> or break</br> command. You can take advantage of this to space your files to make them easy to read.

    • HTML items are displayed in the order they are in the file, top to bottom.

    • File references are case sensitive in both HTML and CSS. If you have a picture called "MyPicture.jpg" it is not the same as "mypicture.jpg" and will not find the picture to display. We also have to tell the system that the picture file is in the same directory as our HTML file, we do this by putting "./" in front of the file name. Example "./MyPicture.jpg"

    • Links to other webpages can be internal or external. Internal pages are linked with the directory and filename: example "./MySecondPage.htm". External pages include the entire web address: example ""

    • HTML commands can go inside other HTML commands. An example would be making a picture into a link to a website. You would "nest" an <img> command within an <a> command, making the picture a link.

    • Though most formatting can be done on a line by line basis, the CSS style sheet is becomming standard for handling formatting. Once a CSS style is set up, you use HTML commands to activate the sytle. CSS has a slightly diffrent formatting, and can be done is a separate file to keep all pages consistant.

    Remember that this web page has links over on the right to reference pages that can be most helpful. Also look down this page for things we have done in the past, I've tried to include the commands and how they are used. Also remember, if you click the right mouse button on a web page and select "view source" you can see how other people put their pages together.

    Good luck and happy coding.

    2010-11 Computer Club

    February 9, 2011

    Welcome to our newest member Grayson G. and welcome back Treyven and Andrew. Today I want to get Grayson up to speed and go over sone of the other things we have been working on.

    January 5, 2011

    Happy New Year! I hope everybody had a good Christmas and is ready to do well in the New Year. Matthew Pitzer again won my challenge and the sound activate key finder flashlight. Thanks to Mrs. Mead for judging the Christmas pages. Seems Matthew's tree put him over the top.
    Today I would like you to take a look at the <table> command. It has three main parts, the <table>, the <tr> and the <td>. <table> lets you set the format of the table; borders, colors alignment etc. The <tr> (table row) sets the browser to create a row of data. Each item in the row needs to start with the <td> command. Unless you format the table, the browser will determine how wide and deep to make each items cell. To start the next row, you will end the row </tr> and start a new one. Here is an example:
    School Wins Losses
    Faith 2 2
    Heritage ? ?
    CVCS ? ?
    Bradfording ? ?
    View the source code for this page to see the commands. Tables are used for many types of page formatting. See if you can find the other 2 tables on this web page.

    December 1, 2010

    I have issued another challenge; Christmas decor on your pages.
    Today some of you used the <img src="your.jpg"> command, some changed the style property of <body> to {background-image: url("./your.jpg"). You can see I have strung some lights on our logo using a 2 frame animated GIF that I made with the Gimp program. We have one more club before Christmas, there will be a prize for the best decorated page.

    October 6, 2010

    Today I'm giving you a challenge. Since you guys like to play games, I'd like to see a small picture (thumbnail) linked to your favorite game with a title over it on your web page. I'll give you an example:

    World of Goo

    You can "right click" on this page and "view page source" to see how I've done it. Also notice that both the picture and title take you to the web page. That is because both things are between the <a> </a> command.

    September 29, 2010

    We have had our third club of the new year today. Last club we concentrated on using Gimp to create some animations for our web pages. You will still need to optimize and save them in the GIF format before you can put them on your page. Look down this page to Nov. 18, 2009 and you can get some specific instructions.
    Today, we concentrated on starting a page for the new guys, and adding some things for others. We went over some of the basics again, please look back at last years notes if you need help and I haven't been able to get to you. I have also created a file called "Sample.htm" in the "Dan Thomas" directory of the "Computer Club" on the server. In it, I've included a bunch of notes and a basic structure to get you started. If your new to the club, this file has been copied into a file with your name on it. Remember to save your work in your directory on the Lab Server or I won't have it to post on the site. Next week, we should be able to add some more to your pages.

    May 19, 2010

    Until today, we have stayed within the HTML language. The little music player above is written in Shockware/Flash language and is several hundered lines long. It is a file named xspf_player_slim.swf and I have copied into your directories. It is an "open source" program and we are free to use it without having to write or pay for it. We can use these types of programs from our web page by using the <object> </object> command. This player has it's own set of commands, and a playlist file that it needs to have to play. If you "right click" this page you can see the <object> command with the parameters needed to set up the player. The other file it needs is the "playlist.xspf". If you look in this file you will find it has commands much like HTML. You can change the name of the music file to one you want to play, as well as the title that shows when it is playing.

    May 5, 2010

    Today some of us tried embedding sounds on our pages. Most browsers support embedding a sound or video on a web page so you can have it play when the page is loaded. unfortunately, the browsers depend on the computer for the proper playback program, and as we discovered, many of the lab computers don't have it. One solution to this problem is to provide our own program using an Adobe Flash Player program. Next time I will show you how.

    April 21, 2010

    Mostly review and FRIV today. We (the ones interested) also used the ordered list command <ol> </ol> to create a list. Each item in the list is started with the <li> command and ended with </li>. With these commands you can make lists that start with a "dot" (or "bullet" in typesetter lingo) or a numbered or lettered list. Remember to set up a style for how you want the list to look. Be careful with colors, if you set the background to the same color as your text, you won't see anything!

    March 31, 2010

    Hey guys, thanks for taking it easy on me today. We worked mostly on getting pictures on your pages today using the < img > command. the "src" in the command tells the web browser where to look for the file. You might have noticed that we put "./" in front of the file name, this tells the browser that the file is in the same directory as your web page. Pictures will follow along with the text on your page unless you give them absolute positioning. Some browsers are better at dealing with positioning than others, so you might want to use a table command if you are tring to line up several pictures on a page. We will try to get to the table command next club after spring break.

    March 17, 2010

    We worked with pictures on many of the new guys sites today. The problems we were having getting some of the pictures to display was caused by Windows hiding the file extension (the letters after the "."). When you save your picture from the web, some of them might be named "whatever.jpeg" instead of "whatever.jpg". This is a problem for HTML as it needs an exact match to find the picture. If your computer is hiding the extensions, you can display them by going to "My Computer" selecting "tools" from the menu, "folder Options" from the list, "view" from the tabs, and then uncheck the line that says "Hide extensions for known file types". Press the "Apply" button and now you should be able to see what the file is really called. Some of you were able to cut and past the < Style > sections into your pages. The < Style > section is where you can define how each part of your page is going to look. This includes the < a > command used to link to other pages. The < a > is special because it has more than one type of condition, so you add a colon ":" after the "a" and the state that you want to define like "a:hover". In this case, the style that you give will apply only when the mouse hovers over the link. For an example of this, look at the source for this page and you can see how I defined the links to your pages. I have a "class" assigned called ".student" but if you want the style to apply to all the links on your page, just leave the ".student" out. Next time we will continue to work on your styles and pictures. Don't forget the Gimp program is good for sizing and changing your pictures. (see my "Downloads" if you need a copy)

    March 3, 2010

    First, thank you first semester computer guys for helping to get the new guys up and going. Most of the new guys were able to get the structure of the web page in, and some got a bit further. We started out a bit differently than we did back in September, adding the < HTML > , < head > and < title > commands. This basic structure gives us a place to put the content of the web page, as well as the formatting command structure we will use. Next time we will be setting up the CSS styles and adding headlines and pictures. If you can gather the pictures you want to use and bring them in on a flash drive, we will be able to move faster. Your images can be sized with the Gimp program and saved in your directory on the lab's Z: drive.

    January 6, 2010

    Today we spent most of our time reviewing commands we have used before, and getting those who were behind caught up. I had a lot of questions about things we had done in previous clubs (I understand, it has been awhile since we met). Remember to look to this webpage for the details on the commands we have used so we can move on to new features. I'm glad all of you decided to stay in the computer club for the 2nd semester.

    I've been thinking of having some t-shirts made up for our club, if you have an design (one color please), let me know.

    November 18, 2009


    We spent some time working with Gimp today, using its layering ability to create animated Graphics Interchange Format(GIF) files. We used the menu command 'Filter' then 'Animation' then 'Playback' to view the GIFs in action. When we save our GIFs we optimize using the 'Filter-Animation-Optimize for GIF' command then use 'File-Save' and choose 'Save as Animation' and press 'Export' to save the GIF. Keep in mind that each frame or layer of your GIF file is a bitmap picture, so if it is a large size, or has a lot of layers, it can take a long time to load on your web page. The GIF file has a long history starting in 1987. It supports animation and transparent backgrounds but has a limited amount of colors(256) that it can display at one time. So GIFs are good for simple logos and animations and not ideal for photos.

    October 28, 2009

    Today we learned how to link to an external web page or file using the < a > < /a > command set. We used the ' ref="http:\\" ' to direct the link and either a line of text, or an < img-scr > to activate the link. Next time, we will learn additional formatting commands, allowing us to have more control of placement on our pages.

    October 14, 2009

    We did not cover any new commands today, but worked to catch some people up. We have installed a program called GIMP to allow us to edit pictures. We used GIMP to lighten and change the color of the background on Dale's page (take a look). Gimp is free, and can be downloaded from here: Gimp 2.6

    I know we are not moving as fast as some of you would like, but thirty minutes goes by quickly. If any of you would like to stay after the bell and work on your pages, I will be in the lab until 4:30 on club days and would be happy to help you.

    September 30, 2009

    Today we added a CSS (cascading style sheet) to our pages. This style sheet allows us to change aspects of the commands we used last week as well as add background images to areas of the page.

    First we needed a header to contain the CSS so we used the < head > and < /head > commands. Then we used the < STYLE type="text/css" > and < /STYLE > to define our styles. Each line of the STYLE section covers a different command and can have more options than the ones we included on our page. The style definitions are surrounded by curly brackets "{}". We worked with "font-size", "color", "text-align" and "background". "background" has several parts, the "url(whateverfile.bmp)", the position percentages "x%" "y%", "repeat" and "no-repeat".

    We also used the < img scr="filename.bmp" height=xxx width=xxx > command within a < center > command to display a picture in the middle of the page.

    Next time we can add some more content to our pages, and will start placing links to other pages.

    September 16, 2009

    Today we covered creating a basic text document using Notepad and saving the file with an .HTM extension on our labs file server. We viewed the format of the document by opening it with a web browser. The commands we used were < /h1 > to give it a headline and < center > < /center > to put the headline in the center of the page. We learned that HTML commands are used in pairs, one at the start and one at the end. Next week we will start adding content to our pages.

    How Web Pages Display

    A web page is a text document stored on a web file server connected to the Internet. It is written in a language called HTML (Hyper Text Markup Language). It started as a simple language that was created to allow early web pages have some formatting ability. It has become much more complicated over the years, but it still has limitations. These limitations have given rise to languages like Java and Flash Player that allow whole programs to be embedded within the HTML page. These programs may be as simple as making a button change when you click on it, or as complicated as an adventure game.

    When you use a web browser to look at a web page, the web browser downloads the page to your computer and displays the document. If the browser encounters embedded programs within the document, it might ask to install a "plug-in" to process the program language. Once the "Plug-in" is installed, your browser should be able to process the programs.

    A web page may contain links to other pages that will download and display when you click on them. These links can be activated by clicking on underlined text, buttons, pictures. The links may also be activated by embedded programs.

    Once your browser has downloaded a page from the web file server the connection between the computers ends until you request another page. This is how the web file servers are able to handle many people viewing the same web pages at the same time. This is also why there is a need for "Cookies". "Cookies" are a way for the web file server to know if your browser has requested a page from them. "Cookies" are small files that download on to your computer with some basic information about what your browser was doing with that particular file server at a given time. With these "Cookies" the web file server can keep tract of you and make sure to send you the pages that are in the correct sequence.

    If you would like to see the coding that makes up a web page, most browsers will allow you to "right click" on the web page and select "view page source". The browser will open a window with all the codes shown in plain text. Some of the more complicated pages use templates, frames and tables. These pages are difficult to recognize in the text form, but if you scroll through the document, you might find some of the text from the page.

    Here is a website that has the basic HTML commands with examples of how they are used. Basic HTML Commands


    Introduction to HTML
    HTML basics review

    Getting started with HTML
    HTML reference w/examples
    CSS reference w/examples
    Java Script Tutorial -- w3schools
    Color Chart

    A guide to animating a walk

    Chicken Stock