Hello and welcome!
In this activity, you'll remix a webpage to show how schools around the world are similar to and different from your own.
First, you'll change the title of the webpage using HTML, the language of the Web..
Then, you'll change the image and words on a webpage to describe a classroom from somewhere else in the world.
Finally, you'll change the credits on the webpage using HTML so that people know you remixed this page.
To change the title of Remix My Schedule, you'll edit HTML, the language of the Web.
Go to line . Find the text between the h1 tags.
In HTML, h1 tags and most others have an opening tag and a closing tag, and in the closing tag a / goes in front of the tag itself, like /h1. Brackets - like this <> go around each opening and closing tag. Check out the code to see what I mean.
h1 tags alone. For example, you might call this page 'Classrooms in India' or 'Different Classrooms Around the Globe.' The idea here is just to get some practice changing text so you can see how your webpage changes when you change the HTML.
Open a new tab or window under the 'File' menu in the upper left-hand corner of your screen. Go to the Creative Commons search page. Images shared with a Creative Commons license are generally okay to use and share online. They are not as strictly controlled as copyrighted images.
Click on an image service you like and then use the search box to look for images of different classrooms from around the world. Try different search terms to find pictures that interest you. For example, you might be really interested in school in a particular country and search with, "classrooms from _____", where you replace that blank with the name of your country. You might also search using the name of a continen, like "schools in Africa," and then click through each picture you like to see each classroom's country.
Click through the thumbnail you find and get to the picture itself online. Then right-click on the picture and choose to copy the image address or location.
It's important, also, to make note of who took the picture you want to use so you can give the person credit later.
Be sure to ask for help if you're not sure if you have the right address for the picture or not.
Go to line and find the img tag. We use the img to embed images, or pictures, on webpages. Find the part of your img tag that says src. Here, src stands for "source" - the source of the picture. The source we're going to use is the URL, or Web address, of the picture you found with your Creative COmmon search. Paste the URL (or Web address) of your new background picture over the old address now.
Once you know where your classroom is and have the name of the person who took its photo, change the words in the box on the left to compare and contrast your classroom with the one in the picture.
Go to line and find the div called schoolText. Change the location for your classroom and then answer the other questions using what you see in your picture.
Then go to
To link back to your picture from the photographer's name, go to line and find the a tag. This is the link tag. Find the part of the tag that says href. You put the URL, or Web address, of your link in between the quotation marks after href. Go ahead and delete the URL there now and copy and paste the URL of your picture there instead.
Now that you've done all this work, give yourself credit for a job well done.
Go to line and add 'Remixed by [you].' Use your first name or initial. Don't use your last name or give out any other personal information here. If you wonder if you should use your initial or name, ask a teacher for advice.
The 'CC-BY' line here means that the page is licensed for other people to remix as long as they give the original maker credit. This kind of license is called a Creative Commons Attribution license because when you atribute something to someone, you say 'This was made by' whoever made it.
Congratulations on remixing HTML!
If you'd like to explore and remix more of the page, you can remix the stylesheet file in the left sidebar called style.css. CSS stands for 'cascading stylesheet.' A stylesheet tells different parts of a webpage how to look. Change some of the number values you see in style.cssto find out what happens to your page. Messing with things like color or font-size ought to cause big changes to your page.
Even though you can include CSS on a webpage like index.html, we often save our .css files (and other files, like .js or images) separately so we can keep our code clean and use our .css files on several different webpages at once.
If you're interested, try to find the background-colors and font colors in the stylesheet and change them to match your school colors. You can find HTML color codes at sites like this color picker.
Be sure to save, reload, and test your page often so you can undo any changes that completely break it.
When you're ready to share your webpage, click 'Publish' in Thimble follow the link you get to see your new webpage.
Once you've saved your page, copy the URL and send it to your teacher or ask your teacher to write it down for you. You can visit that web address from any Internet-connected device to share your work with family and friends.
Share the URL with your family and ask your family members about how the classrooms they had when they were kids were similar to and different from yours.
Great job! You finished the tutorial! You can make your own tutorials for others to follow
by adding a tutorial.html page to any Thimble project.