HTML ir CSS pradedantiesiems (Dalis 03): Elementai, žymės ir atributai

HTML dokumentai susideda iš elementų, kuriuos žymi taip vadinami žymės. Žymes galite atpažinti iš strėlytų. Beveik visi HTML elementai turi pradines ir galines žymes. Tai, kas yra tarp jų, vadinama galiojimo sritis.

Pavyzdys:

<h1>PSD-Tutorials.de – jūsų grafinio, internetinio ir mokymo portalo</h1>

Šia sintakse į dokumentą įrašoma pirmos rūšies antraštė. Pradinė žymė <h1> praneša naršyklei, kad tai yra toki tipų antraštė. Galinė </h1> žymėba žymi antraštės pabaigą. Galines žymes atpažinsite iš pradinės strėlytės, po kurios eina brūkšnys </.

Kyla klausimas dėl elemento pavadinimo rašymo: kaip yra su didžiosiomis ir mažosiomis raidėmis? Kaip jau buvo aprašyta, šios serijos dėmesys yra skiriamas HTML5. Čia jūs iš tikrųjų galite rinktis tarp didžiųjų ir mažųjų raidžių. Asmeniškai, aš pageidauju nuoseklų mažybes rašymą ir taip tą vadovausi šioje serijoje. Principialiai HTML5 požiūriu būtų teisingi šie dalykai:

<h1>PSD-Tutorials.de – jūsų grafinio, internetinio ir mokymo portalo</h1>
<H1>PSD-Tutorials.de – jūsų grafinio, internetinio ir mokymo portalo</H1>
<h1>PSD-Tutorials.de – jūsų grafinio, internetinio ir mokymo portalo</H1>

Elementus, kuriuos atidarote, taip pat reikia uždaryti. Taigi, jei jūs nustatote <h1>, jį reikia uždaryti po antraštės apibrėžimo pabaigos </h1>. Nors HTML5 yra išimčių, pvz., sąrašų elementai ir pastraipos, tačiau apie tai vėliau daugiau.

HTML yra taip pat standartinės žymės. Jos sudarytos tik iš vienos žymės, o ne pradinės ir galinės žymės. Tipiškas toks pavyzdys yra <br />.

Tai yra eilutė.<br />
Tai yra kita eilutė.

Ši <br /> nustato eilutės pertrauką.

Tokių tuščių žymių reikšmės paprastai uždaromos brūkšniu, nors tai HTML5 griežtai nebūtina. Čia taip pat būtų galima daryti:

<br>

Šioje serijoje dar sužinosite daugiau apie šias standartinės žymes.

Elementų klojimas vienas į kitą

HTML elementus taip pat galima vienas į kitą kloti. Priešsakį, jūs norite kursyvinio paryškinimo atlikimo viduje antraštės. Kursyviniam formatavimui naudojamas i-elementas.

<h1>PSD-Tutorials.de – <i>jūsų grafinio, internetinio ir mokymo portalo</i></h1>

Esant klojimui, atkreipkite dėmesį į teisingą tvarką. Paskutine uždarama tą elementą, kuris buvo atidarytas pirmasis. Šiuo atveju tai h1-elementas.

Naudoti atributus

Atvėrusioms žymėms arba standartinėms žymėms galima apibrėžti taip vadinamus atributus. Šie atributai gali suteikti elementams papildomų savybių. Anksčiau HTML laikais elementams buvo priskiriamas nemažai atributų. Tai paprastai atsirado dėl struktūros ir dizaino sumaišymo. Pavyzdžiui, spalvų apibrėžimai tiesiogiai buvo perduodami HTML elementui per atitinkamą atributą. Šiuo metu, žinoma taip pat dėkui ir CSS, griežtas dizaino ir struktūros atskyrimas yra įmanomas ir turėtų būti laikomasi. Todėl yra tik keletas atributų, kurie yra naudojami.

Vienu iš svarbių atributų yra id. Šis atributas leidžia elementui turėti unikalų pavadinimą, per kurį jį galima pasiekti per CSS ar JavaScript.

