 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML tutorial. Today we will study lesson 3.
In previous lesson, we studied structure of an HTML file. We also saw what are tags and elements.
Today, we are going to study paragraph tag and break tag.
Paragraph tag
Let us begin with paragraph tag. Let us do a small experiment. You need not write anything here, just observe and understand. We will consider a text file. In this file there are two paragraphs. |
| Figure 3-1 Test file for lesson 3 |
Save this file. Save same file as .html file. In windows explorer double click on HTML file. Output is displayed in default web browser.
 |
| Figure 3-2 Output of test file for lesson 3, where is our paragraph? |
Oh, it is displaying different. All text is displayed in one line only. Paragraphs are not there.
Friends, here comes the role of paragraph tag.
Let us begin. Create a new text file. In this file, we will write our HTML script. You also open a new Notepad file and type as I do.
Let us open Lesson-02 text file. Copy following lines.
<!DOCTYPE html>
<html>
<head>
<title>
My HTML Program
</title>
<body>
We know all these tags. We are already familiar with these tags.
Now we want to start first paragraph. Type a <p> tag below <body> tag. Type first paragraph. There are few lines in it. Close paragraph. </p>
Now begin second paragraph <p>, enter second paragraph. Close paragraph </p>.
 |
| Figure 3-3 HTML paragraph tag |
Save this file as "Lesson-03". Again save this file as "Lesson-03.html". Click on the above figure for PDF file of source code.
Return to windows explorer. Double click on HTML document.
 |
| Figure 3-4 Output of code with paragraph tags |
Now output is displayed properly. It is showing two paragraphs as expected.
So, what paragraph tag does? It displays paragraphs appropriately in a web page.
Break tag
Now let us study break tag. Return to our script. There is a word "count". Press enter there and type <br />. This is break tag. Save file as "Lesson-03" and then save this as HTML file. From windows explorer double click on HTML document. Look at output. Line is broken after word "count". Rest of the text is started from next line.This is what break tag does. It breaks current line and begins rest of the text in next line.
Again return to our program. Remove the <br /> that we had given. Now go to the end of first paragraph. Below </p> enter a break tag <br />. See figure 3-5. Save file in text and html formats.
Double click on html file. Output is displayed in web browser. Observe that a blank line is inserted in two paragraphs.
Return to our program. Below <br /> tag insert two more <br /> tags. Save this file and see output. Two additional blank lines are inserted.
 |
| Figure 3-5 Break tags |
 |
| Figure 3-8 Output with break tags |
So, break tag is used to insert blank lines in a web page.
Now one important point: <br /> tag is a self ending tag. That means it does not have closing tag. This is a good example of an empty element.
Important Points:
1. <p> paragraph tag is used to display a paragraph in a web page.2. Break tag breaks current line and begins rest of text on next line.
3. Break tag is used to insert blank lines in a web page.
4. Break tag is a self ending tag. It does not have end tag. It is a good example of empty element.
Lesson-02 Lesson-04
