Somerville21 Web Club

Everybody! Wrapping up your sites!

Today is the last day to work on your individual websites. I hope you have all learned something about basic HTML and the steps that go into creating a personal page for the web. You should all have an active index page (a homepage) in your folder on the shared server that can be linked together. We also have a few pictures we should organize on a club page.

Everyone should understand the following:

Using the Internet safely.
How to protect your identity and not get hurt on the web.
How to keep from downloading spyware and other viruses from websites.
How to search smartly and safely.

Understanding Webpages
What is a browser?
What is a URL?
What is HTML?
How do you use HTML to make a link to a webpage?
How do you use HTML to make a link to an image?
How do you copy and save images from the Internet?
What is a server?
How can you use MSPaint to prepare images for the web?
How do you add sound to a webpage?
How do you make links between pages or to other websites?
How to plan multi-page websites.
How to use and export websites from Publisher.
How to tell a story with words and pictures.

"Fair Use" of Web Resources
What is copyright?
Who owns the pictures and songs you find on the web?
How can you use them fairly?

Last Day to work on your sites

Everyone should spend this week working on their personal site.

If you are using Publisher, you need to export your site as HTML

If you are using Freewebs, you still need to have an HTML page in your folder. On that index you should have at least one banner or piece of art you have created yourself and a link to your freewebs page.

I want everyone to be contributing to the group pages too. We need information about the clubs and some banner art for the site made.

Next week we will show our sites to each other!

21st Century Web Club Group Site

Today:
Let's create an original banner for each school's club. You can make the banners in cooltext, kidpix, word, wordart or any other online banner making source we've played with. I want to see your creativity at work!

Also. VERY IMPORTANT
Each participant in Web Club needs to have an index (web) page at the server that they have made. If you are one of the kids using freewebs to create a site, you still need to create a basic page for the server. Only server-based pages will be part of the final group site.

Today, everyone should also begin wrapping up their personal pages. Remember, if you are using Publisher to create your pages, you will need to export it to HTML. I'll go over that with you.

Your pages should include:
At least one banner or piece of art that you have created yourself.
Links to pages where you got art from, and pages you like to visit.
One interactive thing. A game or video code, music, questionaire, something for your visitors to do when they visit your page.

Here is a good video code site.
http://www.muvids.com
This one seems to have a lot of music to choose from and does not contain the pop-ups and spyware that some of the other sites have. Talk to me about how to add more than one video on a page.

Here is a site with some games you can put on your site.
http://www.gamereign.net/

Of course, these pages have a lot of advertising and pop-ups on them. Remember, do NOT play banner games or click on any pop-ups!! Really! Never! This is especially important when you are looking at websites at home!

There are also some java-based games on the server. Those can be put on your pages too. Not sure how? Ask me.

Making a Club Site

It's time to begin thinking about putting a site together for the 21st Century clubs. We will work together on this. Each student is expected to contribute something to the club site (design, banner art, pictures, writing) but can keep working on their own websites too.

Today:
On your HTML index page (or a new Publisher page), list the clubs you are taking and write a short paragraph about the one you like the most. What club is it? What do you do in the club? Why is it your favorite club? This page must be in your folder on the school shared server, not on any outside web pages you have.

We will combine these pages into one page of our club page.

Favorite Sites and Website plans

Use the handouts to write about your favorite sites and plan your website.

Everyone should have a good start on their site. I will make sure each of you is working toward a goal. Use the My Website handout to decide on what you will focus your site on and keep track of stuff you find to put on it.

We will begin working on our group site soon. I want to make sure everybody has a chance to create their own personal site first.

Adding pages, sounds and making things move

SO, now that you've got a pretty good start to your pages, you can begin customizing and adding sound and movement to it.

Sound

We will use the embed tag. You can also use the bgsound tag, but it only works with Internet Explorer (not any of the other web browsers)

Example:
(This will add the sound and create a small controller for turning it on and off)

This will add the sound without the controller:

With the BGSOUND tag:

Movement
We will explore animation during the next few weeks.

