9 Pogreške koje ne biste trebali napraviti pri izradi web stranice

Oglas

Izrada web stranice s HTML i CSS jest prilično izravan Kako napraviti web stranicu: za početnikeDanas ću vas voditi kroz izradu kompletne web stranice ispočetka. Ne brinite ako ovo zvuči teško. Vodit ću vas kroz to na svakom koraku. Čitaj više . Ali lako je pogriješiti, a postoji nekoliko stvari o kojima možda nećete razmišljati. Većinu vremena ove male pogreške neće mnogo promijeniti.

Ali dugoročno vam mogu otežati život. Ovih je devet pogrešaka lako napraviti, ali ako ih otklonite prije nego kasnije, vaša će stranica izgledati bolje, biti će lakša za održavanje i funkcionirati onako kako želite.

1. Inline Styling

Jedna od sjajnih stvari o HTML-u i CSS-u je da možete formatirati bilo koji redak teksta - bilo koju riječ, zapravo - kad god želite. No, to ne znači da biste trebali iskoristiti tu sposobnost.

Evo primjera stila u liniji koji možete upotrijebiti za stvaranje odlomka većem od okolnih odlomaka i označiti ga drugom bojom:

Vaš tekst ovdje.

To daje odlomak a CSS stil Naučite HTML i CSS pomoću ovih korak po korak vodiča

Zanima vas HTML, CSS i JavaScript? Ako mislite da imate smisao za učenje kako izraditi web stranice ispočetka - evo nekoliko sjajnih tutorijala koje treba isprobati. Čitaj više koji završava zaključkom odlomka. Čini se prilično učinkovito, zar ne?

Postoji jedan veliki problem s tim: ako želite promijeniti mnogo stvari na svojoj web stranici, morat ćete pronaći i pronaći svaki primjerak ugrađenog oblikovanja i promijeniti ga. Ako imate 100 različitih odlomaka veličine 120% i plave boje, morat ćete pronaći svih 100 i promijeniti ih u sve što odlučite da je bolji format.

Umjesto toga, koristite tablicu CSS stilova. Evo stila koji biste koristili za gornji odlomak:

p.bitno {veličina: 120%; boja: plava; }

Sada, umjesto pomoću inline stila, možete jednostavno koristiti ovu liniju:

Vaš tekst ovdje.

I vaš će stavak biti velik i plav. I kad promijenite klasu "važnih" u vašem CSS-u, svi će se promijeniti.

2. Tablice za izgled

Ljudi su prilično često redovito koristili tablice za oblikovanje izgleda stranice. Korištenjem tablice možete organizirati elemente na svojoj stranici u stupcima i redovima, kao i primijeniti različita poravnanja i stilove. Čak bi se i jednostanične tablice koristile za ispravno poravnavanje sadržaja. No, upotreba tablica uglavnom je namrštena.

Kao i inline stilovi, jednostavnije je korištenje CSS-a umjesto HTML tablica za izgled. Ako opet želite izvršiti promjene na desecima ili stotinama stranica, mnogo je lakše uređivati ​​tablicu stilova nego proći kroz svaku stranicu i prevrtati tablice.

Pored lakšeg održavanja, čitanje CSS izgleda obično je nešto lakše od čitanja HTML tablica. Pogotovo ako završite gniježđenje mnogih razina tablica jedna u drugoj. Možda neće biti lako jednostavno kretati se između HTML dokumenta i tablice stila da biste vidjeli što se točno događa, ali sadržaj vaše stranice bit će jasniji i lakši za uređivanje.

Korištenje tablica ovdje i tamo za dijeljenje stranica u stupce nije smrtni grijeh. Ponekad je lakše i brže nego da se brkate s CSS-om. Ali ako izrađujete gigantske, višeslojne tablice, trebali biste razmotriti ponovno formatiranje s CSS-om.

3. Zastareli HTML

Kao i svaki jezik, i HTML se redovito mijenja. Službeno priznate oznake se mijenjaju, a neke se zastarjele. Čak i ako te oznake i dalje rade, najbolje je da ih izbjegavate.

Na primjer, ako ste navikli koristiti oznaka za podebljane i oznaka za kurziv, zaostajete za vremenima. i (za "naglasak") sada su standardne oznake.

, , , , a drugi su također zastarjeli.

