Main | Search | Courses | Login
 
 
 
Course Page

 
HTML
Lesson Title : Paragraphs and Images   Author : Siamak Sarmady   Creation : 2010-01-10   Update : 2010-02-19   Lessen Score Weight : 15%

Paragraphs and Images

Text in web pages is normally organized in paragraphs. Web pages also contain photos and images. In this lesson we will learn how to organize text in paragraphs and how to add images to the web page. In previous lesson we used <BR> tag to break text into new lines. In this lesson we will see how we can organize text in paragraphs.

Paragraphs

It is possible to divide text in a page into paragraphs. A paragraph starts on a new line with a single blank line before it. Paragraph tag is <p> </p>. You are allowed to nest other tags inside paragraph tag. For example font tag can be used inside paragraphs.

<p>First paragraph</p>
<p>Second paragraph</p>


In previous lesson we learned about <TT>…</TT> tag. There is yet another tag <PRE>…</PRE> which works almost similar to the <TT>…</TT>. The difference is that the text inside <PRE>…</PRE> tag does not need <BR> tags to break into new line. Lines inside <PRE>…</PRE> tag break the same as normal text with enter key (new line).

Space between texts

Browser will not show more than one space between two words even if you have entered a hundred spaces between them in html code. If you want to enter more than one blank character between two words you will need to use a specific code for this purpose. "&nbsp;" without the quotes will appear as spaces in browser.

<BODY>
Here we insert 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extra spaces.
</BODY>


Paragraph alignment

Paragraph tag has options to align the paragraph text to left, center or right of the paragraph. To specify alignment for a paragraph an extra “align” parameter of paragraph tag will be used.

Example 3-1: page3-1.html

<HTML>
<HEAD>
<TITLE>Example 3-1</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">You can align text in left.</P>
<P ALIGN="center">You can align text in center.</P>
<P ALIGN="right">You can align text in right.</P>
</BODY>
</HTML>

 

Figure 3-1: Paragraph alignment

Indented Text

If you need a text to be indented from both sides of the web page you can use <BLOCKQUOTE> tag.

Example 3-2: page3-2.html

<HTML>
<HEAD>
<TITLE>Example 3-2</TITLE>
</HEAD>
<BODY>
We see block quote in below paragraph :<BR><BR>
<BLOCKQUOTE>
In cases that you want to emphasis on a paragraph in your text you can use this tag. It will indent your text from both sides.
</BLOCKQUOTE>
</BODY>
</HTML>

 

Figure 3-1: Block quote

Images in your web page

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

       <BODY BACKGROUND="image.gif">  

       </BODY>

Here we want to learn how to add an image in a web page itself (not its background). <IMG> tag is used for this purpose. This tag has a few parameters like width, height, border size, alignment, file name and etc. File name parameter is compulsory while other parameters are optional. Look at this example:


Example 3-3: page3-3.html

<HTML>
<HEAD>
<TITLE>Example 3-3</TITLE>
</HEAD>
<BODY BACKGROUND="image1.jpg">
<B>This is an image:</B><BR>
<IMG SRC="abanner.gif">
</BODY>
</HTML>

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.

Example 3-4: page3-4.html

<HTML>
<HEAD>
<TITLE>Example 3-4</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image:<BR>
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30>
</BODY>
</HTML>


Figure 3-2: Using images for background and as a part of web page itself

Alignment and border size for images

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


Example 3-5: page3-5.html

<HTML>
<HEAD>
<TITLE>Example 3-5</TITLE>
</HEAD>
<BODY BACKGROUND="image1.jpg">
This is an image:<BR>
<P ALIGN="center"><IMG SRC="abanner.gif"></P>
</BODY>
</HTML>


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

Example 3-6: page3-6.html

<HTML>
<HEAD>
<TITLE>Example 3-6</TITLE>
</HEAD>
<P ALIGN="center"><IMG SRC="abanner1.gif" border=3></P>
</HTML>


Figure 3-3: Adding border to an image

Some of the options we use may not be supported on some browsers but things we cover in this course work on "MS Internet Explorer" and “Firefox” which are currently the most popular web browsers.

Alternative text for images

Some web browsers just show text and do not support graphics. Though these browsers are rare nowadays you might want to consider users which have these browsers. An example is “Lynx” which is used in UNIX/Linux text environment. You can enter a text as an alternative to each image in your web page. In this way images will be replaced by their alternative texts in text browsers. This alternative text will be added in ALT parameter of the <IMG> tag.

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

Path of image file

In our previous examples, image file must be located in the same directory where the html file is located. If our image file resides in another directory, we must add a relational path or a complete URL to the image.

See examples below:

  <IMG SRC="images/abanner.gif">


In above case, image is located in "images” directory below the directory where our html file resides.

  <IMG SRC="../abanner.gif">


In this other example, image file is placed in the parent directory of the place where html file is located.

In next lesson we will learn about links, image links and more.

Exercises

1. Use left, right and centered paragraphs and a block quote in a sample web page.

2. Write a complete html page code with an image centered in it. Set a border size of 10 for the image.

3a. Write an <IMG> tag which uses an image file located 2 directory levels upper than where the html file directory is saved.

3b. Write an <IMG> tag which uses an image file located in "image" directory located in one directory level upper than current html file directory.


 
  Help | Terms | Privacy Statement | About | Report Software Bugs | Society50 Asian Social Network | CupidB Free Matchmaker