Website Club
The club meets after school on Wednesdays.
Find out what we're doing now.
Introduction
25 February 2008
Children from the school are very keen to set up a website. It takes patience and time to learn how to create web pages.
In our first session we learnt how to use Notepad to create very simple web pages which come from computer files that include the html name.
html stands for hypertext markup language
| As an example, in Notepad the file myname.html looks like this | .... and the web page in Internet Explorer looks like this |
 |  |
The web page doesn't show our paragraphs, but next time we'll find out how to change the way it looks. It's very different from a word processing document.
We hope to get a program to make this simpler soon, but it's a good thing to know some of the basics - and we'll keep you updated.
All about Tags
5th March 2008
We practised opening Internet Explorer and Notepad to get a split view on screen - see above. This is a useful way of seeing what happens to the web page when we change the file - when the file has been found!
Tags are what we use to change the way text appears in Internet Explorer. These are surrounded by brackets opening like this <tag> and closing like this </tag>. The first tag we looked at was <html>, but there are many others.
The effects of some simple text tags are shown below.
| Notepad | Internet Explorer |
|
here is <br>a new line and here is a new <p>paragraph</p> make text <b>bold</b> |
here is a new line and here is a new paragraph make text bold |
More with Tags
12th March 2008
We found that saving and finding files was trickier than entering the contents of the web page. Next term we'll try to make faster progress, now that everyone has managed a some of the basics.
Fancy things with text:
To change text colour or size we include the word font in the opening and closing tags like this: <font property = "something"> text </font>. See below.
| Notepad | Internet Explorer |
|
<font color = "red">red text</font> <font color = "blue">blue text</font> <font size = "1">size 1</font> <font size = "3">size 3</font> <font size = "5">size 5</font> |
red text blue text size 1 size 3 size 5 |
Did you notice we need to spell colour the American way like this: color
Headings and Paragraphs
9th April 2008
We used html tags to format a heading and some short paragraphs for a web page. The topics were chosen by the children.
| Notepad | Effect on web page |
| <b> Title </b> | bold heading |
| <p> Some text </p> | new paragraph |
| <p> More text </p> | next paragraph |
| <hr> | draw a line at bottom |
We didn't choose a particular font, so the text is all in the standard (default) one called Arial. There wasn't time for us to look for our mistakes and put them right, but you can see how we're getting on below.
Pop in a Picture
16 April 2008
Pictures can be used in web pages to illustrate stories and often make text more interesting. We'll add a picture to the text we prepared last week.
The simplest way to do this is to add a line to our html file using Notepad like this:
<img src = "pic.jpg">
This line tells Internet Explorer that there is a picture to display with an image source (img src) file called pic.jpg. jpg stands for the type of picture file like doc stands for a Word document.
We need to edit/change the picture from a digital camera so it's the right size to fit on our web page. Picture sizes are measured in pixels and you can see why we need to do this.
A program in Windows called Paint can be used to make the picture smaller.
Find your picture and double click to open it
Right click over picture> Click open with > Paint
Click Image > Attributes to see Width and Height - make a note of these
Click Image again > Click Stretch/Skew > make Horizontal and Vertical sizes 10%
Select Image > click Attributes to see Width and Hieght again - they should be one tenth of the original.
Click File Save the file.
Now use Notepad to open your text file from last week
and just before <hr> at the bottom add:
<img src = "your picture name.jpg">
where your picture name is the one you have saved above. Save the text file.
Here are the results of this work.
.OUR NEW SCHOOL LIBRARY
We have just recently opened our New school library 6th March 2008 With brand new books (COOL HUH!) We still have some more books on the way.
Our library goes into good use and here are some comments from some of the st.teath pupils. " it`s been very well organized by the display team and teachers, with a wide variety of books you would surely be able to find your favourite books and dream authors."
our school library is fantastico and a wicked place to chillax. Here is another comment on our library "it's a wicked place to sit back and read."
Here is a link to Google
.our School
Our Headteacher IS Mr.Bacchus. we have a school Library .It was opened on world book day 4th of March. There are 47 poepple in the school.There is two classroom , 3 loos and a hall.
This is are shcool poster in the entry of the staff door
There is a link to a website i like here
New entry
mr.b is a very good teacher and is fun he is the best
The story of me
I have a friend and she has moved to Australia. And she lives in Perth.
And she is my best friend. She is older than me!!! I really miss her.
These are the clay faces of k2!!!
All about my friend in class
shes a fashion lover!
Her favourite animal is a penguin. And she likes make-up.Her favouite sport is swimming.Her favourite subject is literacy. Her favourite thing she likes doing out of school is singing and dancing.
The pictures about a shelter that you can sit down at playtime and have your fruit. It has a bench there its very nice there I like sitting there its very pritty with lovely daisiy.
here is a picture of the school from the field
MR BACCHUS
IS THE BEST TEACHER YOU COULD HAVE AND HE IS ARE HEAD TEACHER BUT HE IS A JOKER BUT HE CARES ABOUT US TEACHUS NEW THINGS LIKE MATHS, LITERACY, SCHOOL COUNCIL
School Swimming
KStage 2 go swimming every Tuesday in different groups .This term until the one week break year 3 and 4 are swimming and then 5 and 6. We go to Camlford swimming pool.
We all go in the mini bus ,Mrs Wilsher a School teacher dives us there and teaches group one . We're split into two groups ,one of them is in the deep end and one in the shallow.
This our school poster in the main entry
there is a link to a website i like here
SCHOOL FASHION
Here is all the imformation you need to know about SCHOOL FASHION.
Here at our school, we are not particulary strict about wearing school uniform. Our head teacher, Mr.Bacchus believes it is good to were school uniform, but does not make us.Most pupils do wear school uniform, but others don't.On school trips, or photographs, it is reccomeded to us to wear school uniform, for safety or just for smartness.
I agree that school uniform should be optional and that everyone shoud have their own opinion on it and should all dress uniqly different.My best friends all agree with me.
The following picture is a good example of the uniform that we where at are school.
I interveiwed one of my friends, about her opinion on our school uniform, here's what she says,"I think that the school uniform should be opsional
MR BACCHUS
MR BACCHUS IS A GREAT HEAD TEACHER HE HAS LOTS OF GOOD IDEAS FOR THE SCHOOL. HES VERY FUNNY AND HAS MORE JOKES THEN A JOKE BOOK. maths BEEN our TEACHER FOR A YEAR AND A HALF HE CARES ABOUT US ALOT. HE SUPPORTS ASTON VILLA. HE teachES US MATS ' LITRACY AND DT PHSE/CITIZENSHIP
the front of the school
Revision
30 April 2008
<b> makes text bold
<br> adds a new line
<p> adds a new paragraph (or 2 new lines)
<hr> draws a line across the page
<font size = "3"> makes text bigger
<img src = "mypicture"> adds a picture
In many cases tags close with a forward slash like this </tag>
Now take a look at the following html tags - can you see the mistakes?
| Notepad - html | On web page | |
| 1 | <b>Title<b><br> Just the word Title is supposed to be bold, but it's all bold. | Title Just the word Title is supposed to be bold, but it's all bold. |
| 2 | <p>>Where did the extra bracket in this paragraph come from?</p> | >Where did the extra bracket in this paragraph come from? |
| 3 | Title<b>There should be a new line after the word Title, but the text goes bold instead. | Title There should be a new line after the word Title, but the text goes bold instead. |
| 4 | There should be a new line (br) in the middle of this sentence. | There should be a new line (br) in the middle of this sentence. |
| 5 | myfile.htnl | Does not show as a web page |
| 6 | <"hr"> is supposed to draw a line across page | is supposed to draw a line across page |
| 7 | <font size = 5> should make text big | should make text big ( like this) |
| 8 | Here is my picture <img src = "myfile.jpg" | Here is my picture  |
Links
Links make it possible jump from one web page to another simply by clicking on the link which can be a word or a picture. This saves typing in cumbersome address details. Links are often called hypertext links.
If we wanted a link to Google on our web page we'd use Notepad to add:
<a href = "http://www.google.co.uk">link word</a>
and on the web page we'd see: link word
If you click the underlined blue letters you'll go to Google. Please come back!
We can make a link to any website you like. To make it easier, first open Internet Explorer and go to the website. Now mark and copy (just like in Word) the web address at the top of the page. Close Internet Explorer.
Open the text file you saved last week. Type the following just before the <hr> at the bottom of the page.
<p>There is a link to a website I like <a href = " ">here</a></p>.
Paste the web address you copied between the speech (or quote) marks (" ") and save your file carefully - we can check if the link works below.
The links that were chosen follow.
Click on the link to follow it, or just put the pointer over the link. You'll then see what it is at the bottom of this window.
Here is a website I like.
link
HERE IS A LINK TO A WEBSITE I LIKE
I like this website.
Here is a link to meow link.
There is a link to a website i like link
Here is my link.
The images and comments from previous work were removed - Rod.
Building Web Pages
7 May 2008
So far we've practised using some simple html tags - and the way in which these tags are used to change web pages. It needs more work to put even the simplest page together.
For example, we need to think about layout, colours, fonts, graphics. It's very important to make the page attractive, but not too difficult to read or understand.
There are thousands of possible layouts, but here are two simple web pages.
Now look at the web pages of local primary schools. See if they fit in with the types of layout above.
Draw out on paper a design you would like - in colour if you can. Please make it simple.
Here are some drawings of web pages - they give us an idea of layout.
More on Web Pages
14 May 2008
We've had a go at drawing the home page of a school website and seen some ideas of what could be included. Before we start on content (the words and pictures), we'll take a quick look at what's behind a web page.
Try clicking on this link.
Text and pictures
We'll start filling in some of the text and pictures on our web page.