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 http://briangriggs.com/wp-content/uploads/tech.jpg.

<p><em>This</em> is the sample file. How <strong>exciting</strong>.</p>
<img src=”http://briangriggs.com/wp-content/uploads/tech.jpg”>

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 briangriggs.com by adding the <a href> tag.

<p><em>This</em> is the <a href=”http://briangriggs.com”>sample</a> file. How <strong>exciting</strong>.</p>
<img src=”http://briangriggs.com/wp-content/uploads/tech.jpg”>

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.

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: