Creating web pages is a valuable skill for web design and development. This lab will focus on scratch, a programming tool useful for game creation as well as web design.
1. Go to https://scratch.mit.edu/ on your browser
2. Join Scratch by clicking "Join Scatch" at the top of your screen. You will be prompted to choose a user name and a password.
3. To start Scratch program, click on "Try it Out."
4. The screen is divided into four areas.
5. Sprite List - These are the characters in the game. You can make these characters do things.
6. Blocks Palette - Essentially, this is the programming language. These are commands you can use to animate your sprite.
7. Scripts Area - This is where you create your program. Essentially it is just a matter of pulling blocks from the Block Palette into this area to create your program.
8. Stage - This is where all the action takes place.
9. Experimenting with Scratch is quite easy and a lot of fun. Try out different blocks. You can do that by simply clicking on them in the Blocks Palette. For example, if you click on the block "move 10 steps," you will see your sprite move forward. If your sprite ends in a position on the screen that you don't want you can simply mouse over the sprite and move it to another area.
10. Not all blocks will work. Some have to be combined with other blocks. Also, be patient. There could be a significant lag between clicking on one command and then trying another.
11. Creating a script is easy. Just drag a block from the blocks Palette to the scripts area. You will note that the blocks seem to fit into one another like a puzzle. And you can easily grab one and move it around. Below is a short script I created. If you read the blocks it simply sets the sprite to x position 0 and y position 0 on the screen. The sprite then moves forward 45 steps, turns clockwise 15 degrees and moves another 45 steps. And so on. By clicking on the "set y to 0" block, the script activates and I can see the sprite move according to these directions.
Sample Script: see image.
12. You can save your work simply by using File and Save as at the top of your screen. You can also create a link.
Create a script that animates two objects on the screen.
In this step, we will create a simple website. We will be using HTML and creating your own website to advertise your new scratch game.
Some of the commands we will use are below (from webmonkey http://www.webmonkey.com/2010/02/html_cheatsheet/ ):
Basic Tags
< html> Creates an HTML document
< head> Sets off the title and other information that isn’t displayed on the web page itself
< body> Sets off the visible portion of the document
Body Attributes
Sets the background color, using name or hex value
< body text="black"> Sets the text color, using name or hex value
< body link="blue"> Sets the color of links, using name or hex value
< body vlink="#ff0000"> Sets the color of followed links, using name or hex value
< body alink="#00ff00"> Sets the color of links on click
Text Tags
< p>< /p> Creates paragraph text
< hl>< /hl> Creates the largest headline
< h6>< /h6> Creates the smallest headline
< b>< /b> Creates bold text
< i>< /i> Creates italic text
< tt>< /tt> Creates teletype, or typewriter-style text
< cite>< /cite> Creates a citation, usually italic
< em>< /em> Emphasizes a word (with italic or bold)
< strong>< /strong> Emphasizes a word (with italic or bold)
< font size="3">< /font> Sets size of font, from 1 to 7
< font color="green">< /font> Sets font color, using name or hex value
< ul>< /ul> Creates a bulleted list
< li>< /li> Precedes each list item, and adds a number or symbol depending upon the type of list selected
< img src="name"> Adds an image
Links
< a href="URL">< /a> Creates a hyperlink
< a href="mailto:EMAIL">< /a> Creates a mailto link
< a href="URL">< img src="URL"> < /a> Creates an image/link
< a name="NAME">< /a> Creates a target location within a document
< a href="#NAME">< /a> Links to that target location from elsewhere in the document
1. We will start by creating a simple website. You can use any text editor. Notepad on your computer will work just fine for this exercise. Open Notepad. You can type all of your code in here. Save it in a folder as mywebpage.html.
The example below is about the scratch project I created. Type the following code into the text editor. Replace "your name" with your name. You will notice that each opening tag also has a closing tag. Be sure when you are creating your website that you include a closing tag.
< html>
< head>
< title>Your name website< /title>
< /head>
< body>
< h1>My Scratch Program< /h1>
< /body>
< /html>
Save it as mywebpage.html. To open your page in a browser. Locate the file in File Explorer. Right click on the file and choose Open With->. Here you will see a list of Web Browsers. Pick one of the web browsers and open it.
You should see something like the following: see image.
Now we want to add some more elements:
We will add paragraph text, change the text color, add bold or italics for emphasis, add a list, a hyperlink, and an image. The image must be in the same directory as the mywebpage.html. We will use the tags listed above to accomplish these tasks.
< html>
< head>
< title>Gina Cooper's website< /title>
< /head>
< body>
< h1>My Scratch Project< /h1>
< p>Check out my < b>awesome< /b> game I made with scratch! I thought it would be fun to have a bee chase a cat in scratch. So I added an additional sprite (the bee) and a < font color="orange">desert background.< /font>< /p>
< p>In my game, the cat will move around in circles then move towards the mouse. While it moves a pen will draw the route. The bee will follow the cat. Hopefully the cat won't get stung! Here is the link to my project:
< a href= "https://scratch.mit.edu/projects/83947834/"> link< /a>< /p>
< ul>Some of the actions in scratch I chose are:
< li>Repeat loop (5 times)< /li>
< li>Forever Loop< /li>
< li>Pointing towards the other sprite< /li>
< /ul>
< p>I also took a screenshot of my game too! I hope you enjoy playing it! < /p>
< img src="scratch.png">
< /body>
< /html>
The following image is the web page in the browser. Add in your own information and create your website! Take a screenshot and paste the code and screenshot below: see image.