teisipäev, 21. aprill 2015

29. tund - veebilehe avaldamine (zone.ee server)

Veebimajutus

Selleks, et ka teised saaksid meie veebilehte vaadata (senini oleme vaadanud veebilehitsejaga arvutis olevat html-faili), tuleb lehekülje failid mõnda veebiserverisse üles laadida.

Tasuta veebimajutust ning veebilehe aadressi kujul web.zone.ee/sinu_antud_nimi pakub Zone.ee
https://www.zone.ee/et/tasuta-koduleheruum-registreeri/

Peale registreerimisandmete täitmist tuleb ankeedis sisestatud e-postiaadressile aktiveerimislink. Peale konto aktiveerimist muutub lehekülg aktiivseks 30 minuti jooksul.

FTP

Faile saab veebiserverisse laadida FTP-ga. Veebipõhist FTP võimalust pakub Net2ftp keskkond http://www.net2ftp.com/

Zone.ee serveris oleva veebilehe puhul on FTP aadressiks web.zone.ee, kasutajanimi see, mille registreerimisel oma lehe nimeks panid ning parool see, mille kontot registreerides endale valisid.

Järgmisena avaneb vaade sinu failidele veebiserveris. 
New dir - saab luua uue kausta
New file - saab luua uue faili (html keeles saab lisada sisu)
Upload - faili (failide) üleslaadimiseks

Failide üleslaadimiseks klõpsa nupul Upload.


Klõpsa nupul "Vali fail" ja otsi arvutist fail, mille soovid üles laadida. Kui vajalikud failid on valitud, klõpsa rohelist linnukest.
Sinise noole abil saad tagasi eelmisele lehele.

Üles laetud faile on võimalik ka kustutada (alloleval pildil punane kast, Delete), ümber nimetada (Rename) ja teise kausta tõsta (Move).


Kui klõpsata faili nime taga sõnal "Edit" (ülaloleval pildil roheline kast), siis on võimalik faili ka muuta. Seda võib kasutada html keeles kirjutatud faili puhul, kui on soov kiiresti mõnda osa lehest muuta.
Muudatuste salvestamiseks tuleb klõpsata disketimärki ning tagasi failide lehele pääseb sinist noolt vajutades.

FTP keskkonnast väljumiseks klõpsa paremal ülal olevat punast nuppu.



teisipäev, 14. aprill 2015

28. tund - CCS stiilid

Eelmisel tunnil proovisime kujundada HTML lehekülge. Igale sildile stiili lisamine on küllaltki tüütu. Juhul kui soovime veebilehel mingit ühtset stiili säilitada, on parem need stiilid eraldi valmis teha ning siis HTML dokumendile lisada.

Selleks kasutatakse CSS (Cascading Style Sheets) keelt, mille abil saab HTML-dokumentide kujundust määrata. 

CSS laade saab HTML dokumendile lisada kahel viisil:
  • käsud lisatakse iga HTML dokumendi päisesse <HEAD> .... </HEAD> siltide vahele 
 <style type="text/css"> .... CSS käsud ... </style> siltide vahele
  • käsud salvestatakse eraldi faili ning lisatakse siis iga HTML lehe päisesse link sellele failile 
 <link rel="stylesheet" type="text/css" href="failinimi.css">

Viimase viisi eeliseks on see, et HTML lehtede välimust puudutavaid muudatusi tuleb teha ainult ühes, CSS laade sisaldavas failis. Kõik lehed võtavad info väljanägemise kohta sellest failist.

CSS süntaks ehk keele kirjutamise reeglid

Esimesele kohale kirjutatakse HTML elemendi sildi tähis, mille kohta reegel kehtib. Edasi kirjutatakse loogeliste sulgude vahele reegel, kus omadus eraldatakse väärtusest kooloniga. Kui ühele elemendile määratakse mitu omadust, siis eraldatakse need üksteisest semikooloniga.

Näiteks rida H1 {color:blue; font-size: 40px} tähendab, et loogelistest sulgudes olev reegel kehtib HTML elemendile H1 (pealkirja suurus) ning määrab selle värviks sinise (color:blue) ning teksti suuruseks 40 pikslit (font-size: 40 px).

Samamoodi on võimalik määrata omadusi kõikidele HTML siltidele.


Ülesanne 1
  1. Ava Notepad ning salvesta see nimega laadid.css (salvestamisel vali tüübiks All Files ning faili nimi kirjuta koos faililaiendiga css, fail salvesta oma kausta kooli arvutivõrgus). 
  2. Lisa sellesse faili rida H1 {color : blue } ja salvesta.
  3. Ava eelmistel tundidel tehtud HTML fail ning lisa selle päisesse <link rel="stylesheet" type="text/css" href="laadid.css">  ja salvesta. Juhul, kui oled eelmisel tunnil H1 pealkirjale lisanud stiili style="color: ...", siis kustuta see ära!
  4. Ava HTML fail veebilehitsejaga.
  5. Lisa HTML dokumenti veel üks pealkiri, mille suuruseks on H1 ja salvesta.
  6. Ava HTML fail veebilehitsejaga.
 Ilmselt märkasid, et kõik pealkirjad, mis on suurusega H1 on nüüd sinised.
  
Ülesanne 2

Lisa CSS faili veel järgmised read

body {background-color: #d0e4fe}

p {font-family: "Times New Roman"; font-size: 20px}
 


Salvesta CSS fail ning värskenda veebilehitsejas oma HTML faili vaadet. 

Ülesanne 3

Uuri, mida teevad CSS faili lisatud read 
table, td, th {border: 1px solid blue}
th {color:red; background-color:yellow}