HTML/Lihtsa lehekülje loomine

Peale seda, kui oled eelmises peatükis saanud rõõmu tunda oma esimesest veebilehest, soovid kindlasti seda üksjagu täiendada, sest olgem ausad - ühel tublil veebilehel leidub palju rohkem kui lihtsalt tekst "dokumendi sisu" - seal on pealkirjad, lingid, pildid ja muudki, mida me kohe järgnevalt ka vaatame.

Järgnevates näidetes käsitletakse üksnes seda, mis jääb HTML-dokumendi märgendite <body> ja </body> vahele. Kasuta eelmises peatükis toodud baasdokumenti ning eksperimenteeri sellega lisades kehaosasse järgnevaid näiteid.

Alustame pealkirjast

HTML-is on kuus erineva taseme pealkirja. Esimese taseme pealkiri on h1, teise taseme oma h2 jne kuni kõige madalama taseme pealkirjani h6. Täht "h" tuleneb inglisekeelsest sõnast heading - pealkiri.

Siin on üks suur ja oluline pealkiri:

<h1>Suur ja oluline pealkiri</h1>

ning siin on üks madalama taseme pealkiri:

<h2>Alapealkiri</h2>

Lisame teksti

Tekst kirjutatakse reeglina lõikude kaupa. Raamatutes algab uus lõik taandreast, veebis taandridu enamasti ei kasutata ja lõikude vahele jäetakse rea jagu tühja ruumi. Lõiku tähistab element p (paragraph).

<p>See on esimene lõik.</p>

<p>See on teine, natukene pikem lõik.</p>

<p>See on kolmas lõik, mis sisaldab klassikalist teksti:
"Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat."</p>

Rõhutame olulist

Teksti rõhutamiseks on element em (emphasis):

<p>Peeter ja Tanel olid <em>erilised marakratid</em>.</p>

Tugevaks rõhutamiseks on element strong (strong emphasis):

<p>Esimese veebilehitseja looja on <strong>Tim Berners Lee</strong>.</p>

Lisame pilte

Piltide lisamiseks on element img (image - pilt), mille juures tuleb määrata pildifaili aadress src (source - allikas) ning alternatiivtekst alt juhuks, kui piltide näitemine pole võimalik.

Kuna element img ei sisalda mingit teksti, siis selleks, et poleks tarvis kirjutada pikalt:

<img src="kass.jpg" alt="minu ja minu kass"></img>

on mugavam ja otstarbekam kasutada lühendatud kirjaviisi:

<img src="kass.jpg" alt="minu ja minu kass" />

Lingime teisi lehekülgi

Lingid on need, mis teevad veebist selle, mis ta on - üheainsa hiirevajutusega võid jõuda teisele poole maailma ning sama kiiresti tagasi. Lingi jaoks on märgend a (anchor - ankur). Lisaks on tarvis määrata, millisele veebilehele me viitame, lisades vastava lehe täieliku aadressi.

Näiteks link Tartu Ülikooli lehele:

<p>Eesti suurim kõrgkool on <a href="http://www.ut.ee">Tartu Ülikool</a>.</p>

Linkidega võib viidata ka omaenda veebilehe alamlehekülgedele. Kui teed veel ühe HTML-faili ja salvestad ta samasse kataloogi praegusega, siis võid sellele viidata järgneva lingiga:

<p>Vaata ka minu tehtud <a href="teine.html">teist lehekülge</a>!</p>

Muidugi eeldusel, et teise faili nimi on "teine.html".

Mitmesugused loendid

Mitmesuguste andmete jaoks nagu:

sisukorrad,
nimekirjad,
jms,

on hea kasutada loendeid.

Nummerdamata loendite jaoks on element ul (unordered list) ja
Nummerdatud loendite jaoks ol (ordered list).
Loendi elemendid märgitakse elemendiga li (list item).

<h1>Sisukord</h1>

<ul>
<li>Sissejuhatus</li>
<li>Pealkiri 1</li>
<li>Pealkiri 2</li>
<li>Kokkuvõte</li>
</ul>

<h1>Kümnevõistluse tulemused</h1>

<ol>
<li>Mihkel Murakas</li>
<li>Karl Kopter</li>
<li>Toomas Muru</li>
<li>Peeter Saar</li>
</ol>

Kirjutame luuletuse

Arvatavasti oled märganud, et reavahetused ei avalda lehekülje välimusele brauseris vähimatki mõju. Üldiselt pole sellest lugu, aga mis siis, kui me tahame kirjutada midagi, kus revahetused esinevad ühe lõigu sees - näiteks luuletust?

Reavahetuse tekitamiseks saame kasutada elementi br (break):

<p>Igav liiv ja tühi väli,<br />
taevas pilvine;<br />
jõuan tulles metsa äärde,<br />
tuleb nõmmetee.</p>

<p>Pedak heleroheline,<br />
kask kuldkollane!<br />
Nõmm on sügisele<br />
langenud kaenlasse.</p>

Raamat: HTML

<< Alustame

Tekstilõigud ja reavahetused >>

Sisukord