Većina zastarjelih oznaka zamijenjena je CSS-om, pa ćete za isti učinak trebati koristiti stilove (po mogućnosti ne inline). Ako niste sigurni kako zamijeniti zastarelu oznaku ili se neka specifična oznaka još uvijek koristi, provjerite oznaku zvanična HTML dokumentacija ili jednostavno pokrenite brzu pretragu.

4. Ugrađeni JavaScript

Neke web stranice koriste JavaScript za dodajte dodatnu funkcionalnost JavaScript i web razvoj: Korištenje modela objekta dokumentaOvaj će vam članak predstaviti kostur dokumenta s kojim radi JavaScript. Poznavajući rad ovog apstraktnog modela objekta dokumenta, možete napisati JavaScript koji radi na bilo kojoj web stranici. Čitaj više . Može učiniti web stranice interaktivnim, provjeriti tekst tijekom unosa, dodati animacije, pružiti odgovore na radnje korisnika i tako dalje. Ukratko, stranica može učiniti korisnijom pružanjem dodatnih ponašanja.

Kao CSS, možete dodati umetnuti JavaScript u svoj HTML. Kao i CSS, ovo je uglavnom obeshrabreno. Osim što ga je potencijalno teže održavati, postoji nekoliko drugih razloga koji opravdavaju ovu opomenu.

Inline JavaScript može koristiti veće količine propusnosti od skripte povezane iz druge datoteke. Proces zvan minifikacija komprimira HTML i CSS prije nego što ga pošalje korisniku, zahtijevajući manje propusne mreže putem širokopojasnih ili mobilnih veza. Ugrađeni JavaScript, međutim, ne može se umanjiti. Također se neće predmemorirati, dok je zasebna JavaScript datoteka limenka biti predmemorirani.

Sve ove stvari čine inline JavaScript intenzivnijim propusnim opsegom.

Teže je i za uklanjanje pogrešaka jer možete koristiti JavaScript validator za JavaScript datoteku... ali neće raditi na inline skripti. I, opet, to čini čistijim i jednostavnijim održavanjem HTML-a.

5. Više H1 oznaka

Oznake naslova su sjajne. Oni čine stranice jednostavnijim za preskakanje, mogu vam dati SEO pojačanje i mogu se koristiti za naglašavanje određenih točaka.

Ali postoji šest razina oznaka naslova s ​​razlogom. Na vašoj stranici trebala bi biti samo jedna oznaka H1. A to je često naslov stranice (posebno na blogovima i sličnim web lokacijama). Možda ćete pomisliti da će stavljanje gomile ključnih riječi u oznake H1 povećati vjerojatnost da će ih Google pokupiti i rangirati vaše web mjesto više u rezultatima.

Ali ono što stvarno čini jest učiniti vašu stranicu zbunjujućom i težom za čitanje. Što će negirati bilo kakve SEO prednosti koje biste ionako vidjeli.

Koristite H2, H3 i ostale oznake naslova da biste bolje iscrtali svoju stranicu. Razina naslova trebala bi vašem čitatelju dati dojam koliko je važan sljedeći odjeljak. Ako ste ih zaveli, znat će to i neće biti sretni.

6. Preskoči Alts slike

Svakoj slici može se dodijeliti atribut "alt" koji prikazuje određeni redak teksta ako se slika ne može prikazati. To se možda ne čini velikim poteškoćama, pogotovo s modernim preglednicima (i na stolnim i na mobilnim uređajima) koji mogu prikazivati ​​gotovo sve.

Ali dodavanje alt atributa velika je pogreška, posebno u doba stalnog mobilnog pregledavanja. Mobilne veze nisu uvijek sjajne i ako preglednik ne može učitati sliku, vaš čitač nema pojma što bi tamo trebali vidjeti. Alt atribut to može popraviti.

A ako netko koristi a čitač zaslona VoiceOver čini Apple uređajima pristupačnijima nego ikadPredsjednik Američke fondacije slijepih smatra da je "Apple do sada učinio više na pristupačnosti nego bilo koja druga kompanija" - i VoiceOver je odigrao veliku ulogu u tome. Čitaj više ili druga značajka pristupačnosti, ovaj alt atribut može biti sve što dobiju na slici.

