Vi har gitt ut en ny bok, "Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand".
Et nettsteds kildekode er en samling HTML-markering, CSS-stiler og JavaScript som nettleseren mottar fra webserveren.
Flere videoer på kanalen vår - lær internettmarkedsføring med SEMANTICA
Det kan sammenlignes med et sett med kommandoer gitt til soldater av sjefen. Tenk deg at publikum ikke kan se eller høre sjefen. Fra deres synspunkt utfører militæret uavhengig handlinger. I vårt tilfelle er sjefen nettleseren, kommandoene er kildekoden, og de marsjerende soldatene er sluttresultatet.
Siden lagres på en webserver som sender siden på forespørsel fra brukeren. En forespørsel er å skrive inn en URL i en adresselinje, klikke på en lenke eller klikke på en send-knapp på et skjema. Det spiller ingen rolle hvilket språk nettsidene er skrevet på, om de inneholder kode. Sluttresultatet av enhver serversidealgoritme er et sett med html-koder og tekst.
Kildekoden til en side er et datasett som inkluderer:
- html-oppmerking;
- stilark eller fillenke;
- programmer skrevet i JavaScript eller lenker til filer med kode.
Disse tre delene håndteres av nettleseren. For serveren er dette ganske enkelt tekst som må sendes som svar på en forespørsel.
Hvorfor vi kanskje må studere kildekoden
Alt vi ser, kan vi analysere og bruke for å løse visse problemer som oppstår i løpet av arbeidet med nettstedet, spesielt når vi optimaliserer det. Ved å se på kildekoden kan vi:
- Se metakodene til ditt eget eller andres nettsted for å analysere dem.
- Se tilstedeværelsen eller fraværet av visse elementer på nettstedet: tellere, identifikasjonskoder i ulike systemer, visse skript og mer.
- Finn ut parameterne til elementene: størrelser, farger, fonter.
- Finn stien til bilder og andre elementer på siden.
- Utforsk lenker fra siden.
- Finn problemer med koden som forstyrrer prosessen med nettstedoptimalisering: stiler, skript, ugyldig kode som ikke er inkludert i separate filer.
Dette er grunnleggende funksjoner, men faktisk, ved å vite hvordan du leser koden, kan du lære mye mer om siden.
Hvordan se kildekoden til nettstedet
Helt i den formen den er lagt ut på serveren kan ikke dette gjøres fra nettleseren. Men du kan se all markeringen ved å høyreklikke på siden. I det følgende, ved å bruke eksemplet med Google Chrome.
Vi velger alternativet "Se sidekode" og får hele oppføringen i en egen fane.
Det er bare tekst som må analyseres for å forstå. Men du kan få interaktiv kode ved å bruke utviklerverktøyene.
Hvordan finne kildekoden til en side
Klikk på menyikonet i nettleseren. Oftest er det til høyre og ser ut som tre prikker eller striper.
I tilleggsverktøy-delen velger du "Utviklerverktøy".
Et vindu åpnes som viser den aktive tilstanden til koden. Dette betyr at når du klikker på markeringen, vil elementstilen vises ved siden av den, og de valgte blokkene vil bli uthevet på siden.
I "Kilde"-fanen kan du se innholdet i noen filer: skript, fonter, bilder.
Kontroll av nettstedsertifikatet er tilgjengelig i fanen "Sikkerhet".
"Revisjon"-fanen hjelper deg med å sjekke ressursen som er lagt ut på hostingen.
Hvis plasseringen av panelet til høyre er upraktisk, kan du klikke på tre prikker og endre det ved å velge ønsket element.
Slik viser du metakoder
Hvert html-dokument inneholder strukturkoder. Her er noen av dem:
- Html - hele dokumentet.
- Head - seksjon av serviceoverskrifter.
- Tittel - sidetittel (vises på fanen).
- Brødtekst - brødteksten i dokumentet.
- H1-H6 - overskrifter på sideteksten.
- Artikkel - artikkel.
- Seksjon - seksjon.
- Meny - meny.
- Div - blokk.
- Span er en streng.
- P - avsnitt.
- Bord - et bord.
Elementer er ment for logisk avgrensning av seksjoner på siden; om nødvendig er de stylet. De inneholder tekst som på en eller annen måte er synlig på siden. Men Head-taggen inneholder serviceinformasjon. Metakoder brukes for å indikere det. Alt som er skrevet i dem er ment for serveren og søkemotorene.
Det er umulig å finne ut innholdet på annen måte.
La oss ta hensyn til Link-taggen. Med dens hjelp er lenker til eksterne inkludere-filer indikert. Om ønskelig kan du se innholdet og lagre på disk. For å gjøre dette, hold pekeren over adressen og trykk RMB. Velg "Åpne i ny fane".
Den angitte filen åpnes i en ny fane og kan vises eller lagres.
Hvordan vise kildekoden til en side for feilsøking av et skript
I dette tilfellet er det mest praktisk å åpne siden på den lokale maskinen. Hvis du bare trenger å fikse markeringen, stilene og skriptene, kan du gjøre det rett fra mappen. HTML-koden ses på samme måte. JavaScript-kodefeil kan imidlertid sees i "Konsoll"-fanen. Den viser en beskrivelse av feilen og linjenummeret den oppstod på.
Syntaksen kan sees direkte i koden. Fanen "Kilde" er ment for dette.
Hvordan se koden til en bestemt vare
For store sider med mange elementer er det vanskelig å finne koden du ønsker i all markeringen. I dette tilfellet bør du bruke en spesiell kommando fra kontekstmenyen. Hold musen over fragmentet og trykk RMB. La oss velge "Vis kode"-kommandoen.
Det samme vinduet åpnes, men med fokus på det valgte objektet.
Sammendrag
Vi fortalte deg hva sidens kildekode er. Det er nok å mestre grunnleggende kunnskap om HTML og CSS, og ved å bruke praktiske utviklerverktøy kan du feilsøke dine egne html-dokumenter.
Å bla gjennom ressurskoden på Internett vil tillate deg å lære ikke bare av din egen erfaring, men også bruke ekte arbeidseksempler. Og for seo-spesialister vil metakoder være nyttige, informasjonen der kan si mye om nettstedet.
Så i dag skal vi se på flere nyttige verktøy for en webmaster som gjør livet enklere for nettstedslayout. La oss starte med nettredaktørkonsollen i Google Chrome. Og la oss gå gjennom spørsmålene som oftest dukker opp fra webmasteren under oppsettet av nettstedet.
For å komme til konsollen, åpne nettstedet ditt i Google Chrome, høyreklikk hvor som helst på nettsiden og velg Vis sidekode fra hurtigrullegardinmenyen, eller på et spesifikt element for forskning ved å velge Vis kodeelement " .
Øverst vil du ha flere faner oppført. I dag skal vi snakke om fanen "Elementer". , som presenterer elementene på en nettside med uthevingskoder, egenskaper, fremheving av nesteting av elementer, som representerer hierarkiet til et element i DOM-treet (hint nederst, fra rotforelderen til den nåværende utforskede), muligheten til å rediger elementer, en liste over deres egenskaper, vurder søk etter elementer, så vel som la oss bli kjent med å se css-stiler knyttet til elementer, etc.
Hvordan kan jeg se alle stilene som er knyttet til et bestemt element? Hvilken blir brukt nå? I hvilke filer ligger de?
Så ingenting kan være enklere! Vi åpner Google Chrome-nettleseren, åpner nettstedet vårt - kilden til spørsmål, høyreklikker på ønsket element, hvis det er synlig i konteksten til siden, og velg "Se elementkode" fra kontekstmenyen.
Nederst har vi en konsoll med en uthevet fane til venstre "Elementer" og alle stilene knyttet til elementet til høyre, der: Beregnet stiler- dette er generelle "oppsummerings"-stiler som ble tilordnet et element fra css-reglene og brukerens nettleserinnstillinger (hans miljø), og fanen er skjult.
Men vi er interessert i "Stiler"-fanen, utvidet under den, der alle stilene som er tildelt et element er oppført etter tur, samt filer der disse reglene er indikert for dette elementet med dets type, id, klasse, navn , eiendom, attributt osv. ... Samtidig, hvis css-regelen er krysset ut, ble den omdefinert tidligere/senere (noe som gjør det enkelt å spore hvilke av css-reglene som har prioritet og som i dette tilfellet brukes på elementet).
Under konsollen er en linje som viser et element i dokumenthierarkiet, lar deg enkelt se hele listen over overordnede elementer fra roten til det valgte elementet. Noe sånt som brødsmuler.
Html-taggen er ikke synlig i sidekonteksten? Eller trenger du å finne alle tagger, for eksempel etter en bestemt klasse, navn, egenskap, type?
Åpne nettstedet i Google Chrome, høyreklikk, åpne kontekstmenyen, velg « Se sidekode » ... Trykk tastekombinasjonen "CTRL + F" samtidig, skriv inn uttrykket vi trenger ( for eksempel: klasse = ”polstring") og naviger gjennom listen over resultater som er funnet, mens du ser gjennom alle stilene knyttet til de ønskede elementene på høyre side av siden.
Hvordan se html-koden til elementet/elementene lastet dynamisk (for eksempel: av Ajax)
Vi venter på at siden skal lastes inn i Google Chrome. Vi utfører de nødvendige handlingene for at Ajax skal fungere. Høyreklikk på de innlastede dataene, velg "Vis elementkode" fra kontekstmenyen, undersøk resultatet i konsollen på fanen "Elementer" til venstre.
Se endringer i css-stiler i sanntid
Forresten, det er også praktisk å observere, om nødvendig, hvilke stiler som er tilordnet et element i farten, for eksempel når du ruller galleriet og andre hendelser etter timer. Alle javascript-tilordnede stiler i sanntid vil bli vist i egenskapen stil det valgte elementet i vinduet på "Elementer"-fanen.
Live forhåndsvisning av effekten av css-regler på presentasjonen av html-tagger
Google Chrome tilbyr en interaktiv konsoll for css-stiler. Og dette betyr at du ikke bare kan se hvilke stiler som brukes på elementet, men også flytte musepekeren over css-en som er spesifisert fra egenskapene, aktivere den ved å bruke popup-haken til høyre, eller deaktivere den ved å fjerne merket for flagget og se det resulterende resultatet på siden.
Endre presentasjonsstrukturen til html-elementer i farten (rett i nettleseren)
Så vi har allerede lært hvordan du utforsker strukturen til et nettdokument i Google Chrome, nå skal vi kort se på redigeringselementer i farten. Vi går til konsollen på noen måte som er praktisk for oss. Vi finner det nødvendige elementet i "Elementer", høyreklikk på det, og kaller dermed hurtigmenyen:
- Legg til attributt- legger til et attributt for det angitte elementet. Så snart markøren blir aktiv, begynner vi å angi ønsket egenskap. For eksempel: la oss skrive navn = ”itemImage”, som umiddelbart vil bli lagt til varen vår.
- Rediger attributt- hvis du høyreklikker på et elementattributt, blir varen tilgjengelig redigereEgenskap... Klikk, rediger.
Brukseksempel: vi har glemt passordet som er lagret under stjernene i Google Chrome (hvis passordet ble lagret i denne nettleseren). Høyreklikk på elementet med et passord, klikk på "Se varekode" , i konsollen til venstre i fanen Elementer klikk på attributttypen = ”passord” med høyre museknapp, venstreklikk på RedigereEgenskap, endre attributtet type = ”passord " på type = ”tekst ", og nå, i stedet for stjerner, vises det samme passordet i form av tekst.
- Redigerehtml- Høyreklikk på elementet i konsollen Elementer, velg Redigerehtml, endre koden etter eget ønske.
- KopieresomHtml- vi kopierer HTML-delen vi trenger for videre forskning, for eksempel i en notisblokk, eller til andre formål der vi må bruke nøyaktig samme layout. Vi sparer tid.
- KopiereXPATH- kopierer XPATH-representasjonen av strukturen fra roten til det overordnede elementet til det valgte elementet.
- Slettnode- hvis du trenger å fjerne det gjeldende valgte elementet og alle dets barn fra konteksten til nettsiden, og se resultatet.
- Ordpakke inn- vil gjengi websidevisningen i sammenheng med konsollen Elementer mer lesbar.
I de neste artiklene vil vi fortsette vår vurdering av verktøyene for webmaster, og spesielt vil vi bli kjent med resten av fanene til verktøyene for webmaster i Google chrome, og vurder også å feilsøke javascript-feil ved å bruke forskjellige nettlesere
Ferdighet endre kildekoden til siden Er en nyttig ferdighet for en avansert Internett-bruker. Ved å erstatte HTML-koden kan du endre den åpne nettsiden som du vil. I denne artikkelen vil vi fortelle deg, hvordan endre sidekoden i Google Chrome. Men i andre nettlesere gjøres alt på samme måte, så det burde ikke være noen problemer.
Hva er HTML-koden til en side?
Hver side du åpner i en nettleser har sitt eget HTML-kodespråk. Denne koden er tagger og tekst. Tagger er en slags tagger som forteller nettleseren hvordan den skal vise en bestemt del av nettstedet. Tekst er innholdet på siden, det brukeren ser. CSS-stiler kan også kobles til siden, som setter utseendet til sideelementene. Til endre kildekoden til nettstedet Du trenger ikke å kunne HTML og CSS i dybden, og snart vil du se det selv.
Hvorfor endre en nettside?
Du kan endre dataene på nettstedet, endre teksten i meldingen, lage et falskt skjermbilde. Vær oppmerksom på at alle endringer kun er synlige for deg, og når du laster inn siden på nytt, vil de forsvinne. De endrede dataene vil heller ikke være reelle. For eksempel, hvis jeg ikke har 10 dollar, og jeg endrer til 100, vil jeg ikke ha mer penger. Dette er bare visningen av siden av nettleseren. Eksempel:
Etter:
Som et eksempel vil jeg ta det samme nettstedet og endre den forrige kunngjøringen av artikkelen "" Åpne hjemmesiden i Google Chrome. Høyreklikk på elementet jeg vil endre, for eksempel tittelen på kunngjøringen og velg "Se kode".
I vinduet som åpnes, gå til Elementer-fanen og se HTML-koden til siden. I den må du finne teksten som er interessant for oss. (understreket med rødt)
Nå skal jeg slette den gamle teksten og skrive inn den nye.
Det er alt, tittelen på kunngjøringen er endret. Nå skal jeg endre selve kunngjøringen, taggene og overskriften.
Du kan sette inn et annet bilde ved å endre src-attributtet i img-taggen.
I lang tid var alternativet "vis kildekoden til siden" ubrukelig og uinteressant for meg. Så langt har ikke lære HTML på Codecademy og layout av mine egne nettsteder vokst til min nye hobby. Her oppsto spørsmålet: hvor kan man finne reelle saker og låne interessante løsninger for "sparegrisen"? Svaret var uventet enkelt, som alt genialt: se på kildekoden til siden i Google Chrome! Jeg deler mine beskjedne funn med deg.
Hva er sidens kildekode
Hvis du, som meg, bare tar dine første skritt i HTML-programmering, vil det ikke være overflødig å finne ut hva kildekoden til siden er.
Kildekoden, også kjent som HTML-koden til siden, er en tekst i Hyper Text Markup Language (HTML). Det inkluderer det faktiske sideinnholdet (tekst, tabeller) og tagger. Sistnevnte fungerer som instruksjoner for nettleseren: hvordan du viser innhold, hva slags formatering du skal bruke, hvor du skal sette inn en hyperkobling eller mediefil. Vel, for oss, nybegynnere programmerere, er kildekoden den beste treningsplassen: vi finner et interessant nettsted og spionerer på det, lagrer det, bruker vellykkede fragmenter. Hvordan?
Slik viser du kildekoden på nettlesersiden for Google Chrome
Finn siden du liker. For eksempel var jeg interessert i utformingen av sidemenyen. Det er tre måter å åpne kildekoden i Google Chrome-nettleseren:
- Klikk på ikonet Meny i øvre høyre hjørne av nettleseren og velg "Tilleggsverktøy". Blant annet er det alternativet "Se kildekode". Ærlig talt bruker jeg sjelden denne metoden: mange unødvendige bevegelser. Det kan gjøres enda enklere.
- Trykk på tastekombinasjonen Ctrl + U- et nytt vindu med kildekoden åpnes;
- For fans av kontekstmenyen: høyreklikk på siden og velg alternativet "Se sidekode".
Vi har taklet oppgaven med å se HTML-koden til siden i nettleseren. La oss gå videre til det mest interessante stadiet.
Hvordan redigere og lagre kildekoden
For å lære å lage nettsteder er det ikke nok å lese andres HTML-kode. Du må leke med det, eksperimentere, gjøre endringer og sjekke resultatet. Du kan til og med komme i gang ved å sette sammen noen gode eksempler. Hvordan redigerer og lagrer jeg kildekoden?
Alternativ 1. "Manuelt"
Etter at vi har åpnet kildekoden til siden, kaller vi opp kontekstmenyen og velger "Lagre som" og lagrer filen på harddisken. Vi redigerer filen i Notisblokk eller Notisblokk, lagrer endringene og åpner den gjennom nettleseren. Resultatene av endringene våre (gode og dårlige) vil gjenspeiles i nettleservinduet.
Alternativ 2. For proffene
Når du "leker" med kildekoden hver dag, er prosessen med "lagre - åpne - endre - lagre - sjekk" kjedelig. For meg selv fant jeg en løsning i form av å installere en plugin for Google Chrome - Firebug Lite. Den lar deg redigere og lagre kildekoden uten å forlate nettleservinduet.
