Layout

F.
4 CIT – HTML – Text: Layout page 1
Introduction
The flexibility of the layout of a webpage is very limited if HTML is used solely. The layouts, for
example the page margins, the indentation, etc, can only be specified by using the style which will not
be discussed in this chapter. Despite of the limited ability of HTML, we can still define a heading, a
paragraph, insert a new-line character, align texts and create different kind of list.
Line Break and Paragraph

In most situations, when we are editing text in a word processor, we expect the text to start in a new
line by pressing the Enter button. However, this is not the case in HTML editing. A new line
character in the HTML code does not imply the same in the rendered web page. Try the following
code and describe what you see in the browser:
<html>
<head><title>New Line Demonstration</title></head>
<body>
We want to test the new line character in HTML file.
Will this line appear in another line?
</body>
</html>
If we want to start our text in a new line, we have to use the following tags.
1. Heading – <H#> Tag

<h#> is a tag used to mark the enclosed text as a heading (bold), ranging from most prominent to
least prominent. A new line character is inserted after the <h#> tag.
Usage:
<hn>Text</hn> where n can be 1, 2, 3, 4, 5 or 6
Example:
<h1>Most prominent heading</h1>
<h6>Least prominent heading</h6>
2. Manual Line Break – <BR> Tag

<br> is inserted into the text where the following text should be shown in the next line. Note
that <br> only has the end tag.
Usage:
Text<br/>
Example:
Can you give me a hand?<br/>Sure!
F.4 CIT – HTML – Text: Layout page 2
3. Paragraph – <P> Tag

Paragraphs are delimited by the paragraph tag, <p>. <p> tag controls the line spacing within the
paragraph as well as the line spacing between paragraphs. The default line spacing is single space
within a paragraph and double-space between paragraphs.
What is the difference between <P> tag and <BR> tag?
Usage:
<p>Text</p>
Example:
<p>Can you give me a hand?</p>Sure!
4. Preserving Formatting – <PRE> Tag

Sometimes, you will want the client browser to interpret the text as appeared in the HTML,
including the white spaces and forced formatting. In such cases, we can use the preformatted tag,
<PRE>. This tag tells the browser that the text within the tag has been preformatted and should
be rendered exactly as it appears in the code. The enclosed tag is rendered in a monospaced font.
Usage:
<pre>Text</pre>
Example:
<pre>Can you give me a hand?
Sure!
</pre>
5. Line Break – <HR> Tag

<HR> tag causes the browser to draw a line between the component before and after the tag.
Usage:
Component 1<hr>Component 2
Attributes:
align: It can be left | center | right.
noshade: No shading effect on the line
size: The line size measured in pixel
width: The line width measured in pixel or percentage (relative)
Example:
Heading Here
<hr>
<hr align=”right” size=”10” width=”100” noshade>
Content Here
Text Alignment
The alignment of text can be specified in the attributes of many tags. The attribute name is align and
its possible values are CENTER, LEFT and RIGHT.
Usage:
<tag_name align=”center/left/right”>
align attribute is applicable to:
<IMG>, <H#>, <HR>, <LEGEND>, <OBJECT>, <P>, <SELECT>, <SPAN>, <TABLE>,
<TBODY>, <TD>, <TH>, <THEAD>, <TR>
List
Lists are frequently used to explicitly express details points of the current content. They are an
effective way to highlight larger chunks of information. Bulleted lists are especially helpful in
expressing the hierarchical structure or the order of items.
In HTML, we can render bulleted lists in two ways: ordered list and unordered list.
Either way corporate with the <LI> tag which indicates that the enclosed content is a list item.
Ordered List:
An order list shows the sequential relationship between items. Numbers or alphabets (numbering)
are used to indicate the ascending order of items.
Ordered list is marked by <OL> tag in HTML.
Unordered List:
Items in an unordered list do not possess any sequential relationship. Therefore, their order of
appearance is not important. Symbols (bulleting) are used to indicate the list items
Unordered list is marked by <UL> tag in HTML.
<LI> Tag:
Usage:
<li>Item 1</li>
Attributes:
1. type
The “bullet” of the item.
Possible values: 1|a|A|i|I|disc|square|circle
2. value
The sequence number used in “bullet” used in ordered list.
<OL> Tag:
Usage:
<ol>
<li>Item 1</li>
<li>Item 2</li>
…
</ol>
Attirbutes:
1. type
Possible values: 1|a|A|i|I
2. start
The starting value number. The value of start must be numeric, regardless of the type
value.
Note that the start value in <OL> tag can be overridden by the value attribute in
<LI> tag.
3. compact
This is used to indicate that the list items are short, so the browser can render the
list more compact. For example, it could put more than one item on a line.
Example:
<ol type=”a” start=”5”>
<li type=”A”>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li value=”4”>Forth Item (Overriden)</li>
<li>Fifth Item</li>
</ol>
<UL> Tag:
Usage:
<ul>
<li>Item 1</li>
<li>Item 2</li>
…
</ul>
Attirbutes:
1. type
Possible values: disc|square|circle
2. compact
The same as that in <OL> tag.
Example:
<ul type=”circle”>
<li>Item 1</li>
<li type=”a”>Item 2</li>

<li type=”disc”>Item 3</li>
<li type=”square”>Item 4</li>
<li>Item 5</li>
</ul>
Definition List:
A definition list is a list without bullets. A definition list is declared by <DL>, terms defined by
<DT> tag and definition is defined by <DD> tag.
Usage:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dt>
<dt>Term 3</dt>
</dl>
Attributes:
<DL> Tag
1. compact:
The same as that in <OL> tag.
Example:
<dl>Computer Terms:
<dt>WWW</dt>
<dd>World Wide Web</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
</dl>
Nested List:
A list can be defined in another list and such list is called a nested list (if a content is defined in
another content of the same structure, we call such repeated structure a nested structure)
Example:
Unordered List:
<ul>
<li>UL Item A</li>
<li>UL Item B</li>
<li>Ordered List:
<ol>
<li>OL Item 1</li>
<li>OL Item 2</li>
<li>Definition List
<dl>
<dt>Term 1</dt>
<dt>Term 2</dt>
</dl>
</li>
<li>OL Item 3</li>
</ol>
</li>
<li>UL Item C</li>
</ul>
An unordered list An ordered list A definition list

Layout

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Layout

Caricato da

Copyright:

Formati disponibili

F.

4 CIT – HTML – Text: Layout page 1

Line Break and Paragraph

1. Heading – <H#> Tag

2. Manual Line Break – <BR> Tag

3. Paragraph – <P> Tag

4. Preserving Formatting – <PRE> Tag

5. Line Break – <HR> Tag

<li type=”a”>Item 2</li>

An unordered list An ordered list A definition list

Potrebbero piacerti anche