Formatting Html Text
In this lesson, we will be formatting text. I do recommend that whenever possible; you use CSS to format text, but there may be times where a quick set of bold or italic tags come in handy. Let’s start off our examples with bold and italic. See the images below.
index.html EXAMPLE 1: FORMATTING HTML TEXT: BOLD AND ITALIC
DISPLAYED PAGE EXAMPLE 1
We have five P ELEMENTS in the index.html document. Each one formatting the text in a different way. As you can see, there is virtually no difference between <b> and <strong>, or <i> and <em>. They display in exactly the same way. The difference comes in the level of importance. It is more for the coder’s eyes than anything else. If you use <strong> or <em> tags, you are specifying to yourself or other people working on the same code as you that the text has extra importance. NOTE: em means emphasis. In the next example, we will use superscript and subscript. See the images below.
index.html EXAMPLE 2: FORMATTING HTML TEXT: SUPERSCRIPT AND SUBSCRIPT
DISPLAYED PAGE EXAMPLE 2
We add two more p elements to the index.html document. The first of the two has the TAGS <sup></sup> surrounding the words “superscript text”. These tags define superscript text. Superscript text is used for things like mathematical equations. For example, E=mc2. The text will display a half of a line above the normal line (where it would display normally). Often times it will display in a smaller font. The second new p element contains <sub></sub> tags, which define subscript text. This is basically the opposite of superscript and will display a half of a line below the normal line; often times in a smaller font. Subscript is used for things like formulas. For example, BeCl2. We’ll clear out the Html document for the next two examples. Everything will be included in the end of lesson source code. See the images below.
index.html EXAMPLE 3: FORMATTING TEXT: SMALL AND MARK
DISPLAYED PAGE EXAMPLE 3
The body ELEMENT was cleared out and an h2 and h1 HEADING were added. The h2 has <mark></mark> tags around the word Html. These mark tags define highlighted or marked text. You can surround just one or multiple words that you want to be highlighted with mark tags. The h1 heading has <small></small> tags around the word “smaller”. Small tags define smaller text and it’s clear to see in the Displayed Page Example 3 image, that the word “smaller” is smaller than the other heading text. The final example will use the insert and delete tags for formatting Html text. See the images below.
index.html EXAMPLE 4: FORMATTING TEXT: INSERT AND DELETE
DISPLAYED PAGE EXAMPLE 4
We have three more paragraph elements in the final example. The first two paragraphs use the <ins> and <del> tags. <ins> defines text that is inserted (added). It underlines the text. <del> defines text that is deleted (removed), and adds a strikethrough effect on the text. The third and final paragraph shows an example of a sentence using both the delete and insert elements.
That finishes up this lesson on formatting Html text. Although this tutorial may seem very basic, these elements will be useful down the road and are good to know beforehand. Thanks for reading, we’ll see you next lesson.
index.html Source Code
<title>Formatting Html Text</title>
<p>This is normal text</p>
<p><b>This is bold text</b></p>
<p><strong>This is strong text</strong></p>
<p><i>This is italic text</i></p>
<p><em>This text is emphasized</em></p>
<p>An example of <sup>superscript text</sup> in a paragraph.</p>
<p>An example of <sub>subscript text</sub> in a paragraph.</p>
<h2>Formatting <mark>Html</mark> Text</h2>
<h1>Make text <small>smaller</small></h1>
<p>An example of <ins>inserted text</ins>.</p>
<p>An example of <del>deleted text</del>.</p>
<p>I am learning <del>CSS</del> <ins>Html</ins> right now.
posted by Clear Coded Programming