HTMLi kursus #2 – Hello World

HTMLi kursus #2 – Hello World

Olen otsustanud alustada uue seeriaga, kus õpetan sulle selgeks HTMLi. See kursus sobib väga hästi algajatele, kes tahavad alustada veebiarendusega.

Eelmine osa: HTMLi kursus #1 – Alustamine

Sissejuhatus HTMLi ja Hello World

Natukene HTMList ja tema ajaloost

Üldiselt HTMList

HTML (HyperText Markup Language ehk hüperteksti märgistuskeel) on keel, millega märgendatakse veebilehti. HTML paneb paika üksnes dokumendi struktuuri, kuid võimaldab veebilehele kaasata skripte, eeskätt JavaScripti ja CSSi, millega kirjeldatakse lehe kujundus.

Maakeeli öeldes on HTML veebikeel, millega lihtsalt tehakse veebilehele algne sisu: tekstid, pildid ning videod.

Süntaks

HTML koosneb HTMLi elementidest, mille järgi siis brauser kuvab dokumendi sisu. Tuleks meelde jätta, et iga element on nagu kast ehk siis veebileht koosneb kastidest, mis on tavaliselt üksteise peale pandud (sellest järgmistes postitustes).

Iga element on veebilehe lähtekoodis tähistatud vastavate märgendite abil. Kõik HTML-märgendid on ümbritsetud noolsulgudega < ja >. HTML-märgendid annavad brauserile teada, mida sisuga teha, mil moel seda vormindada ja kuvada.

Enamik HTML-märgendeid käib alati paaris: on alustav märgend ja on sulgev märgend, mida alustavast eristab kaldkriips / nurksulgudes elemendi nime ees, näiteks alustav ja sulgev tekstilõigu märgend on vastavalt <p> ja </p>.

Lisaks on ka olemas parameetrid ja elemendid, mis ei vaja sulegmist, aga nendest ma räägin juba järgmistes postitustes.

Süntaksi ehk HTMLi grammatika näide

<algusmärgend>Siia tuleb tavaliselt sisu</lõppmärgend>

Nt. <p>Tere Maailm!</p>

Ajalugu

HTML-i lõi koos veebiga 1990. aastal Tim Berners-Lee. Aastal 1994 asutas ta W3C, mis on sellest ajast alates tegelenud muuhulgas ka HTML-i standardite väljatöötamisega.

Nimekiri W3C välja töötatud HTML-i versioonidest:

  • HTML 2.0
  • HTML 3.2
  • HTML 4.01
    • HTML 4.01 Strict – W3C soovituslik versioon.
    • HTML 4.01 Transitional – lubab kasutada ka esitlusega seotud elemente ja atribuute. See lihtsustab ületulekut varasematelt HTML-i versioonidelt.
    • HTML 4.01 Frameset – võimaldab veebilehe tegemisel kasutada nn raame (frame).
      Viimased kolm on paralleelselt formuleeritud ka XHTML-is.

Kõige uuem versioon on HTML5.

Allikas: Vikipeedia

Hello World

Mida me vajame “Hello World” veebileheks

Siin ma räägin ära põhilised elemendid mida me kasutame tänases veebilehes/õpetuses.

<!DOCTYPE html> – Iga HTMLi dokument peaks algama sellega. See ei ole kohustuslik, aga on soovituslik. Seda kirjutatakse tihti peale formaalsusest, et brauser saaks paremini aru, mis dokumendiga on tegemist.

<html></html> – See nüüd näitab veebilehe algust. Siia sisse tavaliselt tulevad kõik teised HTMLi elemendid (ehk teised HTMLi elemendid on <html> elemendi lapselemendid).

<head></head> – Siia sisse tuleb sisu, mida kasutaja ei peaks nägema ehk siis viited ja lingid kõikidele backend operatsioonidele (erinevad stiili- ja skriptimisfailid, brauseri seadistused ja otsingumootoritele kasulik info jne).

<title></title> – Tavaliselt <head> elemendi lapselement (ehk <title> element asub <head> elemendi sees).<title> element annab veebilehe üldpealkirja, seda näeb brauseris tabide peal. Otsingumootoritele on see väga tähtis.

