9 viga, mida te ei tohiks veebilehe loomisel teha

Reklaam

Veebilehe loomine HTML-i ja CSS-iga on üsna otsekohene Kuidas teha veebisaiti: algajateleTäna juhendan teid täieliku veebisaidi nullist valmistamise protsessis. Ärge muretsege, kui see kõlab raskelt. Ma juhendan teid sellest igal sammul. Loe rohkem . Kuid vigu on lihtne teha ja on palju asju, mille peale te võib-olla ei mõtle. Enamasti ei muuda need väikesed vead suurt midagi.

Kuid pikas perspektiivis võivad need teie elu raskemaks muuta. Neid üheksa viga on lihtne teha, kuid kui suunate need pigem varem kui hiljem, näeb teie leht välja parem, seda on kergem hooldada ja see toimib nii, nagu soovite.

1. Sisekujundus

Üks HTML-i ja CSS-i suurepäraseid asju on see, et saate vormindada suvalise tekstirea - tegelikult ühe sõna - igal ajal, kui soovite. Kuid see ei tähenda, et peaksite seda võimalust ära kasutama.

Siin on näide tekstisisest stiilist, mida võite kasutada ümbritsevate lõikudest suurema lõigu tegemiseks ja selle erineva värvi esiletõstmiseks:

Sinu tekst siin.

See annab lõigu a CSS-i stiil

Õppige HTML-i ja CSS-i nende samm-sammult juhendavate dokumentide abilKas olete huvitatud HTMList, CSSist ja JavaScriptist? Kui arvate, et teil on nullist veebisaitide loomise õppimiseks vajalik teadmine - siin on mõned suurepärased samm-sammult õpetamisvõimalused. Loe rohkem see lõpeb lõigu sõlmimisega. Tundub üsna tõhus, eks?

Sellega on seotud üks suur probleem: kui soovite kogu veebisaidil palju asju muuta, peate minema ja leidma iga tekstisisese stiili näitamise ja seda muutma. Kui teil on 100 erinevat lõiku, mis on 120% teksti suurusest ja sinised, peate leidma kõik 100 ja muutma need vastavalt sellele, mille olete otsustanud, et see on parem vorming.

Selle asemel kasutage CSS-i stiililehte. Siin on stiil, mida kasutate ülaltoodud lõigu jaoks:

p.oluline {suurus: 120%; värv: sinine; }

Nüüd saate tekstisisese stiili asemel kasutada lihtsalt seda rida:

Sinu tekst siin.

Ja teie lõik on suur ja sinine. Ja kui teete muudatuse oma CSS-is olulises klassis, muutuvad nad kõik.

2. Paigutuse tabelid

Inimesed kasutasid üsna regulaarselt tabeleid lehe paigutuse vormindamiseks. Tabeli abil saate oma lehel olevaid elemente korraldada veergude ja ridadena ning rakendada erinevaid joondeid ja stiile. Sisu õigesti joondamiseks kasutatakse isegi üherakulisi tabeleid. Kuid selline tabelite kasutamine on tavaliselt pahaks tehtud.

Sarnaselt riiulisiseste stiilidega on HTML-tabelite asemel CSS-i kasutamine paigutuse jaoks hõlpsamini hooldatav. Jällegi, kui soovite teha muudatusi kümnete või sadade lehtede vahel, on oma stiililehte redigeerida palju lihtsam kui käia igal lehel läbi ja näpistada tabeleid.

Lisaks lihtsamale hooldusele kipub CSS-i paigutuste lugemine olema ka pisut lihtsam kui HTML-tabelite lugemine. Eriti kui pesad üksteise sees mitmel tasemel tabeleid. HTML-dokumendi ja stiililehe vahel edasi-tagasi liikumine ei pruugi olla ülilihtne, et täpselt näha, mis toimub, kuid teie lehe sisu on selgem ja hõlpsamini redigeeritav.

Siin ja seal tabelite kasutamine lehtede veergudeks jagamiseks pole surelik patt. Mõnikord on see lihtsam ja kiirem kui CSS-is segi ajada. Kuid kui teete hiiglaslikke mitmetasandilisi tabeleid, peaksite kaaluma CSS-iga uuesti vormindamist.

3. Aegunud HTML

Nagu iga keel, muutub ka HTML regulaarselt. Ametlikult tunnustatud sildid muutuvad ja mõned vananeb. Isegi kui need sildid ikka toimivad, on parem neid vältida.

Näiteks kui olete harjunud kasutama silt rasvases kirjas ja kaldkirjasildiga, olete ajast maha jäänud. ja (rõhuasetuse jaoks) on nüüd standardsildid.

, , , , ja ka teised on aegunud.

Enamik vananenud silte asendati CSS-iga, nii et sama efekti saamiseks peate kasutama stiile (eelistatult mitte rivilisi). Kui te pole kindel, kuidas aegunud silti asendada, või kui mõni konkreetne silt on endiselt kasutusel, siis kontrollige jaotist ametlik HTML-i dokumentatsioon või lihtsalt käivitage kiire otsing.

4. Sisselülitatud JavaScript

Mõnel veebilehel kasutatakse JavaScripti lisage täiendavaid funktsioone JavaScript ja veebiarendus: dokumendiobjekti mudeli kasutamineSee artikkel tutvustab teile dokumendiskeletti, millega JavaScript töötab. Omades selle abstraktse dokumendiobjekti mudeli praktilisi teadmisi, saate kirjutada JavaScripti, mis töötab igal veebilehel. Loe rohkem . See võib muuta veebilehti interaktiivseks, valideerida teksti sisestamise ajal, lisada animatsioone, pakkuda vastuseid kasutaja toimingutele ja nii edasi. Lühidalt, see võib muuta lehe kasulikumaks, pakkudes lisatud käitumist.

Sarnaselt CSS-ile saate oma HTML-ile lisada ka tekstisisese JavaScripti. Nagu CSS, on see ka üldiselt heidutatud. Lisaks sellele, et seda on potentsiaalselt raskem säilitada, on sellel manitsusel veel paar põhjust.

Inline JavaScriptis saab kasutada rohkem ribalaiust kui erinevast failist lingitud skript. Minifikatsiooniks kutsutav protsess tihendab HTML ja CSS enne kasutajale saatmist, nõudes lairiba- või mobiilsideühenduste kaudu vähem ribalaiust. Sisselülitatud JavaScripti ei saa siiski minimeerida. Seda ei salvestata ka vahemällu, samas kui eraldi JavaScripti fail saab olema vahemällu salvestatud.

Kõik need asjad muudavad tekstisisese JavaScripti ribalaiuse intensiivsemaks.

Seda on ka keerulisem siluda, kuna saate JavaScripti faili jaoks kasutada JavaScripti valideerijat... kuid see ei tööta tekstisisese skripti korral. Ja see teeb jällegi puhtama ja hõlpsamini hooldatava HTML-i.

5. Mitu H1 silti

Rubriikide sildid on suurepärased. Need muudavad lehtede kergendamise hõlpsamaks, võivad anda teile SEO-tõuke ja neid saab kasutada teatud punktide rõhutamiseks.

Kuid põhjuserühmi on kuus taset. Teie lehel peaks tõesti olema ainult üks H1-silt. Ja see on sageli lehe pealkiri (eriti ajaveebides ja sarnastel saitidel). Võite arvata, et H1-siltidesse hunniku märksõnade lisamine suurendab Google tõenäolisemalt neid üles võtta ja järjestada teie sait tulemuste seas kõrgemale.

Kuid see muudab teie lehe segasemaks ja raskemini loetavaks. Mis tühistab kõik SEO eelised, mida võite niikuinii näha.

Kasutage oma lehe paremaks kontuurimiseks H2, H3 ja ülejäänud pealkirjade silte. Pealkirja tase peaks lugejale aitama, kui oluline on järgmine jaotis. Kui olete neid eksitanud, saavad nad seda teada ja nad ei ole õnnelikud.

6. Jäta vahele pilt Alts

Igal pildil võib olla atribuut alt, mis kuvab kindla tekstirida, kui pilti ei saa kuvada. See ei pruugi tunduda suur asi, eriti moodsate brauserite (nii lauaarvutite kui ka mobiilide) puhul, mis suudavad kuvada peaaegu kõike.

Kuid alt-atribuutide lisamine on suur viga, eriti pideva mobiili sirvimise ajastul. Mobiilsed ühendused pole alati suurepärased ja kui brauser ei saa pilti laadida, siis pole teie lugejal aimugi, mida nad seal peaksid nägema. Alt-atribuut saab selle parandada.

Ja kui keegi kasutab a ekraanilugeja VoiceOver muudab Apple'i seadmed juurdepääsetavamaks kui kunagi varemAmeerika Pimedate Sihtasutuse president arvab, et "Apple on praeguseks teinud juurdepääsetavuse heaks rohkem kui ükski teine ​​ettevõte" - ja VoiceOver mängis selles suurt rolli. Loe rohkem või mõni muu hõlbustusfunktsioon, see alt-atribuut võib olla kõik, mis nad pildilt välja saavad.

