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: