Documentele HTML constau din elemente marcate de taguri așa-numite. Tagurile sunt recunoscute de voi prin paranteze unghiulare. De obicei, aproape toate elementele HTML sunt marcate printr-un tag de început și unul de încheiere. Ceea ce este între ele se numește domeniu de valabilitate.
Un exemplu:
<h1>PSD-Tutorials.de - portalul tău pentru grafică, web și învățare</h1>
Prin această sintaxă, o linie de titlu de prim ordin este scrisă în document. Tagul de început <h1> îi spune browserului că este vorba de un astfel de titlu. Tagul de încheiere </h1> termină titlul. Veți recunoaște tagurile de încheiere printr-o paranteză unghiulară deschisă, urmată de o bara oblică </.
Rămâne o întrebare în ceea ce privește scrierea numelui elementelor: Cum stă treaba cu literele mari și cu literele mici? Cum am menționat deja, accentul în această serie este pe HTML5. Aici puteți alege între litere mari și litere mici. Personal, favorizez însă utilizarea constantă a literelor mici și voi proceda astfel și în această serie. În principiu, următoarele lucruri ar fi corecte conform HTML5:
<h1>PSD-Tutorials.de - portalul tău pentru grafică, web și învățare</h1> <H1>PSD-Tutorials.de - portalul tău pentru grafică, web și învățare</H1> <h1>PSD-Tutorials.de - portalul tău pentru grafică, web și învățare</H1>
Elementele pe care le deschideți trebuie, de asemenea, să fie închise. Deci, dacă setați un <h1>, trebuie să-l închideți după definitia titlului </h1>. Chiar dacă există excepții în HTML5, cum ar fi elementele din liste și paragrafe, despre acestea vom vorbi mai târziu.
În HTML există și așa-numitele taguri autonome. Acestea constau doar dintr-un singur tag, nu dintr-un tag de început și unul de sfârșit. Un exemplu tipic este <br />.
Aceasta este o linie.<br /> Aceasta este o altă linie.
Acest <br /> definește un salt de linie.
Astfel de taguri goale sunt de obicei închise printr-o bara oblică, chiar dacă aceasta nu este obligatorie conform HTML5. Totuși, și următoarele ar fi acceptate:
<br>
Veți învăța mai multe despre aceste taguri autonome pe parcursul acestei serii.
Încorporarea elementelor
Elementele HTML pot fi, de asemenea, încorporate. Imaginați-vă că doriți să formatați un pasaj cu italică în interiorul unui titlu. Pentru formatarea cu italică se folosește elementul i.
<h1>PSD-Tutorials.de - <i>portalul tău pentru grafică, web și învățare</i></h1>
Atunci când încorporați, respectați ordinea corectă. Ultimul element închis va fi primul element deschis. În acest caz, este elementul h1.
Folosirea atributelor
În interiorul tagurilor de deschidere sau tagurilor autonome se pot defini așa-numitele atribute. Aceste atribute pot asigna elementelor proprietăți suplimentare. În trecut, elementele aveau un număr relativ mare de atribute. Aceasta se datora pur și simplu amestecului dintre structură și design. De exemplu, definițiile de culoare erau atribuite direct elementului HTML prin intermediul unui atribut corespunzător. Între timp, o separare strictă între design și structură este posibilă, și ar trebui respectată. Prin urmare, numărul de atribute utilizate este mult mai mic.
Un atribut important este id. Acest atribut poate asigna un nume unic unui element HTML, prin care poate fi apelat, de exemplu, prin CSS sau JavaScript.
<h1 id="head">PSD-Tutorials.de - portalul tău pentru grafică, web și învățare</h1>
Pentru asignarea unui atribut, se adaugă un spațiu după h1. Urmează numele atributului, care de obicei este scris cu litere mici. În spatele numelui atributului urmează semnul egal. Între ghilimele urmează valoarea atributului.
De asemenea, unui element i se pot asigna mai multe atribute. Este destul de obișnuit să se definească atât o clasă cât și un ID pentru un element. Un exemplu: Prin id, titlul este identificat în mod unic. Clasa, pe de altă parte, servește la încadrarea titlului într-o anumită categorie. Astfel, se poate stabili că toate elementele cărora li se atribuie clasa blue vor fi afișate cu culoare albastră. (Despre această temă de CSS și culori, desigur, vom vorbi mai pe larg mai târziu).
<h1 id="head" class="blue">PSD-Tutorials.de – portalul tău pentru grafică, web și învățare</h1>
Atributele sunt separate în acest caz printr-un spațiu gol.
Validați codul
Câteva reguli de sintaxă de bază pe care le-ați învățat deja. În special la început, când învățați HTML, este important să respectați aceste reguli. Ceea ce ați învățat în mod greșit o dată, este greu de eliminat din memorie. Prin urmare, ar trebui să vă verificați întotdeauna codul HTML pentru corectitudine sau să-l validați. Acest lucru nu trebuie să-l faceți singuri. Există instrumente online corespunzătoare. Puteți găsi un validator la adresa http://validator.w3.org/.
Cea mai bună soluție este să treceți direct la fila Validați prin introducere directă. Aici puteți copia și lipi direct codul HTML de verificat. Asigurați-vă că lipiți întregul cod al fișierului, inclusiv declarația DOCTYPE.
Pentru a testa validatorul, adăugați următorul cod în câmpul text și apoi faceți clic pe butonul Validați.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – portalul tău pentru grafică, web și învățare</h1> </body> </html>
Rezultatul ar trebui să arate astfel:
Aici totul este în regulă. (În acest caz, nu vă deranjați de cele două avertismente). Dacă primiți mesajul This document was successfully checked as HTML5!, înseamnă că totul este în regulă. Dar cum arată totul în caz de eroare? Pentru asta, puteți introduce intenționat o greșeală de sintaxă.
<h1 id=head">PSD-Tutorials.de – portalul tău pentru grafică, web și învățare</h1>
Aici a fost uitat ghilimelele de început pentru head. Dacă validați acum din nou sintaxa, eroarea va fi identificată.
Validatorul va afișa în consecință un mesaj corespunzător. Puteți vedea exact în ce rând a fost introdusă o eroare în fereastra de jos.
Aici este descris foarte clar care este eroarea.
Linia 8, Coloana 12: " într-o valoare de atribut neîncadrată. Cauze probabile: Atribute care se succed sau un șir de interogare URL într-o valoare de atribut neîncadrată.
<h1 id=head" >PSD-Tutorials.de</h1>
Deci, puteți vedea direct în ce rând a fost făcută o intrare greșită și puteți corecta. Prin urmare, validatorul vă ajută să creați un cod HTML curat. Ar trebui întotdeauna să vă validați codul. Deoarece browserele afișează adesea codul HTML corect, chiar dacă sintaxa este greșită. În alte browsere în care nu testați paginile dvs., lucrurile ar putea fi complet diferite.
