Introduction
This Chapter demonstrates about the XHTML Paragaraphs which are used to prevent all text comes in one continuous line following are the concepts are covered in this chapter.
- Paragraphs
- Styling the Paragraph
- Adjusting Margins
Description
Paragraph is defined as the preventing the continuous line of Text in which user need to insert the paragraph tags at the point of beginning tags <p>and ending tags </p> . These paragraph tags are inserted in body tags which are shown in below image.
If user run the above program user can get the paragraph without any line breaks. If user wants to get the text in line by line then user can use the paragraph tags for each and lines is as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<p>
The paragraph contains
several lines.
</p>
<p>
but the browser ignored these lines
and get displayed
in single line.
</p>
<p>
The paragraph contain
many blank spaces.
</p>
<p>
browser will ignored these
spaces and get displayed in
single line.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in thisparagraph will change.
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Otherwise user can also get the single lined text by using the <br/> tags the code as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<p>
The paragraph contains
several lines. <br/>
but the browser ignored these lines
and get displayed
in single line.
</p>
<p style="color: #00fdff;">
The paragraph contain
many blank spaces.<br/>
browser will ignored these
spaces and get displayed in
single line.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in thisparagraph will change.
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
If user trying to create large size of paragraph it would be most terrible reading material forever in such cases user can alter the paragraph to change some characteristics as to font size, justification, indentation, italics/bold/underlined text, margins, etc.
To perform style changes for the text, user should include some properties and values inside each <p> tag. As a general syntax as shown below.
[html]
<p style="property: value;">some text here</p>
[/html]
The code below demonstrates to applying colors to the text as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<p>
The paragraph contains
several lines. <br/>
but the browser ignored these lines
and get displayed
in single line.
</p>
<p style="color: #00fdff;">
The paragraph contain
many blank spaces.<br/>
browser will ignored these
spaces and get displayed in
single line.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in thisparagraph will change.
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
For XHTML coding, user can utilize the different styles and properties to change some paragraphs into bold, italics, or underlined paragraphs inside the
The code below demonstrates to applying the different styles to the text as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<p style="font-weight: bold;">SPLessons</p>
<p style="font-style: italic;">HTML</p>
<p style="text-decoration: underline;">XHTML</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
tags. Following are the some styles to display the text in a paragraphs.
- style="font-style: italic;" ment for Italics Text.
- style="font-weight: intense;" ment for Bold Text
- style="text-improvement: underline;" ment for Underlined content
Description
User can utilize the same relative measuring strategy to modify the margins around the paragraphs. Margins are characterized as the whitespaces between pargraph blocks. The edge space between a chapter name and the body text should be larger than the edge of space between 2 sections present in the text body. The code below demonstrates the adjusting the some margins to the XHTML Document as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<p style="margin-top: 1.0em; margin-bottom:1.5em;">Chapter 1<br />XHTML Tutorial</p>
<p style="margin-bottom: 1.0em;"> XHTML is the reformulation of the HTML 4.01 in XML.</p>
<p style="margin-bottom: 1.0em;">XHTML is known as the Extensible Hyper Text Markup Language.</p>
<p style="margin-bottom: 1.0em;">HTML is the Standard Generalized Markup Language (SGML) .</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The property margin-top: 1.0em; which add a space of 1.0em above the 1st line of a paragraph.
margin-bottom: 1.5em; which add some space of 1.5em below the last line of the paragraph.
User can combine these two properties in one paragraph then if you get 1.0em above and 1.5em below on your margins.
Key Points
- User can give the required changes to the text.
- User can apply the different by giving the value and property.
- Margins are useful for the good looking purposes.