WordPress and HTML

23 03 2011

HTML and WordPress are, for the most part, 100% compatible. Here’s an exercise to help you learn some html. Now, the goal of this is to NEVER use any of the buttons you see in the editor during this exercise.

Create a link through HTML:

<a href="http://www.wordpress.com">WordPress.com</a>

Add an image through HTML:

<img alt="Statue of David" src="https://pembertonpaul.files.wordpress.com/2011/01/24581_410516001456_648686456_4801412_2449997_n.jpg" />

Add a description of the image with at least one HTML character code. There is something to note: Once you input the character code, as soon as you switch to the ‘Visual’ tab, the character gets replaced in the HTML code as well. For instance, if you put in &trade; (the ™ symbol) in the ‘HTML’ tab, as soon as you switch to ‘Visual’ tab, &trade; gets replaced by the ™ in both the ‘Visual’ and ‘HTML’ tabs.

This is the description for this drawing I did a few years ago. And this code is just because: &para;

While you’re at the description, why not add in at least one italicized word and bold at least one word.

This is the <em>description</em> for this drawing I did a few years ago. And <strong>this code</strong> is just because: &para;

We’re going to embed a video and create a title for it. First, the video. Get the embed code for this video. Remember, you need to check the option below the embed code where it says, “Use old embed code.” In the example below, I had to replace the letter ‘e’ in ‘youtube’ with a 3. Just replace the 3 with the letter ‘e’ if you copy the code.

<object width="480" height="390"><param name="movie" value="http://www.youtube.com/v/oaprssNHmA8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtub3.com/v/oaprssNHmA8?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="390"></embed></object>

Now create a title above the embed code for the video and change the color (in Hex) and size. It doesn’t matter what the title is. Here’s a link to a good color wheel where they also give you the hex code.

<span style="color: #800000; font-size: 48px">Windows XP Icon War</span>

Last, but certainly not least, create a bulleted list with your favorite food, your favorite color, and your hometown.

<li>Favorite food: Tofu Teriyaki</li>
<li>Favorite color: Green</li>
<li>Hometown: Portland, OR</li>

Traditionally, you’d want to put a tab before the <li> on each line, but WordPress doesn’t like it for some reason (remember that I said WordPress was “for the most part” compatible with HTML).

That pretty much does it, now try it on your own.




One response

23 03 2011

Ignore the links in the actual code… especially the youtub3 link! It’s a spam site!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: