HTML - Adding text : 1

In previous tutorial we saw the basic structure of HTML. In this tutorial we shall focus on creating paragraphs. Further we shall learn how to align and format text and paragraphs. Let me list out what exactly we are going to learn today:
  • Creating a paragraph.
  • Aligning the paragraph.
  • Inserting line break.
  • Inserting blank space.
  • Inserting preformatted text.
  • Inserting heading.
  • Inserting block quotes.
  • Insert a comment.
  • Creating a list
Creating a new paragraph:
Paragraph tags are used to start new paragraphs in an HTML document. In a word processing program like microsoft word we press Enter to separate blocks of text. But web browsers do not read these line breaks. 

So we use <P> tag in HTML when we want to start a new paragraph.

Structure:
<P> my paragraph </P>

Aligning the paragraph.
Alignment of the paragraphs can be changed using the ALIGN attribute. You can choose to align a paragraph to the left, right, or center, or justify the text so it is aligned on both the left and the
right. For any browser,paragraphs are left-aligned by default.

Align attribute can also be used with other tags like heading tag. 

Structure:
<P ALIGN ="right">This is a paragraph</P>

Inserting line break.
As you know, browser ignores use of "enter". Even if write in new line in html section, browser displays it in one line. Here we need a line break tag. <BR> is used to control where your text breaks.
You can also use the <BR> tag to add blank lines between paragraphs. This is useful if you want to add extra space above or below a block of text or a heading.

Structure:
<P> This is line 1.</P> <BR> <P>This is line 2.</P>

See the video for details:


Inserting a Blank Space
Just like "enter" keystroke being ignored by browser, browser ignores multiple space. For example:
<P> This is a line.             This is another line.</P> would be displayed in browser as : This is a line. This is another line.

So to add more space we need to type "&nbsp". Code actually stands for "non breaking space". Add this code multiple times to add multiple spaces.

See video below:
Further to reinforce everything; I have created a video that covers all that we did till now!

No comments:

Post a Comment