<h1 id="head">PSD-Tutorials.de – jūsų grafinio, internetinio ir mokymo portalo</h1>

Suteikiant atributą, po h1 įrašomas tarpas. Po atributo pavadinimo eina lygybės ženklas. Į kabutes įrašytas atributo vertė.

Elementui galima priskirti kelis atributus. Pavyzdžiui, visiškai normalu, kad elementui būtų nustatyta klasė ir ID. Taip pat pavyzdys: per id antraštė yra unikaliai identifikuojama. Klasė skirta antraštę priskirti tam tikrai kategorijai. Taip galima nurodyti, kad visi elementai, kuriems priskiriama blue klasė, bus rodomi mėlynai. (Apie CSS ir spalvų tematiką išsamiau vėliau).

<h1 id="head" class="blue">PSD-Tutorials.de – tavo grafinis, internetinis ir mokomasis portalas</h1>

Attribute šiuo atveju yra skirti vienas nuo kito tarpu.

Tikrinimas kodo

Kai kurias pagrindines sintaksės taisykles jau esate išmokę. Ypač pradžioje, kai mokotės HTML, svarbu laikytis šių taisyklių. Tai, ką kartą sugalvojote neteisingai, sunku atsisakyti. Todėl visada turėtumėte patikrinti arba patikrinti savo HTML kodą (leisti patikrinti). Žinoma, jums nereikia to daryti patiems. Tam yra tinkami internetiniai įrankiai. Tarkim, validatorių galite rasti po nuoroda http://validator.w3.org/.

Geriausiai ten tiesiogiai perkeldami eikite į skirtuką Nurodyti įvestimi validuoti. Čia galite įvesti tikrinamą HTML kodą tiesiogiai nukopijuodami ir įdedant. Būtinai atkreipkite dėmesį, kad įterptumėte visą rinkmenos kodą, įskaitant ir DOCTYPE nurodymą.

Įkelkite šį į teksto laukelį, norėdami patikrinti validatorių ir tada spustelėkite mygtuką Validate.

<!DOCTYPE html>
<html lang="de">
<head>
   <title>PSD-Tutorials.de</title>
   <meta charset="UTF-8" />
</head>
<body>
   <h1>PSD-Tutorials.de – tavo grafinis, internetinis ir mokomasis portalas</h1>
</body>
</html>     

Rezultatas turėtų atrodyti šitaip:

Čia viskas tvarkoje. (Šiais dviem įspėjimais šiuo atveju geriau nesirūpinti). Taigi, jei atsiras pranešimas Šis dokumentas sėkmingai patikrintas kaip HTML5!, tai tikrai viskas tvarkoje. Bet kaip atrodo visa tai klaidos atveju? Tam pakanka tiesiog sąmoningai padaryti sintaksės klaidą.

<h1 id=head">PSD-Tutorials.de – tavo grafinis, internetinis ir mokomasis portalas</h1>

Čia buvo pamirštas pradžios kabliatkarpių ženklas head. Jei šiuo metu leisite validuoti sintaksę, klaida bus aptikta.

Tada validatorius išveda atitinkamą pranešimą. Ką tiksliai padarė neteisingai, galite matyti žemiau esančioje langų srityje.





Čia labai aiškiai aprašyta, kas iš tikrųjų yra klaida.

Eilutėje 8, Stulpelyje 12: " neiškviečiamas atributas vertėje. Tikėtina priežastis: atributai veikia kartu arba URL užklausos eilutė neiškviečiamame atributo vertėje.

<h1 id=head" >PSD-Tutorials.de</h1>

Todėl nedvejodami matote, kuriame eilutėje padaryta klaidinga įvestis, ir galite ją ištaisyti. Taigi validatorius jums padeda sukurti švarų HTML kodą. Visada leiskite patikrinti savo kodą. Nes naršyklės dažnai teisingai atvaizduoja HTML kodą, nors sintaksė yra neteisinga. Kitiose naršyklėse, kuriose jūs nebandote savo puslapių, tai gali atrodyti visiškai kitaip.