30 cele mai bune practici HTML pentru începători

Cel mai dificil aspect al rularii Nettuts + este contabilizarea atât de multe nivele de calificare diferite. Dacă vom posta prea multe tutoriale avansate, publicul nostru începător nu va beneficia. Același lucru este valabil și pentru contrariul. Noi facem tot ce ne stă în putință, dar întotdeauna vă simțiți liberi să vă dați dovadă dacă simțiți că sunteți neglijat. Acest site este pentru tine, deci vorbeste! Cu aceasta a spus, tutorialul de azi este special pentru cei care se scufundă doar în dezvoltarea web. Dacă aveți un an de experiență sau mai puțin, sperăm că unele dintre sfaturile enumerate aici vă vor ajuta să deveniți mai buni, mai rapizi!

De asemenea, vă recomandăm să consultați unii dintre constructorii HTML de pe Envato Market, cum ar fi VSBuilder popular, care vă permite să generați automat codurile HTML și CSS pentru a vă construi site-urile în mod automat prin alegerea opțiunilor dintr-o interfață simplă.

Sau puteți construi site-ul dvs. de la zero de către un dezvoltator profesionist de pe Envato Studio, care cunoaște și respectă toate cele mai bune practici HTML.

Aflați CSS: Ghidul complet

Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.

Fără alte detalii, să examinăm cele 30 de bune practici pe care să le observăm la crearea marcajului.

1: Întotdeauna închideți etichetele

În timpul zilei, nu era neobișnuit să vezi lucruri de genul:

Un text aici. 
Un text nou aici. 
Ai idee.

Observați cum a fost omologată eticheta UL / OL de împachetare. În plus, mulți au ales să renunțe la etichetele LI de închidere, de asemenea. Prin standardele de astăzi, aceasta este pur și simplu o practică nepotrivită și trebuie evitată 100%. Întotdeauna închideți întotdeauna etichetele. În caz contrar, veți întâlni problemele de validare și glitch la fiecare întoarcere.

Mai bine

 Un text aici. 
 Un text nou aici. 
 Ai idee.

2: Declarați documentul corect

Când eram mai tânără, am participat destul de mult la forumurile CSS. Ori de câte ori un utilizator a avut o problemă, înainte de a ne uita la situația lor, ei ar trebui să efectueze mai întâi două lucruri:

Validați fișierul CSS. Remediați orice eroare necesară.
Adăugați o doctype.

"DOCTYPE merge înainte de eticheta html de deschidere din partea de sus a paginii și spune browser-ului dacă pagina conține HTML, XHTML sau o combinație de ambele, astfel încât să poată interpreta corect marcajul."

Majoritatea dintre noi aleg între patru doctypes diferite atunci când creează noi site-uri web.

http://www.w3.org/TR/html4/strict.dtd ">
http://www.w3.org/TR/html4/loose.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

Există o mare dezbatere despre alegerea corectă. La un moment dat, a fost considerată cea mai bună practică utilizarea versiunii XHTML Strict. Cu toate acestea, după unele cercetări, sa constatat că majoritatea browserelor revin la codul HTML obișnuit atunci când o interpretează. Din acest motiv, mulți au ales să utilizeze în schimb HTML 4.01 Strict. Linia de jos este că oricare dintre acestea vă va ține sub control. Faceți niște cercetări și creați-vă propriile minți.

3: Nu utilizați niciodată stiluri inline

Când ești greu să lucrezi la marcajul tău, uneori poate fi tentant să faci calea ușoară și să te furișezi într-un pic de stil.

Voi face ca acest text să fie roșu, astfel încât să se evidențieze cu adevărat și îi face pe oameni să observe!

Sigur - pare destul de inofensiv. Cu toate acestea, acest lucru indică o eroare în practicile dvs. de codificare.

Când creați marcajele dvs., nu vă gândiți nici măcar la styling. Începeți să adăugați stiluri numai după ce pagina a fost complet codată.

E ca și cum ar fi trecerea râurilor în Ghostbusters. Nu este o idee bună.
-Chris Coyier (referindu-se la ceva complet nesoluționat.)

În schimb, terminați marcajul și apoi indicați eticheta P din foaia de stil externă.

Mai bine

#someElement> p culoare: roșu;

4: Plasați toate fișierele CSS externe în eticheta capului

Din punct de vedere tehnic, puteți plasa foile de stil oriunde doriți. Cu toate acestea, specificațiile HTML recomandă ca acestea să fie plasate în eticheta HEAD a documentului. Beneficiul principal este că paginile dvs. se vor încărca mai repede.

În timp ce cercetăm performanța la Yahoo !, am descoperit că mutarea foilor de stil la documentul HEAD face ca paginile să pară că se încarcă mai repede. Acest lucru se datorează faptului că punerea foilor de stil în HEAD permite paginii să se facă progresiv.
- ySlow Echipa

 Favoritele mele feluri de porumb

5: Luați în considerare plasarea fișierelor Javascript în partea de jos

Rețineți - obiectivul principal este de a încărca pagina cât mai repede posibil pentru utilizator. Când se încarcă un script, browserul nu poate continua până când întregul fișier nu a fost încărcat. Astfel, utilizatorul va trebui să aștepte mai mult înainte de a observa orice progres.

Dacă aveți fișiere JS al căror unic scop este de a adăuga funcționalități - de exemplu, după ce un buton este apăsat - mergeți mai departe și plasați aceste fișiere în partea de jos, chiar înaintea etichetei de închidere a corpului. Aceasta este absolut o bună practică.

Mai bine

Și acum știi tipul meu preferat de porumb.

6: Nu folosiți niciodată Javascript inline. Nu este 1996!

O altă practică obișnuită de ani în urmă a fost de a plasa comenzile JS direct în etichete. Acest lucru a fost foarte comun cu galeriile simple de imagini. În esență, un atribut "onclick" a fost adăugat la etichetă. Valoarea ar fi apoi egală cu unele proceduri JS. Inutil să spun că nu trebuie să faceți niciodată acest lucru. În schimb, transferați acest cod într-un fișier extern JS și utilizați "addEventListener / attachEvent" pentru a "asculta" evenimentul dorit. Sau, dacă utilizați un cadru ca jQuery, trebuie doar să utilizați metoda "clic".

$ ('a # moreCornInfoLink') faceți clic pe (function () alert ('Vreți să aflați mai multe despre porumb?');));

7: Validați continuu

Recent am blogat despre modul în care ideea de validare a fost complet misconstruită de cei care nu înțeleg complet scopul său. După cum menționez în articol, "validarea ar trebui să funcționeze pentru dvs., nu împotriva".

Cu toate acestea, mai ales când începeți prima dată, vă recomandăm să descărcați Bara de instrumente Web Developer și să utilizați continuu opțiunile "Validați HTML" și "Validați CSS". În timp ce CSS este o limbă ușor de învățat, vă poate face să vă rupeți părul. După cum veți găsi, de multe ori, este marcajul tău șubred care cauzează acea problemă ciudată pe spațiul alb. Validați, validați, validați.

8: Descărcați Firebug

Nu-mi pot recomanda acest lucru suficient. Firebug este, fără îndoială, cel mai bun plugin pe care îl veți folosi când creați site-uri web. Nu numai că furnizează o depanare incredibilă în Javascript, dar veți învăța, de asemenea, cum să identificați elementele care moștenesc acea extragere pe care nu ați știut-o. Descarca-l!

9: Folosiți Firebug!

Din experiențele mele, mulți utilizatori profită de aproximativ 20% din capabilitățile Firebug. Chiar te faci un serviciu prost. Luați câteva ore și răsfoiți webul pentru fiecare tutorial demn pe care îl puteți găsi pe această temă.

Resurse

Privire de ansamblu asupra Firebug
Debug Javascript Cu Firebug - video tutorial

10: Mențineți nume de etichete mai mici

Din punct de vedere tehnic, puteți renunța la capitalizarea numelor de etichete.

 Iată un fapt interesant despre porumb.

Acestea fiind spuse, vă rog să nu faceți asta. Nu are nici un scop și mă doare ochii - să nu mai vorbim de faptul că îmi amintește de funcția html a Microsoft Word!

Mai bine

 Iată un fapt interesant despre porumb.

11: Utilizați etichetele H1 - H6

Desigur, acesta este un lucru pe care am tendința să-l pierd. Este cea mai bună practică să utilizați toate cele șase dintre aceste etichete. Dacă sunt sincer, de obicei pun în aplicare doar primele patru; dar lucrez la asta! :) Pentru motive semantice și SEO, obligați-vă să înlocuiți acel tag P cu un H6 când este cazul.

