Mille jaoks on HTML ja mille jaoks on CSS?

HTML on veebilehe skelett, nagu ka pildil näha. Tema töö on ühendada kõik ülejäänud komponendid ja luua veebilehe dokument, sisu. JavaScript, lühendatult JS, on selleks, et muuta oma veebileht interaktiivsemaks ja lisada sellele funktsioone. CSS on selleks, et sinu leht näeks ka nägus välja, CSS kontrollib kõike, mis on stiiliga seotud.

Selleks, et näha ükskõik mis veebilehe koodi, klõpsa parema hiirenupuga kuhu iganes lehel ja vali valik "Page Source". Alternatiivselt võid ka kasutada klahvikombinatsiooni Ctrl + U.

Milline näeks välja HTML dokument ilma stiilita?

See on selle sama veebilehe HTML dokumendi väljund ilma stiilita. Nagu näha on font teistsugune, pildid erinevates kohtades ja ülemised ja alumised ääred vaid kastidena vasakul. Nüüd vaata uuesti seda sama veebilehte siin, stiiliga on palju parem, eks?

Kuidas saaksin proovida HTMLi ja CSSi?

Võimalusi on mitmeid. Kõige kergem algajale on vast Neocities konto loomine. Sellel lehel saab luua veebilehti vaid HTMLi, CSSi ja JavaScriptiga, mis on algajale perfektne. Neocities pakub ka õppevõimalusi ja alustuseks on isegi baas veebileht valmis, mida saab hakata muutma.
Teine võimalus on luua .html lõpuga fail ning alustada kõike algusest. Selleks on vaja aga rohkem ettevalmistust, teadmist programmidest koodi kirjutamiseks ja suuremaid baasteadmisi.

Kuidas kirjutatakse HTML dokumenti?

HTMLi õppimine on üpriski lihtne. Tuleb vaid meeles pidada, kuidas alustada ja kuidas kõike muuta.

See on kõige tavalisem HTML baas. Peaaegu igal veebilehel on alguses need samad read. HTMLis kirjutatakse kõik lühikeste märgete abil, mis käivad klambrite sisse. Alustaval klambril on sees vaid funktsiooni nimi, lõpetaval on nime ees ka kaldkriips. Seda saab näha igal real siin koodis.
Head märkme sisse käib kõik, mida veebilehitseja vajab, et veebilehte kuvada. Neid tavakasutaja aga ei näe, vaid title märge on kasutajale näha, see on see väike kiri mis iga vahelehe üleval on brauseril.
Body märge on kõigeks, mida sa näed. Sealhulgas tekst, pildid, vorming. Näiteks on üleval koodis h1 märge, mis tähistab pealkirja (heading) ja sellele järgnev number, mis on pealkirjadele kohane. Numbrid 1-6 tähistavad pealkirja olulisust ja suurust, nr 1 on kõige suurem ja 6 kõige vaiksem.
Kõike seda peab aga proovima omal käel ka - selleks logi sisse Neocities platvormile ja alusta oma veebilehe tegemist!

HTML kõige vajalikumad märkmed

Koos näidisega on sul nüüd kõik vajalik olemas, et luua oma veebileht!

Kuidas lisada stiili oma lehele CSS-i abil?

On kolm viisi, kuidas lisada CSS koodi oma HTML dokumendile.

Kõige kenam kood tuleb siis, kui on eraldatud HTML ja CSS kood erinevatesse failidesse, nagu näidatud 3. näites. Selleks tuleb lisada sama "link" element oma koodi "head" märkme vahele ja teha samasse kausta style.css fail. Kui kasutada Neocitiest, on see juba tehtud.

CSSi vorming on natuke teistsugune võrreldes HTMLi vorminguga, ei ole mingeid märkmeid, mida avama ja sulgema peab, vaid selle asemel on HTMLi märkmete nimed ja klambrid, mille sisse saab lisada kõike, mis stiiliga seotud. Näide:

Üldiselt on kõik samas formaadis: esimesel real objekti nimi ja klambrid algavad, järgnevatel ridadel inglise keeles stiilisoovid samas formaadis. Soovidele järgneb klambrite sulgemine. Seda kõike on kergem ise proovida, kui seletada, kuid kuna enamjaolt on kõik arusaadavas inglise keeles, siis pole raske aru saada koodist ja luua seoseid.