1.<!-- INCEPUT COD PAGINA -->
2.<html>
3.<head>
4.<title>Numele paginii noastre</title>
5.</head>
6.<body>
7.Conținutul paginii noastre
8.</body>
9.</html>
10.<!-- FINAL COD PAGINA -->
Să începem prezentarea:
În primul rând, o să vă rog să ignorați numerele din fața liniilor, le-am pus acolo numai pentru a fi mai ușor de urmărit codul (din păcate wattpad nu a fost gândit pentru cărți tehnice și/sau de programare :( ).
În cel de al doilea rând, unde sunt prea ambiguu sau o iau prea pe repede înainte, vă rog să mă trageți de mânecuță, că mai nou putem edita cărțile online.
1.<!-- INCEPUT COD PAGINA -->
După cum se vede, acest rând începe cu "<!--" ( voi folosi ghilimele pentru că toată lumea știe deja că acolo este un citat) și nu este nici o greșeală, această succesiune de semne îi specifică unui browser (fie că este vorba de Internet Explorer, Chrome, Firefox, Maxthon, Opera, Safarii, sau oricare altul) că acolo începe un comentariu și că trebuie să nu interpreteze/afișeze nimic de acolo încolo.
Momentan noi avem aici un comentariu simplu de genul un text și anume "INCEPUT COD PAGINA", pe care așa cum știm acum browserul îl va ignora.
Linia se închide cu "-->", ceea ce se traduce pentru browsere prin "de aici încolo începi să interpretezi eu am terminat de comentat" . Începând de la acest semn încolo browserul va începe interpretarea textului și a etichetelor pe care le întâlnește.
Un comentariu în HTML poate fi scris pe mai multe rânduri, nu este neapărat necesar ca la începutul unui rând să începem prin eticheta de începere a comentariului sau la finalul rândului să închidem comentariul dacă următorul rând este tot un comentariu.
2.<html>
Eticheta "<html>" definește începutul unei pagini HTML. Cu toate că și fără această etichetă un browser din ziua de astăzi va ști să interpreteze celelalte etichete, scrierea corectă a unei pagini HTML, în primul rând, o să ne salveze pe noi mai târziu când o să complicăm foarte mult lucrurile iar în cel de al doilea rând, poate cel mai important motiv este că motoarele de căutare (apropo GOOGLE e un motor de căutare nu un browser) sunt foarte pretențioase când citesc codul html al unei pagini și de foarte multe ori penalizează site-urile care nu respectă regulile standardizate.
Așadar, în principu, pe rândul 2 am început efectiv pagina noastră web.
3.<head>
Ca orice alt tip de document, paginile HTML pot fi împărțite în 3 subdiviziuni: antet, conținut și subsol. Eticheta "<head>" definește începutul antetului documentelor de tip HTML.
În cadrul antetului unei pagini de tip HTML se regăsesc, de obicei, legăturile cu alte fișiere externe necesare pentru randarea corectă a paginii (fie ele de tip CSS sau JavaScript dar despre asta o să vă vorbesc la momentul oportun) sau diferite alte setări.
4.<title>Numele paginii noastre</title>
O setare foarte des folosită ete definită cu ajutorul acestei etichete și se folosește pentru a definii denumirea documentului HTML (încă odată un browser poate să randeze foarte bine toată pagina și fără această etichetă, o va denumi pur și simplu "untitled" sau "fără titlu" în funcție de limba în care este setat, dar motoarele de căutare vă vor penaliza din nou dacă nu există această etichetă).
Denumirea, documentului HTML, poate fi setată folosind eticheta "<title>" urmată de numele efectiv al documentului în cazul nostru "Numele paginii noastre" iar pentru a-i transmite browserului că am terminat de setat numele documentului folosim eticheta "</title>".
Notă: Cu ajutorul acestui set de etichete (<title> și </title>) se va seta un titlu al documentului, acesta nu este vizibil în conținutul paginii ci doar pe bara de titlu a browserului.
5.</head>
Această etichetă anunță browserul că am terminat tot ce aveam de scris în antetul documentului nostru de tip HTML.
Notă: O să vedeți de foarte multe ori etichete HTML scrise în cadrul altor etichete HTML, în exemplul nostru etichetele pentru titlu sunt scrise între etichetele pentru antet, ceea ce dacă ne gândim un pic logic este de înțeles, pe parcursul acestei cărți o să mai întâlniți cazuri de acest gen și o să le dezbatem pe fiecare la momentul oportun.
6.<body>
Această etichetă transmite unui browser că începe conținutul efectiv al paginii. Deci ceea ce scriem de aici încolo, mai puțin comentariile, trebuie afișat.
7.Conținutul paginii noastre
Pe acest rând nu avem nici o etichetă, este pur și simplu un text care ne arată că acolo o să vină conținutul paginii și de fapt este singurul lucru pe care un browser l-ar afișa dacă ar fi să încărcăm documentul nostru în el.
8.</body>
Această etichetă definește închiderea conținutului paginii dar nu și finalul documentului în sine.
9.</html>
Această etichetă definește închiderea paginii de HTML (în mod normal această etichetă ar trebui să fie ultimul rând din orice pagină HTML, cu mici excepții despre care o să vorbim la momentul oportun).
Notă: Diferența dintre închiderea conținutului unei pagini HTML și închiderea paginii în sine este că după eticheta "</body>" pot să mai urmeze scripturi JavaScript sau alte elemente pe care dorim ca browserul să-le încarce după încărcarea efectivă a conținutului paginii.
10.<!-- FINAL COD PAGINA -->
Această linie, ca de alfel și prima, conține un comentariu așa cum am explicat în momentul în care am vorbit despre comentarii.
Notă: M-am gîndit că ar fi bine ca de acum încolo să folosesc cele 2 etichete pentru comentarii pentru a fi mai ușor de marcat codul de tip HTML în cadrul paginii, pentru că probabil nu voi putea oricând să plasez codul chiar la începutul părții respective.
Scurtă recapitulare a etichetelor HTML prezentate în această parte:
<!-- Început de comentariu
--> Final de comentariu
<html> Început pagină web
<head> Început antet pagină
<title> Început titlu pagină
</title> Final titlu pagină
</head> Final antet pagină
<body> Început conținut pagină
</body> Finalul conținutului paginii
</html> Finalul paginii web
ESTÁS LEYENDO
Dezvoltare web de la 0 la ceva
No FicciónCeea ce vreau eu să fac este să îi ajut pe toți aceea care vor să înceapă de undeva să învețe cu "ce se mănâncă" programarea web. Până unde voi ajunge cu această carte habar n-am în acest moment, eu sper că atunci când această carte va fi gata, cei...
