Načrtovanje in razvoj spletnih aplikacij

Besedilo v HTML

Besedilo v urejevalniku zapišemo kot zaporedje znakov, pri čemer ni pomembno, kako razlamljamo vrstice ter koliko presledkov in tabulatorjev pišemo med besedami. Brskalniki vse tabulatorje in znake za novo vrstico obravnavajo kot presledke, več zaporednih presledkov pa obravnavajo kot enega samega. Brskalnik bo skok v novo vrsto naredil šele, ko mu bo zmanjkalo prostora v tekoči vrstici. Zaradi tega lahko besedilo v brskalniku izgleda popolnoma drugače kot smo ga zapisali v datoteki HTML.

Besedilo lahko pišemo v naslovih, odstavkih, seznamih in tabelah, ne smemo pa ga pisati neposredno v telo dokumenta body.

Naslovi

Na voljo imamo več nivojev naslovov (angl. Headings). Za naslove uporabljamo elemente h1 (glavni naslov), h2 (podnaslov), h3, h4, h5 in h6. Nad in pod vsakim naslovom brskalnik pusti nekaj prostora, izpiše jih krepko, velikost pisave pa je odvisna od nivoja. Z ustvarjenim novim naslovom bo izveden avtomatski skok v novo vrstico, prav tako razmik pri naslovu.

V HTML5 ločimo logično in fizično hierarhijo naslovov. h1 se ne uporablja več samo za glavni naslov celotne spletne strani, temveč je to glavni naslov sekcije.

Pri pravilnem oblikovanju dokumenta HTML, za glavne naslove sekcij uporabljamo h1, nato za podnaslove h2, še za nižji nivo h3. Posameznih nivojev ne izpuščamo. Ustrezna uporaba naslovov in njihovih nivojev določi strukturo spletne strani. Pravilna uporaba naslovov pomaga iskalnim robotom postaviti ustrezno strukturo vsebine spletne strani.

Naslovov ne uporabljamo za oblikovanje velikosti pisave, temu služijo slogovne predloge CSS.

Primer naslovov:

<h1> Glavni naslov <br /> (naslov na 1. nivoju) </h1>
<h2> Podnaslov <br /> (naslov na 2. nivoju) </h2>
<h3> Naslov na 3. nivoju </h3>
<h4> Naslov na 4. nivoju </h4>
<h5> Naslov na 5. nivoju </h5>
<h6> Naslov na 6. nivoju </h6>

Glavni naslov
(naslov na 1. nivoju)

Podnaslov
(naslov na 2. nivoju)

Naslov na 3. nivoju

Naslov na 4. nivoju

Naslov na 5. nivoju
Naslov na 6. nivoju

Odstavki

V HTML poznamo več vrst odstavkov. Osnovni element za odstavke je div. Ta poskrbi, da se besedilo prične na začetku nove vrstice, drugih oblikovnih učinkov pa nima.

Za običajne odstavke (angl. Paragraphs) uporabljamo element p, ki pusti še nekaj prostora nad in pod ostavkom.

pre(angl. Preformated) je posebna vrsta odstavka, kjer so vsi presledki, tabulatorji in znaki za novo vrstico prikazani. Znotraj tega elementa brskalnik ne naredi preloma, ko mu zmanjka prostora v tekoči vrstici. Stranski učinek tega elementa je uporaba pisave, kjer so vsi znaki enake širine.

Kot poseben odstavek omenimo še element address, ki ga običajno uporabljamo na koncu dokumenta za navedbo podatkov o avtorju. Vso besedilo izpiše nagnjeno.

Koristen je tudi element hr, ki ga lahko obravnavamo kot odstavek brez vsebine. Nariše pa vodoravno črto.

Primer odstavkov:

<hr />  
<div> Osnovni odstavek. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum 
enim mattis turpis, vel pulvinar sapien est ac leo. </div>  
<hr />
<p> Navaden odstavek. Lorem ipsum dolor sit amet,consectetur 
adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum 
enim mattis turpis, vel pulvinar sapien est ac leo. </p>  
<hr /> 
<pre> Pred definiran odstavek. Lorem       ipsum dolor sit 
						  amet, consectetur 
				adipiscing                 elit. </pre>  
<hr /> 
<address> Podatki o avtorju </address>  
<hr />

Osnovni odstavek. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum enim mattis turpis, vel pulvinar sapien est ac leo.

Navaden odstavek. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum enim mattis turpis, vel pulvinar sapien est ac leo.


 Pred definiran odstavek. Lorem       ipsum dolor sit 
						  amet, consectetur 
				adipiscing                 elit. 

Podatki o avtorju

Prelomi vrstic

Če želimo, da bo brskalnik skočil v novo vrsto na točno določenem mestu, lahko to zahtevamo z elementom <br /> na tistem mestu, kjer naj naredi prelom vrstice.

Primer prehoda v novo vrsto z elementom <br />:

<p>
   To je odstavek, <br />     
   v katerem smo ročno <br />
   naredili nekaj prelomov vrstic.</p>  
</p>

To je odstavek,
v katerem smo ročno
naredili nekaj prelomov vrstic.

Težave povzročajo tudi prelomi vrstic na mestih, kjer ne bi smeli biti. Oglejmo si primer številskega podatka z enoto, ki ga običajno pišemo s presledkom med številko in enoto, na primer 10 cm. Če bi vmes zapisali navaden presledek (kot v prejšnjem stavku), se lahko zgodi, da bo brskalnik ravno med številom in enoto naredil presledek, kar pa ne želimo. Rešitev je v uporabi posebnega presledka, ki mu rečemo trdi presledek &nbsp;. Čeprav se izpiše kot navaden presledek, se obnaša kot črka, torej bo brskalnik prepričan, da je 10 cm ena sama beseda, in vmes ne bo naredil preloma. Z večkratno uporabo trdega presledka lahko izpišemo tud več zaporednih presledkov.

Oblikovanje besedila

Pri fizičnem oblikovanju besedila natančno določimo, kako želimo, da bo prikazan del besedila. Obliko določamo predvsem s CSS, a tudi HTML pozna nekaj oznak s katerimi lahko določimo obliko besedila. Z uporabo elementa b (angl. Bold) bo besedilo izpisano krepko, element i (angl. Italic) besedilo prikaže nagnjeno, z uporabo elementa u (angl. Underline) pa bo besedilo podčrtano.

Z oznako sup besedilo nadpišemo (angl. Superscript), podpišemo pa ga z oznako sub (angl. Superscript).

Primer fizičnega oblikovanja besedila:

<p> To je <b>krepko</b> besedilo. </p>
<p> To je <i>nagnjeno</i> besedilo. </p>
<p> To je <u>podčrtano</u> besedilo. </p>
<p> H<sub>2</sub>O </p>
<p> E = m c<sup>2</sup> </p>

To je krepko besedilo.
To je nagnjeno besedilo.
To je podčrtano besedilo.
H2O
E = m c2

Elementa big in small s katerima smo besedilo povečevali oz. zmanjševali v HTML5 nista več podprta. Prav tako v HTML5 ni več podprt element tt ( angl. Teletype), ki besedilo oblikuje, da dobi izgled, kot bi bilo napisano na pisalni stroj. Omenjene lastnosti v HTML5 določimo s CSS.

HTML5 specifikacije priporočajo uporabo oznak em za ležeč tekst in strong za poudarjeno besedilo.

Kot splošen oblikovni element pa omenimo še element span. Ta nima nobenih privzetih oblikovnih učinkov, uporabljamo pa ga v kombinaciji s stili CSS za oblikovanje besedila.