If we want people to read what we have written, then structuring our text well is even more important on the Web than when writing for print. People have trouble reading wide, long, paragraphs of text on Web sites unless they are broken up well.
This section will teach us a basic text formatting elements like heading elements and paragraph elements.
White-spaced Flow:
Before we start to mark up our text, it is best to understand what HTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text.
We might think that if we put several consecutive spaces between two words, the spaces would appear between those words onscreen, but this is not the case; by default, only one space will be displayed. This is known as white space collapsing. So we need to use special HTML tags to create multiple spaces.
Similarly, if we start a new line in our source document, or we have consecutive empty lines, these will be ignored and simply treated as one space. So we need to use special HTML tags to create more number of empty lines.
Create Headings - The <hn> Elements:
Any documents starts with a heading. We use different sizes for our headings. HTML also have six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and after that heading.
Example:
<h1>This is heading number 1</h1><h2>This is heading number 2</h2><h3>This is heading number 3</h3><h4>This is heading number 4</h4><h5>This is heading number 5</h5><h6>This is heading number 6</h6>
Create Paragraph - The <p> Element:
The <p> element offers a way to structure our text. Each paragraph of text should go in between an opening <p> and closing </p> tag as shown below in the example:
<p>Our first paragraph.</p><p>Our second paragraph.</p>
<p>Our third paragraph.</p>
We can use align attribute to align our paragraphs.
<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works when you have multiple lines in your paragraph and you want to justfy all the lines so that they can look more nice.</p>
No comments:
Post a Comment