30 Reguli html importante pentru începători

Cel mai dificil aspect al conținutului Nettuts + este ajustarea la niveluri diferite de cunoștințe ale utilizatorilor. Dacă publicăm prea multe lecții la nivel avansat, utilizatorii nu vor ca pentru începători. Converse este, de asemenea, adevărat. Noi facem tot ce depinde de noi, cu toate acestea, nu ezitați să vă reamintim, dacă simțiți că ați fost uitați. Acest site este în primul rând pentru dvs., vă exprimați opinia! Ținând cont de cele de mai sus, lecția de astăzi va fi dedicată în mod special celor care se toarnă în programarea web. Dacă aveți doar un an de experiență sau mai puțin, să sperăm că unele sfaturi date aici vă vor ajuta să deveniți mai buni și mai rapizi!







Nou în titlu:

Deci, să aruncăm o privire rapidă la 30 de reguli importante care ar trebui urmate la crearea paginilor.

1: Închideți întotdeauna etichetele

O dată în urmă, astfel de referințe nu erau rare:

Rețineți că eticheta de înfășurare UL / OL este omisă. În plus, mulți au preferat să nu închidă eticheta LI. Prin standardele actuale este doar o practică inechitabilă și ar trebui evitată 100%. Întotdeauna închideți întotdeauna etichetele. În caz contrar, problemele cu validarea vor avea loc la fiecare pas.

Cum se face mai bine

2: Specificați DocType-ul corect

Când eram mai tânără, am stat câteodată în forumurile CSS. Și întotdeauna, când utilizatorul avea o întrebare, înainte de a ne întreba, trebuia să facă mai întâi două lucruri:

Confirmați validitatea fișierului CSS. Corectați toate erorile. Adăugați doctype

„Pune înainte de eticheta de deschidere DOCTYPE HTML în partea de sus a paginii și spune browser-ului care conține pagina -. HTML, XHTML, sau ambele, astfel încât să poată afișa corect aspectul“

Cele mai multe utilizează patru doctype diferite atunci când creați site-uri noi.

Acum există dezbateri aprinse despre alegerea potrivită în această situație. La început sa crezut că cea mai bună opțiune ar fi utilizarea versiunii XHTML Strict. Cu toate acestea, după unele cercetări, a devenit clar că majoritatea browserelor revin la codul HTML normal atunci când procesează aceste pagini. Din acest motiv, mulți au ales să utilizeze HTML 4.01 Strict. De fapt, toate aceste opțiuni vă oferă controlul. Explorați situația și alegeți propria versiune

3: Nu folosiți niciodată stilurile incluse

Uneori, atunci când este dificil să se dezvolte aspectul, poate doriți să mergeți de-a lungul unei căi ușoare și să inserați câteva stiluri

Desigur - pare destul de inofensiv. Cu toate acestea, aceasta duce la eroarea codurilor.

Acesta este modul în care puteți traversa razele din Ghostbusters. E doar o idee rea. -Chris Coyer (despre ceea ce, complet off topic.)

În schimb, terminați șablonul, apoi trimiteți o referință la această etichetă P în fișierul CSS extern.

Cum se face mai bine

4: Puneți toate fișierele CSS externe în interiorul etichetei HEAD

Din punct de vedere tehnic, puteți pune foi de stil oriunde. Cu toate acestea, specificațiile HTML recomandă introducerea acestora în eticheta HEAD. Cel mai important lucru despre acest avantaj este că paginile dvs. se vor încărca mai repede.

Când am investigat performanța în Yahoo. am constatat că mutarea foilor de stil într-un document HEAD determină încărcarea mai rapidă a paginilor. Aceasta deoarece plasarea foilor de stil în HEAD permite încărcarea progresivă a paginii. - Comanda ySlow

În cazul în care singurul scop al fișierului JS este de a adăuga pagina funcționalitate - de exemplu, după ce un buton este apăsat - puteți pune în siguranță aceste fișiere în partea de jos a paginii, chiar înainte de corpul eticheta de închidere. Aceasta este cea mai bună opțiune.

Cum se face mai bine

O altă practică obișnuită în trecut este de a pune comenzile JS direct în etichete. Acest lucru a fost adesea folosit în galerii simple de imagini. În esență, tag-ul a fost atribuit pur și simplu atributul "onclick". Valoarea sa în acest caz a fost egală cu orice procedură JS. Nu este nevoie să spun că acest lucru nu se poate face niciodată. În schimb, transformați acest cod într-un fișier extern JS și utilizați "addEventListener / attachEvent" pentru a "asculta" evenimentul dorit. Alternativ, atunci când utilizați un cadru, cum ar fi jQuery, pur și simplu utilizați metoda "clic".

7: Verificați constant validitatea

Recent am scris în blogul meu despre modul în care problema validării a fost absolut greșit înțeleasă de cei care nu înțeleg pe deplin scopul său. După cum am menționat în acest articol, "validarea ar trebui să funcționeze pentru dvs., nu împotriva".

Cu toate acestea, mai ales la început, vă recomandăm cu insistență să descărcați Bara de instrumente Web Developer și să folosiți în mod constant elementele "Validați HTML" (verificați HTML) și "Validați CSS". Deși CSS este suficient de ușor pentru a învăța o limbă, ea vă poate face să vă rupeți părul. De asemenea, veți fi adesea convinși că acesta este marcajul dvs. de calitate slabă care a condus la spații ciudate pe pagină. Prin urmare, verificați, verificați și verificați din nou.

8: Descărcați Firebug

9: Utilizați Firebug!

Din experiența mea, majoritatea utilizatorilor folosesc Firebug pentru doar 20% din capabilitățile sale. Într-adevăr te-ai descurcat prost. Petreceți câteva ore și căutați în rețea toate materialele demne de pe această temă.

10: Toate etichetele trebuie să fie mici

Din punct de vedere tehnic, puteți face cu etichetele în majuscule.







Pe de altă parte, nu faceți asta. Nu serveste nici un scop si taie ochiul - sa nu mai vorbim ca imi aminteste de functia html Microsoft Word!

Cum se face mai bine

11: Utilizați etichetele H1 până la H6

Trebuie să spun că acesta este un lucru pe care de multe ori îl uit. Cel mai bine este să folosiți toate cele șase dintre aceste etichete. Sincer, folosesc de obicei primele patru, dar lucrez la el. Pentru a îmbunătăți semantica și site-ul SEO, forțează-te să înlocuiți eticheta P cu oricare H.

12: Când creați un blog, stocați H1 pentru titlu

Am întrebat pe urmașii noștri dacă consideră că este adecvat să utilizeze H1 pentru o siglă sau să o folosească pentru un antet. Aproximativ 80% din tweet-urile returnate au fost în favoarea celei de-a doua opțiuni.

Ca și în cazul tuturor, stabiliți ce funcționează cel mai bine pentru site-ul dvs. Cu toate acestea, atunci când creați un blog, aș recomanda să stocați eticheta H1 pentru titlul articolului. Din motive SEO, aceasta este, după părerea mea, cea mai bună opțiune.

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 adăugare la Firefox numită ySlow. Includeți-l și va analiza acest site web și va emite un "card de raport" care va descrie în detaliu zonele site-ului pe care trebuie să le îmbunătățiți. Poate e ușoară și dură, dar încă bună. Recomand foarte mult această adăugare

14: Blocați bara de navigare într-o listă neordonată

Fiecare site web conține cel puțin un fel de meniu de navigare. Poate și poate aranja, după cum urmează:

Nu aș recomanda utilizarea acestei metode din motive de semantică. Sarcina dvs. este de a crea cel mai bun cod pe care sunteți capabil.

De ce să creați o listă de linkuri de navigare prin orice altceva decât o listă neordonată?

Se presupune că eticheta UL conține o listă de elemente.

Cum se face mai bine

15: Învață să urmărești IE

Mai devreme sau mai tarziu veti blestema IE. Acest lucru a devenit, în general, un element indispensabil în comunitatea noastră. Când citesc pe Twitter, când unul dintre prietenii mei se luptă cu IE, eu doar zâmbesc și mă gândesc la mine: "Știu cum ești, amice".

Primul pas după ce ați creat fișierul principal CSS este crearea unui fișier separat ie.css. Apoi, te poți referi exclusiv la el, folosind codul următor.

Acest cod înseamnă că "browserul utilizatorului este Internet Explorer 6 sau mai mic, utilizați această foaie de stil, altfel nu faceți nimic". Dacă doriți înlocuiri pentru IE7, înlocuiți doar "lt" cu "lte" (mai mic sau egal cu)

17: Când site-ul este gata, stoarce-l!

Servicii de compresie CSS

18: Tăiați, scurtați, scurtați

Privind înapoi la primul meu site, mi se pare că am suferit o formă neglijată de "divatită". În primul rând, instinctul vostru natural este să înfășurați fiecare paragraf din div. și apoi înfășurați-l într-un alt div pentru caz. Veți realiza rapid că acest lucru este extrem de ineficient.

După ce ați terminat șablonul, treceți-l cu ochii de mai multe ori și căutați modalități de a reduce numărul de elemente de pe pagină. Asigurați-vă că plasați acest UL în div. Nu cred.

La fel ca cheia când scrieți, "tăiați, scurtați, scurtați" este valabil și pentru șabloane.

19: Toate imaginile necesită atribute personalizate Alt

Este ușor să subestimezi importanța atributului alt în tag-urile imagine. Cu toate acestea, ele sunt foarte importante din motive de conveniență și de verificare a valabilității. Deci, plătiți o atenție și completați aceste etichete.

Cum se face mai bine

20: Studiați ultimul

