One of the most important things to remember about HTML is that it’s a markup language. Think of it as the structure or foundation of a web page if you will. You want to keep any styling to the CSS to keep things from getting bloated or messy.
That being said, there are some HTML elements you can use that can style your text such as the strong and em elements. Example :
<p>The YMCA is hosting a halloween party next week. <strong>Note: Guests must wear a costume!</strong></p>
As you can see, the text between the <strong> and </strong> tags is bold and therefore implies importance. Now, the em element :
<p>My favorite movie of all time is Martin Scorcese's <em>The Departed</em>.</p>
As you can see from this example, the text between the <em> and </em> tags is emphasized in italics. Because it’s a movie title, I wanted it to look different from the rest of the text. * Remember the <p> and </p> tags that are also listed in the above examples? We talked about them a few weeks ago if you need a refresher!
With that said, go ahead and give these tags ( <strong> and <em> ) a try in your posts and web pages. If you’d like to learn more about them, click here.
GUEST COLUMNIST / DENNISE SAXTON
Images – for bloggers, are one of, if not the most important part of what we do. We deal with images on the web on a daily basis so it’s important to know how they work with HTML.
In HTML, images are referenced by the img tag. Images are technically not part of your HTML code which is why the img tag has to include two attributes: src and alt. The src attribute is how you reference the image – “src”, source – get it? This tells the browser where the image you’re trying to reference is.
The “alt” attribute or alternate text, replaces the image with text in case the image cannot be seen. This is very useful for those who surf the web with a screen reader such as the visually impaired.
Let’s see the img tag in action, shall we? The area you can change is in light grey.
<img src="http://www.picture.jpg" alt="picture of red flowers" />
Let’s imagine that you’re trying to include an image of red flowers on your page, the above code would display that image. You can choose whatever text you want for the alt attribute, I always try to make sure I’m as descriptive yet concise as possible.
* You may notice that the img tag is different because it’s not between <> and </>, it’s one of the rare tags that doesn’t need both tags, just < / > will do.
BONUS TIP Although not mandatory, the size attribute is extremely useful. You can define the width and height of your image within the img tag. Doing so will help the browser load your image faster and when it comes to the web, faster is always good. For example :
<img src="http://www.picture.jpg" alt="picture of red flowers" width="400" height="350" />
The areas you can change are in light grey! To learn more about the img tag, click here.
GUEST COLUMNIST / DENNISE SAXTON
Luckily, most blogging platforms like wordpress and blogger format our blog posts as we type them. Meaning, if I hit enter twice, a paragraph will be made. Similarly, if I hit enter just once, my text will simply jump to the next line. Well guess what, these simple tasks are powered by HTML!! What I’m about to go over is hands down one of the most basic HTML codes you’ll learn, but we’ve gotta cover our bases, right??
Like I said before, most blogging platforms handle the paragraph and line break code FOR you, behind the scenes. However, I can guarantee you that there will be times when you want to manually set these things just in case things aren’t formatting correctly. In wordpress, you would do this within the “HTML” tab in your post editor.
So first up, let’s talk about the line break. Let’s say that I have two sentences that I want to appear on two separate lines. To do this, I would put the following code into play :
This is line one.<br />
And this is line two.
As you can see, I added the simple <br /> tag in dark grey above so that my two sentences will appear on two lines. The next code is a paragraph tag! Let’s say you have two paragraphs in your post and you want them to be separated by space. All you have to do is simply start your paragraph with <p> and end it with </p>. See my example below :
This is my first paragraph. I can use this space to say whatever I want because this is a tutorial.</p>
<p>This is my second paragraph. When you paste this code into your post, the two paragraphs will be separate. Easy, huh!?</p>
Now that’s not to bad, is it?? I promise you, HTML isn’t as scary as it seems. Simple things like this will almost become like a second language! Tune in next week for more on how to code images!
Thanks for all the great feedback on this new column, by the way! I know Dennise and myself are excited to give you all a little insight into HTML and how it works. Our plan is to take turns every other week sharing simple tutorials so that if you follow along – you’ll have a great base knowledge before you know it! Who knows … maybe the coder within will pop out. Cheesy? Yeah. But who cares!