The Body Elements
In this lesson we’re going to use only the very basic forms of each element. First you should know the two different main groups of elements that can be used within the BODY section of an HTML document: block-level elements and inline elements
Block-Level and Inline Elements
Some examples for block-level elements are the elements used for headings ( H ), paragraphs ( P ), forms ( FORM ), divisions ( DIV ), tables ( TABLE ) and lists ( OL / UL / DL ).
Inline elements are those which are used to format text differently from the surrounding text inside the same parent element, such as the elements used for bold text ( B ), underlined text ( U ), subscript ( SUB ), superscript ( SUP ), anchors and hyperlinks ( A ) and many more.
Headings
H is the element name that stands for "heading". There are 6 levels of headings being 1 the biggest and 6 the smallest heading. Headings are block-level elements.
HTML code for a level 1 heading would look like this:
<h1 > This is a H1 headline </h1 >
And here are all the 6 different heading levels together
< h1> H1 - the biggest headline < /h1 >
< h2 > H2 - smaller than H1 < /h2 >
< h3 > H3 - smaller than H2 < /h3 >
< h4 > H4 - smaller than H3 <: /h4 >
< h5 >H5 - smaller than H4 < /h5 >
< h6 > H6 - the smallest headline < /h6>
You should always use an H1 (level 1 heading) first. Other levels should optionally follow in a logical sequence, i.e. you would use H2 (not H3) as sub-heading after a H1 heading. If you think that the H1 level is too big, don’t worry: there’s a simple way to adapt the font sizes of headings.
Paragraphs
Most of the text on your Webpage will be embedded in paragraphs. For this purpose you will be using the P element. The example below shows two paragraphs.
< p >This is a paragraph. It begins with an opening tag, .... < /p >
< p > There is always a blank line between two paragraphs. < /p >
< br > tag is used to white spaces and blank lines within your HTML code
Elements for Text Formatting
From the different text formatting options you have, a few basic ones are done by using special elements.
|
Name
|
Display Example
|
HTML Code
|
|
EM
|
emphasized text
|
<em>emphasized text</em>
|
|
B
|
bold text
|
<b>bold text</b>
|
|
I
|
italic text
|
<i>italic text</i>
|
|
U
|
underlined text
|
<u>underlined text</u>
|
|
SUP
|
Asuperscript
f.ex.: E=mc2
|
A<sup>superscript</sup>
f.ex.: E=mc<sup>2</sup>
|
|
SUB
|
Asubscript
f.ex.: H2O
|
A<sub>subscript</sub>
f.ex.: H<sub>2</sub>O
|
|
STRIKE
|
strike-through
|
<strike>strike-through</strike>
|
|
TT
|
teletype writer
|
<tt>teletype writer</tt>
|
|
BIG
|
bigger than normal
|
<big>bigger than</big> normal
|
|
SMALL
|
smaller than normal
|
<small>smaller than</small> normal
|
Horizontal Rules
Horizontal rules are simple lines used to divide different parts of a webpage. To create a horizontal rule, the stand-alone element HR is used.
To change thickness, alignment, width and style of the horizontal rule, you may use certain attributes inside the HR tag, such as SIZE (for thickness in pixels), WIDTH (for the length), ALIGN (for the alignment) and NOSHADE (for the style). These attributes may take the following values:
align: left / right / center
size: an integer number
width: integer number or percentage
noshade: no values
However, more flexibility and more styling options are given with Cascading Style Sheets
< hr >
< hr width="500" size="15">
< hr width="50%" align="left" size="5" noshade>
Escaping Special
|
Entity in HTML
|
Displayed as
|
Examples (HTML code --> Displayed as)
|
|
©
|
©
|
|
|
´
|
´
|
don´t --> don´t
|
|
&
|
&
|
|
|
|
|
(non breaking space = forces a white space)
3..2..1.. 0 --> 3..2..1.. 0
|
|
<
|
<
|
|
|
>
|
>
|
|
|
"
|
"
|
|
|