Acesta este un fapt important pentru porumb! 
 Dar micul, dar totuși semnificativ, porumb este aici.

12: Dacă construiți un blog, salvați H1 pentru titlul articolului

Doar în această dimineață, pe Twitter, i-am întrebat pe urmașii noștri dacă au simțit că este mai deștept să plaseze eticheta H1 ca siglă sau să o folosească drept titlul articolului. Aproximativ 80% din tweet-urile returnate au fost în favoarea celei de-a doua metode.

Ca și în orice, determinați ce este mai bun pentru propriul dvs. site web. Cu toate acestea, dacă construiți un blog, aș recomanda să salvați etichetele dvs. H1 pentru titlul articolului. În scopurile SEO, aceasta este o practică mai bună - în opinia mea.

13: Descărcați ySlow

Mai ales în ultimii ani, echipa Yahoo a făcut o treabă foarte bună în domeniul nostru. Nu cu mult timp în urmă, au lansat o extensie pentru Firebug numită ySlow. Când este activată, va analiza site-ul dat și va returna un "card de raportare" de feluri care detaliază zonele în care site-ul dvs. are nevoie de îmbunătățire. Poate fi un pic cam aspru, dar este totul pentru binele cel mai mare. Îmi recomand foarte mult.

14: Înfășurați navigarea cu o listă neordonată

Fiecare site web are o secțiune de navigare de un fel. În timp ce poți să scapi cu siguranță de formatare așa:

  Acasă Despre Contact

Vă încurajez să nu folosiți această metodă, din motive semantice. Treaba ta este să scriu cel mai bun cod posibil pe care îl poți face.

De ce să formăm o listă de linkuri de navigare cu altceva decât o listă neordonată?

Eticheta UL este menită să conțină o listă de articole.

Mai bine

 Acasă
 Despre
 a lua legatura

15: Aflați cum să direcționați IE

Veți găsi fără îndoială că țipați la IE pe parcursul unui anumit punct sau altul. De fapt, a devenit o experiență de legătură pentru comunitate. Când citesc pe Twitter cum unul dintre prietenii mei se luptă cu forțele IE, eu zâmbesc și mă gândesc: "Știu cum te simți, amice".

Primul pas, odată ce ați terminat fișierul CSS principal, este de a crea un fișier unic "ie.css". Apoi puteți să o referiți numai pentru IE folosind codul următor.

Acest cod spune: "Dacă browserul utilizatorului este Internet Explorer 6 sau mai mic, importați această foaie de stil, altfel nu faceți nimic". Dacă trebuie să compensați și IE7, înlocuiți pur și simplu "lt" cu "lte" (mai mic sau egal cu).

16: Alegeți un Editor de coduri de mare valoare

Indiferent dacă sunteți pe Windows sau un Mac, există o mulțime de editori de coduri fantastice care vor funcționa minunat pentru dvs. Personal, am un Mac și un PC side-by-side pe care le folosesc de-a lungul zilei mele. Ca rezultat, am dezvoltat o cunoaștere destul de bună a ceea ce este disponibil. Iată opțiunile / recomandările mele de top pentru:

Mac Lovers

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

Iubitorii PC-urilor

InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

17: Odată ce site-ul este complet, comprimați!

Prin ziparea fișierelor CSS și Javascript, puteți reduce dimensiunea fiecărui fișier cu 25% sau mai mult. Nu vă deranjați să faceți acest lucru în timpul dezvoltării. Cu toate acestea, odată ce site-ul este, mai mult sau mai puțin, complet, utilizați câteva programe de compresie online pentru a vă salva o anumită lățime de bandă.

Servicii de compresie Javascript

Compresor Javascript
Compresor JS

Servicii de compresie CSS

Optimizatorul CSS
Compresor CSS
Curata CSS

18: Taiați, tăiați, tăiați

Privind înapoi la primul meu site web, trebuie să fi avut un caz SEVERE de divită. Instinctul dvs. natural este să înfășurați în siguranță fiecare paragraf cu div și apoi să-l înfășurați cu încă o div pentru o măsură bună. Pe măsură ce veți învăța repede, este foarte ineficient.

După ce ați terminat marcajul, treceți de două ori și găsiți modalități de a reduce numărul de elemente de pe pagină. UL-ul are nevoie de propriul div de împachetare? nu cred.

