9 klaidos, kurių neturėtumėte daryti kurdami tinklalapį

Skelbimas

Sukurti tinklalapį naudojant HTML ir CSS yra gana tiesmukas Kaip susikurti svetainę: pradedantiesiemsŠiandien aš jums patarsiu, kaip sukurti svetainę nuo nulio. Nesijaudinkite, jei tai skamba sunkiai. Kiekviename žingsnyje aš jums tai paaiškinsiu. Skaityti daugiau . Tačiau suklysti lengva ir yra keletas dalykų, apie kuriuos galbūt negalvotum. Dažniausiai šios mažos klaidos nepadarys didelės įtakos.

Tačiau ilgainiui jie gali apsunkinti jūsų gyvenimą. Šias devynias klaidas lengva padaryti, tačiau jei jas pašalinsite anksčiau nei vėliau, jūsų puslapis atrodys geriau, bus lengviau prižiūrimas ir funkcionuos taip, kaip norite.

1. „Inline“ stilius

Vienas iš nuostabių dalykų, susijusių su HTML ir CSS, yra tai, kad galite bet kada formatuoti bet kurią teksto eilutę - bet kurį žodį. Bet tai nereiškia, kad turėtumėte pasinaudoti šia galimybe.

Čia yra įterptinio stiliaus, kurį galite naudoti norėdami padaryti didesnę pastraipą nei aplinkinės pastraipos ir paryškinti ją kita spalva, pavyzdys:

Jūsų tekstas čia.

Tai suteikia a pastraipą CSS stilius Sužinokite HTML ir CSS naudodamiesi šiais „žingsnis po žingsnio“ vadovėliaisNorite sužinoti apie HTML, CSS ir „JavaScript“? Jei manote, kad turite žinių apie tai, kaip kurti svetaines nuo nulio, - tai keletas puikių žingsnis po žingsnio vadovėlių, kuriuos verta išbandyti. Skaityti daugiau kuris baigiasi pastraipos išvada. Atrodo gana efektyvu, tiesa?

Tai yra viena didelė problema: jei norite pakeisti daugybę dalykų savo svetainėje, turėsite apsilankyti ir surasti kiekvieną vidinio stiliaus pavyzdį ir jį pakeisti. Jei turite 100 skirtingų pastraipų, kurių teksto dydis yra 120% ir mėlynos spalvos, turėsite surasti visus 100 ir pakeisti juos į tai, kas, jūsų manymu, yra geresnio formato.

Vietoj to naudokite CSS stiliaus lentelę. Štai stilius, kurį naudosite aukščiau esančioje pastraipoje:

p.svarbus {dydis: 120%; spalva: mėlyna; }

Dabar, užuot naudodami įterptą stilių, galite tiesiog naudoti šią eilutę:

Jūsų tekstas čia.

Ir jūsų pastraipa bus didelė ir mėlyna. Ir kai CSS pakeisite „svarbią“ klasę, jie visi pasikeis.

2. Lentelės išdėstymui

Žmonės gana dažnai naudodavosi lentelėmis formatuodami puslapio išdėstymą. Naudodamiesi lentele, galite išdėstyti savo puslapio elementus stulpeliuose ir eilutėse, taip pat pritaikyti skirtingus derinimus ir stilius. Net turėtumėte vienaląstes lenteles, kad turinys būtų tinkamai suderintas. Tačiau dėl tokio lentelių naudojimo dažniausiai susierzinama.

Panašiai kaip įdėtinius stilius, lengviau naudoti CSS, o ne HTML lenteles išdėstymui. Vėlgi, jei norite atlikti dešimčių ar šimtų puslapių pakeitimus, daug lengviau redaguoti savo stiliaus lentelę, nei pereiti kiekvieną puslapį ir pataisyti lenteles.

Be lengvesnės priežiūros, CSS maketų skaitymas yra gana lengvas nei HTML lentelių skaitymas. Ypač, jei galų gale lizdai susideda iš kelių lygių lentelių. Gali būti nelengva judėti pirmyn ir atgal tarp HTML dokumento ir stiliaus lentelės, kad pamatytumėte, kas vyksta, tačiau jūsų puslapio turinys bus aiškesnis ir lengviau redaguojamas.

Lentelių naudojimas čia ir ten padalijant puslapius į stulpelius nėra mirtinga nuodėmė. Kartais tai yra paprasčiau ir greičiau, nei sumaišyti su CSS. Bet jei kuriate milžiniškas daugiapakopes lenteles, turėtumėte apsvarstyti galimybę jas performatuoti naudojant CSS.

3. Nebenaudojamas HTML

Kaip ir bet kuri kalba, HTML keičiasi reguliariai. Oficialiai pripažintos etiketės keičiasi, o kai kurios nebetenka galios. Net jei tos etiketės vis dar veikia, geriau jų vengti.

Pvz., Jei esate įpratę naudoti žyma paryškintai ir kursyvo žyma, jūs atsiliekate nuo laiko. ir („pabrėžiant“) yra standartinės etiketės.

, , , , o kiti taip pat nebenaudojami.

Dauguma nebenaudojamų žymų buvo pakeistos CSS, taigi, norėdami gauti tą patį efektą, turėsite naudoti stilius (geriausia ne įdėtinius). Jei nesate tikri, kaip pakeisti pasenusią žymą, ar vis dar naudojama tam tikra žyma, patikrinkite oficiali HTML dokumentacija arba tiesiog paleiskite greitą paiešką.

4. Įterpti „JavaScript“

Kai kuriuose tinklalapiuose naudojama „JavaScript“ pridėti papildomą funkcionalumą „JavaScript“ ir interneto svetainių kūrimas: dokumento objekto modelio naudojimasŠis straipsnis supažindins jus su dokumento skeletu, su kuriuo veikia „JavaScript“. Turėdami darbinių žinių apie šį abstrakčiojo dokumento objekto modelį, galite parašyti „JavaScript“, kuris veikia bet kuriame tinklalapyje. Skaityti daugiau . Tai gali padaryti tinklalapius interaktyvius, patvirtinti tekstą, kai jie įvedami, pridėti animacijas, pateikti atsakymus į vartotojo veiksmus ir pan. Trumpai tariant, tai gali padaryti puslapį naudingesniu pateikiant papildomą elgesį.

Panašiai kaip CSS, galite į HTML įterpti įterptą „JavaScript“. Taip pat, kaip ir CSS, to dažniausiai vengiama. Be įspėjimo, kurį gali būti sunkiau išlaikyti, yra dar kelios priežastys, pateisinančios šį įspėjimą.

„Inline JavaScript“ gali naudoti didesnį pralaidumo srautą nei scenarijus, susietas iš kito failo. Procesas, vadinamas mažinimu, prieš siunčiant vartotojui, suspaudžia HTML ir CSS, reikalaujant mažesnio pralaidumo plačiajuosčio ar mobiliojo ryšio jungtimis. Tačiau „Inline JavaScript“ negali būti sutrumpintas. Jis taip pat nebus talpykloje, o atskiras „JavaScript“ failas gali būti talpykloje.

Dėl visų šių dalykų internetinis „JavaScript“ praleidžia daug pralaidumo.

Tai taip pat sunkiau derinti, nes „JavaScript“ failui galite naudoti „JavaScript“ patvirtinimo įrankį..., tačiau jis neveiks įdėto scenarijaus. Ir tai vėlgi leidžia švaresnį ir lengviau prižiūrimą HTML.

5. Kelios H1 žymės

Antraštės žymės yra puikios. Jie palengvina puslapių nugriebimą, gali suteikti SEO padidėjimą ir gali būti naudojami norint pabrėžti tam tikrus dalykus.

Bet dėl ​​priežasties yra šeši antraščių etikečių lygiai. Jūsų puslapyje turėtų būti tik viena H1 žyma. Ir tai dažnai yra puslapio pavadinimas (ypač tinklaraščiuose ir panašiose svetainėse). Galite pamanyti, kad įdėję daugybę raktinių žodžių į H1 žymas, „Google“ labiau linkę juos pasirinkti ir reitinguoti jūsų svetainę rezultatuose.

Tačiau tai, kas iš tikrųjų daro jūsų puslapį painesnį ir sunkiau skaitomą. Kuris panaikins bet kokią SEO naudą, kurią vis tiek galite pamatyti.

Norėdami geriau išdėstyti savo puslapį, naudokite H2, H3 ir likusias antraščių žymas. Antraštės lygis turėtų suteikti jūsų skaitytojui supratimą, koks svarbus yra šis skyrius. Jei juos suklaidinote, jie tai žinos ir nebus patenkinti.

6. Praleisti vaizdą „Alts“

Kiekvienam atvaizdui gali būti suteiktas „alt“ atributas, kuris rodo konkrečią teksto eilutę, jei atvaizdo negalima parodyti. Tai gali neatrodyti labai, ypač turint omenyje šiuolaikines naršykles (tiek stalines, tiek mobiliąsias), kurios gali rodyti beveik viską.

Tačiau nepridėjus „Alt“ atributų yra didelė klaida, ypač nuolatinio naršymo mobiliesiems amžiuje. Mobilieji ryšiai ne visada yra puikūs, ir jei naršyklė negali įkelti vaizdo, skaitytojui nelieka supratimo, ką jie turėtų ten matyti. „Alt“ atributas gali tai ištaisyti.

Ir jei kas nors naudojasi ekrano skaitytuvas „VoiceOver“ daro „Apple“ įrenginius prieinamesnius nei bet kada anksčiauAmerikos aklųjų fondo prezidentas mano, kad „Apple iki šiol padarė daugiau, kad pasiektų prieinamumą, nei bet kuri kita įmonė“ - ir didelę įtaką tam padarė „VoiceOver“. Skaityti daugiau ar kita pritaikymo neįgaliesiems funkcija, tas alt atributas gali būti viskas, kas jie išeina iš vaizdo.