Muidugi on ka potentsiaalseid SEO eeliseid. Otsingumootorid võivad indekseerida lühikesi kirjeldavaid alt-atribuute. Kuid siin on suurimaks eeliseks lugejate abistamine.

7. Ei sulge silte

Seal on mõned HTML-sildid, mille abil saate lahti sulgeda, nt

ja

. Brauserid teavad, et uue lõigu või loendiüksuse käivitamisel on eelmine lõpule jõudnud. Kuid see ei tähenda, et peaksite sulgemissildid vahele jätma.

Vaatamata brauseri tehnoloogia arengule on kindlasti võimalus, et brauser kuvab teie sisu valesti, kui te pole oma silte sulgenud. Ja stiilide rakendamine võib anda näiteks ettearvamatuid tulemusi Stack Exchange'i kasutaja robertc demonstreerib.

Mis puudutab seda, et brauserid ootavad siltide sulgemist. Neil pole neid absoluutselt vaja... kuid teie lehe kuvamisel on neil korrektse HTML-i olemasolu kindlasti kasuks.

Õnneks ei vaja teie siltide sulgemine palju, eriti kui kasutate head HTML-i redigeerijat.

8. Välja arvatud DOCTYPE

HTML-dokumentide alguses näete tavaliselt DOCTYPE-deklaratsiooni, nagu see on:

See on asi, millest sageli ei räägita, kuid see on teie lehe oluline element. DOCTYPE deklaratsioon ütleb brauserile, millist HTML-i kasutate. See võimaldab tal HTML-i õigesti renderdada.

Kui jätate DOCTYPE deklaratsiooni vahele, kuvatakse leht režiimis quirks. See on moodsa brauseri kaitse vananenud veebilehtede vastu. Ja see muudab teie lehe kuvamisviisi. Kiire pilk Firefoxi quirks-režiim näitab, et tõstutundlikkuse muutused, fondi atribuudid ei päri tabeliteks, fondi suurused arvutatakse erinevalt ja alt-atribuutideta pildid kuvatakse mõnikord valesti.

Enamik neist asjadest on suhteliselt väikesed. Kuid kui soovite, et teie leht kuvataks õigesti, peaksite tagama, et brauseril oleks lubatud täisstandardirežiim.

Ja selleks on vaja DOCTYPE-d. (Kui te pole kindel, mida kasutada, kasutage lihtsalt .)

9. Loobu skeemi märgistusest

Skeemimärkimine aitab otsingumootoritel saada paremat ettekujutust teie lehel olevast. Täpsemalt öeldes ütleb see märgistus otsimootoritele, millest kirjutate igas jaotises.

Näiteks saate artiklis kasutada skeemi märgistust, et öelda otsingumootorile artikli pealkiri, autor, kuupäev, avaldaja ja muu kasulik teave.

Seal on skeemid filmidele, raamatutele, organisatsioonidele, inimestele, restoranidele, toodetele, kohtadele, toimingutele, eri tüüpidele andmeid, muusikat, skulptuure, broneeringuid, teenuseid, sularahaautomaate, õlletehaseid ja peaaegu kõike muud, mida mõelda võite. See on päris hämmastav.

Kindlasti pääseb minema ilma skeemimärgistust kasutamata. Ilma selleta kuvatakse teie leht õigesti. Teie lugejad ei tea isegi, et see olemas on. Kuid selle märgistuse lisamisest on palju kasu. Otsimootorid saavad teie lehe kohta pakkuda palju üksikasjalikumat ja kasulikku teavet, sealhulgas rikkalikke katkendeid.

Ja Google'i skeemitähistustööriista abil on protsess tegelikult üsna lihtne.

Harjuge HTML-i parimate tavadega

Nende parimate tavade harjumuseks muutmine võib võtta natuke aega. Ja mõnikord võib tekkida tunne, et võtate palju lisaaega millegi jaoks, mis teid eriti juurde ei too. Kuid veendudes, et teie HTML ja CSS Õppige HTML-i ja CSS-i nende samm-sammult juhendavate dokumentide abilKas olete huvitatud HTMList, CSSist ja JavaScriptist? Kui arvate, et teil on nullist veebisaitide loomise õppimiseks vajalik teadmine - siin on mõned suurepärased samm-sammult õpetamisvõimalused. Loe rohkem on hästi paigutatud, nendega on lihtne töötada ja hooldatav säästab pikas perspektiivis palju aega.

Millised muud head harjumused on teile veebilehtede loomisel kasulikuks osutunud? Kas te ei nõustu ühegi ülaltoodud tavaga? Jagage oma mõtteid allpool olevates kommentaarides!