Dele:
9 feil du ikke bør gjøre når du bygger en webside
Å lage en nettside med HTML og CSS er ganske grei Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere I dag vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer . Men det er lett å lage feil, og det er ganske mange ting du kanskje ikke tenker på. Mesteparten av tiden, vil disse små feilene ikke gjøre mye av en forskjell.
Men i det lange løp kan de gjøre livet ditt vanskeligere. Disse ni feilene er enkle å lage, men hvis du leder dem tidligere i stedet for senere, vil siden din se bedre ut, være lettere å vedlikeholde og fungere som du vil ha den til.
1. Inline Styling
En av de store tingene med HTML og CSS er at du kan formatere alle tekstlinjer - et enkelt ord, virkelig - når du vil. Men det betyr ikke at du bør dra nytte av denne evnen.
Her er et eksempel på en inline-stil som du kan bruke til å lage et avsnitt større enn de omkringliggende avsnittene og markere det i en annen farge:
Din tekst her.
Dette gir avsnittet en CSS-stil Lær HTML og CSS med disse trinnvise opplæringsprogrammene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer som slutter med avslutningen av avsnittet. Virker ganske effektiv, riktig?
Det er et stort problem med det: hvis du vil forandre mange ting gjennom hele nettstedet ditt, må du gå og finne alle forekomster av inline styling og endre den. Hvis du har 100 forskjellige stykker som er 120% tekststørrelse og blå, må du finne alle 100 og endre dem til det du har bestemt deg for, er et bedre format.
I stedet bruker du et CSS stilark. Her er stilen du vil bruke for avsnittet ovenfor:
p.important size: 120%; color: blue; Nå, i stedet for å bruke inline-stilen, kan du bare bruke denne linjen:
Din tekst her.
Og avsnittet ditt vil bli stort og blått. Og når du gjør en endring til “viktig” klasse i CSS, de vil alle endres.
2. Tabeller for layout
Folk pleide å bruke tabeller for formatering av sidelayout ganske regelmessig. Ved å bruke et bord kan du organisere elementene på siden din i kolonner og rader, samt bruke forskjellige justeringer og stiler. Selv enkeldata tabeller ville bli brukt til å få innholdet riktig justert. Men denne bruken av tabeller er vanligvis frynst på.
I likhet med inline-stiler, er det enklere å vedlikeholde CSS i stedet for HTML-tabeller for layout. Igjen, hvis du vil gjøre endringer på tvers av hundrevis av sider, er det mye enklere å redigere stilarket enn å gå gjennom hver side og justere tabellene.
I tillegg til enklere vedlikehold pleier å lese CSS-layouter å være ganske enklere enn å lese HTML-tabeller. Spesielt hvis du ender opp med mange nivåer av bord i hverandre. Det kan ikke være veldig enkelt å gå frem og tilbake mellom HTML-dokumentet og stilarket ditt for å se nøyaktig hva som skjer, men innholdet på siden din blir klarere og enklere å redigere.
Bruke tabeller her og der for å dele sider i kolonner er ikke en dødelig synd. Noen ganger er det enklere og raskere enn å rote rundt med CSS. Men hvis du lager gigantiske, flertallede tabeller, bør du vurdere å reformere med CSS.
3. Utdatert HTML
Som alle språk, endres HTML regelmessig. Offisielt anerkjente koder endres, og noen blir avskrevet. Selv om disse kodene fortsatt fungerer, er det best å unngå dem.
For eksempel, hvis du er vant til å bruke tag for fet og den tag for kursiv, du er bak tiden. og (til “vektlegging”) er nå standardkoder.
De fleste utdaterte kodene ble erstattet med CSS, så du må bruke stiler (helst ikke inline seg) for å få samme effekt. Hvis du ikke er sikker på hvordan du erstatter en utdatert tag, eller hvis en bestemt tag fortsatt er i bruk, kontroller du den offisielle HTML-dokumentasjonen eller bare kjør et raskt søk.
4. Inline JavaScript
Enkelte nettsider bruker JavaScript for å legge til tilleggsfunksjonalitet JavaScript og webutvikling: Bruke dokumentobjektmodellen JavaScript og webutvikling: Bruke dokumentobjektmodellen Denne artikkelen vil introdusere deg til dokumentskjelettet som JavaScript fungerer med. Å ha et arbeidskunnskap om denne abstrakte dokumentobjektmodellen, kan du skrive JavaScript som fungerer på en hvilken som helst nettside. Les mer . Det kan gjøre nettsider interaktive, validere tekst som den blir skrevet inn, legge til animasjoner, gi svar på brukerhandlinger, og så videre. Kort sagt, det kan gjøre en side mer nyttig ved å gi ekstra oppførsel.
Mye som CSS, kan du legge til inline JavaScript til HTML. Også som CSS, dette er generelt motløs. I tillegg til å være potensielt vanskeligere å opprettholde, er det et par andre grunner som garanterer denne formaningen.
Inline JavaScript kan bruke større mengder båndbredde enn et skript koblet fra en annen fil. En prosess kalt minifisering komprimerer HTML og CSS før du sender den til en bruker, og krever mindre båndbredde over bredbånds- eller mobilforbindelser. Inline JavaScript kan imidlertid ikke bli minifisert. Det vil heller ikke bli cached, mens en egen JavaScript-fil kan bli cached.
Alle disse tingene gjør inline JavaScript mer båndbreddeintensiv.
Det er også vanskeligere å feilsøke, da du kan bruke en JavaScript-validator for en JavaScript-fil ... men det vil ikke fungere på inline-skript. Og igjen gjør det renere og lettere vedlikeholdt HTML.
5. Flere H1-tagger
Overskriftskoder er flotte. De gjør sider enklere å skumme, de kan gi deg en SEO boost, og de kan brukes til å understreke visse poeng.
Men det er seks grunner av overskriftskoder for en grunn. Det bør egentlig bare være en H1-tag på siden din. Og det er ofte tittelen på siden (spesielt på blogger og lignende nettsteder). Du tror kanskje at å sette en masse nøkkelord i H1-koder, gjør at Google er mer sannsynlig å plukke dem opp og rangere nettstedet ditt høyere i resultatene.
Men hva det egentlig gjør er at siden din blir mer forvirrende og vanskeligere å lese. Som vil negere noen SEO fordeler du kan se uansett.
Bruk H2, H3 og resten av overskriftskodene for å bedre skissere siden din. Nivået på overskriften skal gi leseren en ide om hvor viktig følgende avsnitt er. Hvis du har villet dem, vet de det, og de vil ikke være lykkelige.
6. Hopp over bildealter
Hvert bilde kan gis en “alt” attributt som viser en bestemt tekstlinje hvis bildet ikke kan vises. Dette kan ikke virke som en stor avtale, spesielt med moderne nettlesere (både skrivebord og mobil) som kan vise omtrent alt.
Men ikke å legge til alt attributter er en stor feil, spesielt i en alder av konstant mobil surfing. Mobile tilkoblinger er ikke alltid gode, og hvis en nettleser ikke kan laste inn et bilde, er leseren din igjen uten å ane hva de skal se der. Et alt attributt kan fikse det.
Og hvis noen bruker en skjermleser, kan VoiceOver gjøre Apple-enheter mer tilgjengelige enn noen gang VoiceOver gjør Apple-enheter mer tilgjengelige enn noen gang President of the American Foundation of the Blind regner med at "Apple har gjort mer for tilgjengelighet enn noe annet selskap til dags dato" og VoiceOver spilte en stor rolle i det. Les Mer eller annen tilgjengelighetsfunksjon, at alt attributtet kan være alt de kommer ut av bildet.
Selvfølgelig er det potensielle SEO-fordeler også. Søkemotorer kan indeksere korte, beskrivende altattributter. Men den største fordelen her er å hjelpe leserne dine.
7. Ikke avsluttende etiketter
Det er noen HTML-koder som du kan komme unna med ikke lukke, som
og
Først og fremst, til tross for fremskritt i webleserteknologi, er det definitivt en mulighet for at nettleseren vil vise innholdet ditt feilaktig hvis du ikke har lukket merkene dine. Og bruk av stiler kan produsere noen uforutsigbare resultater, som Stack Exchange bruker robertc demonstrerer.
Hva det kommer til, er at nettleserne forventer å lukke koder. De trenger ikke absolutt dem ... men de vil definitivt dra nytte av å ha riktig HTML når de prøver å vise siden din.
Heldigvis tar det ikke mye for å lukke kodene dine, spesielt hvis du bruker en god HTML-editor.
8. Ikke inkludert en DOCTYPE
I begynnelsen av HTML-dokumenter ser du vanligvis en DOCTYPE-erklæring, som denne:
Det er noe som ikke blir snakket om ofte, men det er et viktig element på siden din. DOCTYPE-erklæringen forteller en nettleser hvilken type HTML du bruker. Dette gjør det mulig å gjengi HTML-en riktig.
Hvis du hopper over DOCTYPE-erklæringen, blir siden gjengitt i “quirks modus.” Dette er den moderne nettleserens forsvar mot forældede nettsider. Og det endrer hvordan siden din vises. Et raskt blikk på Firefox's quirks-modus viser at tilfellefølsomhetsendringer, skriftegenskaper ikke arver i tabeller, skriftstørrelser beregnes annerledes, og bilder uten alt-attributter vises noen ganger feil.
De fleste av disse tingene er relativt små. Men hvis du vil at siden din skal vises riktig, bør du sørge for at en nettleser har fullstandsmodus aktivert.
Og for å gjøre det, trenger du en DOCTYPE. (Hvis du ikke er sikker på hva du skal bruke, bruk bare .)
9. Forsinkelse av skjemaoppslag
Schema markup hjelper søkemotorer å få en bedre ide om hva som er på siden din. Mer spesifikt, forteller denne merkingen søkemotorer hva du skriver om i hver seksjon.
For eksempel, i en artikkel kan du bruke skjemaoppslag for å fortelle en søkemotor tittelen, forfatteren, datoen, utgiveren og annen nyttig informasjon om en artikkel.
Det finnes skjemaer for filmer, bøker, organisasjoner, folk, restauranter, produkter, steder, handlinger, ulike typer data, musikk, skulptur, reservasjoner, tjenester, minibanker, bryggerier og omtrent alt annet du kan tenke på. Det er ganske utrolig.
Du kan definitivt komme seg uten å bruke skjemaoppslag. Siden din vises riktig uten den. Leserne dine vet ikke engang at det er der. Men det er mye å vinne fra å inkludere denne oppmerkningen. Søkemotorer vil kunne gi mye mer detaljert, nyttig informasjon om siden din, inkludert rike utdrag.
Og med Googles skjemaoppdateringsverktøy, er prosessen faktisk ganske enkelt.
Bli brukt til HTML Best Practices
Å gjøre disse beste rutinene, en vane kan ta en stund. Og noen ganger kan det føles som om du tar mye ekstra tid på noe som ikke gir deg veldig mye. Men sørg for at HTML og CSS Lær HTML og CSS med disse trinnvise opplæringene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer er godt utformet, lett å jobbe med, og vedlikeholdsbar vil spare deg mye tid i det lange løp.
Hvilke andre gode vaner har du funnet å være nyttige når du lager websider? Er du uenig med noen av metodene ovenfor? Del dine tanker i kommentarene nedenfor!