Today, use the story board sheet to plan out a short animation.
Visit the Flipbook site. Try making a short animation and saving it.
(you can use somerville21@gmail.com for the email address)

Also, you can create animations with KidPix and export them as either flash or QTmovies.

What happens in your story?

Something moves from point A to B
Something grows
Something changes from one thing to another
Characters interact

HTML Templates
(hints for customising your pages even more.)

Friday Club: West Somerville

Update: The files were found and restored to their proper location. So, all is well again. :-)

The student Web Club folders were accidently deleted from the shared server. We probably won't be able to get them back until Tuesday, so today let's work on two things.

Animations. We can use FlipBook today to explore simple frame-by-frame animation.
Students who would prefer to use a storyboard can draw their animations and I will scan then and make GIFanimations from them for you (you can download free software to make these at home).

Planning Your Web Pages
Before web designers create websites, they plan them out and decide how many pages the site will be and how those pages will link together. Use the planning handout to organize your site ideas.

Your First Web Pages

Today we will make our first web page using simple HTML codes, called tags. All webpages use these tags.

Note If you are taking this class for a second time, you should know how to write a simple HTML page from scratch. Do this exercise or open your existing index.html page and add some images and hotlinks to it, or you may help your fellow club members.

Making your first page:

1) Find your folder in Web Club pages on the school server.

2) Open Notepad (windows simple text editor) to write your HTML page

3) Follow the directions on the My First Webpage handout. Add some of your own text to the page.

4) Save the page as index.html (not txt!)
Important: You will need to save and open your page while Notepad is set to show "all filetypes" for it to work correctly.

5) Your page should show the Explorer "E" icon (because it's HTML), click it to open it in the Internet Explorer browser.

Wow!
Once you have your first page ready, it is time to add a link to the art you made last week.

Look at the Handout Formatting Your Page to learn how to do this.

Welcome to Web Club - Spring Session

In this club we will learn to make webpages and digital art, will explore fun sites and learn some animation basics. I will post the club activity every week here in the club "blog." Sometimes we'll use this site to write comments or post places we find on the web that we think are cool. We will only use first names or nicknames here.

Today we will use art, type and collage to express our uniqueness. We will make a self portrait that may be a drawing, an autograph or "tag" or a combination of art and words. Explore some of the online creation tools linked from the club's links page or on this page. Or, follow the links at the top of this page.

"Avatar" is the name for the small graphics that represent people online. People use these on Bulletin Boards, or in online role playing games. Sometimes they are cartoons, or they might be a picture of an animal, flower or plant or your favorite sport. There really are no rules. Perhaps you want to draw your avatar by hand and scan it in (I can take pictures of anything you want to save for the web).
If you have done this project before, how else could you create a self-portrait?

1) Create a Self portrait

Cool Places to Get Started:

There are aleady a bunch of great online art making sites on our links page. Look on the Explore Art Page for some links. Or, try making something in Paint and saving it as a .png or .jpg.

Portrait Illustration Maker
Anime-style portrait avatar creator from Japan.
Make sure you save the picture
(right click on the picture and select "save picture as" and save that).
Here's one I made of me (with my cat) ---->

With the Portrait Avatar Maker
You can make avatars with little bodies and props

Punky Avatar Maker
Punk/graffiti-style text and shape avatars. This site also features BlinkieMakers, for making little animated icons! You might want to use something like these on your pages.

Use the Cool Text Logo Generator to make all sorts of text graphics. Try playing with your name!

Fractus, is a website that features patterned button icons made from Fractals. You can use these on your site too. There are also some cool 360° panoramas here. You can explore Fractals at CoolMath4Kids

Try drawing a picture with your name using the Typedrawing program.

What about combining some of these things?

At most of these sites, you can save your icon by choosing "save as" and saving it to your local folder. You want to save it as a .png, .jpg or a .gif file.

You can open these in MSPaint and play with them some more, or combine different things.

Some sites have other instructions on how to save your pictures. If there is no way to save what you have created, use "print scrn" to save it to your computer, then open it in Paint, select "paste" to paste the image, crop it, and save it.

2) Create a folder on your computer with your name to store your images.

