3.1 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 <br> 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. Text between <pre> </pre>
tags will be displayed exactly
as it is typed in html source. Therefore you will not need <br> tags to break lines. It is enough to
enter text in separate lines with enter key (new line character) at their end.
3.2 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>
3.3 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:
<p align=”left”> </p>
<p align=”center”> </p>
<p align=”right”> </p>
Example 3.1:
<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>
3.4 Indented Text
If you need a text that is indented from both sides of web page you can use <blockquote> tag.
Text that is enclosed in this tag will have a margin from left and right of your web page.
Example 3.2:
<html>
<head>
<title>Example 3.2</title>
</head>
<body >
we see block quotes here:<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>
3.5 Images in your web page
In previous lesson you learned how to use an image as a background for web pages. It was
<body background=”image.gif”>
</body>
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.
Look at this example:
Example 3.3:
<html>
<head>
<title>example 3.3</title>
</head>
<body background=”image1.gif”>
<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:
<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>
3.6 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.
See example below
Example 3.5:
<html>
<head>
<title>Example 3.5</title>
</head>
<body background=”image1.gif”>
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.
You can see examples of this lesson in our site. Go to email course section in our site to see ready
examples.
Example 3.6:
<html>
<head>
<title>Example 3.6</title>
</head>
<p align=”center”>
<img src=”abanner.gif” border=3>
</p>
</html>
Some of options we use may not be supported on other browsers. As most of web surfers use “chrome browser”
we will work around this browser.
3.7 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.
3.8 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.
See examples below:
<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.
3.9 End
In this lesson you learned more text formatting techniques. You also learned how to include
images in your web pages.
In next lesson we will learn about links, image links and more.
Until then I suggest you to start designing a web page using the knowledge you have from these
three lessons.
Notice:
- Use left, right and centered paragraphs and block quote in a sample web page.
- Write a complete html page code with an image centered on it with a border size of 10.
- We have an image that its size is 100*200. We want the image to be half the size it is on our
page. Write a complete web page that centers this image on it with a border size of 5. - a. Write a <img> tag that uses an image file located 2 directory levels upper than html file directory.
b.Write a <img> tag that uses an image file located in”image” directory located in one level upper than current html file directory.
Learn Free Web Design Courses with Online in 5 days students are learning Web Design on Udemy. Free learning on Udemy. Web Design for … HTML, CSS and JavaScript: The Complete Web Developer Course. Online