<body></body> – Siia sisse tuleb sisu, mida kasutaja peaks nägema. Kõik tekstid, pildid, videod jne on <body> sees. Nagu nimigi ütleb on see veebilehe “keha” ehk põhisisu.

<p></p> – Tekstilõigu ehk paragraafi element. Siin käib lihtsalt tavaline tekst, mida tahetakse lihtsalt kasutajale edasi anda.

HTMLi ülesehitus

Kui nägite siis ma pidevalt kordasin, et mis on mingi elemendi lapselement ja mis on mingi elemendi emaelement. See on väga tähtis, et sa sellest aru saaksid, sest sellest sõltub peaaegu, et kogu veebilehe korraldus. Ma toon välja väikese “kaardi”, mismoodi tavaliselt veebileht on ülesehitatud.

<!DOCTYPE html>
<html>
  <head>
    *Siia tulevad ka erinevad backend operatsioonid*
    <title></title>
  </head>
  <body>
    *Siia sisse tuleb veebilehe põhisisu: tekstid, pildid, videod jne*
    <p></p>
  </body>
</html>

Kaart seletatud

<html></html> – Kõikide elementide emaelement (või siis vanaemaelement)

<head></head> – <html> elemendi lapselement

<title></title> – <head> elemendi lapselement

<body></body> –  <html> elemendi lapselement

<p></p> – <body> elemendi lapselement

Hello Worldi veebileht

Nüüd on aeg teha valmis sinu esimene veebileht. See on küll väga algeline, aga tegelikult on kõik põhitõed samad ka suuremates veebilehtedes.

Kõigepealt loo fail index.html ja ava fail oma lemmikrekstiredigeerijas. Kui sul pole ühtegi, siis võid ühe valida siit.

Alustame sellest, et kirjutame esimesele reale <!DOCTYPE html>.

Edasi (järgmisele reale) kirjutage <html></html>.

Nüüd <html> elemendi sisse kirjutage (see tähendab, et viige kirjutamiskursor kahe noolsulu vahele ja vajutage klahvi “enter” ) <head></head> ja selle alla (ehk järgmisele reale) kirjutage <body></body>.

Järgmisena kirjutage <head> elemendi sisse <title></title> ja selle sisse omakorda (ilma jutumärkideta) “Hello World veebileht”.

Nüüd kirjutage elemendi <body> sisse <p></p> ja selle sisse omakorda (ilma jutumärkideta) “Hello World”.

Nüüd avage fail brauseris ja sa peaksid nägema tabi pealkirjaks “Hello World veebileht” ja veebilehel peaksid nägema teksti “Hello World”.

Kui kõik oli nõnda nagu ma just kirjeldasin, siis palju õnne! Sinu esimene veebileht on valmis. Aga kui midagi läks nihu siis võrdle minu koodi, mis asub allpool, enda omaga. Lisaks sellele on mul ka allpool interaktiivne näide, millega saad katsetada ja eksperimenteerida.

Edaspidi ma nõnda ükshaaval ei hakka samme läbi käima, vaid annan sulle ette terve koodi (koos veebilehega) ette ning seletan lahti, mida mingi asi teeb või tähendab. Tegin täna seda sellepärast, et asjast paremini aru saaksid. Järgmistes osades kirjutadki HTMLi umbes nõnda nagu ma seletasin.

Lõppprodukt peaks olema umbes selline:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World veebileht</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

 

Interaktiivse näite leiad siit (tabi pealkiri on küll teine, aga veebilehe sisu on sama). Soovitan soojalt sul lisada erinevaid tekste, vahetada elemente ja lihtsalt selle interaktiivse näitega või enda veebilehe failiga eksperimenteerida, sest siis sa õpid kõige rohkem.

Ja ongi kõik selleks korraks. Need on tegelikult HTMLi põhitõed, mis peavad olema peas.

Kas sul tekkis küsimusi? Kui jah, siis anna kommenteerides teada 🙂 !

HTMLi kursus 2.5 – 3. osa konspekt

Järgmine osa: HTMLi kursus #3 – Tekst

 

Senikaua olge tugevad ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *