ITV0110 1. töö: Html põhioskused

Allikas: Lambda
xkcd tags

Esimese praktikumi ülesanne on teha väike veebisait iseenda kohta.


Kuidas teha?

Lehti tehes pead tingimata kasutama kõiki alltoodud tehnoloogiaid ja tegema ära kõik nõutud osad: sisuline eesmärk praktikumil on õppida neidsamu baastehnoloogiaid (reavahed, pealkirjad, lingid, värvid, tabelid, pildid jms) kasutama ja oma faile serverisse üles laadima.

Kui oled varem teinud veebilehti, siis need varasemad selle praktikumi tulemuseks ei kvalifitseeru (küll aga oskad sel juhul ülesande väga ruttu valmis saada).

Igati sobiv ja soovitav on lehtedele lisada muid mõistlikke ja huvitavaid asju ka omal initsiatiivil.

Lehed tuleb luua hariliku teksti(programmeerimis)redaktoriga, mitte puhtalt visuaalse redaktoriga.

Esitamisel peab oskama juhendajale seletada, mida konkreetsed htmli markupi osad sinu lehel teevad ja miks nad seal on. Sulle arusaamatuid htmli markupe elemente ei tohi kasutada (st enne kasutamist tuleb nendega mõne htmli õppematerjali abil tutvuda!). CSS ja javascript on lubatud (vaja neid siin praksis ei ole!), aga ainult juhul, kui oskad seletada, kuidas nad täpselt töötavad.

Lehed tuleb pärast oma arvutis valmistegemist laadida dijkstra.cs.ttu.ee serverisse alamkataloogi public_html/prax1: põhjalik õpetus selleks on siin lehel lõpupoole. Sinu leht peaks paistma siis niimoodi: http://dijkstra.cs.ttu.ee/~UniID/prax1/index.html kus kataloog prax1 tuleb ise teha ja index.html on pea-lehekülje failinimi. index.html asemel võib urlis lihtsalt öelda kataloogi, niimoodi: http://dijkstra.cs.ttu.ee/~UniID/prax1/

Soovitav on teha lehed järgmiste etappidena ja oma arvutis (mitte kohe serveris), kuid esitada tuleb töö tervikuna, st kui kõik etapid valmis ja serverisse laetud.

Kui soovid lehti kenamaks teha (ei ole selles ülesandes veel kohustuslik), siis on hea mõte järgida neid soovitusi.

Mis veel: kirjuta kõik tagid väikeste tähtedega, sest nii on kombeks. Kui kasutad HTML-s päist (ei ole selles praksis kohustuslik), siis kasuta juba HTML5 päist, st <!DOCTYPE HTML> ilma selle PUBLIC jne pika jututa lõpus.

Esimene etapp

Kirjuta teksti(programmeerimis)redaktoriga 5 html lehte, mis on omavahel lingitud ja sisaldavad infot sinu enda kohta (kõik ei pea olema tõene info!). Pealehel olgu mh menüü, näiteks: Minust, Sõbrad, Lingid, Hobid jne.

Igal lehel on minimaalselt pealkiri ja sisu, kusjuures sisu peab olema "tõene", s.t. võib olla väljamõeldud aga ei tohi koosneda placeholder-tekstidest.

Kuidas kõige mugavam on menüü teha leiab näiteks siit: https://www.w3schools.com/css/css_navbar.asp

Teine etapp

Joonista mõne graafikaprogrammiga 5 pilti (mõned neist võivad olla ka sinu enda tehtud fotod, osad peavad aga olema joonistatud), salvestage neist osad PNG või GIF ja osad JPEG formaati ning lisage nad koduleheküljele eelmisest ülesandest (5 html lehte, omavahel lingitud). Kõigil lehtedel olgu siis mõni ise joonistatud/pildistatud PNG või GIF või JPEG formaatides pilt.

Neile lehtedele tuleb järgmisena panna osadele taustavärv ning osadele taustapildid. Samuti tuleb ära muuta tavaliste ning külastatud linkide värvid (vaikimisi on need üldiselt sinised ning lillad) muutes nad endale meeldivaks.

Kolmas etapp

Tee alltoodud sorti tabel, kasuta tabeli päises taustavärve ja püüa tõepoolest süveneda tabeli tegemise põhimõtetesse (mitte lihtsalt copy-paste kuskilt näite järgi), sest sul on kindlasti vaja oskust tabeli html-teksti käsitsi parandada.

Tabeli sisu peab olema reaalne või väljamõeldud info sinu enda või mingite sinu lemmikasjade kohta. 

Nr 	Nimi 	         Matemaatika 	Inglise keel
1 	Aleksei Matiisen 95 	        77
2 	Lea Kuusik 	 88 	        99
3 	Leo Roost 	 32 	        83
4 	Tarmo Eessaar 	 100 	        100

Neljas etapp

Riputa kõik oma saidi failid ja pildid dijkstra serverisse üles. Kõigepealt kopeeri lihtsalt üks fail (näiteks nimega leht.html) serverisse katseks otse public_html kataloogi, ja vaata brauserist, kas näed seda aadressilt http://dijkstra.cs.ttu.ee/~UniID/leht.html kus Eesnimi.Perenimi on sinu arvutiklasside kasutaja kasutajatunnus: seal võib veel lisaks olla igasugu numbreid vms,

Tilde ~ peab ees olema ja väiketähed/suured tähed peavad olema täpselt nii, nagu kasutajatunnuses on.

Kui OK, siis tee public_html alla alamkataloog prax1 ja pane kõik lehed ja pildid otse selle alla. Põhileht peaks olema nimega index.html, siis töötab ka lihtsalt kataloogi-url http://dijkstra.cs.ttu.ee/~UniID/prax1/

Dijkstrasse riputamise detaile vaata siin lehelt lõpupoole olevast õpetusest. Sisuliselt samamoodi toimub mistahes linuxiserverisse ülesriputamine.

Praksi esitamine ja hindamine

Kirjuta mõnele lehele selgelt nähtavalt oma nimi ja matriklinumber, siis leiab praksijuhendaja need üles ja ei pea küsima.

Kui lehed valmis, mine praksijuhendaja juurde ja näita lehed serveris ette.

Esimese praksi eest saad - kui kõik osad tehtud - alati täispunktid, v.a. juhul, kui esitamisega hiljaks jääd (siis saad ainult pooled punktid). Kui mõned nõutud osad on puudu, siis suunab juhendaja sind lihtsalt neid lisama ja ei võta enne praksi vastu.

Meeldetuletuseks, et mis peab lehtedel olema:

  • Kokku vähemalt viis lingitud lehte.
  • Esilehel menüü.
  • Vähemalt viis pilti, mis on su enda tehtud (fotod või joonistatud).
  • Vähemalt üks enda joonistatud pilt.
  • Tabel mingi sisulise sinuga seotud infoga.
  • Sama tabeli päis taustavärviga.
  • Üks leht taustavärviga.
  • Üks leht taustapildiga.
  • Vähemalt ühel lehel muudetud värvidega (mitte vaikimisi sinine) lingid.
  • Sinu lehed peavad olema näha dijkstra serveris aadressil http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/prax1/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suued/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka).

Soovitusi

Failid ja neile viitamine

Failid pane mistahes kataloogi oma masinas. Kõige lihtsam on hoida kõik failid ühes kataloogis ja viidata neile nii: <a href="minufail.html">minu link</a>. Seepeale püüab brauser leida faili minufail.html samast kataloogist kus sisselaetud fail. Kui oled mõne lehe pannud aga näiteks alamkataloogi nimega alam, siis viita talle nii: <a href="alam/minufail.html">minu link</a> kus kaldkriips peab olema tõusev. Seepeale otsitakse sisselaetud faili kataloogist alamkataloogi alam ja sealt juba faili minufail.html.

Tähestik

