Hvordan vise HTML-kilden i Google Chrome

Enten du er fersk i nettbransjen eller en erfaren veteran, er det sannsynlig at du ser HTML-kilden til forskjellige nettsider mange ganger i løpet av karrieren din. De fleste nettlesere lar deg enkelt se kilden; Chrome er ikke annerledes.

Å vise kildekoden til et nettsted er en av de enkleste måtene å lære av det arbeidet og begynne å bruke spesifikk kode eller teknikker i arbeidet ditt. I tillegg til å lese webdesignbøker eller delta på profesjonelle konferanser, er det å se kildekoden til et nettsted en utmerket måte for nybegynnere å lære HTML.

Vis kildekoden i Chrome

Så hvordan ser du på kildekoden til et nettsted? Her er trinnvise instruksjoner for å gjøre det ved hjelp av Google Chrome-nettleseren.

1. Åpne Google Chrome nettleser (hvis du ikke har Google Chrome installert, er dette en gratis nedlasting).

2. Naviger til webside du vil undersøke.

3. Høyreklikk siden og se på menyen som vises. Klikk deretter på Vis sidekilde.

   

4. Kildekoden for den siden vises nå som en ny fane i nettleseren.

5. Alternativt kan du også bruke hurtigtasteneCTRL + U på en PC for å åpne et vindu med kildekoden til et nettsted. På en Mac er denne snarveien Kommando + Alternativ + U.

Bruk Chromes utviklerverktøy

I tillegg til den enkle visningssidekildefunksjonen som Google Chrome tilbyr, kan du også dra nytte av deres gode utviklerverktøy for å grave enda dypere inn i et nettsted. Disse verktøyene lar deg ikke bare se HTML, men også CSS som gjelder for visningselementer i det HTML-dokumentet.

Slik bruker du Chromes utviklerverktøy:

1. Åpen Google Chrome.

2. Naviger til websiden du vil undersøke.

3. Velg trepunktsmeny øverst til høyre i nettleservinduet.

4. Hold markøren over menyen, Flere verktøy og velg deretter Utviklerverktøy i menyen som vises.

   

5. Et vindu åpnes som viser HTML-kildekoden til venstre i ruten og tilhørende CSS til høyre.

6. Alternativt, hvis du høyreklikker et element i en webside og velg Undersøke fra menyen som vises, vil Chrome-utviklerverktøyene dukke opp og markere den spesifikke delen du valgte i HTML-en med tilsvarende CSS vist til høyre. Det er veldig nyttig hvis du vil lære mer om en bestemt del av et nettsted.

Er visning av kildekode lovlig?

Gjennom årene har vi hatt mange nye webdesignere som stiller spørsmål ved om det er akseptabelt å se kildekoden til et nettsted og bruke den til utdannelse og til slutt for det arbeidet de gjør. Selv om det ikke er akseptabelt å kopiere nettstedets kode og sende den som din egen på et nettsted, er det faktisk hvor mange fremskritt som gjøres i denne bransjen, å bruke den koden som et springbrett for å lære av.

Som vi nevnte i begynnelsen av denne artikkelen, ville du være hardt presset for å finne en fungerende webproff i dag som ikke har lært noe ved å se på nettstedets kilde! Ja, det er lovlig å se kildekoden til et nettsted. Å bruke den koden som en ressurs for å bygge noe lignende er også trygt. Å ta koden som den er og gi den videre mens arbeidet ditt er der du begynner å støte på problemer.

Til slutt lærer profesjonelle på nettet av hverandre og forbedrer ofte arbeidet de ser og er inspirert av, så ikke nøl med å se kildekoden til et nettsted og bruke den som et læringsverktøy.

Mer enn bare HTML

En ting å huske er at kildefiler kan være veldig kompliserte (og jo mer kompleks nettstedet du ser på, desto mer kompleks er det sannsynlig at nettstedets kode vil være). I tillegg til HTML-strukturen som utgjør siden, vil det også være CSS (cascading styleheets) som dikterer det visuelle utseendet til nettstedet. I tillegg vil mange nettsteder i dag inkludere skriptfiler som følger med HTML.

Det er sannsynlig at det er flere skriptfiler inkludert; faktisk hver og en driver forskjellige aspekter av nettstedet. Oppriktig, kildekoden til et nettsted kan virke overveldende, spesielt hvis du ikke har gjort noe nytt. Ikke bli frustrert hvis du ikke kan finne ut hva som skjer med dette nettstedet umiddelbart. Å vise HTML-kilden er bare det første trinnet i denne prosessen. Med litt erfaring vil du begynne å forstå bedre hvordan alle disse delene passer sammen for å lage nettstedet du ser i nettleseren din. Når du blir bedre kjent med koden, vil du kunne lære mer av den, og den vil ikke virke så skremmende for deg.