HomeHelpSite indexFeedbackSearch
Yenza!

Building a website

Developing a website
General discussion
of site


Learning HTML

Required Tags

Basic layout and
formatting tags

Hypertext links

Images

Tables

Fonts

Planning and building

Going live

HTML editors

Web
development
resources


Ongoing skills
development


Web databases

Learn to use the Internet

Start your research

Yenza! for trainers

The Internet for training

Subject links
Learning HTML

Basic layout / formatting tags

This section looks at:


Paragraphs

Unlike documents written in word processors, using a "carriage return" in an HTML document won't automatically create a line or paragraph break. A sentence which looks like this in your word processor or text editor...

Learning
HTML is very

easy to do

...will look like this in your browser, if you haven't used tags to insert line and paragraph breaks

Learning HTML is very easy to do.

To create breaks, the following tags are used:

HTML Coding Function
<P> </P> The <P> opening and closing tags are used to mark the beginning and end of each paragraph.
<BR> The <BR> tag is used to force the creation of a new line.

For example:

HTML Coding Display
Learning<BR> HTML is very<P> easy to do.</P> Learning
HTML is very

easy to do.

Note that the <BR> tag is not used in pairs.


Bold and italic text

The tags most commonly used to control the way characters look are <B> (bold) and <I> (italic). The column on the left shows the HTML coding used the produce the effects on the right:

HTML Coding Display
<B>Bold</B>     Bold
<I>Italic</I>    Italic

Horizontal rules

The <HR> tag is used to insert a horizontal line across the page. Note that this tag is not used in pairs. In other words, no closing tag is used. The example below illustrates the default horizontal line width or thickness:

HTML Coding Display
<HR>

It is also possible to specify the width of the horizontal rule to make it thicker or thinner. For example:

HTML Coding Display
<HR SIZE="1">
<HR SIZE="3">
<HR SIZE="6">

Bulleted and numbered lists

The most commonly used list types are the unordered (bulleted) list, and the ordered (numbered) list. Unordered lists are created with the<UL> tag, ordered lists with <OL>. Both types of list use the <LI> tag to specify list items:

Unordered (bulleted) list:

HTML Coding Display
<UL>
<LI>South Africa</LI>
<LI>Spain</LI>
<LI>Eritrea</LI>
</UL>
  • South Africa
  • Spain
  • Eritrea

Ordered (numbered) list:

HTML Coding Display
<OL>
<LI>First</LI>
<LI>Second</LI>
<LI>Third</LI>
</OL>
  1. First
  2. Second
  3. Third

Headings

HTML makes provision for six levels of heading, <H1> through <H6> as illustrated below:

HTML Coding Display
<H1>Heading 1</H1>

Heading 1

<H2>Heading 2</H2>

Heading 2

<H3>Heading 3</H3>

Heading 3

<H4>Heading 4</H4>

Heading 4

<H5>Heading 5</H5>
Heading 5
<H6>Heading 6</H6>
Heading 6

These tags are intended to be used to indicate the logical structure of the document, not just to control the size of the text.


Aligning headings

The default alignment of headings is to the left. Alignment can be controlled using the ALIGN="RIGHT" and ALIGN="CENTER" attributes within the opening <H> tag:

HTML Coding Display
<H4 ALIGN="RIGHT">Right</H4>

Right

<H4 ALIGN="CENTER">Center</H4>

Centre

Aligning paragraphs

The default alignment of paragraphs is to the left. Alignment can be controlled using the ALIGN="RIGHT" and ALIGN="CENTER" attributes within the opening <P> tag:

HTML Coding Display
<P ALIGN="CENTER">
The text on<BR>
each line of this<BR>
paragraph is centered.</P>

The text on
each line of this
paragraph is centered.

<P ALIGN="RIGHT">
The text on each<BR>
line of this paragraph<BR>
is aligned to the right.</P>

The text on each
line of this paragraph
is aligned to the right.

 

 
Top of the Page

Questions? Comments? Contact the site administrator.