Archive for the ‘HTML’ category


December 11th, 2012

There are some beautiful things about learning a programming language:

  1. You can create instead of just accepting what someone else gives you.
  2. It helps you troubleshoot problems with someone else’s applications.
  3. Computer languages are free, just like how no one charges you to speak English or Spanish.

The trouble is knowing where to start when learning a computer language.

Enter Codecademy.

It’s a brilliant website that walks you through step-by-step lessons on how to program and, more than that, has you try out the code as you read. The creators of Codecademy understand that doing something is a very effective way to learn something. Try it out. It’s free.

Javascript: Finding the difference

February 8th, 2012


Here is the answer to today’s Future Professionals challenge.

Six pre-made HTML 5 lessons

November 9th, 2011

This one’s for the teachers of technology. If you are doing any instruction on what HTML 5 is, check out Microsoft’s faculty page here for pre-made PowerPoints for six lessons. The page also includes all of the project files, which gives you a lot to pick and choose from when modifying it for your own classes.

HTML: Day 1 – Simple text formatting and inserting a picture

October 5th, 2011

Objective: We will be creating an HTML file with basic code and then previewing it in a web browser.

HTML code used in this lesson:

<strong> bolds text
<em> italicizes text (“em” is short for “emphasis”)
<p> shows where a paragraph starts and ends
<br> starts a new line
<img src> brings in a picture
<a href> creates a link

The HTML file we’ll create is going to be extremely basic. Later we’ll add information that meets the standards of the World Wide Web Consortium (W3C) and is coded better.

1. Open up a text editor like Text Edit or Notepad.
2. Save it as sample.html. If you don’t put the .html as the file extension, it may not load properly in the browser.
3. In your new text file, type:

This is the sample file. How exciting.

4. Let’s make that “exciting” really exciting. We can make the word “exciting” bold by adding the <strong> tag around it.

This is the sample file. How <strong>exciting</strong>.

<strong> lets the browser know that what follows will be bold. </strong> lets the browser know where to stop. If you leave off the </strong>, the rest of the page will be one big, bold mess.
5. Preview the HTML file in your browser. Open up Safari/Firefox/Chrome/Opera/Whatever . Choose File->Open and then select your HTML file. Check to make sure “exciting” is bold.
6. Now let’s add emphasis to the word “this” using the <em> tag.

<em>This</em> is the sample file. How <strong>exciting</strong>.

Notice how, just like with <strong>, you need to close out <em> with </em> or else it never ends.
7. We’re going to insert a picture, but I don’t want it to be on the same line as the text. Mark the text that we have as a paragraph by adding the <p> tag to the text.

<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>

You can also use the <br> code to start a new line, but when we get into CSS, using the <p> will allow you to do cooler stuff with the paragraph.
8. Insert a photo using the <img src> code. After the src part, you’ll be telling the browser where the file is stored online. For the sample, we’ll use an image from my site that’s found at

<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>
<img src=””>

Pay attention to the equals sign and the quotation marks. Whatever’s inside the “” is the direct address for the image. = tells the browser that what’s coming next is the source (src) of the image.
9. Save the HTML file and run it in your browser to check if the HTML file is working.
10. The last thing we’ll go over in this lesson is the <a href> tag. <a href> stands for “anchor hypertext reference”. Anchors are placeholders within a document. <a href> lets the browser know that a reference, a link, is coming.

Make the word “sample” a link to by adding the <a href> tag.

<p><em>This</em> is the <a href=””>sample</a> file. How <strong>exciting</strong>.</p>
<img src=””>

Like with the <img src> tag, we use the =”” to point to a location. Just like the <strong> and <em> tags, we close it out or else the rest of the document will be a link.
11. Save it and run sample.html in your browser.

Editing image size and alignment in pbwiki HTML

March 10th, 2009

This is for

When you add images to a pbwiki, it takes a little bit of HTML editing to format the image how you would like. In pbwiki, click on the Source button in your editor to view the HTML code.

Let’s use an image here and I’ll show you the different code to change the formatting.

The image:

If you were to view the HTML code for this image, it would look like:

What if we wanted to make the image bigger? I would add height and width code to my image HTML.

Notice the space from the URL and then the height=”300″ and width=”300″ code. Also, I chose 300 as a random number. Make the numbers smaller to shrink your image, larger to make your image pixels larger.

By adding in an align code, I can change how the words wrap around the text. Try adding in an align=”left” or align=”right” next to where you put the height and width code.

I’ve added some text and I will keep typing to see if the image will wrap around correctly using an align=”right” code. I started typing this after where I inserted the image. Below the red circle picture that I’ve got here I’ve put the source code so that you can see how I changed the image size and the alignment. Something to look for when you are searching the HTML source code is looking for a .gif, .jpg, or .png file to see where your images are at. I’ll keep typing and you can keep reading but you should probably just go edit your wiki page by now since this serves the main purpose of being filler text.

Here’s the code screenshot, complete with where I started typing my text: