Să vorbim despre scrierea codului curat.
Când vorbesc despre cod curat, mă refer la a învăța cum să
scriem cod care va funcționa pe cât mai multe dispozitive posibil.
Pentru a face aceasta,
trebuie să cunoașteți câte ceva despre modelul document obiect,
denumit și DOM.
Atunci când a fost dezvoltat HTML5
principalul obiectiv a fost acela de a fi in conformitate cu standardele,
si orice funcționalități noi ar trebui să se fie bazate pe HTML,
CSS, modelul DOM și JavaScript.
Vom învăța despre ele in cele ce urmează.
Dar aș dori să insist asupra modelului DOM un pic
pentru că te va ajuta să înțelegi limbajul HTML un pic mai bine.
Unul dintre detaliile despre informaticienii geek ca mine este că iubim arborii.
Nu chiar arborii de afară care sunt verzi și frumoși toamna.
Ne plac arborii matematici.
Aceste structuri sub formă de arbori despre care putem arăta că sunt corecte sau incorecte.
Deci, când vorbim despre HTML ca despre un arbore, vorbim de fapt despre
această idee, ca la rădăcina arborelui urmează fie creat HTML.
Apoi, pornind de la acel arbore, când spunem
"Urmează să creez un document HTML."
Vrem sa fie compus din doua parți.
Head si Body.
În Head vom păstra tot felul de
informații pe care utilizatorul, în cea mai mare parte, nu le va vedea.
Singura diferența este titlul,
dar vom avea si informații care nu sunt atât de importante.
In Body, vom învăța sa punem toate cele cinci taguri HTML.
Deci sa privim codul HTML ca un arbore.
In acest caz va arat aceasta imagine ca sa înțelegeți ca la rădăcina
fiecărei pagini HTML trebuie sa fie ceea ce se numește tag-ul HTML.
Acea chestie care spune,
"sa lăsam browser-ul sa știe
ca ii vom da anumite tipuri de tag-uri si asa vrem ca ele sa funcționeze".
Dacă nu privim in ansamblu,
eu pot de altfel sa va spun ca
fiecare arbore are trei parți într-un document formatat corect.
Doctype - este versiunea de HTML pe care o vei folosi.
Head - este tag-ul care conține informații despre pagina
Body - este tag-ul care conține ceea ce se afișează;
este chestia pe care o veți primi atunci când veți face o interogare GET.
Sa vorbim despre Doctype.
Sunteți norocoși.
Pe când cream eu pagini web pentru prima data se folosea standardul HTML4
si trebuia sa găsim diferite feluri de a explica daca
versiunea noastră de HTML4 era la standarde sau era tranziționala.
In HTML5, este foarte simplu să spui
"Exista un singur lucru si se numește DOCTYPE HTML", si gata.
In Head
vom avea toate informațiile adiționale folosite de către browser.
De exemplu, poate doriți să spuneți în ce limbă creați pagina.
Ați putea include, de asemenea,
si chiar doriți sa o faceți, titlul paginilor dvs.
Când vorbesc despre titlu, nu vorbesc despre un tip de HEADER mare care este afișat.
Ma refer la acea chestie mica pe care o vedeți in tab-ul browser-ului dvs.
Mai târziu, poate doriți sa adaugați fișiere de sprijin.
Poate doriți să aveți fișiere CSS care vă vor aranja pagina,
sau JavaScript care se poate adăuga la diferite interacțiuni,
sau in realitate orice tip de programe de completare care
va schimba modul in care lumea navighează si interacționează cu site-ul dvs.
In afara de titlu, informațiile din metadata nu sunt afișate,
si utilizatorii site-ului dvs. nu le pot vedea.
Ce pot vedea este informația din tag-ul Body.
Acest tag cuprinde majoritatea paginii.
Este foarte important sa scrieți cod corect formatat
si sa va asigurați ca fiecare tag este închis
si nu puneți tag-urile in ordine greșita.
Deci, majoritatea conținutului din Body este afișat de browser dar
din când in când exista si un pic de informație metadata,
dar nu vom atinge acest aspect in acest curs.
Să ne uităm la un exemplu.
Chiar aici, am un fișier numit template.html,
si afișez codul aici pe ecran pentru dvs.
Puteți găsi cele trei părți ale unui document bine format?
Primul lucru pe care doriți să-l căutați este Doctype.
Avem asta chiar aici.
Te anunța ca este un document HTML5.
Apoi avem eticheta HTML care a fost rădăcina arborelui nostru cu adevărat științific.
Limba in care se scrie este in general engleza.
In secțiunea Head avem informațiile metadata.
Unde suntem informați la modul "Hei
sunt multe tipuri de tastaturi diferite
si moduri in care sunt reprezentate in lume
si as vrea sa folosești ceea ce se numește UTF-8".
Nu va faceți griji de asta, doar folosiți-l de fiecare data.
Apoi in următoarea parte din metadata este titlul unde vrem să apară
"Prima mea pagina". Asta e.
Acestea sunt doua din cele trei parți.
Ultima parte este tag-ul Body și
afișează conținutul pe care vrem să-l vedem pe ecran.
Deci sa ne uitam la asta într-un browser. Ce vedem ?
Am titlul aici sus,
si conținutul afișabil aici jos.
In regulă, am scris codul
următorul pas pe care ar trebui sa îl faceți întotdeauna este sa îl validați.
Spuneți: „Am scris cod, arată bine,
dar știu că browserele sunt foarte drăguțe și ele
fac ca lucrurile să se afișeze frumos chiar și atunci când nu am scris un cod bun. "
Deci, dacă accesați validator-ul de la adresa w3.org
puteți verifica orice site si aveți trei opțiuni de a verifica codul acestuia.
Puteți încărca adresa URL,
un fișier,
sau chiar să vă introduceți propriul cod acolo.
În acest caz, eu am introdus adresa URL a fișierului template.html.
și „ura!”. Nu este surprinzător pentru că știam că
documentul este valid și verificarea se va face cu succes.
Nu vă faceți griji cu privire la avertismente.
Avertismentele sunt, de obicei, pentru a se acoperi pe ele dacă putem spune asa.
Ce se întâmplă dacă doriți să vă validați
fișierul dar acesta, de fapt, nu este încă pe internet ?
Să parcurgem foarte repede un exemplu despre cum puteți face asta.
Să presupunem că am fișierul template.html pe care doresc să îl verific.
Vă subliniez faptul că am modificat
fișierul si am introdus o greșeala de scriere intenționata.
Am scris greșit eticheta de închidere pentru titlu.
Haideți să vedem ce se întâmplă
și dacă browserul sau validatorul pot găsi erorile.
Voi accesa adresa URL validator.w3.org
si voi selecta a treia opțiune care validează prin introducere directă.
Prin combinația de taste command/control+A sau
dacă sunteți pe PC command+C,
copiem tot codul și îl introducem in validator.
Facem clic pe check si după cum puteți vedea
avem două erori.
De ce am două erori când am introdus o singură eroare?
Ei bine, validatoarele nu sunt perfecte niciodată.
Eroarea pe care a găsit-o browserul sună cam asa: „Am găsit
sfârșitul fișierului si nu mă așteptam la asta”.
Dacă ne uitam la eroarea numărul 2 găsim motivul pentru care s-a
întâmplat asta si ne spune: „Oh, ai uitat sa închizi eticheta de titlu”.
Este de reținut ca uneori o eroare poate genera o mulțime de mesaje
dar nu vă faceți griji.
Am văzut până la 50 sau 60 de erori din care 80% au dispărut
în momentul în care am corectat o linie de cod.
Voi reveni la codul meu,
îl voi remedia punând înapoi acel titlu si îl voi salva.
Îl copiem din nou, îl introducem si îl verificăm încă o data.
De data aceasta verificarea se completează fără erori.
Să recapitulăm. Dacă doriți o pagină formatată corect
doriți sa urmați structura DOM.
Urmarea acestei structuri înseamna că utilizați întotdeauna ambele etichete de început si sfârșit.
De asemenea, închideți etichetele interioare înainte de cele exterioare.
Semnificația acestui lucru este ca daca începeți eticheta de titlu
trebuie sa o închideți înainte de eticheta de corp.
De asemenea, veți dori să utilizați
atribute valide, care este unul dintre lucrurile despre care vom vorbi puțin
mai târziu când vorbim despre imagini și
practic părți ale paginii dvs. care au nevoie de informații suplimentare.
Problema cu browserele este că acestea vor remedia codul defect pentru dvs.
Le numesc întotdeauna părinții elicopterului codării.
Sună la modul „Știu cum ai vrut să arate așa,
așa voi face să pară pe ecran. "
Problema este că nu funcționează întotdeauna pentru toată lumea.
Deci, doar pentru că site-ul dvs. arată bine atunci când îl priviți în browser,
nu înseamnă că este corect.
Trebuie să utilizați un validator pentru a vă verifica codul.