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.
" " without the quotes will appear as spaces in browser.
<BODY>
Here we insert 5
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.
Next Lesson
|
