Akkurat som vår rengjøring et hus, skal html-kodene på websidene få periodiske rengjøring også. Over tid, som endringer og oppdateringer gjøres i en web-side, kan koden bli littered med unødvendig rot, sakker siden lasting og sårer effektiviteten av web-siden. Rotete html kan også alvorlig påvirke din søkemotor rangering.
Dette gjelder spesielt hvis du bruker et WYSIWYG (det du ser er hva du får) web design-pakke for eksempel FrontPage eller Dreamweaver. Disse programmene vil øke hastigheten på din nettside opprettelsen, men de er ikke så effektivt til å skrive ren html koden.
Vi vil fokusere denne diskusjonen på faktiske html koding, ignorerer andre programmeringsspråk som kan brukes i en side for eksempel JavaScript. I eksemplene koden vil jeg være å bruke (og) tegn i stedet for riktig HTML-kode slik at kodeeksempler vil vises på riktig måte i dette nyhetsbrevet.
Frem til nylig når en side i HTML-koding vil vi bruke koder for eksempel (skriftkoden) og (p) avsnitt-koder. Mellom disse kodene ville være våre sideinnhold, tekst, bilder og koblinger. Hver gang en formateringsendring ble gjort på siden var ny tags nødvendige med fullstendig formatering for den nye inndelingen. Vi har nylig fått muligheten til å bruke gjennomgripende stilark, slik at vi kan skrive formateringen én gang og deretter referere til som formatering flere ganger i en web-side.
Vi må ha færre tegn på siden når de vises i et html-redigeringsprogram for å øke hastigheten på lasting siden. Siden vi virkelig ikke vil fjerne noen av våre synlig innhold vi må se til html-koden. Ved å rense opp denne koden kan vi fjerne tegn, og dermed skape en mindre webside som lastes raskere.
HTML er endret over tid, og vi har nå mange forskjellige måter å gjøre samme. Et eksempel er koden som brukes til å vise en fet skrift. Vi har to hovedalternativene, koden (sterk) og (b)-koden i HTML. Som du kan se (sterk) koden bruker 5 flere tegn enn (b)-koden, og hvis vi betrakter sluttkoder også se vi at bruker de (strong)(/strong) koden par bruker 10 flere tegn enn renere (b)(/b) koden par.
Dette er vår første prinsippet om rene HTML-koder: Bruk den enkleste metoden koding som er tilgjengelig.
HTML har evnen til fuglefjell koden i annen kode. Vi kan for eksempel ha en linje med tre ord der det midterste ordet var i fet skrift. Dette kan oppnås ved å endre formateringen helt hver gang de synlige formateringsendringene. Vurder denne koden:
(font face = "ganger")This(/font)
(font face = "ganger")(sterk)Bold(/strong)(/font)
(font face = "ganger")Word(/font)
Dette tar opp 90 tegn.
Dette er svært dårlig skrevet html og er det noen ganger får du når du bruker et WYSIWYG-redigeringsprogram. Siden (font)-koder er gjentatt den samme informasjonen kan vi bare hekker (sterke) koder inne (font)-koder, og bedre ennå bruke koden (b) i stedet for etiketten (sterk). Dette vil gi oss denne koden (font face = "ganger) denne (b)BOLD(/b) Word(/font), tar opp bare 46 tegn.
Dette er vårt andre prinsippet om rene HTML-koder: Bruk nestede koder når det er mulig. Vær oppmerksom på at WYSIWYG redaktører ofte vil oppdatere formatering ved å legge til lag etter lag med nestede koden. Så mens du rense opp koden utseendet for redundante nestede koden er plassert der av din WYSIWYG-redigeringsprogram.
Et stort problem med å bruke HTML-koder er at vi trenger å gjenta tag koding når vi endrer formateringen. Bruk av CSS gir oss en stor fordel i ren koding ved å la oss oppsettet, formateringen én gang i et dokument, deretter bare henvise til den om og om igjen.
Hvis vi hadde seks avsnitt på en side som bytter mellom to ulike typer formatering, for eksempel overskrifter i blått, fet, Ariel, størrelse 4 og avsnittstekst i svart, klokkeslett, størrelse 2, trenger ved hjelp av koder vi å vise fullstendig formateringen hver gang vi foretar en endring.
(font face = "Ariel" farge = "blå" størrelse = "4")(b)Våre heading(/b)(/font)
(font face = "Ganger farge =" svart"størrelse ="2")Våre paragraph(/font)
(font face = "Ariel" farge = "blå" størrelse = "4")(b)Vår neste heading(/b)(/font)
(font face = "Ganger farge =" svart"størrelse ="2")Vår neste paragraph(/font)
Vi vil deretter gjenta dette for hver overskrift og avsnitt, massevis av html-koden.
Med CSS kunne vi opprette CSS-stiler for hver formateringstype, vise stiler en gang i toppteksten på siden, og deretter bare henvise til stilen hver gang vi foretar en endring.
(leder)
(stil type = "text/css")
(!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
--)
(/ stil)
(/ -hode)
(tekst)
(p class = "stil 1")Heading(/p)
(p class = "style2")Avsnitt Text(/p)
(/ body)
Legg merke til at stiler er opprettet i Head-delen av siden og deretter refereres det bare til i hoveddel. Når vi legger til flere formatering vi ville bare fortsette å referere til de tidligere opprettet stilene.
Dette er vår tredje prinsippet av rene HTML-koder: Bruke CSS-stiler når stadig mulig. CSS har flere andre fordeler, slik som å kunne plassere CSS-stiler i en ekstern fil, og dermed redusere sidestørrelsen som er enda mer, og muligheten for å oppdatere raskt formatere hele området ved å bare oppdatere den eksterne CSS stil-filen.
Så du kan enkelt redusere filstørrelsen og gjøre en rask lasting, helle og mener webside med noen enkel rengjøring av HTML-koden.
No comments:
Post a Comment