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!
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.
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:
That's all we need. Here's the first rough and ready solution:
<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:
border="0" alt="Ask Dave! button" /></a>
and here's the final result:
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!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+