[IMAGE]

Tekstin muotoilut
Kirjan sivut
54 - 58
Tekstin muotoilut tehdään BODY-elementin sisällä, siis dokumentin <BODY>-elementin jälkeen "näkyvällä" osalla sivua. Muotoilulla määrittelet, miten haluat esittää sivullasi olevan tekstin. Tekstille voidaan määritellä erilaisia otsikoita, fontin koot, värit, fontin tyyli. HTML 4.0 mukaan suositeltavampi tapa on käyttää muotoiluun tyylipohjia.

Otsikot - Heading
<H1>.............</H1> - <H6>.............</H6>
Otsikoita on H1:stä H6:seen, joista H6 on pienin ja H1 suurin. Otsikkojen jälkeen tulee automaattisesti yksi tyhjä rivi. Otsikon kanssa samalle riville ei voida käyttää normaalia tekstiä. 

Otsikko H1

Otsikko H2

Otsikko H3

Otsikko H4

Otsikko H5
Otsikko H6

Fontin koko

<FONT SIZE=1>.....</FONT>
Kirjasinkoon muutos. Peruskoko on 3, jota ei tarvitse erikseen asettaa. Fonttien kokoja on 1:stä 7:ään. Lisäksi voidaan käyttää kokonumerona suhteellista numerointia, jossa verrataan perusfontin kokoon 3 :
-2, -1, +0, +1, +2, +3 ja +4. Font-elementin lopetukseen tulee vain </FONT>. Jos lopetusta ei määritellä, jatkuu koon muutos niin pitkään kunnes selain löytää koodista </FONT>-lopetuksen.

Font size 1, font size 2, font size 3, font size 4, font size 5, font size 6 ja 
font size 7 


Fontin väri

<FONT COLOR="#FF0000">.....</FONT>
Koodin lisäksi voit käyttää yleisimpien värien nimiä: Red, blue, white, black, olive, teal, maroon, navy, gray, lime, fuchsia, green, purple, silver, yellow tai aqua. Värikoodit. 
esim. Tähän väliin ollaan määritelty punainen teksti, joka loppuu, kun tulee </FONT>-lopetus


Fontin tyyli

<FONT FACE=helvetica, arial,.....,....,courier>.....</FONT>
Määrittelee käytettävän fontin. Fontit ovat käyttäjän koneesta riippuvaisia ja selain käy läpi koneessa olevat fontit ja kirjoittaa tekstin ensimmäisellä sopivalla fontilla. Tämä tarkoittaa sitä, että jos tietokoneella ei ole ensiksi määriteltyä fonttia, etsitään seuraava. Jos mitään määritellyistä fonteista ei löydy, käytetään oletusfonttia, joka monesti on Times New Roman.


Fonttimuotoilut

Fonttimuotoilujen periaate on se, että elementti aloitetaan ja muotoilu on voimassa, kunnes koodissa tulee vastaan elementin lopetus.

<I>.............</I>
Kursivointi  -italic. Lisäksi voi käyttää <EM>.............</EM>-tagia.Emphasis 

<B>.............</B> Lihavointi - bold. Lisäksi voi käyttää <STRONG>.............</STRONG>-tagia. Strong 

<U>.............</U> alleviivaus - underline.

Yliviivaus voidaan tehdä <S>..........</S> striketrough- elementillä. En suosittele alleviivausta, koska linkit on yleensä alleviivattuja. Kun sitten yrittää napsutella alleviivattua sanaa ainoa vaikutus on se, että selaajan pinna kiristyy.

<TT>.............</TT> - Teletype -  Vakioleveys kirjaimille ja välilyönneille. Näyttää vähän samalta kuin vanha konekirjoitusteksti. Vaihtoehtoiset elementit (EM ja STRONG) antavat selaimen päättää, minkälainen on kunkin selaimen lihavointi tai kursiivi. 

Muut tekstinmuokkaus-tagit: 
Malli teksti<BIG></BIG> 
Malli teksti<SMALL></SMALL> 
Yläindeksi Malli teksti<SUP></SUP> 
Alaindeksi Malli teksti<SUB></SUB> 
Malli teksti<CITE></CITE> 
Malli teksti<VAR></VAR> 
Malli teksti<SAMP></SAMP> 
Malli teksti<KBD></KBD> 
Malli teksti<DFN></DFN> 

<BR> - break - Tekee pakollisen rivinvaihdon tekstiin. Muutoin teksti jakautuu automaattisesti riveille sen mukaan, mikä on näytön koko. Vaikka painat enteriä esim. muistiossa, ei rivi vaihdu HTM-dokumentissa, vaikka se muistion näytöllä vaihtuukin. Jotkin editorit olettavat enterin painalluksen tarkoittavan kappaleen vaihtoa. 

<P>.............</P> - paragraph -  Saa aikaan rivinvaihdon ja yhden tyhjän rivin. Käytetään kappaleen merkitsemiseen. 
Esim:
<P>Tämä seuraava teksti on yksi kappale, joka loppuu P-elementin lopetuksella. </P>
Kappaleelle voidaan lisätä määritteet keskitystavasta:
ALIGN = left, right, center tai justify

Tämä kappale on keskellä

Tämä kappale on oikealla

Ja tämän pitkän kappaleen molemmat reunat on tasattu reunoihin käyttämällä hyväksi ALIGN=justify määritystä. Eli ulkoasu muistuttaa sanomalehti-tyyppistä tekstiä, jossa on tasaiset reunat molemmin puolin tekstiä. Tämä lause on lisätty, jotta vaikutelma tulisi selvemmin näkyviin. Kokeillaan vielä lisätä tekstiä, jos tulos olisi useammalla rivillä selkeämpää 

<PRE...........</PRE> - Preformatted text -  Pakottaa selaimen näyttämään tekstin sellaisena kuin se on muotoiltu. Sillä voit tehdä esim. yksinkertaisia taulukoita tai pitää valmiit tekstitiedostot asettelultaan oikeanlaisina. 
Esim:
<PRE>
Tämä            Näkyy              Juuri          Tällaisena
Selaimessa       Myös          Rivinvaihdot
</PRE>

<BLOCKQUOTE>.............</BLOCKQUOTE> Sisennys. Elementtien välissä oleva teksti sisentyy. Elementtejä voi käyttää sisäkkäin:
<BLOCKQUOTE>
    <BLOCKQUOTE>Sisennetty teksti
    </BLOCKQUOTE>
</BLOCKQUOTE>


Esim:

tässä käytetty Blockquote-elementtiä tekstin sisentämiseen
 

<CENTER>.............</CENTER> Keskitys. Elementeillä voit sisentää tekstin lisäksi myös muitakin sivun osia (kuvia, taulukoita jne.). Elementti keskittää sivun osat näytön mukaan keskelle. 

<ADDRESS>.......</ADDRESS> Osoiteteksti. Elementtien väliin tehty teksti tulee yleensä kursiivilla. 
<ADDRESS>Minä Sukunimi<BR> 
Osoite<BR
Paikkakunta 
</ADDRESS> 

Minä Sukunimi
Osoite 
Paikkakunta 

Korvausmerkit - entiteetit: Koska HTML-kieli on varannut käyttöönsä osan merkeistä, ei niitä voi kirjoittaa tekstipohjaisilla editoreilla suoraan, vaan niille on oma koodinsa. Esimerkiksi muistiolla koodatessa et voi kirjoittaa >-merkkiä suoraan, vaan se pitää kirjoittaa alla olevan mallin mukaan korvausmerkkinä &gt;
Kirjan sivulla 75 on alla olevaa pidempi lista erilaisista korvausmerkeistä eli entiteeteistä

& = &amp;  
< = &lt;  
> =&gt;  
" =&quot;  
ä =&auml;  
Ä =&Auml; 
ö =&ouml;
tyhjä = &nbsp;
eli välilyönti
Ö =&:Ouml; 
å = &aring; 
Å = &Aring; 
Rekisteröity tuotemerkki = &#174; 
Rekisteröity tuotemerkki = &reg; 
Copyright = &#169; 
Copyright = &copy;
Korvausmerkit on kirjoitettava juuri yllä olevalla tavalla eli pienet ja isot kirjaimet mallin mukaan. 

Tyhjää tilaa 
<SPACER TYPE="HORIZONTAL" SIZE=50> tai <SPACER TYPE="VERTICAL" SIZE=50> 
Spacer-elemetillä saat tyhjää tilaa joko vaakasuunnassa (horizontal) tai pystysuunnassa. 

Esimerkki: 
Teksti <SPACER TYPE="HORIZONTAL" SIZE=50>Teksti<SPACER TYPE="VERTICAL" SIZE=50>Teksti 
Teksti Teksti Teksti 

<SPACER TYPE="BLOCK" WIDTH=150 HEIGHT=50 ALIGN=LEFT> 
Align määrityksessä voit käyttää myös top, middle ja right arvoja. 
Esimerkki: 
teksti 
teksti 
teksti 

Yllä oleva esimerkki tekee vasempaan laitaan 150x50 pikselin kokoisen laatikon 
SPACER ei toimi Eplorerissa ja ei enää Netscapen uudessa 6.x-versioissa. Tämän takia spacer-elementin käyttöä ei voi suositella enää nykyään.

Palstat: ei toimi Explorerissa. Explorerissa teksti näkyy normaalilla tavalla. 
<MULTICOLS=2>........</MULTICOLS> Sijoittaa tekstin kahteen palstaan. Palstoja voi olla enemmänkin. 
GUTTER=10 määrittelee pikseleinä palstojen välin. 
WIDTH=500 määrittelee palstojen ja välien yhteisen leveyden. 
Kooste:
Elementti Attribuutit / selitykset
<H1> - </H1> ... <H6> -- </H6> Otsikko koot 1-6
align = left, right, justify tai center - Otsikon keskitystapa
<FONT> - </FONT> Kirjasimen (fontin) määritykset
face - fontti
size - fontin koko
color - fontin väri 
<B> - </B> tai <STRONG> - </STRONG> Lihavointi
<I> - </I> tai <EM> - </EM> Kursivointi 
<U> - </U> Alleviivaus
<BR> Rivinvaihto, ei lopetuselementtiä
<P> - </P> Kappale
align = left, right, justify tai center - kappaleen keskitystapa
<DIV> - </DIV> Lohko alueen erottamiseksi
align = left, right, justify tai center - lohkon keskitystapa
<BLOCKQUOTE> - <BLOCKQUOTE> Sisennys
&copy; &reg; jne.. Korvausmerkit (entiteetit), joilla saadaan käsin koodattuna erilaiset erikoismerkit.