Chapter one had to spell out some basics and in the course of this tutorials these basics would be expanded upon.
In the last chapter, Html headings and paragraph was one of the things we discussed. And if you recall we did say that html headings are defined with the h1 to h6 tag, h1 being the most important and h6 the least important.
If you took notice of the preview, you would also have observed that the text inside the heading tags had a bold format unlike that in the paragraph tag.
We also clearly stated that you shouldn't use the heading tags to bold your text. So how can you bold your text, have them formated in such a way that suits your document. This brings us to html formatting.
You can think of Html formatting simply as the layout of an Html document. Before we start, there's a concept I would like to clear of obscurity.
NESTED HTML ELEMENTS
Consider you want to highlight the word code in a paragraph I wrote some code to reformat text document.
The mark element <mark> can help you achieve that. But the real question is; where do you place the mark element?
If you think, it should be around the text code, then you are not far from the truth.
You'll have something like this;
I wrote some code to reformat text document
Html elements can be nested.
Nesting is the enclosure of one html element inside another. In fact all html document consist of nested html elements.
Let's bring you back to the example we used in the introductory chapter.
<!DOCTYPE html>
<html>
<head>
<title>Simple Html Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
From this you can see that the h1 and p tags are nested inside the body element while the head and the body element are nested inside the html element. Same applies for all other elements, you can have other elements inside of them.
Do not forget to close them, its one of the common mistakes made in the process. What you can always do is create the opening and closing tag before adding its contents, this way you'll be error free.
Html Bold Text Formatting
The html <b> element make the font of a text have thicker strokes than the ordinary form of the typeface.
Off course I am assuming you've worked with a text formatting tool before and you probably know how a text is made bold.
So in the last example, if I was going to make the text "code" bold instead then I'd use the <b> element.
The <strong> tag also does come handy, it works just the same way as the <b> element but adds importance to the text.
So if you want your browser to not just bold a text but indicate that the text is important you use the <strong> element.
Html Italics Formatting
The html <i> element italizes a text, so once you add contents inside of them, they are being displayed in italics format.
And just like the <strong> element, there also is an emphasis element <em>.
All it does is to add importance to an italized text.
To have an idea of how this works checkout the example below.
<!DOCTYPE html>
<html>
<head>
<title>Bold, Strong, Italics, Emphasis</title>
</head>
<body>
<h3>Example 1: Text Bold</h3>
<b>You sometimes find the hooligan element at football matches.</b>
<h3>Example 2: Text Strong</h3>
<strong>You sometimes find the hooligan element at football matches.</strong>
<h3>Example 3: Text Italics</h3>
<i>You sometimes find the hooligan element at football matches.</i>
<h3>Example 4: Text Emphasis</h3>
<em>You sometimes find the hooligan element at football matches.</em>
</body>
</html>
Html Superscript and Subscript
Superscript and subscript comes very handy especially when handling certain documents.
Consider this.
The subscript element <sub> is used to write a text below, and to one side of another character.
So say you want to write "water saturation" as Sw. You'd have your w enclosed in the <sub> element just like this.
S<sub>w</sub>
The superscript element <sup> works in just a similar way, in its case, it is used to write text above and to one side of another character.
Before we have the code for the preview of the logarithm properties above, try to figure out how it is done, this way you'll learn faster.
So, if you tried that, doublecheck what you have, with this;
<!DOCTYPE html>
<html>
<head>
<title>Html Super/Sub Script</title>
</head>
<body>
<h2>PROPERTIES OF LOGARITHMS</h2>
<p>The following are the more important properties of logarithms:</p>
<p>1.log<sub>b</sub>MN = log<sub>b</sub>M + log<sub>b</sub>N</p>
<p>2.log<sub>b</sub> M/N = log<sub>b</sub>M - log<sub>b</sub>N</p>
<p>3.log<sub>b</sub>M<sup>p</sup> = plog<sub>b</sub>M</p>
</body>
</html>
If you were able to figure that out, then we are making progress.
If you weren't, I'd advice you to give it some more time, you soon flow along.
Html Insert Element
The html insert element allows you place text as inserted text.
These inserted text are marked with an underline rule. So say we want to insert the verb "to notice" in this sentence.
The English verb "_________" is a transitive verb, because we say things like "She noticed a problem".
Enclosing the verb with an <ins> element would underline the the verb to show that it is inserted text just like this;
The English verb <ins>to notice
</ins> is a transitive verb,
because we say things like
"She noticed a problem".
The English verb to notice is a transitive verb, because we say things like "She noticed a problem".
We're still on html formatting and the very next thing I would want us to consider is the break elements <br>.
Html Break Element
The html break elements <br> just like the <img> element is an empty element.
And we did say that an empty element has no contents, and are not closed with the end tag but could be closed by placing a forward slash just before the greater than angle bracket of the opening tag.
Just like this;
<br/>
So back to the <br> element, what are they used for?
They are used to create a line break, by line breaks we mean starting off a new line without having to create a new paragraph.
So let's see how this works.
<!DOCTYPE html>
<html>
<head>
<title>Html Break Element</title>
</head>
<body>
<h3>—Master Yuan-Ma, The Book of Programming <mark>Example 1</mark></h3>
<p>“Below the surface of the machine, the program moves.
Without effort, it expands and contracts.
In great harmony, electrons scatter
and regroup.
The forms on the monitor are but ripples on the water.
The essence stays invisibly below.”</p>
<h3>—Master Yuan-Ma, The Book of Programming <mark>Example 2</mark></h3>
<p>“Below the surface of the machine, the program moves. <br>
Without effort, it expands and contracts.
<br>In great harmony, electrons scatter
and regroup.<br>
The forms on the monitor are but ripples on the water.<br>
The essence stays invisibly below.”</p> </body>
</html>
So I pulled up that quote from a popular writer to illustrate this concept.
You can see from the example 2 that we didn't have to create a new paragraph for each new line, we simply used a break element to solve that problem.
This brings us to another interesting concept.
Html Preformatted Element
When a text document has been physically arranged to be in a state ready for further use, we can attribute that to formatting.
The preformatted element <pre> allows your document display just as you have arranged it.
So it preserves line breaks and spacing. It also assigns a custom font type.
Let's paint a clearer picture. So in the last example instead of using line breaks, we could use the <pre> element and place our text just as we would have loved to position it.
<!DOCTYPE html>
<html>
<head>
<title>Html Break Element</title>
</head>
<body>
<h3>—Master Yuan-Ma, The Book of Programming <mark>Example 2</mark></h3>
<p>“Below the surface of the machine, the program moves. <br>
Without effort, it expands and contracts. <br>
In great harmony, electrons scatter and regroup.<br>
The forms on the monitor are but ripples on the water.<br>
The essence stays invisibly below.”</p>
<h3>—Master Yuan-Ma, The Book of Programming <mark>Example 3</mark></h3>
<pre>“Below the surface of the machine, the program moves.
Without effort, it expands and contracts.
In great harmony, electrons scatter and regroup.
The forms on the monitor are but ripples on the water.
The essence stays invisibly below.” </pre>
</body>
</html>
Another instance where the preformatted element <pre> would be useful is in the poem case.
Consider this;
<!DOCTYPE html>
<html>
<head>
<title>Html Preformatted Element</title>
</head>
<body>
<pre id="code" >
<h1>The Road Not Taken</h1>
<cite>Robert Frost (1874-1963)</cite>
<pre>Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.
</pre>
</body>
</html>
CONCLUSION
HTML Formatting is a process of formatting text for better appearance and experience. HTML affords you the ability to format a text without having to use CSS. There are many formatting tags in HTML. These tags may be used to make a text bold, italicized, or underlined, etc. Below is a table listing HTML formatting element, its syntax and description.
HTML FORMATTING
| HTML FORMATTING ELEMENTS | SYNTAX | DESCRIPTION |
|---|---|---|
| HTML Bold Element | <b>text goes here…</b> | The html bold element make the font of a text have thicker strokes than the ordinary form of the typeface. |
| HTML Strong Element | <strong>text goes here…</strong> | The strong element works just the same way as the bold element but in its case adds importance to the text. |
| HTML Italics Element | <i>text goes here…</i> | The html italics element italizes a text, so once you add contents inside of them, they are being displayed in italics format. |
| HTML Emphasis Element | <em>text goes here…</em> | The Emphasis element works just the same way as the Italics element but in its case adds importance to the text. |
| HTML Superscript Element | <sup>text goes here…</sup> | The superscript element is used to write text above and to one side of another character. |
| HTML Insert Element | <ins>text goes here…</ins> | The html insert element allows you place text as inserted text. |
| HTML Break Element | </br> | Break Element are used to create a line break, by line breaks we mean starting off a new line without having to create a new element. |
| HTML Preformatted Element | <pre>text goes here...</pre> | The preformatted element allows your document display just as you have arranged it. So it preserves line breaks and spacing. It also assigns a custom font type. |
We'll continue in the next chapter. For now, if you have any questions, thoughts or suggestions, leave them in the comment section below and we'll gladly reply. Don't forget to share. We'll meet much stronger in the next chapter.
No comments:
Post a Comment