Be abejo, yra ir SEO privalumų. Paieškos sistemos gali indeksuoti trumpus, aprašomuosius „Alt“ atributus. Tačiau didžiausias pranašumas čia yra padėti savo skaitytojams.

7. Neuždarykite žymų

Yra keletas HTML žymų, kurių galite atsisakyti neuždarę, pvz

ir

. Naršyklės žino, kad paleidus kitą pastraipą ar sąrašo elementą, ankstesnis yra pasibaigęs. Bet tai nereiškia, kad turėtumėte praleisti uždarymo žymas.

Visų pirma, nepaisant naršyklės technologijos patobulinimų, neabejotinai yra galimybė, kad naršyklė netinkamai parodys jūsų turinį, jei dar neuždarėte savo žymų. Taikant stilius, galima pasiekti nenuspėjamų rezultatų Stack Exchange vartotojas robertc demonstruoja.

Priežastis yra ta, kad naršyklės tikisi uždaryti žymas. Jie jiems nebūtinai reikalingi…, tačiau bandant parodyti jūsų puslapį, jiems tikrai bus naudinga turėti teisingą HTML.

Laimei, žymėms uždaryti nereikia daug laiko, ypač jei naudojate gerą HTML redaktorių.

8. Neįskaitant DOCTYPE

HTML dokumentų pradžioje paprastai matysite DOCTYPE deklaraciją, tokią kaip ši:

Tai kažkas, apie ką dažnai nekalbama, tačiau tai yra svarbus jūsų puslapio elementas. DOCTYPE deklaracija nurodo naršyklei, kokio tipo HTML naudojate. Tai leidžia teisingai pateikti HTML.

Jei praleisite DOCTYPE deklaraciją, puslapis bus pateiktas „quirks mode“. Tai yra moderni naršyklės gynyba nuo pasenusių tinklalapių. Ir tai keičia jūsų puslapio rodymo būdą. Trumpas žvilgsnis „Firefox“ keiksmažodžių režimas rodo, kad raidžių jautrumas pasikeičia, šrifto savybės nepaveldimos į lenteles, šrifto dydžiai apskaičiuojami skirtingai, o vaizdai be „Alt“ atributų kartais rodomi neteisingai.

Daugelis šių dalykų yra palyginti nereikšmingi. Bet jei norite, kad jūsų puslapis būtų rodomas teisingai, turėtumėte įsitikinti, kad naršyklėje įjungtas visas standartinis režimas.

Ir tam reikia DOCTYPE. (Jei nežinote, ką naudoti, tiesiog naudokite .)

9. Nepaisykite schemos žymėjimo

Schemos žymėjimas padeda paieškos varikliams geriau suprasti, kas yra jūsų puslapyje. Tiksliau, tas žymėjimas nurodo paieškos varikliams, apie ką jūs rašote kiekvienoje skiltyje.

Pvz., Straipsnyje galite naudoti schemos žymėjimą, norėdami pasakyti paieškos varikliui pavadinimą, autorių, datą, leidėją ir kitą naudingą informaciją apie straipsnį.

Yra filmų, knygų, organizacijų, žmonių, restoranų, produktų, vietų, veiksmų, skirtingų tipų schemos duomenų, muzikos, skulptūros, rezervacijų, paslaugų, bankomatų, alaus daryklų ir viso kito, apie ką galite galvoti. Tai gana nuostabu.

Jūs tikrai galite atsikratyti nenaudodami schemos žymėjimo. Jūsų puslapis bus tinkamai rodomas be jo. Jūsų skaitytojai net nežinos, kad ten yra. Tačiau įtraukiant šį žymėjimą yra daug. Paieškos sistemos galės pateikti daug išsamesnę ir naudingesnę informaciją apie jūsų puslapį, įskaitant turtingus fragmentus.

O naudojant „Google“ schemos žymėjimo įrankį, procesas iš tikrųjų yra gana lengvas.

Pripraskite prie geriausios HTML praktikos

Šios geriausios praktikos pavertimas įpročiu gali šiek tiek užtrukti. Ir kartais gali atrodyti, kad skiriate daug papildomo laiko tam, kas jūsų labai neatneša. Tačiau įsitikinkite, kad jūsų HTML ir CSS Sužinokite HTML ir CSS naudodamiesi šiais „žingsnis po žingsnio“ vadovėliaisNorite sužinoti apie HTML, CSS ir „JavaScript“? Jei manote, kad turite žinių apie tai, kaip kurti svetaines nuo nulio, - tai keletas puikių žingsnis po žingsnio vadovėlių, kuriuos verta išbandyti. Skaityti daugiau yra gerai išdėstyti, su jais lengva dirbti ir prižiūrimi ilgainiui sutaupys daug laiko.

Kokių dar gerų įpročių jums buvo naudinga kuriant tinklalapius? Ar nesutinkate su jokia aukščiau nurodyta praktika? Pasidalykite savo mintimis komentaruose žemiau!