3) Save or move your name art to the folder.
(If you use paper/markers I will digitize your art for you).

4) "Upload" - copy it - to the school server in the 21st Century Web Club folder.

My Computer > shared server > save work here > 12st Century Web Club Fall 2005 > your school folder

Last Classes of Winter Session!

This week is the last week for this winter session of Web Club.

If you look at the shared server pages, you'll see that there is an index linking your sites together. If you have been using Publisher to make your site, you need to Export it so it will link to the index. It is not a real website until you publish (export) it.

Take a look at what your peers have done! Also, check out the animations, if you haven't yet.

Everyone should understand the following concepts by now:

Safe Surfing (how to use the Internet safely)
What is a browser?
What is a URL?
What is HTML?
How do you copy and save images from the Internet?
How can you use MSPaint to prepare images for the web?
How do you add sound to a webpage?
How do you make links between pages or to other websites?
How to plan multiple page websites
How can you make a simple flipbook animation move?
while the Winter Hill students didn't get to make their own GIFanimations, everyone should understand the idea.

Favorite Sites

Spend at least part of today filling out the handout on your favorite sites. Everyone should spend time at the Web Club website.

I think everyone got a page started last week. I will go over formatting (check out the Web Links at the club and the hand-outs for fomatting info) with you and discuss each of your pages. Since we don't have a lot of time in the lab for this winter session we won't be able to do all the projects but I hope each of you at least has one piece of original art and at least one link on their pages.

Let me know if you are taking the club again, so I can begn thinking about new projects for you for the spring.

WSNS - Today!

Today, I want each of you to try out some of the links at the club site. Spend time exploring some links you have not checked out yet.

You can also look at some of the links at this site I just found:
(has links to all sorts of creative tools)
Online Image and Sound Tools

Then,
Fill out the favorite sites handout.

Winter Hill - Basic Web Pages

Today we will finally be making our own webpages. Using the hand-out guide, make your first page using Notepad and Explorer to preview. Since we have a lot of catch-up work to do, lets also use today to put at least one original piece of art and one link on your page.

I will work with each of you today to help you decide on the theme for your web page.

Everyone should have an index.html page ready to link together by the end of today!

Creating a Web Club Index

Welcome Back! Today we'll begin linking your pages together in a club index.

Each of you should be adding to your site with original art and ideas. I will work with each of you today, to help you get your site organized and give you hints on how to make if look the way you want it to. You may work with Publisher or with the HTML code. Be ready to discuss your site and club goals as we near the end of this winter session.

Those of you using Publisher will need to export your pages as HTML before they can be linked to.

Winter Hill Web Club, Feb 27th

Hello Class!

Finally, we're back in the computer lab! Welcome back and hope everyone had a great vacation! As you can see, I am not able to be with you today. Since it's been so long since we were in the lab, spend today doing three things.

Thing One: Review the Club Rules and Web Safety tips.

Thing Two: Take a look at aYour Animations (there may be a few I still need to add, let me know if you don't see yours). Each one of your animations has its own web address (URL) so you can create a link to it from your web page if you want. If you'd like to explore Animation more today, try out the Flipbook site. These animations are stored at the Flipbook site. Use somerville21@gmail.com as an email address when you save your animation. You can also explore making animations with KidPix. If you make something you'd like to put on your webpage, you can export it.

To Export art from KidPix to use on a website:

Move your mouse so the cursor is at the top-right of the screen.
See the little triangle? Click on that and the top menu bar will appear.
Go to File > Export
If it is an animation, save as Flash(fla). If it is a still image, save as a jpg.

Remember to save everything to your folder on the server!
(my computer > shared > save work here > 12st century web club > Winter Hill > your folder (if you don't have one, make one!)

Thing Three: To prepare for next week, find images, and create some original title art and buttons. Use the cooltext website, Word Art, KidPix or any art making site to make something original for your website. Save everything to your folder on the server, and remember to write down where any images you are using came from!

Use the Website Map to plan out what will be at your site.

Next week we'll get back into HTML coding and using Publisher.

Don't forget, there are lots of great resources here at the web club site!