Acțiune:
9 greșeli pe care nu trebuie să le faceți atunci când construiți o pagină Web
Crearea unei pagini web cu HTML și CSS este destul de simplă Cum să faci un site web: Pentru începători Cum să faci un site web: Pentru începători Azi te voi îndruma prin procesul de a face un site complet de la zero. Nu vă faceți griji dacă acest lucru pare dificil. Te voi îndruma în fiecare pas al drumului. Citeste mai mult . Dar este ușor să faci greșeli și sunt foarte puține lucruri despre care nu te gândești. De cele mai multe ori, aceste mici greșeli nu vor face prea multă diferență.
Dar, pe termen lung, vă pot face viața mai dificilă. Aceste nouă greșeli sunt ușor de realizat, dar dacă le dați mai devreme decât mai târziu, pagina dvs. va arăta mai bine, va fi mai ușor de întreținut și va funcționa așa cum doriți.
1. Styling inline
Unul dintre marile lucruri despre HTML și CSS este că puteți să formatați orice linie de text - orice cuvânt unic, într-adevăr - ori de câte ori doriți. Dar asta nu înseamnă că ar trebui să profitați de această capacitate.
Iată un exemplu de stil inline pe care l-ați putea folosi pentru a face un paragraf mai mare decât paragrafele din jur și pentru al evidenția într-o altă culoare:
Textul tău aici.
Acest lucru oferă paragrafului un stil CSS Aflați HTML și CSS cu aceste Tutoriale pas cu pas Aflați HTML și CSS cu aceste Tutoriale pas cu pas Curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un talent pentru a învăța cum să creați site-uri web de la zero - aici sunt câteva tutoriale pas cu pas care merită încercate. Citiți mai multe care se încheie cu încheierea paragrafului. Pare destul de eficient, corect?
Există o mare problemă cu aceasta: dacă doriți să schimbați o mulțime de lucruri pe site-ul dvs., va trebui să mergeți și să găsiți toate exemplele de stil inline și să le schimbați. Dacă aveți 100 de paragrafe diferite care sunt de 120% dimensiune text și albastru, va trebui să găsiți toate cele 100 și să le schimbați la ceea ce ați decis este un format mai bun.
În schimb, utilizați o foaie de stil CSS. Iată stilul pe care l-ați folosi pentru paragraful de mai sus:
p.important dimensiune: 120%; Culoarea albastra; Acum, în loc să utilizați stilul inline, puteți folosi pur și simplu această linie:
Textul tău aici.
Paragraful tău va fi mare și albastru. Și când faceți o schimbare la “important” clasa în CSS, toate se vor schimba.
2. Tabele pentru aspect
Oamenii obișnuiau să folosească tabele pentru formatarea aspectului paginii destul de regulat. Prin utilizarea unui tabel, puteți organiza elementele din pagină în coloane și rânduri, precum și să aplicați aliniere și stiluri diferite. Chiar și mesele cu o singură celulă ar fi folosite pentru a obține alinierea corectă a conținutului. Dar această utilizare a tabelelor este, în general, încruntată.
La fel ca stilurile inline, utilizarea CSS în loc de tabelele HTML pentru aspect este mai ușor de întreținut. Din nou, dacă doriți să faceți modificări în zeci sau sute de pagini, este mult mai ușor să editați foaia de stil decât să treceți prin fiecare pagină și să optimizați tabelele.
Pe lângă o întreținere mai ușoară, citirea schemelor CSS tinde să fie mult mai ușoară decât citirea tabelelor HTML. Mai ales dacă ajungeți în cuiburi pe mai multe niveluri de mese unul în celălalt. S-ar putea să nu fie foarte ușor să mergeți înainte și înapoi între documentul dvs. HTML și foaia dvs. de stil pentru a vedea exact ce se întâmplă, dar conținutul paginii dvs. va fi mai clar și mai ușor de editat.
Folosirea tabelelor aici și acolo pentru a împărți paginile în coloane nu este un păcat muritor. Uneori e mai ușor și mai rapid decât să te grăbești cu CSS. Dar dacă faci mese gigantice, cu mai multe etape, trebuie să te gândești la reformatarea cu CSS.
HTML depreciat
Ca orice limbă, HTML se modifică în mod regulat. Etichetele recunoscute în mod oficial se modifică și unele devin respinse. Chiar dacă aceste etichete încă funcționează, este mai bine să le eviți.
De exemplu, dacă sunteți obișnuit să utilizați etichetă pentru caractere aldine și etichetă pentru italice, sunteți în spatele timpului. și (pentru “accent”) sunt acum etichetele standard.
Majoritatea etichetelor depreciate au fost înlocuite cu CSS, deci va trebui să utilizați stiluri (de preferință nu cele inline) pentru a obține același efect. Dacă nu sunteți sigur cum să înlocuiți o etichetă depreciată sau dacă o anumită etichetă este încă utilizată, verificați documentația oficială HTML sau purtați doar o căutare rapidă.
4. Inline JavaScript
Unele pagini web utilizează JavaScript pentru a adăuga funcționalitate suplimentară JavaScript și Dezvoltare Web: Utilizarea modelului de obiect de documente JavaScript și dezvoltarea Web: Utilizarea modelului de obiect al documentului Acest articol vă va prezenta scheletul cu care lucrează JavaScript. Având o cunoaștere de lucru a acestui model de obiect abstract, puteți scrie JavaScript care funcționează pe orice pagină web. Citeste mai mult . Poate face pagini web interactiv, validează textul în timp ce acesta este introdus, adaugă animații, oferă răspunsuri la acțiunile utilizatorului și așa mai departe. Pe scurt, poate face o pagină mai utilă prin furnizarea unui comportament adăugat.
La fel ca și CSS, puteți adăuga JavaScript în limbajul HTML. De asemenea, ca și CSS, acest lucru este în general descurajat. Pe lângă faptul că este posibil să fie mai greu de întreținut, există și alte câteva motive care justifică această avertizare.
JavaScript inline poate utiliza sume mai mari de lățime de bandă decât un script conectat dintr-un fișier diferit. Un proces numit minificare comprimă HTML și CSS înainte de a-l trimite unui utilizator, care necesită o bandă mai mică de bandă pe conexiuni în bandă largă sau mobilă. JavaScript inline, cu toate acestea, nu poate fi minimizat. De asemenea, acesta nu va fi stocat în cache, în timp ce un fișier JavaScript separat poate sa fi cached.
Toate aceste lucruri fac din JavaScript mai multă lățime de bandă intensivă.
Este, de asemenea, mai greu de depanat, deoarece puteți utiliza un validator JavaScript pentru un fișier JavaScript ... dar nu va funcționa pe scriptul inline. Și, din nou, face ca HTML mai curat și mai ușor de întreținut.
5. Mai multe etichete H1
Etichetele de etichetare sunt minunate. Ele fac paginile mai usor de scos, ele pot da un impuls SEO, si pot fi folosite pentru a sublinia anumite puncte.
Dar există șase niveluri de etichete de rubrică pentru un motiv. Ar trebui să existe o singură etichetă H1 pe pagina dvs. Și acesta este adesea titlul paginii (în special pe bloguri și site-uri similare). S-ar putea să vă gândiți că punerea în buzunar a unor cuvinte cheie în tag-urile H1 va face Google mai mare probabilitatea de a le ridica și de a-ți clasifica site-ul mai înalt în rezultate.
Dar ceea ce face cu adevărat este ca pagina dvs. să devină mai confuză și mai greu de citit. Ceea ce va nega orice beneficii SEO pe care le-ați putea vedea oricum.
Utilizați H2, H3 și restul etichetelor pentru a schimba mai bine pagina dvs. Nivelul rubricii trebuie să ofere cititorului dvs. o idee despre cât de importantă este următoarea secțiune. Dacă le-ați înșelat, ei o vor ști și nu vor fi fericiți.
6. Transmite imaginea Alts
Fiecare imagine poate fi dată “Alt” atributul care afișează o anumită linie de text dacă imaginea nu poate fi afișată. Acest lucru nu pare să fie o afacere mare, mai ales cu browserele moderne (desktop și mobile) care pot afișa aproape orice.
Dar nu adăugarea de atribute alt este o mare greșeală, mai ales în epoca de navigare constantă pe mobil. Conexiunile mobile nu sunt întotdeauna minunate și dacă un browser nu poate încărca o imagine, cititorul dvs. nu are nicio idee despre ce ar trebui să vadă acolo. Un alt atribut poate rezolva asta.
Și dacă cineva folosește un cititor de ecran VoiceOver face dispozitivele Apple mai accesibile decât vreodată VoiceOver face aparatele Apple mai accesibile decât vreodată Președintele Fundației Americane a Nevăzătorilor consideră că "Apple a făcut mai mult pentru accesibilitate decât orice altă companie până în prezent" și VoiceOver a jucat un rol important în asta. Citiți Mai multe sau alte caracteristici de accesibilitate, acel alt atribut ar putea fi tot ce au ieșit din imagine.
Desigur, există beneficii SEO potențiale, de asemenea. Motoarele de căutare pot să indexeze atribute scurte, descriptive alt. Dar cel mai mare beneficiu aici este ajutarea cititorilor.
7. Nu etichete de închidere
Există câteva etichete HTML pe care le puteți scăpa fără a închide, cum ar fi
și
În primul rând, în ciuda progreselor în tehnologia browserului, există cu siguranță posibilitatea ca browserul să afișeze conținutul dvs. în mod necorespunzător dacă nu ați închis etichetele. Și aplicarea stilurilor ar putea produce unele rezultate imprevizibile, așa cum demonstrează robertc de la Stack Exchange.
Ceea ce se întâmplă este că browserele așteaptă etichete de încheiere. Ei nu au absolut nevoie de ei ... dar ei vor beneficia cu siguranta de a avea corect HTML atunci cand incearca sa afiseze pagina ta.
Din fericire, nu prea este nevoie să închideți etichetele, mai ales dacă utilizați un editor HTML bun.
8. Nu include un DOCTYPE
La începutul documentelor HTML, veți vedea, de obicei, o declarație DOCTYPE, ca aceasta:
Este ceva ce nu se vorbește de multe ori, dar este un element important în pagina dvs. Declarația DOCTYPE indică unui browser ce tip de cod HTML utilizați. Acest lucru îi permite să redați HTML corect.
Dacă ignorați declarația DOCTYPE, pagina se va afișa “quirks mode.” Aceasta este apărarea browserului modern împotriva paginilor web vechi. Și modifică modul în care se afișează pagina dvs. O privire rapidă asupra modului quark-urilor Firefox arată că schimbările de sensibilitate a casetei, proprietățile fontului nu moștenesc în tabele, dimensiunile fontului sunt calculate diferit, iar imaginile fără alte atribute sunt afișate uneori incorect.
Cele mai multe dintre aceste lucruri sunt relativ minore. Dar dacă doriți ca pagina dvs. să fie afișată corect, trebuie să vă asigurați că un browser are activat modul standard complet.
Și pentru a face asta, aveți nevoie de un DOCTYPE. (Dacă nu sunteți sigur ce să utilizați, pur și simplu utilizați .)
9. Neglijarea schemei de marcare
Schema de marcare ajută motoarele de căutare să obțină o idee mai bună despre ceea ce se află pe pagina dvs. Mai exact, acel markup spune motoarelor de căutare despre ce scrieți în fiecare secțiune.
De exemplu, într-un articol, puteți utiliza marcarea schemei pentru a indica unui motor de căutare titlul, autorul, data, editorul și alte informații utile despre un articol.
Există scheme pentru filme, cărți, organizații, oameni, restaurante, produse, locuri, acțiuni, diferite tipuri de date, muzică, sculptură, rezervări, servicii, ATM-uri, fabrici de bere și aproape orice altceva vă puteți gândi. E destul de uimitor.
Puteți ieși cu siguranță fără a utiliza marcarea schemei. Pagina dvs. va fi afișată corect fără ea. Cititorii dvs. nu vor ști nici măcar că este acolo. Dar sunt multe de câștigat prin includerea acestui marcaj. Motoarele de căutare vor putea oferi informații mult mai detaliate și mai utile despre pagina dvs., inclusiv fragmente îmbogățite.
Și cu instrumentul de marcare a schemei Google, procesul este de fapt destul de ușor.
Folosiți cele mai bune practici HTML
Realizarea acestor obiceiuri poate dura un timp. Și uneori se poate simți ca și cum ai lua mult timp mai mult pentru ceva care nu te face prea mult. Dar asigurați-vă că HTML și CSS Învățați HTML și CSS cu aceste Tutoriale Pas cu pas Aflați HTML și CSS cu aceste Tutoriale pas cu pas Curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un talent pentru a învăța cum să creați site-uri web de la zero - aici sunt câteva tutoriale pas cu pas care merită încercate. Citiți mai multe sunt bine stabilite, ușor de a lucra cu, și întreținere vă va salva o mulțime de timp pe termen lung.
Ce alte obiceiuri bune ați descoperit a fi utile atunci când creați pagini web? Nu sunteți de acord cu oricare dintre practicile de mai sus? Împărtășiți-vă gândurile în comentariile de mai jos!