They are common features used in the MS Word application; they are features that add to the interest and implication of your text information, and the best part… these are features with HTML tags that will appear the same on all browsers. And what features am I talking of? Yes, the document styling tags – the bold and italics tags. HTML has well-equipped itself to display chunks of text in Italics or Bold, or even both!
Welcome to Lesson 6 – Styling your HTML Document!
Not exactly designed with the aim to make it surface as the most comprehensive précis of the HTML codes, this lesson however aims to hold your hand and help you get accustomed with the HTML tags necessary for styling your texts. Text styling tags follow the HTML conventions, and come in pairs of opening as well as closing tags. Simply enclose your pieces of texts within the styling tags: <b>…</b> for bold and <i> …</i> for italics, and you’re done with your part of the job. And apart from bold and italics, there’s yet another text-styling ornament – the typewriter style, or the mono-spaced style (by whatever name you may know it).
With a range of styling tags and tags, it is important that you use them in a wise and consistent manner. “Too many cooks spoils the broth”….you must have heard of this; so what does this imply? No matter how good an HTML tool or tag may be, overusing them may affect the readability! Turning to our working HTML document:
- Open your workspace in a text editor program.
- Go through the introductory sentence pick up a word that carries some importance ... a word that you think is important enough to be highlighted and be made bold.
- Put a <b> tag before and a </b> tag after that particular word so as to make it appear bold. For example: <b>Welcome to Lesson 6</b>
- With bold cases inserted, now we may use a combination of bold and italics. So once again pick up the same word and enclose it within the <i>…</i> tags. An example:
<b><i>Welcome to Lesson 6</b></i>
- Finally, the typewriter tag. It’s all about having the <tt>…</tt> tags around the word. For example, if we take up the introductory sentence of this document, enter the following: <tt>HTML Document</tt>.
- Once you have inserted the different style tags, save your document in the text editor, and return to the browser.
- Reload your document and now you should be able to view your changes.
Following is an illustration of the different style tags and their combination:
HTML CODES
<b>Bold cases mark the importance of your text information</b>
<i>An exclusive text styling tool</i>
<tt>Lends your text a dignified look</tt> |
RESULT
Bold cases mark the importance of your text information
An exclusive text styling tool
Lends your text a dignified look |
Want to try something with a combination of the styling tags? Here we go:
HTML CODES
<b><i>As long as the nesting is correct, the order does not matter</i></b>
<i><b>Compare the two tag orders</b></i> |
RESULT
As long as the nesting is correct, the order does not matter
Compare the two tag orders |
When using a combination of the style tags, it is important for you to know that as long as the nesting is done fine, the order of the tags really doesn’t matter. Different styles can be applied to chunks of text within the <h> tags. Refer to the following example:
HTML CODES
<h2><i>Welcome to Lesson 6</i> - <tt>Styling your HTML Document!</tt></h2> |
RESULT
Welcome to Lesson 6– Styling your HTML Document! |
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 27/05/2009