Naravno, postoje i potencijalne SEO koristi. Tražilice mogu indeksirati kratke, opisne alt atribute. Ali najveća je korist ovdje pomaganje vašim čitateljima.

7. Ne zatvaranje oznaka

Postoje neke HTML oznake s kojima se možete pobjeći ako se ne zatvaraju, poput

i

. Preglednici znaju da kada pokrenete drugi odlomak ili stavku popisa, prethodni je gotov. Ali to ne znači da treba preskočiti na završnim oznakama.

Prvo i najvažnije, unatoč napretku tehnologije preglednika, definitivno postoji mogućnost da će preglednik nepravilno prikazati vaš sadržaj ako niste zatvorili svoje oznake. I primjena stilova mogla bi proizvesti neke nepredvidive rezultate, kao Korisnik Stack Exchange-a robertc demonstrira.

Ono se svodi na to da preglednici očekuju završne oznake. Ne trebaju im apsolutno... ali sigurno će imati koristi od ispravnog HTML-a kada pokušaju prikazati vašu stranicu.

Srećom, ne treba puno za zatvaranje oznaka, pogotovo ako koristite dobar HTML uređivač.

8. Ne uključuje DOCTYPE

Na početku HTML dokumenata obično ćete vidjeti DOCTYPE deklaraciju, poput ove:

To je nešto o čemu se često ne govori, ali je važan element na vašoj stranici. Deklaracija DOCTYPE govori pregledniku koju vrstu HTML-a koristite. To mu omogućuje ispravno prikazivanje HTML-a.

Ako preskočite DOCTYPE deklaraciju, stranica će se prikazati u "načinu rada". Ovo je moderna obrana preglednika od starinskih web stranica. I mijenja način na koji se vaša stranica prikazuje. Brzi pogled Krijesnice Firefoxa pokazuje da se promjene osjetljivosti slučaja, svojstva fonta ne nasljeđuju u tablice, veličine slova računaju različito, a slike bez alt atributa ponekad se prikazuju pogrešno.

Većina je tih stvari relativno mala. Ali ako želite da se vaša stranica prikazuje ispravno, trebali biste osigurati da je pregledniku omogućen način punog standarda.

A da biste to učinili, treba vam DOKTIP. (Ako niste sigurni što koristiti, jednostavno upotrijebite .)

9. Zanemarite oznaku sheme

Označavanje sheme pomaže tražilicama da steknu bolju predstavu o tome što se nalazi na vašoj stranici. Točnije, ta oznaka govori tražilicama o čemu pišete u svakom odjeljku.

Na primjer, u članku možete upotrijebiti oznaku sheme kako biste tražilici rekli naslov, autor, datum, izdavača i ostale korisne informacije o članku.

Postoje sheme za filmove, knjige, organizacije, ljude, restorane, proizvode, mjesta, radnje, različite vrste podataka, glazbe, skulptura, rezervacija, usluga, bankomati, pivare i sve ostalo što se možete sjetiti. Prilično je nevjerojatno.

Definitivno se možete pobjeći bez korištenja oznake sheme. Vaša će se stranica ispravno prikazati bez nje. Vaši čitatelji neće ni znati da je tamo. Ali puno ćemo dobiti od uključivanja ove oznake. Tražilice će moći pružiti puno detaljnije, korisne informacije o vašoj stranici, uključujući bogate isječke.

A s Googleovim alatom za označavanje sheme postupak je zapravo prilično jednostavan.

Naviknite se na HTML najbolje prakse

Stvaranje ovih najboljih praksi može potrajati neko vrijeme. A ponekad se može osjećati kao da oduzimate mnogo dodatnog vremena za nešto što vam ne daje mnogo. Ali pazite da vaš HTML i CSS Naučite HTML i CSS pomoću ovih korak po korak vodičaZanima vas HTML, CSS i JavaScript? Ako mislite da imate smisao za učenje kako izraditi web stranice ispočetka - evo nekoliko sjajnih tutorijala koje treba isprobati. Čitaj više su dobro raspoređeni, lako je raditi, a održivi će vam dugoročno uštedjeti puno vremena.

Koje su vam druge dobre navike bile korisne kod stvaranja web stranica? Slažete li se s bilo kojom od gore navedenih praksi? Podijelite svoje misli u komentarima ispod!