HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML text formatting (part 3)

This is part 3 of our three tutorials on text formatting.

Read the Text formatting part 1 or Text formatting part 2 tutorials.

This tutorial focuses on:

Paragraphs

When you are typing a document in a word processing program (such as an essay or a novel), the document should have a certain format. Specifically, a certain formality commonly known as a paragraph. The same concept applies to content on the web. If you have a bunch of text on a webpage, it should be formatted in paragraphs.

The tag used to create a paragraph is <p>. Using the <p> tag will place a line above and below the paragraph's text automatically.

Example:
<p> So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. Whatever your reason(s) for getting into computer programming, the road ahead is an interesting one. Computer programming is a challenging and rewarding discipline. </p> <p> In the past, the .htm extension was used for HTML files because of older operating systems which limited file extensions to three letters. Noawadays however, the .html extension is mostly used and using this extension is better convention. </p>
Output:
So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. Whatever your reason(s) for getting into computer programming, the road ahead is an interesting one. Computer programming is a challenging and rewarding discipline. In the past, the .htm extension was used for HTML files because of older operating systems which limited file extensions to three letters. Noawadays however, the .html extension is mostly used and using this extension is better convention.

You can align paragraphs using the align attribute. Set this attribute with the value "center" to center a paragraph or "right" to align a paragraph to the right.

Example:
<p align="center"> So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming. <p align="right"> So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming.
Output:
So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming.
So you want to get into computer programming? Perhaps you intend on editing some web pages, creating a document editing application, creating a multi-functional interactive game, or one of the many other things that can be done with computer programming.

Horizontal lines

Horizontal lines can be a useful tool to outline something important, to make a separation between content in a webpage, or to add style. Horizontal lines can be created with the <hr> tag. The <hr> tag takes the attribute width which specifies the width of the horizontal line.

NOTE: The <hr> tag has no end tag.

Example:
<hr width="95%" />
Output:

NOTE: Attributes of the <hr> tag are deprecated.

Line breaks

To perform a line break in HTML, the tag to use is <br>. This tag will break a line of text or other data and continue it on the next line.

NOTE: The <br> tag has no end tag.

Example:
Split text<br /> in half. <p> Split this <br /> paragraph into <br /> three different lines. <p>
Output:
Split text in half. Split this paragraph into three different lines.

Presenting text exactly as it is typed

Without using the appropriate tags, HTML will automatically remove various spaces and line breaks for you even if you did want them to be on a page. There is a tag that allows for preformatted text which allows you to present text exactly the way you want it without HTML removing spaces and line breaks. This tag is the <pre> tag.

Example:
<pre> The text in this paragraph is preformatted. You can have various spaces and line breaks without HTML automatically removing them. </pre>
Output:
The text in this paragraph is preformatted. You can have various spaces and line breaks without HTML automatically removing them.

Changing text direction

Text direction is changed with the <bdo> tag. The dir attribute in this tag specifies the direction the text will go. It can be set to "rtl" (right to left) or "ltr" (left to right).

You can use the <bdo> tag if you are working with a language that goes from right to left such as Arabic or Hebrew.

Example:
<bdo dir="ltr">Some text in English</bdo> <bdo dir="rtl">Some text in Arabic</bdo> <bdo dir="rtl">Some text in Hebrew</bdo>
Output:
Some text in English Some text in Arabic Some text in Hebrew

Entities

What if you want to display special characters on a webpage like the copyright symbol (©) or the trademark symbol ()? You can't display such characters as you would display simple text. To display special characters, you would need to use the correct character entity for it.

Example:
This page is copyright &copy; <br /> This page is also trademarked &trade;
Output:
This page is copyright © This page is also trademarked ™

Common character entities and what they will display:

For more information on character entities, read our HTML entities page.

For a full list of character entities, read our HTML entities reference page.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information