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:
Which formats like this:
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:
which formats as:
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:
which formats as:
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:
See how that works? Kinda like the <b> tag, really, we just added a name=value inside the tag. This formats as:
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:
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:
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? 🙂