Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


Quick blog HTML primer?

Can you give me the rudimentary HTML tags that I need to be able to create bold, italics, change font colors and include both hypertext references and images to my blog entries? Thanks!


Dave's Answer:

There are two ways to produce the results you seek, the simple traditional approach and the fancy Cascading Style Sheet (CSS) way. Let me start by showing you the basics, even though I know that some purists will be cringing right now!

Bold is done with <b> and </b> as in this example:

Part of this sentence is <b>in bold</b> and part is not.

Which formats like this:

Part of this sentence is in bold and part is not.

Italics is done exactly the same way, but with an "i" rather than a "b", and if you use "u" you'll get underlining (which can be confusing for Web visitors, be careful).

The best way to change font color really is CSS, so let me just show you that one. If you want to use a common color, just specify its name:

A wee bit of this is <span style="color:blue">blue</span> for fun.

which formats as:

A wee bit of this is blue for fun.

Not too hard, is it? You can specify about 20 colors safely, then you might want to dabble with hexidecimal notation, as demonstrated here: common hexidecimal colors.

To use that notation, you'd simply replace the color name with the color value, prefaced by a "#" to indicate it's that particular notation. Like this:

This segment is <span style="color:#993300">colored differently!</span>

which formats as:

This segment is colored differently!


Linking to Another Web Site

Hypertext references are a bit more complex, but if you remember that there are two parts, the URL of the page or resource to which you want to direct people and the word or words displayed on your page that are "linked" to that destination, it's not too hard to figure out.

Let's create a simple link to this site. The destination URL will be http://www.askdavetaylor.com/ and the link text will be Ask Dave Taylor Tech Support. They both drop into what's called an "a tag" or "anchor tag" thusly:

Check out <a href="http://www.askdavetaylor.com/">Ask Dave Taylor Tech Support</a> for all your answers.

See how that works? Kinda like the <b> tag, really, we just added a name=value inside the tag. This formats as:

Check out Ask Dave Taylor Tech Support for all your answers.

Note that you'll want to ensure that you include the "http://" prefix if you're pointing to a resource on another site, or even within your own site to ensure that you have a "fully qualified URL" and it works regardless of context. Just a good practice.

Including Images

Adding images is done with the img tag and its critical name=value attribute of src="url", but you need to know the URL of the image. Often you can figure that out by right-clicking on an image that's already online, if you're going to travel that route (the pop-up menu includes "Copy Image Address" or similar), or if you're using an image hosting service like Flickr, it'll show you the URL you should use (see Host Blog Images on Flickr).

Once you have that image URL, it's just a simple tag:

<img src="url" />

Want to include my big red "Ask Dave" button? The URL is http://www.askdavetaylor.com/Graphics/help-button.jpg and the image inclusion would then look like:

<img src="http://www.askdavetaylor.com/Graphics/help-button.jpg" />

Put that into work and it'd produce:

Graphics as Web Links

One more trick. Want to have a graphic that works as a button? You can do that by replacing the link text in an anchor tag with the "img src" HTML instead. Let's say that when you click on the "Ask Dave" button you want it to go to the actual ask a question page. To do that we need two pieces of information: the URL of the graphic, and the URL of the destination page. Here they are:

graphic: http://www.askdavetaylor.com/Graphics/help-button.jpg
destination: http://www.askdavetaylor.com/ask.html

That's all we need. Here's the first rough and ready solution:

<a href="http://www.askdavetaylor.com/ask.html">
<img src="http://www.askdavetaylor.com/Graphics/help-button.jpg" /></a>

See how that all fits together? Here's the result:

Not quite what we want because some browsers will show a small blue line around the graphic to indicate it's clickable. That can be removed with border="0" in the "img" tag, and, as with all images, you should also be including some alternate text for people who don't load graphics or have visual impairments. Add those two and here's our nice, elegant clickable graphic solution:

<a href="http://www.askdavetaylor.com/ask.html">
<img src="http://www.askdavetaylor.com/Graphics/help-button.jpg"
border="0" alt="Ask Dave! button" /></a>

and here's the final result:

Ask Dave! button

That's the quick rudiments. Hope this is helpful and gets you moving in the right direction. If you want to learn more about HTML and CSS, can I recommend my own book Creating Cool Web Sites with HTML, XHTML and CSS? :-)


More Useful Blogs and Blogging Articles:
✔   Get my shopping cart plugin to work with WordPress?
We've put in a shopping cart for a client that's not working, and we need some help! The cart is currently using the...
✔   Embed an audio player on a blog or web page?
I have some mp3 audio files I've recorded and would like to have people who visit my site be able to listen to...
✔   Can I write a guest review for AskDaveTaylor.com?
Hi Dave. I'm a big fan of your site and love that you're doing so many reviews now. I've noticed, however, that there...
✔   Change author on WordPress blog post?
I have two accounts set up for my WordPress blog and I'd like to be able to have all my posts from a...
✔   How do I restructure my Wordpress blog without losing SEO?
I have a wordpress blog that was using categories in the url structure like this: /category_name/post_name/ Then I had read somewhere that if...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  





Categorized: Blogs and Blogging , HTML, JavaScript and Web Site Programming   (Article 6843, Written by )
Tagged: blogging, css, font styles, html, simple html
Previous: How can I play DRM-protected music on my Sony PSP?
Next: What digital camera should I buy?




Reader Comments To Date: 3

Miha said, on September 11, 2006 6:33 AM:

It's better to use <strong> instead of <b> for bold text and also to use <em> instead of <i> for italics.

Use the <strong> and <em> tags when the content of your page requires that certain words or phrases be stressed.

john said, on September 11, 2006 8:10 AM:

I just learn to design my own site theme,that is useful for me,thanks:)

John Krystynak said, on September 11, 2006 8:43 AM:

Miha, I disagree with you quite strongly. The problem is that there's a huge difference between bold and italics in terms of readability and in terms of *how* something is being emphasized, and if you use the "strong" or "em" tags, you really have no idea which is which.

I understand that the original intent of HTML was to tag by usage, rather than specify desired output format, but that was a misbegotten idea and it failed in the real world. One great example is "strong" versus "b", etc.

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.