Așa cum cheia pentru scriere este "tăierea, tăierea, tăierea", același lucru este valabil și pentru marcajul tău.

19: Toate imaginile necesită atribute "Alt"

Este ușor să ignori necesitatea atributelor alt în etichetele de imagine. Cu toate acestea, este foarte important, din motive de accesibilitate și de validare, să luați un moment suplimentar pentru a completa aceste secțiuni.

Rău

Mai bine

20: Rămâi târziu

Mă îndoiesc că sunt singurul care, la un moment dat învățând, a ridicat ochii în sus și mi-a dat seama că eram într-o încăpere întunecoasă de dimineață devreme. Dacă v-ați aflat într-o situație similară, fiți siguri că ați ales câmpul potrivit.

Uimitorul momente "AHHA", cel puțin pentru mine, apar întotdeauna noaptea târziu. Acesta a fost cazul când am început să înțeleg exact ce închideri de Javascript erau. Este un sentiment minunat pe care trebuie să îl experimentați, dacă nu ați făcut-o deja.

21: Vizualizați sursa

Ce modalitate mai bună de a învăța HTML decât de a vă copia eroii? Inițial, suntem toți copiatori! Apoi încet, începeți să vă dezvoltați propriile stiluri / metode. Deci, vizitați site-urile celor pe care îi respectați. Cum au codificat această secțiune și acea secțiune? Aflați și copiați din ele. Cu toții am făcut-o, și ar trebui să fii și tu. (Nu furați designul, doar învățați din stilul de codificare.)

Observați toate efectele de Javascript cool pe care doriți să le învățați? Probabil că folosește un plugin pentru a realiza efectul. Vizualizați sursa și căutați eticheta HEAD pentru numele scriptului. Apoi, Google și-l pună în aplicare în site-ul dvs.! ura.

22: Stilul ALL Elements

Această bună practică este valabilă mai ales când proiectați pentru clienți. Doar pentru că nu ați utilizat o blocare de bloc nu înseamnă că clientul nu va. Nu folosiți niciodată liste comandate? Asta nu înseamnă că nu o va face! Efectuați-vă un serviciu și creați o pagină specială pentru a arăta stilul fiecărui element: ul, ol, p, h1-h6, blockquotes etc..

23: Utilizați Twitter

În ultima vreme, nu pot porni televizorul fără a auzi o referință la Twitter; a devenit cu adevărat neplăcut. Nu am dorința de a asculta pe Larry King că își face publicitate în contul lui Twitter - pe care știm cu toții că nu se actualizează manual. Da pentru asistenți! De asemenea, câte mame au înscris pentru conturi după aprobarea lui Oprah? Nu putem decât să facem o zi în care doar câțiva dintre noi au fost conștienți de serviciu și de potențialul său de "răcitor de apă".

Inițial, ideea din spatele Twitter a fost aceea de a posta "ce făceai". Deși acest lucru rămâne valabil într-o mică măsură, acesta devine mult mai mult un instrument de rețea în industria noastră. Dacă un scriitor de pe web pe care îl admir, postează un link către un articol pe care l-a găsit interesant, mai bine crezi că o să verific și pe el - și ar trebui să faci și tu! Acesta este motivul pentru care site-uri ca Digg devin repede din ce în ce mai nervos.

Dacă v-ați înscris, nu uitați să ne urmați: NETTUTS.

24: Aflați Photoshop

Un comentator recent pe Nettuts + ne-a atacat pentru a afișa câteva recomandări de la Psdtuts +. El a susținut că tutorialele Photoshop nu au afaceri pe un blog de dezvoltare web. Nu sunt sigur de el, dar Photoshop este deschis destul de mult 24/7 pe computerul meu.

De fapt, Photoshop poate deveni foarte bine instrumentul mai important pe care îl aveți. Odată ce ați învățat HTML și CSS, aș recomanda personal să învățați cât mai multe tehnici Photoshop posibil.

Accesați secțiunea Videoclipuri la Psdtuts+
Furcați peste 25 de dolari pentru a vă înscrie pentru un abonament de o lună la Lynda.com. Urmăriți fiecare videoclip pe care îl puteți găsi.
Bucurați-vă de seria "Ai suge la Photoshop".
Luați câteva ore pentru a memora cât mai multe comenzi rapide de la tastatură PS cât puteți.

25: Aflați fiecare etichetă HTML

