Web Develop > Paragraph - Lesson 03

Line Breaks, Paragraphs

As we saw in previous lesson if we break lines in html code by simply inserting enter keys (new line characters) ,lines will not break in output result in browser. They will be printed in a single line in browser. We must use
tag to do this as you used it in previous lesson. You can also divide text using paragraphs. A paragraph starts on a new line with one blank line after previous line.

Paragraph tag is "p" "/p"

"p"First paragraph"/p"

"p"Second paragraph"/p"

You will nest other tags inside paragraph tag for fonts, styles and other tags that will be used inside a paragraph. There is another option in forming text that is using"PRE" tag.



Space between texts

Browser does not show more than one space between to words even if you have entered a hundred spaces between them in html source. If you want to enter more than one blank character between two words you will need to use a small code for this purpose. It is " " without the quotes.



"BODY"

Here we insert 5 extra spaces.

"/BODY"



Paragraph Alignments in Your Web Page

You can determine how a paragraph will be aligned in a web page. You can align text in left, right or center of a web page. To specify alignment for a paragraph you must use an extra parameter for your paragraph tag. You can use one of these combinations:



Indented Text

If you need a text that is indented from both sides of web page you can use tag. Text that is enclosed in this tag will have a margin from left and right of your web page.



Images in Your Web Page

In previous lesson you learned how to use an image as a background for web pages. It was

Here we want to learn how to add an image in a web page. Tag that will be used for this purpose is "IMG" tag. Actually we will need parameters for this tag that specify image file location, file name and other optional parameters.

In this example I have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag. If you want to show your image in a different size than its real size, you can specify its size as below.



Alignment and Border Size for Images

You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center.

You can add a border to an image by adding a border parameter to "IMG> tag. See the results of this html code.

Some of options we use may not be supported on other browsers. As most of web surfers use "MS Internet Explorer" we will work around this browser.



Alternative text for images

Some web surfers may use browsers that do not support graphics. An example is lynx browser that is used in Unix text environments. If you want to consider these users, you can enter a text as an alternative to each image in your web page. In this way image will be replaced by its alternative text.
It is very easy. Just add an ALT parameter to "IMG> tag.

"IMG SRC="abanner.gif" ALT="Learning Online""

You see it does not cost too much.



Path of image file

In above examples, image file must be located in the same directory that html file is located.If our image file resides in other directory , we must add a relational path or a complete URL to this
image.

"IMG SRC="images/abanner.gif"" Image is located in "images" directory below the directory that html file resides.
"IMG SRC="../abanner.gif"" Image is located in parent directory of the directory of html file.