1. Finish going over websites & apps we like
We just had a discussion about websites and apps we like and why. Let’s now consider this in the context of school. If you could use an app- any app- in the classroom, what would it be and why?
2. Build your first webpage!
Your are going to create one basic webpage about yourself. However, you’re not going to write a long, boring paragraph about yourself. Instead, your page is going to contain at least five images that describe you.
First, Find Images
Before you build your page, we are going to do a mini lesson on how to find pictures you can use legally and how to edit them.
First, we will use Bing.com’s image search to find images that you can legally use on your webpage. These are images that are OK to use; you never want to steal anyone’s work or violate copyrights.
Step 1- Go to Bing.com
Step 2- Click Images on the top left
Step 3- Enter something you want to search for in the search box
Step 4- Go to License (underneath the blue text) and click Free to Share and Use
You now have image results that you can use legally
Second, Let’s Edit These Images
Pixlr.com is a free, online image editing application. You can also download Pixlr as an app on your phone or tablet for free.
Let’s go to Pixlr.com and go over a few basics
3. Now, find at least five images that describe you that you are going to use for your webpage. Feel free to edit them using Pixlr.com. You might even want to use Pixlr.com Express to make a collage of your images- it is up to you!
IMPORTANT- when you download the images, give them short names that make sense and save them somewhere convenient for finding them easily.
4. Done with your images? Let’s make a webpage!
Step 1- Open Notepad++ (you will find it on your desktop or on the computer’s start menu)
Step 2- Copy and paste the following code into Notepad++
<html>
<head>
<title>This is my webpage. I will change this boring title soon!</title>
</head>
<body>
This boring, blank page is crying out for images!
</body>
</html>
Step 3- Save your page (File, Save as) as aboutme.html
Step 4- Go back into Notepad++, go to the top menu, click Run, then go to Launch in Firefox.
Step 5- Behold your webpage in all its glory! Wait, is this webpage really live? Can anyone else see it?
Step 6- Let’s add your image/s. The code for adding an image is:
<img src=”image_name.jpg” />
IMPORTANT- Your image name will be different. Your file type might also be different. Instead of a jpg, you could also have a gif or png.