|
|
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 SiteHypertext 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 ImagesAdding 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 LinksOne 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 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: ![]() 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!
Categorized:
Blogs and Blogging
,
HTML, JavaScript and Web Site Programming
(Article 6843,
Written by Dave Taylor)
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: 3john 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.
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
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 Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming 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 Pinterest Help 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+ |
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.