 | Peatüki sisukord |  |
1.3 Dokumendi struktuur
Järgmisena proovime luua oma esimest HTML dokumenti. HTML dokumendi loomiseks on vaja tekstiredaktorit. Tekstiredaktoriks võib vabalt olla Notepad või Wordpad. Kui oled Windows-i kasutaja, soovitame kasutada Notepad++, mida saab tasuta alla laadida siit. See võimaldab dokumenti paremini lugeda ning sisaldab automaatteksti funktsiooni (ingl. k. autocomplete) - dokumendi kirjutamise käigus pakub programm variante ning lõpetab lauseid sinu eest.
Tekstiredaktoris avatud fail tuleb salvestada laiendiga .html või .htm. Tavaliselt kannab veebilehestiku pealeht nimetust index.html. Veebilehitsejad on programmeeritud ära tundma seda faili kui esilehte. Kui tahad anda oma veebidokumendile mini muu nimi, siis püüa vältida tühite, sümbolite ja täpitähtede kasutamist.
Iseseisev ülesanne:
1. Tee tekstiredaktor lahti.
2. Salvesta fail nimega index.html
3. Lisa faili sisse järgmised read:
<!DOCTYPE html> <html> <head> <title> See on esimene katse </title> <meta charset="utf-8" /> </head> <body> <h1> Tere tulemast! </h1> <p> See on esimene <b> kiri </b> selles dokumendis. </p> </body> </html>
4. Salvesta dokument uuesti.
5. Ava fail enda veebilehitsejaga (näiteks Google Chrome-iga).
6. Kui kõik tehtud õigesti, siis tulemus näeb veebilehitsejas välja järgmiselt:
Mida tähendavad erilised sõnad sulgudes meie esimeses HTML dokumendis? Need on HTML märgendid - HTML keele spetsiaalsed sõnad.
Igal veebilehel on kindel struktuur, millega peaks arvestama veebilehe valmistamisel. Struktuur määrab paika märgendite asukoha ja järjekorra veebilehel.
1. <!DOCTYPE html>
2. <html> ja </html>
<html> ja </html> tähistab seda, et nende vahele jäävad read kujutavad endast ühtset HTML dokumenti. Kõik, mis on väljaspool neid märgendeid, veebilehitseja ignoreerib (väljaarvatud deklaratsiooni DOCTYPE).
3. <head> ja </head>
<head> ja </head> kirjutatakse HTML-märgendite vahele enne veebilehe keha. Päis võib sisaldada metaandmeid (ingl. k. metadata) ehk andmeid andmete kohta, nagu näiteks dokumendis kasutatavad skriptid, stiililehed, võtmesõnad, dokumendi pealkiri, tekstikodeering, stiilileht, märksõnad otsingumootorite jaoks jne. Reeglina pole metaandmed veebilehe vaatajale otseselt nähtavad.
<title> ja </title>
<title> ja </title>. Pealkiri paigutatakse veebilehitseja tiitliribale, ning seda pealkirja kasutatakse, kui salvestada lehte veebilehitseja järjehoidjate hulka. Selle elemendi sisu kasutatakse ka otsingumootorites, mistõttu muutub see järjest olulisemaks!
charset
6. <body> ja </body>
<body> ja </body>. Kogu veebilehitsejas kuvatav info (tekst, viidad, kujundid, tabelid, vormid jne.) asub just selles lehe osas. Siia pannakse kirja kõik, mida soovime kodulehel kuvada. Praegu on meie veebidokumendis on olemas üks pealkiri (märgendite <h1>...</h1> vahel) ja üks lõik teksti (märgendite <p>...</p> vahel).
<!-- …-->
<!-- …-->. Näiteks:
<!--Kommentaar, mida veebilehitseja ei näita-->
Iseseisev ülesanne:
Salvesta esimene programm nii, et saaksid seda kasutada iga uue veebilehe põhjana.
Veebilehe keha märgendite paari <body> ja </body> vahele paigutatakse veebilehe sisu (tekst, pildid, videod, viited jne.). Sisu võiks samuti olla jagatud erinevate semantiliste plokkide vahel, et otsingumootoritel oleks lihtsam veebilehest aru saada ja teostada intelligentsemat otsingut võtmesõnade järgi (mõtte kogu sisu järgi).
Mõned populaarsemad plokk-elemendid sisu jaoks:
<header>...</header>– päis, mis sisaldab veebilehe nime või pealkirja<nav>...</nav>– menüü lingid navigeerimiseks<article>...</article>– uudis või artikkel, mis esindab uudise plokki või blogi postitust<section>...</section>– peatükk; tavaliselt sisu on jagatud kolmeks peatükiks - sissejuhatus, põhisõnum, kokkuvõte<aside>...</aside>– peatükist eraldi plokk, mis on uudisega seotud kuid ei ole eraldiseisev artikkel<footer>...</footer>– jalus; sisaldab näiteks aastat, kontakti, litsensid vms
Näide:
<!DOCTYPE html>
<html>
<head>
<title> See on esimene katse </title>
<meta charset="utf-8" />
</head>
<body>
<header>
<h1>Sissejuhatus semantilisse veebi</h1>
</header>
<nav>
Avaleht | Uudised | Kontakt
</nav>
<section>
<h2>Arvutimaailm</h2>
<article>
<h3>Semantiline veeb</h3>
<p>Semantilise veebi kontseptsioon on raamistik, mille kohaselt peaks andmed veebis olema defineeritud ja lingitud selliselt, et neid saaks kasutada efektiivsemalt automatiseerimiseks, integreerimiseks ja erinevate rakenduste vaheliseks taaskasutamiseks.</p>
</article>
<article>
<h3>Intelligentsed agendid</h3>
<p>Semantilise veebi eesmärgiks on ka struktureerida veebilehtede sisu nii, et tarkvaraagendid suudaksid iseseisvalt kasutaja huvides sooritada keerukaid ülesandeid. Siin tulevad appi intelligentsed agendid, ehk väikesed tarkvaraprogrammid, mis oskavad kasutaja poolt tehtud päringutele vastates ammutada informatsiooni Internetist.</p>
</article>
</section>
<aside>
<p>Lisa pilt</p>
</aside>
<footer>
<p>AM.ee | https://www.am.ee/ | 29. jaanuar 2005</p>
</footer>
</body>
</html>
- DOCTYPE deklaratsiooni ülesehituse detailidest saab lugeda siit.
- DOCTYPE deklaratsioon sõltub HTML versioonist. Kui on vaja kasutada varasemat HTML versiooni, kontrolli deklaratsiooni eeskirja siit.
- Rohkem infot päises kasutatavatest märgenditest ja metaandmetest leiad siit.
- HTML5 Semantic Elements (ingl.k.)
- Sissejuhatus semantilisse veebi
| Peatüki sisukord | |