Există literalmente zeci de etichete HTML pe care nu le veți întâlni în fiecare zi. Cu toate acestea, asta nu înseamnă că nu trebuie să le învățați! Familiarizați-vă cu eticheta "abbr"? Ce zici de "cit"? Doar cei doi merită un loc în pieptul tău. Învățați-i pe toți!

Apropo, în cazul în care nu sunteți familiarizați cu cele două enumerate mai sus:

abbr face exact ce vă așteptați. Se referă la o abreviere. "Blvd" ar putea fi învelit într-un etichetă deoarece este o abreviere pentru "bulevard".
cita este folosit pentru a face referire la titlul unei anumite lucrări. De exemplu, dacă menționați acest articol pe propriul dvs. blog, puteți pune "30 HTML Best Practices for Beginners" într-un etichetă. Rețineți că nu ar trebui să fie folosit pentru a face referire la autorul unei cotații. Aceasta este o concepție greșită.

26: Participați la Comunitate

La fel cum site-uri precum a noastră contribuie foarte mult la dezvoltarea cunoștințelor unui dezvoltator web, ar trebui să fii și tu! În cele din urmă a dat seama cum să plutești în mod corect elementele tale? Faceți un post pe blog pentru a le învăța pe alții cum. Vor fi întotdeauna cei cu mai puțină experiență decât tine. Nu numai că veți contribui la comunitate, dar vă veți învăța și voi. Observați întotdeauna cum nu înțelegi cu adevărat ceva până nu ești forțat să-l înveți?

27: Utilizați o Resetare CSS

Acesta este un alt domeniu care a fost dezbătut până la moarte. Restorează CSS: să utilizezi sau să nu folosești; aceasta este întrebarea. Dacă mi-aș oferi propriul sfat personal, aș recomanda 100% să creați propriul fișier de resetare. Începeți să descărcați unul popular, cum ar fi Eric Meyer, și apoi încet, pe măsură ce aflați mai multe, începeți să-l modificați în propriul dvs. Dacă nu faceți acest lucru, nu veți înțelege cu adevărat de ce elementele din listă primesc acel extra bit de umplutură atunci când nu l-ați specificat oriunde în fișierul dvs. CSS. Salvează-ți furia și reseta totul! Asta ar trebui să te facă să începi.

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr acronim adresa big cite cod img ins kbd q, samp, mic, grevă, puternic, dl, dt, dd, ol, ul, li, câmp, formă, etichetă, legendă, tabel; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: transparent;  corp linie-înălțime: 1;  ol, ul stil-list: nici unul;  blockquote, q citate: none;  blockquote: înainte, blockquote: după, q: înainte, q: după content: ";

28: Ridicați-le!

În general, trebuie să vă străduiți să vă aliniați cât mai bine elementele. Uitați-vă la desenele preferate. Ați observat modul în care fiecare poziție, pictogramă, paragraf și logo-ul se aliniază cu altceva pe pagină? Nu face acest lucru este unul dintre cele mai mari semne ale unui începător. Gândiți-vă la acest lucru: Dacă vă întreb de ce ați plasat un element în acel loc, ar trebui să puteți să-mi dați un motiv exact.

29: Slice un PSD

Bine, deci ai câștigat o înțelegere solidă a HTML, CSS și Photoshop. Următorul pas este să vă transformați primul PSD într-un site web de lucru. Nu-ți face griji; nu e la fel de greu cum crezi. Nu mă pot gândi la o modalitate mai bună de a-ți pune aptitudinile în test. Dacă aveți nevoie de asistență, examinați aceste tutoriale video în profunzime, care vă arată exact cum să faceți lucrul.

Slice și Dice că PSD
De la PSD la HTML / CSS

30: Nu folosiți un cadru ... Totuși

Cadrele, fie că sunt pentru Javascript sau CSS, sunt fantastice; dar vă rugăm să nu le folosiți atunci când începeți prima dată. Deși ar putea fi argumentat faptul că jQuery și Javascript pot fi învățate simultan, același lucru nu poate fi făcut pentru CSS. Am promovat personal Cadrul 960 CSS și îl folosesc frecvent. Acestea fiind spuse, dacă sunteți încă în procesul de învățare a CSS - adică primul an - vă veți face mai confuz doar dacă utilizați unul.

Cadrele CSS sunt pentru dezvoltatorii cu experiență care doresc să se salveze un pic de timp. Nu sunt pentru începători.

Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.

Cod