Tähestiku kodeeringu osas pane tähele järgmist:

  • latin1 ehk iso-8859-1 sobib enamuse euroopa tähtede jaoks, aga näiteks läti ja vene tähti seal kodeerida ei saa.
  • utf-8 on universaalne kodeering, mis sobib kõigi tähestike jaoks.
  • peale universaalse utf-8 ja euroopa standard-iso-8859-1 on olemas veel suur hulk muid kodeeringuid eri tähestike jaoks: nende asemel on aga praktilisem kasutada utf-8
  • redaktoris saad seada, et mis kodeeringus redaktor täpitähti salvestab: näiteks scites otsi menüüst File->Encoding ja sealt vali kas "code page property" (see teeb üldjuhul latin1 ehk iso-8859-1) või utf-8 (see teeb siis muidugi utf-8)
  • kui sa ei ütle <head>...</head> sees, mis tähestiku-kodeering html-s on, arvab brauser tüüpiliselt ise, et küllap on see nn latin1 ehk iso-8859-1.
  • brauserile saab konkreetse tähestiku öelda, kui teed oma lehel struktuuri, kus oluline osa tähestiku jaoks on charset=UTF-8 (selle asemel võid vajaduse järgi kasutada siis näiteks iso-8859-1 vms): 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head
<body>
...
</body>
</html>
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> asemel saad kasutada ka <meta charset="UTF-8">

CSS

CSS-i osas tasub arvestada, et:

Enamust kujundusnüansse on lihtne teha CSS-ga. CSSi on kõige lihtsam kasutada nn inline-css-na, st sead oma lehe osade väljanägemist tagiparameetritega a la style="color: green" või style="font-family: Arial, Helvetica, sans-serif" näiteks nii: <body style="font-family: Arial, Helvetica, sans-serif"> . Aga, nagu öeldud, kõiki siin praksis nõutud asju saab ka ilma css-ta teha.


Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra: kõik kodutööd tuleb sinna üles panna, kasutades seejuures alamkatalooge prax1, prax2, jne vastavalt praksi numbrile: iga praks oleks omaette alamkataloogis. Niisama esialgu katsetamiseks ei ole alamkatalooge vaja, need on vajalikud õppejõududele, et sinu kood scriptide abil automaatselt üles leida. Põhileht/avaleht olgu nimega index.html, siis töötab otse kataloogi-url ilma failinimeta.

Enne failide serverisse riputamist on mõistlik teha kogu süsteem - või enamus - valmis lihtsalt oma arvutis/arvutiklassi arvutis.

Ligipääs

Dijkstrasse sisselogimiseks on sul vaja omada TTÜ arvutiklasside klasside kontot kujul Eesnimi.Perenimi (siin võib tekkida probleem täpitähtede, tühikutega jne).

Kui sul ei ole kasutajatunnust või oled parooli kaotanud, saad selle lasta teha arvutiklasside administraatorite juures. Teine variant on kasutada portaali https://pass.ttu.ee : logid sinna sisse id-kaardi või mobiiliga ja saad ise parooli muuta.

Programmid failide kopeerimiseks serverisse

Failide kopeerimiseks serverisse kasuta windowsil programme winscp või Filezilla. Linuxist ja Macist kopeerimiseks kasuta käsurea programmi scp.

Arvutiklassides leiad Winscp "Application catalog" programmi jaotusest "terminals": sealt saad ta installeerida. Alternatiivina saab Winscp ja Putty lihtsalt veebist alla laadida ja ilma eri-installeerimiseta käivitada: paki zip kataloog lahti ja võta exe välja.

Winscp esmakordsel käivitamisel vajuta "New" ja täida host (dijkstra.cs.ttu.ee) ja kasutajanime ning parooli väljad, muid asju pole vaja seada. Ülevalt kastist "File protocol" peaks olema valitud SFTP, see on tõenäoliselt kohe vaikimisi valik.

