Some more text formatting HTML tags

First of all, you should by now know that although HTML might stand for HyperText Markup Language, it is not in fact a language as such, nothing so difficult. HTML is simply a collection of text tags to facilitate the layout and appearance of text, images and other objects in a web page, that's basically it. nice and simple.

Since a web page is just a text file (renamed from .txt to .htm or .html) containing a collection of these tags, along with the actual content that is displayed on the page. All a web browser does is ask a server for the web page you want, and read the text. The tags in the text tell the browser how to display it.
These tags take the form of a formatting command surrounded by 'less than' < and 'greater than' > characters.
Most tags come in pairs, one tag to indicate the start of the formatting, and another to indicate the end of that formatting. for example: Bold text goes here. The closing tag is essentially the same as the opening tag, with the exception that the closing tag has a / in it to indicate that it is a closing tag and that the formatting, (in this case 'bold') should end at this point.

Note: Not all tags come in pairs, some formatting commands don't have to encapsulate text. For example: (line break) and <hr /> (a horizontal line). In these cases, the closing tag should be built in by putting the '/' after the formatting text.

Since Don has been nice enough to explain basic HTML page layout and some formatting tags in the previous tutorials, (namely   for line breaks, and paragraph)
I have decided that I should cover some of the other basic text formatting HTML tags.

Bold
For those of you familiar with word processors like Microsoft Word ^TMor WordPerfect ^TM Bold is nothing new. In fact it would be fair to say that all of the tags I am going to show you in this tutorial would be familiar to anyone that has used a word processor.
OK, put simply you can display any text in bold by simply surrounding it in the bold tags, namely: Bold text goes here. Normally, the tags themselves don't show up in the displayed page.. I have done this so you can see the tags as well as the result of using them

Italics
Italic text is created simply by surrounding the text in question in Italic tags, namely: Italics are great. 

Underline
As with bold and italics, underline is simply a case of some text surrounded by formatting tags, in this case, the tags are underline tags, and they work like this:
Underlined text goes here.

The Font tag.
Now that we have covered most of the simple tags, lets get a little more interesting. The font tag also works like the others here in that it surrounds some text and the formatting only affects the text it surrounds. the difference is that the font tag has to be told what font characteristics to apply to the text it surrounds. To demonstrate:
Green Bold Garamond text. 
would display this: Green Bold Garamond text. (assuming you have the Garamond font installed on your computer.)
This demonstrates two important points. One is how the font tags must be told what type'face' to use, what color, and what size. The second point is that HTML tags can be nested, in this case, bold tags have been put inside the font tags to make the affected text bold. Although it would work otherwise, its a very good idea to match the tags carefully when nesting, by that I mean that if you start a bold tag inside a font tag (for example) you should close the bold tag before closing the font tag.

The Font tag is actually depreciated in moderm HTML and XHTML, instead you should use CSS to achieve the same effect (with less effort and better results).
While we are on the subject, the bold tag (also "em" and "strong" tags) is also depreciated to a degree and should be replaced by CSS.
For more info on depreciated tags and their replacements see here. CSS is a topic for another tutorial, but in short, CSS or Cascading Style Sheets, is like an overall plan of your pages layout that is totally seperate from the the actual pages content. Thats very handy as it means you can use the same stylesheet on a dozen pages, and be able to change aspects of all your pages by just editing one stylesheet.
That probably sounds alittle complicated to you at this time, but rest assured, if you have understood everything we have covered thus far, and you can follow the table tutes we have, then you will have no problem understanding CSS. Bascically you give something a name (or a class), and then in your stylesheet, you define how you want anything with that name or class to appear. It might be the color, the background, text format or even cooler, it might be the actual position on the page. As an example of one of the cooler aspects of CSS, you can totally simplify the way you do javascript image rollovers, and make your pages smaller and faster in the bargain. Or better yet, imagine having a bunch of stylesheets, and he able to "template" your entire site, so you can totally change its look and function as simply as clicking a link. I plan to be covering rollovers and CSS templates in allot more detail shortly.

So if you've been reading your way through these HTML tutorials, you now know the basic layout of a web page, you know some text layout tags, and some text formatting tags. Now you should read up on the table tutorials we have to get an idea of how to accurately place the text/images etc on your pages.
Tables are a fantastic and very useful part of HTML. In modern HTML, they have been partially replaced by Divs and postional CSS for overall page layout, but for the ordered display of data tables are totally without peer.

Back to the Tutorial Index

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki needs fish food for his little friends.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

Time in Don's part of the world is: Fri, November 22, 2024 at 01:39 AM
Time in Franki's part of the world is: Friday, November 22, 2024 at 2:39 PM
Don't worry neither one sleeps very long!