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>
<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.
<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:
<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.
<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
<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.
<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 "MS
Internet Explorer" 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.
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>
<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.
<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:
<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.
<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
<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.
<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 "MS
Internet Explorer" 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.
0 comments:
Post a Comment