Class Monday, September 21, 2014

From Thursday:

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

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.

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.

Adding text to your page

Now that you’ve successfully added your images, let’s add some text to explain what the images mean and how they represent you.

Try:

A headline

Ex. <h1>This is a big headline</h1>

<h3>This is a smaller headline</h3>

A paragraph

Ex. <p>I’m a paragraph!  Look at me, a bunch of sentences together that are essentially double-spaced away from other content.</p>

Also try:

Bold text

Ex. <strong>This is bold text</strong>

Italicized text

Ex. <em>This is italicized text</em>

Bonus:

Choose a color for the background of your page, then add bgcolor=”color name or value” right next to body in the body tag

Ex.

<body bgcolor=”#cccccc”> or <body bgcolor=”red”>

Before you go:

Take a Post-it or two and write at least ONE thing you learned either today or Thursday AND at least ONE question you have; leave the Post-its at your desk