Winscp kasutamise juures tasub teda veidi mugavamaks sättida:

  • Options->preferences menüü alt mine Environment/interface ja vali "Commander", siis tekib kahe alamaknaga kasutajaliides, kus ühes on sinu masin ja teises server: nii on mugavam faile kopeerida.
  • Options->preferences menüü alt mine "Editors", vajuta "add", vali oma progeredaktor (otsi näiteks C:\Program Files(86) alt Notepad++ ja nihuta ta seejärel samal lehel tabelis päris üles (vali tabelist tema rida ja vajuta "up" kuni lõpuni): siis saad sellesama redaktoriga oma masinast otse redigeerida serveris olevaid faile (katsetatud scite ja notepad++ ja bracketsiga, töötab).
  • Options->preferences menüü alt mine Integration/applications ja vali sealt "Browse" abil oma masinast putty.exe (täispath) ja sea "Remember password ..." peale: siis saad winscp tööriistariba keskel oleva väikese putty ikooni abil otse putty käivitada ja seal piisab siis ainult kasutajanimest.
  • Session menüü alt tee "Save session" ja checki "Save password", siis on edaspidi serverisse logimine lihtsam: ei pea uuesti sisestama kasutajanime ega parooli.

Need muutused käivituvad - vist - alles peale winscp taaskäivitamist.

Lisaks on täiesti OK - aga keerulisem - variant windowsil kasutada putty-ga komplektis olevat DOS-i käsurea programmi pscp.exe näiteks nii (loomulikult pead oma failide, programmide asukohad ja nime ära muutma): 

    F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp tst1.html tammet@dijkstra.cs.ttu.ee:public_html/
    F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp * tammet@dijkstra.cs.ttu.ee:public_html/

Veebikeskkonna ettevalmistamine ja failide üleslaadimine

Kõik asjad, mis paigutad oma dijkstra kodukataloogi alamkataloogi public_html, on veebis nähtavad. See kataloog peaks olema sulle juba ette valmis tehtud.

Tekita algul prooviks otse public_html alla katse.html nimeline fail ja vaata, kas brauserist avaneb

http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/katse.html

Kui ei avane, on võimalik, et sul on vaja muuta katse.html failiõigusi, nagu edaspidises kirjas. Üldiselt aga winscp-ga üles laadides on failiõigused kohe OK ja neid muutma ei pea.

Nüüd loo public_html alla kataloog prax1:

  • Winscp abil kasuta serveriaknas kataloogi-ikooni tärnikesega üleval paremal: create directory (F7). Seejuures peaksid vaikimisi failiõigused olema kohe OK ja neid seadma ei pea. Oluline, et "Set permissions" all oleks Owneri järel RWX linnukesed, Group ja Others järel R X linnukesed.
  • Kui sa winscp-d ei kasuta, siis käsurealt sisse logides tee mkdir public_html/prax1 ja sea failiõigused, nagu järgnevas räägitud.

Seejärel pane oma rakenduse failid otse sinnasamasse prax1 alla, kasutades failinimesid, mis eelpool nõutud (index.html pealeht, muud lehed enda valikul).

Kui kataloog on olemas ja sinna mõned faili pandud, suunake oma brauser dijkstra aadressile, mille saate, kui lisate serveri nime järgi tilde ja kasutajanime ja siis kataloogi või faili, mis olete pannud public_html alla (näiteks sedasi, aga asendage oma kasutajanimi ära):

http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/index.html või http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/prax1/index.html või http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/prax1/

Idee selles, et urlis http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/ järel tulevad failid/kataloogid on täpselt need, mis sul public_html kataloogi sees.

Failiõiguste seadmine:


Kui oled värskelt public_html alla prax1 kataloogi teinud, on tal tõenäoliselt kohe sobivad failiõigused. Kui ei, siis on vaja anda talle lisaks lugemis-ja nimekirjanäitamise õigus niimoodi: chmod a+rx public_html/prax1

Failile lugemisõiguse andmine (see tekib üldjuhul automaatselt ja ei ole vaja ise teha): chmod a+r index.html

public_html tegemine (erijuht)

Kui sul public_html kataloogi miskipärast ei ole, saad ta ise käsurealt luua niimoodi: mkdir public_html

Käsurea saamiseks tuleks üle SSH ühenduse dijkstra käsureale logida (putty või ssh vms)

Sisselogimine käsureale

Esimese ja teise praksi jaoks ei ole otseselt vaja serveri käsurida kasutada ehk sinna sisse logida. Järgmiste prakside jaoks aga on, nii et võid seda kohe katsetada.

Sisselogimiseks on Windowsil kõige lihtsam kasutada programmi putty (või alternatiivina kitty) ja Linuxil või Macil või käsureaprogrammi ssh.

Putty leiad arvutiklassidest programmi "Application catalog" jaotusest terminals: sealt saad ta ise installeerida. Mõistlik on panna endale putty viit desktopile.

Alternatiivina saad lihtsalt laadida endale veebist putty.exe: selle saab otse käima lasta, mingit eri-installeerimist ei ole vaja.

Putty või Kitty käimaminekul on sul vaja sisestada:

  • Dijkstra aadress: dijkstra.cs.ttu.ee (see tuleb puttyl sisestada "Host name" väljale)
  • Kasutajanimi ja parool: TTÜ kasutajanimi ja parool (neid küsib putty siis, kui ta serveriakna avab).

Puttyl tasub Window/appearance alt seada meeldiv font ja Window/color alt meeldiv värv (ntx valge tagapõhi ja must värv). Samuti tasub kindlasti teha "save session" (enne pane "Saved session" väljale endale meeldiv nimi), siis jätab Putty settingud meelde ja sisenemisel ei pea enam arvuti nime sisestama: valid listist sessiooninime ja teed "Load" ja seejärel "open".

Hea alternatiiv puttyle on kitty, mis on muidu täpselt nagu putty, aga on valmis sinu kasutajanime ja parooli meelde jätma, et ei peaks igakord uuesti sisestama.

Linuxi käsurida ja serveris tegutsemine

Esimeses kahes praksis sul otseselt käsurida vaja ei lähe, aga kolmandast alates läheb. Põhimõtteliselt peaks piisama neist käskudest: 

 pwd (mis kataloogis ma praegu olen)
 ls -l (vaata kataloogi sisu pikas formaadis)
 cd katalooginimi (mine sinna kataloogi)
 cd .. (mine üks tase kõrgemasse kataloogi)
 less failinimi (näita faili sisu: seal sees liigu nooleklahvidega ja lõpeta tähega q)
 cp kust kuhu (kopeerib)
 rm failinimi (kustutab)
 mkdir katalooginimi (teeb uue kataloogi)
 rmdir katalooginimi (kustutab kataloogi: see tuleb enne tühjendada)
 chmod a+r failinimi (teeb faili kõigile loetavaks, et ntx veebist kuvada)
 chmod a+rx failinimi (teeb faili kõigile käimapandavaks, eeskätt cgi programmide jaoks)
 vi failinimi (redigeeri faili lihtsa redaktoriga vi)

Linuxi käsurea kasutamist tuleb uurida omal käel. Sobivat lugemist lihtsamatest keerulisemateni:

Väga kasulikud asjad meelde jätta:

  • Üles ja alla nooleklahvid võtavad automaatselt ette varasemaid/hilisemaid käske, et neid ei peaks uuesti sisse tippima
  • kui tipid failinime esimese otsa ja vajutad tab klahvi, otsib süsteem automaatselt failinime lõpu (kui sul muidugi pole mitut sama algusega faili)
  • Suured ja väikesed tähed on unixis täiesti erinevad asjad, erinevalt windowsist. Näiteks sinu html/javascript sources olevad failinimed peavad olema antud täpselt selliselt, nagu failinimi tegelikult on (kui sources failinimi pilt.jgp, siis peab olema tegeliku faili nimi ka pilt.jpg, aga mitte näiteks pilt.JPG).
  • Üldiselt ei ole hea mõte kasutada failinimesid, kus sees tühikud ja/või täpitähed. See on võimalik, kuid tekitab rohkem probleeme ja ebamugavusi, kui asi väärt on. Seega kasuta näiteks "minu überpilt.jpg" asemel "minu_yberpilt.jpg" vms.
  • oma programmide käivitamiseks (oletame, et sul on kataloogis programm minuproge) tipi ./minuproge . Seda punkt-slashi ei ole vaja panna, kui sul on PATH muutuja sobivaks seatud, aga selle seadmisega pole tingimata vaja jännata.

Failide muutmine otse serveris

Siin on kolm veidi erinevat võimalust:

  • redigeerida faile mõne serveris oleva redaktoriga, näiteks vi (loe veidi vi kohta).
  • redigeerida faile oma masinas oleva redaktoriga, mis võimaldab neid otse serverist avada ja sinna kirjutada (head variandid selleks on winscp ja redaktoriks sea endale meeldiv redaktor, a la notepad++, scite või brackets.
  • ja lõpuks on alati variant redigeerida faile oma masinas ja kopeerida nad peale muutmist serverisse (nagu varem kirjeldatud)

Üldiselt on kõige mugavam teha võimalikult kõik oma masinas valmis, katsetada ära ja alles siis kopeerida valmis asjad serverisse, ning teha serveris ainult pisimuutusi.

Pärit leheküljelt "http://lambda.ee/w/index.php?title=ITV0110_1._töö:_Html_põhioskused&oldid=16041"