Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial post, am going to be continuing from where i stoped in the previous tutorial. In the last tutorial post i talked about HTML basic tags and today am gonna round up with that topic.
Horizontal Lines
Horizontal Lines are used to break-up sections of a document. The <hr> tag creates a nice straight line from the current position in the document to the right margin and breaks the line accordingly. In the example below, we gave a line between two paragraphs
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal rule example</title>
</head>
<body>
<p>This is the first paragraph</p>
<hr />
<p>This is the second paragraph</p>
</body>
</html>
<html>
<head>
<title>Horizontal rule example</title>
</head>
<body>
<p>This is the first paragraph</p>
<hr />
<p>This is the second paragraph</p>
</body>
</html>
Feel free to try the above code out to see the results for yourselves.
Just like the <br /> tag, the <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <hr /> tag has a space that goes between the characters hr and forward slash. If you omit this space, older web browsers will encounter troubles rendering the horizontal line, while if you miss the forward slash then it is not valid in XHTML.
RECOMMENDED POST: Html Basic Tags
Preserve Formatting
In some moments one would want the text to follow the exact format of how it was written in Html document. In such occasions, you can make use of the preformatted tag <pre>.
Any text that goes in between the opening <pre> and closing </pre> tag will preserve the formatting of the source document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve formatting</title>
</head>
<body>
<pre>
function textfunction(strtext) {
alert(strtext)
}
</pre>
</body>
</html>
<html>
<head>
<title>Preserve formatting</title>
</head>
<body>
<pre>
function textfunction(strtext) {
alert(strtext)
}
</pre>
</body>
</html>
Feel free to try the above code out to see results for yourselves.
Nonbreaking Spaces
Assuming you want to use the phrase "12 Angry Men.", here you would not want the web browser to split the "12, Angry" and "Men" between two lines.
RECOMMENDED POST: Html Tags
In moments where you don't want the client browser to break texts, you should use the nonbreaking space entity instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, then try making use of something similar to the following code:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
Feel free to try the above code out to see results for yourselves. If you are having issues learning then feel free to ask your questions.
Thats it for this tutorial. Thanks for reading and bye for now.