lab 3

Download Report

Transcript lab 3 

Line Breaks, Paragraphs, lists
Lab3
Suzanne Sultan
1
Paragraph tag


<br> break lines
You can also divide text using paragraphs. A
paragraph starts on a new line.



<p> </p>
<PRE> </PRE>
example

Write the followings using <p> <pre> to see the difference
<p>First paragraph</p>
<p>Second paragraph</p>
Suzanne Sultan
2
Cont.

Align:


attributes
<P ALIGN="left"> </P>
<P ALIGN="center"> </P>
<P ALIGN="right"> </P>
dir : direction


ltr :left to right
rtl :right to left
Example :
<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>
Suzanne Sultan
3
Indented Text

have 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
<BODY>
<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>

Attribute:

dir
Suzanne Sultan
4
Lists

There are two types of lists:

unordered lists: list items start with bullets


Ordered list : list items start with numbers.


<UL></UL>
<ol> </ol>
Definition lists (dictionary): used for displaying lists of words with blocks of
descriptive text.

<dl> </dl> :
List item
Example :
<BODY>
<UL>
<LI>Text Links </LI>
<LI>Image Links </LI>
<LI>Email Links </LI>
<LI>List of Items </LI>
</UL>
</BODY>

Change <ul> tag to <ol> tag
Suzanne Sultan
5
Definition lists

It has two tags in:



<dl> </dl> :used to mark the beginning and the end of the
entire list.
<dt> tag : definition term
<dd> definition itself
Ex:
<dl>
<dt> web site</dt>
<dd> consists of several pages</dd>
<dt> protocol</dt>
<dd> rules or standards that control the
transferring of the data</dd>
</dl>

Suzanne Sultan
6
Nested lists

List can be nested within another list
Suzanne Sultan
7
Cont.

Unordered list attributes:



List attributes
type (circle- square-disc)
Dir (ltr-rtl)
Ordered List attribute :



start
type (A- a-i-I……)
dir
Suzanne Sultan
8
Horizontal Separator Rule
Another useful html tag that you will use, is
<HR> tag. If you need to separate text in your
web page by horizontal lines , you may use
this tag.
<BODY>
<p> First section </p>
<HR>
<p>Second section </p>
</BODY>

Suzanne Sultan
9
Cont.

Width
 <HR WIDTH="50%">
 <HR WIDTH="100">
attributes
width in percent
width in pixels

Size:

determine line size parameter to change line diameter.
<HR size=5>

Noshade :

change the rule to a solid line instead of a shaded line.
<hr size=3 noshade>

Color : determine Color for your line:
 <HR color="#000000">

Align:

Note: you can mix parameters with each other.
Suzanne Sultan
10
Special characters


Certain symbols or characters to be entered
in the web page using a single key or
character.
Example:






&copy;
&lt
&gt
&amp
&frac12
&frac14
©
<
>
&
½
¼

Suzanne Sultan
11
Cont. 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.

Use special character : &nbsp; non breaking space
<BODY>
<p>Here we insert 5
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extra
spaces</p>
</BODY>
Suzanne Sultan
12