XHTML&CSS: märgendid, atribuudid ja stiililehed.

margend2Selles postituses kirjutan veebilehe põhielementidest, kuidas neid kasutada, millises järjekorras kõik olema peab. Seletan ära, mis on märgend, atribuut ja stiilileht.

HTML

Märgendid

margend2Märgendid või tag-d <tag> annavad  ühele või teisele  veebilehe elemendile mingisuguse nime, omaduse ja ülesande. Märgistatav element pannakse märgendajate vahele <tag>element</tag>. Peaagu igal märgendajal on algus ja lõpp. Algus märgitakse ülesandega nurksulgude vahel <ülesanne> ning lõpp märgitakse samamoodi, kuid esimese sulu järel on kaldkriips </ülesanne>. Esineb ka erandeid, kus märgistajal ei olegi lõppu. Sellisel juhul näeb ta välja nii: <tag/>. Element on html-i osa, mis koosneb algus-ja lõppmärgendist ning kõigest, mis on nende vahel.

Atribuut on mingisugune parameeter, mis lisandub ühele või teisele html-i elemendile. Igal atribuudil peab kindlasti mingisugune väärtus. Atribuut läheb alati esimärgendisse koos kindla väärtusega. Väärtus peab alati olema jutumärkide vahel.

attribute

Veebilehe struktuur

Igal veebikeelel on kindel struktuur, millega peaks arvestama veebilehe valmistamisel. Struktuur määrab paika elementide asukoha ja järjekorra veebilehel.

Doctype- deklaratsioon. See deklaratsioon on veebilehe passiks, mis näitab nii veebisirvijale kui ka serverile, millel veebileht asub, et tegemist on ikkagi veebilehega, ning deklaratsioonis määratakse ka mõningad veebilehe põhiomadused: mis keeles on selle veebilehe sisu ja kuidas peaks veebileht veebilehitseja aknas paistma. Praeguseks, kui me veel midagi Interneti üles ei pane võib selleks deklaratsiooniks olla lihtsalt  <!DOCTYPE> Deklaratsioon peab olema alati veebilehe alguses, ehk akna kõige ülemises reas.

struktuurNagu ma juba varem mainisin on xhtml veebilehe luustik. Seda luustiku ei saa ega tohi lampi kokku panna. Märgenditel on kindel kord ja alluvussuhe. Et arusaamist lihtsamaks teha toon näite

Kõrvalolevas näites on näha, et kogu veebilehe sisu on <html> märgendite vahel, seda mis on väljaspool neid märgendeid, veebisirvija ignoreerib (väljaarvatud Doctype’i). html-märgendite vahel on kaks märgendirühma: “head”(päis) ja body (keha). Päises on elemendid, mis juhivad ja reguleerivad teisi veebilehel olevaid elemente, kehas on aga elemendid, mis on nähtavad kasutajale, näiteks tekst, pildid jne.

CSS

stiililehtIga element veebilehel on nagu omaette kast, mida saab kujundada, paigutada, kaunistada vastavalt soovile. CSS tegeleb just nende elementide kujundamise ja paigutamisega. Selleks, et CSS üldse veebilehel tööle saada on vaja, tuleb veebilehe päisesse lisada teatud koodilõik. Selleks koodilõiguks on stiilileht:

Kõrval oleval pildil näeme, et päisesse tuleb lisada stiili märgendid. Märgendi atribuudiks on “type” ja selle väärtuseks “text/css”. Seejärel lisame stiilimärgendite vahele kujundatava elemendi märgendi nime, selle järel sulgudes vajalik omadus koos väärtusega ja väärtuse järel peab KINDLASTI OLEMA SEMIKOOLON.

Ja üks viimane asi: xhtml on ruumi suhtes passiivne, teda ei huvita see, kuidas on elemendid paigutatud, veebilehte huvitab järjekord ja alluvussuhted. Elemente võib paigutada ühele reale, mitmele reale, ridu võib vahele jätta jne.

Advertisements

Kirjuta kommentaar

Täida nõutavad väljad või kliki ikoonile, et sisse logida:

WordPress.com Logo

Sa kommenteerid kasutades oma WordPress.com kontot. Logi välja / Muuda )

Twitter picture

Sa kommenteerid kasutades oma Twitter kontot. Logi välja / Muuda )

Facebook photo

Sa kommenteerid kasutades oma Facebook kontot. Logi välja / Muuda )

Google+ photo

Sa kommenteerid kasutades oma Google+ kontot. Logi välja / Muuda )

Connecting to %s