Foarte mult mă îndoiesc că sunt singurul care, la un moment dat de a studia ceva, sa uitat în jur și mi-a dat seama că stăteam într-o cameră întunecată, iar timpul era undeva dimineața. Dacă vă aflați într-o situație similară, vă puteți odihni și fiți siguri că ați ales calea cea bună

Aceste momente uimitoare de descoperire, cel puțin pentru mine, se întâmplă mereu târziu noaptea. A fost același lucru și când am înțeles prima dată principiul armăturilor în Javascrip. Acesta este un sentiment foarte plăcut pe care ar trebui să-l experimentați dacă nu l-ați experimentat încă.

Există o modalitate mai bună de a învăța HTML, cu excepția modului de a copia personajele dvs.? În general suntem toți plagiatoare! Chiar și atunci, încet începem să ne dezvoltăm propriile metode și metode. Deci, uitați-vă la locurile celor pe care îi respectați. Cum au realizat această secțiune sau acea secțiune? Aflați și imitați-i. Cu toții am făcut-o, o faceți și o faceți. (Nu furați designul, aflați doar din codul propriu-zis)

22: Stylize TOATE elementele

Aceasta este o regulă foarte importantă, mai ales când lucrați pentru un client. Doar pentru că nu ați utilizat elementul blockquote nu înseamnă că nu va fi necesar de către clientul dvs. Nu folosiți liste comandate? Acest lucru nu înseamnă că nici clientul dvs. nu va fi. Fă-ți o favoare și creează o pagină specială care să arate stilurile tale pentru fiecare element: ul. ol. p. -H1 h6. blockquotes. și așa mai departe.

23: Utilizați Twitter

Inițial, principala idee a lui Twitter a fost să înregistreze "ce faci". În ciuda faptului că rămâne încă într-o anumită măsură, Twitter a devenit un instrument de rețea în industria noastră. Dacă dezvoltatorul meu web respectat a posta un link către un articol pe care l-a găsit interesant, crede-mă, o voi citi și eu - și ar trebui! Acesta este motivul pentru care site-urile precum Digg devin tot mai enervante.

24: Aflați Photoshop

De fapt, Photoshop este probabil să devină instrumentul cel mai important. După ce ați învățat HTML și CSS, aș recomanda să învățați numărul maxim de tehnici Photoshop

25: Aflați fiecare etichetă HTML

Există zeci de etichete HTML pe care nu le veți întâlni în munca dvs. Cu toate acestea, aceasta nu înseamnă că nu ar trebui să le cunoașteți! Familiarizați-vă cu eticheta abbr, de exemplu? Ce zici? Aceste două etichete merită locul lor în cutia dvs. de instrumente. Studiați-i pe toți!

Apropo, dacă încă nu sunteți familiarizați cu aceste două etichete:

abbr face exact ceea ce se așteaptă de la ea. Aceasta înseamnă o abreviere. "Blvd" poate fi înfășurat într-o etichetă abbr deoarece este o abreviere pentru cuvântul "bulevard".

Site-uri, cum ar fi noastre contribuie în mare măsură la creșterea în continuare a cunoștințelor în web design, ar trebui, de asemenea! În cele din urmă, ați ghicit cum să plasați corect elementele pe pagină? Creați o intrare în blog și învață-i pe ceilalți cum să o facă. Vor fi întotdeauna cei cu mai puțină experiență decât tine. Nu veți participa numai la viața comunității, ci veți învăța și ea. N-am observat niciodată că ceea ce nu poți înțelege până nu ești obligat să-l înveți?

27: Utilizați resetarea CSS

Iată o altă întrebare în legătură cu care se desfășoară dezbateri aprinse. Resetarea CSS: utilizați sau nu pentru a utiliza, aceasta este întrebarea. Dacă îți ceri sfatul personal, aș recomanda 100% să creezi propriul tău fișier de resetare. Puteți începe prin descărcarea unor fișiere populare, cum ar fi fișierul lui Eric Meyer, și apoi încet, pe măsură ce învățați, începeți să-l transformați în propriul fișier. Dacă nu faceți acest lucru, nu veți înțelege cu adevărat de ce elementele listelor dvs. primesc o umplutură suplimentară pe care nu ați specificat-o nicăieri în fișierul dvs. CSS. Fiți milă de nervii voștri și căturați totul! Trebuie să începeți.

28: Aliniați totul!

29: Dezasamblați PSD-ul

Deci, aveți deja o cunoaștere solidă a HTML, CSS și Photoshop. Următorul pas este să convertiți primul fișier PSD pe un site web de lucru. Nu vă faceți griji, nu este atât de dificilă cum pare. Cel mai bun mod de a aplica cunoștințele în practică pur și simplu nu poate fi imaginat.

30: Nu folosiți cadre .. În timp ce

Cadrele CSS sunt concepute pentru dezvoltatorii avansați care doresc să salveze puțin timp. Nu sunt pentru incepatori.

Evaluați acest articol:







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: