Sideway
output.to from Sideway
Draft for Information Only

Content

HTML Multi-Column Page Construction
Heading 1 of HTML Page
 Heading 2 of HTML Page
  Heading 3 of HTML Page
   Heading 4 of HTML Page
    Heading 5 of HTML Page

HTML Multi-Column Page Construction

The division element, <div> can be used to group both block level and text level elements as a division or section in a HTML page. The usage of <div> element is much flexible then <p> element. The <div> element can group elements across the HTML page as the <p> element. The <div> element can also group elements into a block which can be placed anywhere on the HTML page.

There is also another deprecated center element, <center>, has similar property as the <div> element. The only difference between them are the text align of the text contents for the center element are always set  to center aligned.

Similarly, the text contents can further be rendered into a more readable format by using the attributes of element tags, for examples text alignment, underline etc.

Code Sample:
<body>
<div style="z-index:-1"><h1>Heading 1 of HTML Page</h1>
<p>Paragraph 1 of <span style="font-size:xx-large">
<b>HTML</b></span> page under h1 <br>next line</p>
<p>Paragraph 2 of <span style="font-size:32px">
<b>HTML</b></span> page under h1</p></div>
<div style="width: 250px; margin: auto; z-index:-1;">
<h2>Heading 2 of HTML Page</h2>
<p>Paragraph 3 of <span style="font-size:x-large">
<b>HTML</b></span> page under h2 <br>next line</p>
<p>Paragraph 4 of <span style="font-size:24px">
<b>HTML</b></span> page under h2</p></div>
<div style="float:left;width: 250px; z-index:-1;">
<h3>Heading 3 of HTML Page</h3>
<p>Paragraph 5 of <span style="font-size:large">
<b>HTML</b></span> page under h3 <br>next line</p>
<p>Paragraph 6 of <span style="font-size:18px">
<b>HTML</b></span> page under h3</p></div>
<div style="float:right;width:150px; z-index:-1;">
<h4>Heading 4 of HTML Page</h4>
<p>Paragraph 7 of <span style="font-size:medium">
<b>HTML</b></span> page under h4 <br>next line</p>
<p>Paragraph 8 of <span style="font-size:16px">
<b>HTML</b></span> page under h4</p>
<p style="font-size:16px">Paragraph 9 of
<b>HTML</b> page under h4</p></div>
<div style="clear:both;position:relative;top:-186px; left:104px;
width:200px;height:250px;background-color:aqua;">
<h5>Heading 5 of HTML Page</h5>
<p style="font-size:small">Paragraph 10 of
<b>HTML</b> page under h5 <br>next line</p>
<p style="font-size:13px">Paragraph 11 of
<b>HTML</b> page under h5</p></div>
<div style="position:relative;top:-250px;height:100px">
<h6>Heading 6 of HTML Page</h6>
<p style="font-size:11px">Paragraph 12 of
<b>HTML</b> page under h6</p>
<p style="font-size:x-small">Paragraph 13 of
<b>HTML</b> page under h6 <br>next line</p>
<p style="font-size:10px">Paragraph 14 of
<b>HTML</b> page under h6</p></div>
<div style="position:relative;top:-200px;">A block quotation of ..........
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... .......... from reference:
<blockquote>Block quotation from
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... ..........
other resources ...</blockquote> End of quotation</div>
<hr>
<center>Author <br>contact: <address>sideway.hk</address>
Date 2010</center>
</body>
Page Sample:

Heading 1 of HTML Page

Paragraph 1 of HTML page under h1
next line

Paragraph 2 of HTML page under h1

Heading 2 of HTML Page

Paragraph 3 of HTML page under h2
next line

Paragraph 4 of HTML page under h2

Heading 3 of HTML Page

Paragraph 5 of HTML page under h3
next line

Paragraph 6 of HTML page under h3

Heading 4 of HTML Page

Paragraph 7 of HTML page under h4
next line

Paragraph 8 of HTML page under h4

Paragraph 9 of HTML page under h4

Heading 5 of HTML Page

Paragraph 10 of HTML page under h5
next line

Paragraph 11 of HTML page under h5

Heading 6 of HTML Page

Paragraph 12 of HTML page under h6

Paragraph 13 of HTML page under h6
next line

Paragraph 14 of HTML page under h6

A block quotation of .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... from reference:
Block quotation from .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... other resources ...
End of quotation

Author
contact:
sideway.hk
Date: 2010
required   Optional tag   Deprecated   Transitional   Frameset   Exclusion
Optional Element or Content Occurrence Character:
(+) one or more;  (*) zero or more;  (?) zero or one times;  ( ) exactly once 
Choice or Sequence Element or Content :
(|) or  (&) and  (,) sequence  (+) include  (-) exclude

©sideway

ID: 100900001 Last Updated: 3/8/2011 Revision: 2 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019