Veebilehtede loomine

See õpik räägib sellest, mis on veebilehe sees.

Selle õpiku eesmärk on koondada endasse nii HTML-i kui CSS-i algõpetus, ehk siis teadmised, mis on vajalikud alustamaks veebilehtede meisterdamist. Siin vikis olemasolevad HTML-i ja CSS-i õpetused on hetkel liialt detailsed ja kalduvad rohkem manuaali kui õpetuse poole.

Vikiõpiku arengustaadiumid

Vähene tekst • Osaline tekst • Kasvav tekst • Kogukas tekst • Põhjalik tekst
Hea artikkel

Sisukord

Osa 1

• Mis on veebileht? Iga veebileht on tegelikult HTML fail. Iga internetis leiduva lehekülje koodi on võimalik vabalt vaadata kasutades view source funktsiooni.

• Maailma lihtsaim veebileht. Õpetatakse kuidas salvestada tekstifail sisuga "Minu esimene veebileht", panna laiendiks .html ja avada see brauseris. Kuna sellise lehe näol pole tegemist korrektse HTML'ga, siis tutvustame elementi title ja lisame oma lehele ka pealkirja ning vaatame, kuidas see ilmub brauseri tiitelribale.

• Lihtne tekstipõhine lehekülg. Võtame ette ühe lihtsa teksti, kus on pealkiri, paar alampealkirja, tekstilõigud ja tibake rõhutatud teksti ning vaatame, kuidas see HTML-is kirja panna. Õpime, et HTML-i renderdamisel ei arvestata reavahetusi ega topelt-tühikuid. Õpime kasutama elemente h1..h6, p, em ja strong.

• Lingid - veebi alustala. Räägime sellest, kuidas linkide abil luua lehtede vahele ühendusi. Alustuseks lingid samas kataloogis olevatele lehtedele, siis alam- ja ülemkataloogid ning viimaks lingid laia veebi suvalistele lehtedele.

• Veebilehe struktuur. Avaldame kiivalt hoitud saladuse, et eeskujulik HTML leht peab sisaldama ka html, head ja body elemente. See peatükk on eelduseks sellele, et me saame järgmises peatükis õppida HTML-i ja CSS-i sidumist.

• Natuke värvi sellesse halli maailma! Esmatutvus CSS-iga. Õpime CSS-i sidumist style ning link elemendi abil. Kujundame pealkirjad värvilistena. Õpime CSS-i atribuudi color lihtsama variandi, kus väärtusteks on võtmesõnad.

• Elementaarne tüpograafia. Õpime mitmeid teksti-kujundamise võimalusi CSS-is: text-align, font-weight, font-style, font-size. Ühtlasi õpime ka deklaratsioone grupeerima ning kogu lehele omaduste määramiseks kasutama body selektorit.

• Kokkuvõte. Proovime seni omandatut kasutades koostada ühe väikese leheküljestiku. Kasutame kõigil failidel ühist stiililehte.

Osa 2: Minek internetti

• Serveriruumi leidmine.
• Ülevaade Eesti tasuta hostingupakkujatest.
• FTP: Lehekülje laadimine serverisse.

Osa 3: Veel HTML'i baasteadmisi

• Pildid
• Listid ja nende kujundamine.
• Erisümbolid <, > ja &. pre kasutamine.
• Täpitähtede probleem. Sissejuhatus kodeeringutesse.
• Korrektsuse kontroll - koodi valideerimine. DOCTYPE määramine.

Osa 4: box model

• Sissejuhatus veeriste (margin) kasutamisse. Reavahetuste kasutamine vaid siis kui tarvis. Õpetus sellest, kuidas eraldada lõigud taandridadega.
• Mäng servajoontega. Pealkirja allajoonimise näide.
• Polstrid (padding) ja nende seos taustavärvi ja -pildiga.
• Kokkuvõte CSS-i kasti-mudelist.

Osa 5: klassid ja ID-d

• Klasside määramine HTML'is ja selekteerimine CSS-is.
• Sama ID-de kohta. (Millal klass? Millal ID?)
• Neutraalsed elemendid div ja span.