This text is next to the appleand continues below it.
|
The <P> tag marks a regular paragraph of text. A paragraph ends with the tag. All browsers will ignore returns, linefeeds and extra spaces in a text. If you do not format a text with paragraph and break tags, the text will be displayed continuous. The <P> tag adds white space above the paragraph and the tag below.
The paragraph tag allows for an ALIGN attribute. It can be used to center text or align it on the right.
<P ALIGN=left>Left is the default anyway...
<P ALIGN=center>Creates a centered paragraph
<P ALIGN=right>Flushes text to the right
Left is the default anyway...
Creates a centered paragraph
Flushes text to the right
You should remember that browsers automatically put white space above and below lists and headers, so you do not need to use paragraph tags to do that.
Since HTML 4.0 You are supposed to include alignment in a style sheet or style attribute. Also the space around elements can be specified in a style sheet. Style sheets also allow justification.
<BR> is the break tag which, who'd ever guess, inserts a simple line break. Whereas the paragraph tag inserts empty (vertical) space, the break tag continues the text on the next line without adding space. It looks like this:
<P>This is<BR> a sentence with a<BR> couple of breaks in it.
This is
a sentence with a
couple of breaks in it.
The break tag allows for the CLEAR attribute. Using this attribute you can break text to the next clear left or right margin. This is useful if you align pictures left or right, and need to make sure that at some point text continues after the picture (how to insert pictures is explained in the chapter on images). For example:
<P><IMG SRC=apple.gif ALIGN=left ALT="an apple!">This text is next to the apple<BR CLEAR=left>and continues below it.
This text is next to the apple
and continues below it.
<P ALIGN=right><IMG SRC=apple.gif ALIGN=right ALT="an apple!">This text is next to the apple<BR CLEAR=right>and continues below it.
This text is next to the apple
and continues below it.
<BR CLEAR=all> will break to the next line where both margins are clear.
If for some reason you do not want your text to be wrapped, you can use the <NOBR> tag. It will cause a longer text to stay one line, no matter how long the text and how narrow the window is. The NOBR tag is not part of HTML 3.2 or 4.0. This is how it works:
<NOBR><P>Itaque cum ... cum periculo deicerentur.</NOBR>
Another useful thing is the non-breaking space. Normally, if text is wrapped, a line break is inserted between two words, so on a space. A non-breaking space displays like a normal space, but is not considered a space for purposes of wrapping text. A non-breaking space looks like this: &NBSP;.
Headings are titles and subtitles in a document. There are six sizes of headings available. The heading tags also allow the ALIGN attribute, just like paragraphs do. The default alignment is left, but you can change that to center or right:
<H1>Heading of size 1</H1>
<H2 ALIGN=left>Heading of size 2</H2>
<H3 ALIGN=center>Heading of size 3</H3>
<H4 ALIGN=center>Heading of size 4</H4>
<H5 ALIGN=right>Heading of size 5</H5>
<H6 ALIGN=right>Heading of size 6</H6>
Heading of size 1
Heading of size 2
Heading of size 3
Heading of size 4
Heading of size 5
Heading of size 6
As you can see, "left" is the default alignment for the header, so if you specify no alignment it will be on the left. You can use style sheets or style attributes to set the colour, font, size, alignment and other attributes of the header.
The following font style elements are available:
<TT>teletype or monospaced text</TT>
<I>italic text style</I>
<B>bold text style</B>
<BIG>places text in a large font</BIG>
<SMALL>places text in a small font</SMALL>
teletype or monospaced text
italic text style
bold text style
places text in a large font
places text in a small font
<EM>Emphasis</EM>
<STRONG>Stronger emphasis</STRONG>
<CODE>Code sample</CODE>
<SAMP>Sample text</SAMP>
<KBD>Keyboard; text to be typed</KBD>
<VAR>Used for variable names</VAR>
<DFN>Definitions</DFN>
<CITE>a citation</CIT>
Emphasis
Stronger emphasis
Code sample
Sample text
Keyboard; text to be typed
Used for variable names
Definitions
a citation
Probably, many of these style and phrase elements look very similar and in practice you will only use one or two of them. Additionally, since HTML 4 it is preferable to use style sheets or style attributes to do this kind of formatting.
As written above, browsers will ignore normal line breaks and returns, which is why you need the <P> and <BR> tags. Also, any extra spaces will be ignored. Look for example at the following piece of ASCII art, if you insert it in an HTML document just like that.
\\|// (0 0) ********************************oooO-(-)-Oooo**************************** Quote of the moment... "If you're up to your eyes in sh*t, keep your mouth shut!" Chris Ross *************************************************************************
As you can see, the browser takes out all the spaces and returns that were used to format the original signature. A way to work around this is to use the tags for pre-formatted text: a <PRE> tag before a </PRE> after. These tags tell the browser that you have put in spaces and returns with the specific aim to lay-out the text. It also tells the browser to use a fixed-width font. See how it looks now:
\\|//
(0 0)
********************************oooO-(-)-Oooo****************************
Quote of the moment...
"If you're up to your eyes in sh*t, keep your mouth shut!"
Chris Ross
*************************************************************************
The <PRE> tag can also be used to create simple tables:
<PRE>Sweden 30.4% The Netherlands 11.5% USA 9.2%</PRE>
Sweden 30.4% The Netherlands 11.5% USA 9.2%
The extra spaces that are used to outline the numbers do not show up in the bit of source code above. This is because, as mentioned earlier, browsers do not show the extra spaces unless you use the <PRE> tag. In the same way, the returns that are used to seperate the lines only show up when using the <PRE> tag. Of course you have much more possibilities with tables if you use the <TABLE> tag.
It is possible to change the size of the font. The first tag to use is the one that specifies the base font:
<BASEFONT SIZE=4>
The base font size is the default for the whole document. If you define sizes with + or -, this is always relative to the base font size. The default size for the base font is 3. Sizes can range from 1 (smallest) to 7 (largest). A changed base font changes all the body text but not the headers.
For the size attribute you can use an absolute value between 1 and 7. You can also use a relative value by putting a + or - sign in the size attribute. If you have specified a base font, relative sizes will relate to that. If you have not specified a base font, relative sizes will relate to 3 (the default base font).
Changing <FONT SIZE=+2>the font</FONT> size
The other possibility you have is to define absolute sizes:
Changing <FONT SIZE=5>the font</FONT> size
You can define absolute sizes whether or not you have defined a base size. It is also possible, but not part of any HTML standard, to use <SMALL> and <BIG> tags:
<SMALL>This is small text</SMALL>
<BIG>This is big text</BIG>
This is small text
This is big text
Style sheets and style attributes offer many possibilities to manipulate font sizes as well as such things as line spacing and margins. Since HTML 4.0 this is the preferred way to do it.
Superscript and subscript are done as follows:
Example<SUP>superscript</SUP>
Example<SUB>subscript</SUB>
Examplesuperscript
Examplesubscript
Up to HTML 3.2, the way to set the colour for parts of the document, or even single words:
<H1>
<FONT COLOR=#800000>Maroon</FONT>
<FONT COLOR=silver>Silver</FONT>
<FONT COLOR=#000088>Blue</FONT></H1>
You can use this tag for single words, sentences or whole documents. Colours can be chosen by using a hexadecimal number representing an RGB value or by using a name. Above I use a mix of the two, see the table of colour codes for more examples.
Since HTML 4.0 you are supposed to use Style Sheets or style attributes for choosing colours.
It is possible to set the font of the text by using the FACE attribute:
This is the default font
<FONT FACE=courier>This is Courier</FONT>
<FONT FACE=times>This is Times</FONT>
<FONT FACE=helvetica>This is Helvetica</FONT>
<FONT FACE=chicago>This is Chicago</FONT>
Of course, the fonts have to be installed on the computer of the reader of your pages. The font names I used here are pretty standard on all Macintosh computers, but if you're using a Windows machine, you probably will not see 5 different fonts in this example. The default font can be changed in the preferences of the browser.
Since HTML 4.0 you are supposed to use style sheets or style attributes for selecting the font face. Style sheets also offer possibilities for more generic selection of font families such as "serif" or "fixed width".
It is very simple to make text blink:
<BLINK>On and Off</BLINK>
How the blinking text looks exactly depends on your browser and on the background you use. The BLINK tag has never been part of any official HTML recommendation but is widely supported.
|
If you just want to indent the first line of a paragraph, you cannot use normal spaces. As you read earlier, browsers will display multiple spaces or tab characters as one space. You can, however, use the non-breaking-space character:
Itaque cum adpropinquarent ... cum periculo deicerentur.
Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.
Style sheets and style attributes offer much more possibilities for indenting and positioning text.
|
