HTML dokumenti sastāv no elementiem, kas ir atzīmēti ar tagiem. Tagus atpazīsiet pēc izliektajām iekavām. Gandrīz visiem HTML elementiem ir gan sākuma, gan beigu tagi. Tas, kas atrodas starp tiem, tiek saukts par derības joma.
Piemērs:
<h1>PSD-Tutorials.de – jūsu grafiskais, tīmekļa un mācību portāls</h1>
Ar šo sintaksi tiek ievietota pirmās kārtas virsraksts dokumentā. Sākuma <h1>-tags paziņo pārlūkam, ka tā ir šāda veida virsraksts. Beigu </h1> noslēdz virsrakstu. Beigu tagus atpazīsiet ar atverto izliekto iekavu, kam seko slīpsvītras zīme </.
Rodas jautājums par elementu nosaukumu rakstību: kā ir ar lielo un mazo burtu izmantošanu? Kā jau iepriekš minēts, šajā sērijā fokuss ir uz HTML5. Šeit jūs patiešām varat izvēlēties starp lielo un mazo burtu. Personīgi es tomēr favarizēju konsekventu mazo burtu izmantošanu un arī šī sērija tiks veidota tā. Principā pēc HTML5 būtu pareizi sekojošas lietas:
<h1>PSD-Tutorials.de – jūsu grafiskais, tīmekļa un mācību portāls</h1> <H1>PSD-Tutorials.de – jūsu grafiskais, tīmekļa un mācību portāls</H1> <h1>PSD-Tutorials.de – jūsu grafiskais, tīmekļa un mācību portāls</H1>
Elementus, kas atver, ir arī jāaizver. Ja, piemēram, ievietojat <h1>, jums pēc virsraksta definīcijas beigām tas ir jāaizver atpakaļ ar </h1>. Lai gan HTML5 šeit ir izņēmumi, piemēram, saraksta vienumi un rindkopas, par tiem vēlāk būs vairāk.
HTML ir arī tā sauktie staņdurvisu (angliski standalone) tagi. Tie sastāv tikai no viena taga, nevis no sākuma un beigu taga. Tipisks piemērs ir <br />.
Tas ir viens rindkopas.<br /> Tas ir cits rindkopas.
Šis <br /> definē rindkopas pārtraukumu.
Šādus tukšus tagus parasti aizver ar slīpsvītras zīmi, lai gan HTML5 tas nav obligāti nepieciešams. Šeit ietilpst arī šādas iespējas:
<br>
Jums šajā sērijā vēl būs iespējams iepazīties ar vēl citiem šāda veida staņdurvisu tagiem.
Elementu iekļaušana iekšēji
HTML elementus var arī iekļaut. Iedomājieties, ka vēlaties iekšēji kursīvajā veidā atveidot fragmentu virsrakstā. Kursīvai attēlošanai tiek izmantots i-elements.
<h1>PSD-Tutorials.de – <i>jūsu grafiskais, tīmekļa un mācību portāls</i></h1>
Iezīmējot, atcerieties pareizo secību. Pēdējais ir jāaizver elements, kas tika atvērts pirmais. Šajā gadījumā tas būtu h1-elements.
Izmantot atribūtus
Atvērošanas tagos vai staņdurvju tagos var definēt tā sauktos atribūtus. Šie atribūti var piešķirt elementiem papildu īpašības. Iepriekšējos HTML laikos elementiem tika piešķirti salīdzinoši daudzi atribūti. Tas bija saistīts vienkārši ar struktūras un dizaina sajaukumu. Tādēļ, piemēram, krāsu definīcijas tika nodotas tieši HTML elementam, izmantojot atbilstošu atribūtu. Tagad – dabīgi, pateicoties CSS – ir iespējama stingra atšķirība starp dizainu un struktūru, kas ir jāievēro. Tādēļ tiek izmantoti salīdzinoši maz atribūtu.
Svarīgs atribūts ir id. Izmantojot šo atribūtu, HTML elementam var piešķirt unikālu nosaukumu, pēc kura var piekļūt, piemēram, izmantojot CSS vai JavaScript.
<h1 id="head">PSD-Tutorials.de – jūsu grafiskais, tīmekļa un mācību portāls</h1>
Lai piešķirtu atribūtu, pēc h1 ielieciet atstarpi. Tam seko atribūta nosaukums, kas parasti ir rakstīts ar maziem burtiem. Atribūta nosaukumu atdala vienādības zīme. Pēc atribūta nosaukuma seko atribūta vērtība, kas ir ielikta pēdiņos.
Elementam var piešķirt arī vairākus atribūtus. Tāpēc ir pilnīgi normāli, piemēram, definēt elementam tā saukto klasi un ID. Par to arī piemērs: caur id virsraksts ir viennozīmīgi identificēts. Klasē ir paredzēts novietot virsrakstu konkrētā klasē. Tāpēc var noteikt, ka visi elementi, kam ir piešķirta klase zila, tiks parādīti zilā krāsā. (Vairāk par šo CSS un krāsu tēmu atkal plašāk vēlāk).
<h1 id="head" class="blue">PSD-Tutorials.de – tavs grafiskais, tīmekļa un mācību portāls</h1>
Atribūti šajā gadījumā tiek atdalīti ar atstarpi.
Pārbaudi kodu
Dažas pamatsintakses likumi jau apgūti. Īpaši sākumā, kad mācieties HTML, ir svarīgi ievērot šos noteikumus. Tas, ko vienreiz iemācījāties nepareizi, grūti atvairīt no prāta. Tāpēc vienmēr pārbaudiet vai valīdējiet savu HTML kodu uz pareizību. To, protams, nav jādara pašam. Tam ir piemēroti tiešsaistes rīki. Tā dēvēto validātoru atradīsiet, piemēram, vietnē http://validator.w3.org/.
Izmantojiet šajā vietā tiešsaistes ievades validēšanu.
Lai pārbaudītu validātoru, ielīmējiet šo tekstu laukā un pēc tam noklikšķiniet uz validēšanas pogas.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – tavs grafiskais, tīmekļa un mācību portāls</h1> </body> </html>
Rezultātam jāizskatās šādi:
Šeit viss ir kārtībā. (Diviem brīdinājumiem šajā gadījumā nav jāuztraucas). Ja tiek parādīts paziņojums Dokuments ir veiksmīgi pārbaudīts kā HTML5!, tad viss ir kārtībā. Bet kā izskatās situācija, ja ir kļūda? Ielieciet nodomā to. Tas, ko varat izlasīt apakšējā loga daļā.
Šeit ir labi aprakstīts, kurā vietā ir kļūda.
Rinda 8, kolonna 12: " nav pievienots citētā atribūta vērtībai. Varbūtējās cēloņi: Atribūti, kas darbojas kopā vai URL vaicājuma virkne nav pievienota citētā atribūta vērtībai.
<h1 id="head">PSD-Tutorials.de – tavs grafiskais, tīmekļa un mācību portāls</h1>
Šeit tika aizmirsta pirmās pēdiņas head sākumā. Ja tagad atkārtoti validējat sintaksi, kļūda tiks atzīta.
Lietotspēja jums uzrāda, kurā rindiņā tika veikta nepareiza ievade, un jūs varat to labot. Ar validētāja palīdzību jūs varat radīt tīru HTML kodu. Jums vienmēr vajadzētu validēt savu kodu. Jo pārlūkiem bieži vien rāda HTML kodu pareizi, pat ja sintakse satur kļūdas. Citos pārlūkos, kur nesākat savas lapas, tas var izskatīties pavisam atšķirīgi.
