Hvordan se kildekoden til en side i Google Chrome? Slik viser du sidens kildekode og elementkode.
God dag, kjære lesere av bloggen min. Noen ganger finner du en vakker funksjon på et nettsted og begynner å lure på hvordan skaperen oppnådde en så interessant effekt.
Det viser seg at svaret er ganske enkelt. Og hvis du har noen ferdigheter, kan du samle mange av disse funksjonene og lage din egen unike nettside på kort tid.
I dag skal vi snakke om hvordan du åpner koden til en side, et bestemt element, og lærer hvordan du bruker denne ferdigheten til din fordel.
Grunnleggende kunnskap om kodeSiden min er beregnet på nybegynnere og først vil jeg kort snakke om nettsteder og kode generelt.
For å tegne et bilde, skjær det deretter i små deler, skriv kode slik at nettleseren vil sette sammen alle elementene til en enkelt helhet. Virker alt veldig komplisert? Ikke i det hele tatt, og det er ingen vits i å sørge over det.
Slik lages nettsider av høy kvalitet. Hvis du vil, engasjer deg i denne saken og studer den; hvis du ikke vil, kan ingen tvinge deg.
Jeg vil bare si en ting... det er ikke noe mer behagelig enn å se hvordan uforståelige ord du skrev blir forvandlet til en enkelt helhet og blir levende: lenker fungerer, knapper beveger seg, bilder beveger seg, tekst kryper. Jeg tror jeg vet hvordan Victor Frankenstein følte det.
Når du begynner å forstå det hemmelige språket og ser at alt faktisk er mye enklere enn det først så ut, kan du ikke unngå å tro på dine egne styrker og evner i hjernen. Dette er veldig kult.
Hvordan lages nettsider? Ideelt sett først. Han maler bare et bilde. For eksempel, som vist på bildet nedenfor. Foreløpig er det bare et bilde, et fotografi. Ingen lenker fungerer, når du klikker går du ikke noe sted, ingen søk utføres.
I følge denne tegningen. Se på skjermbildet nedenfor. Du tror kanskje at dette er et latterlig og veldig komplekst sett med symboler. Faktisk er alt ikke så komplisert, det er en viss algoritme.
Det er bare rundt 150 tagger og hver av dem er ansvarlig for en spesifikk handling: lenke, orddeling, fet skrift, farge, tittel og så videre. Å forstå dem er ikke så vanskelig hvis du har lyst og ikke bryr deg om tiden.
Takket være kunnskap om disse egenskapene kan du løse nesten alle problemer. Men hver utvikler finner sine egne måter å nå målet på.
Erfarne skapere ser umiddelbart hvordan de oppnår resultater, mens andre må tenke, lete etter svaret i artikler eller i kildekoden til konkurrenter. De tar ganske enkelt den nødvendige delen fra en tredjepartsside og redigerer den selv. Dette forkorter arbeidsprosessen betydelig.
Litt senere vil jeg vise deg et konkret eksempel.
Se kodeSå la meg først vise deg hvordan du skal handle hvis du trenger å finne ut andres html. Så skal vi se nærmere på alle de andre spørsmålene.
Den beste måtenMetoden som jeg vil beskrive først er litt komplisert for nybegynnere, men som en introduksjon, les den. Åpne siden og klikk på høyre museknapp. Velg "Lagre som..."
Lagre hele nettsiden. Som du kan se på skjermbildet, har jeg allerede lastet ned alt på forhånd. Her har vi to mapper.
Alt du trenger er her. Hvert element. Hvis du forstår dette, kan du raskt få alt du trenger. Men en slik oppgave blir stadig mer umulig. Det er ingen nedlasting. Hva gjør jeg hvis det er forbudt å kopiere en side?
Dette er Google ChromeSom du kanskje allerede har lagt merke til, bruker jeg oftest Google Chrome, og å lære andres kode i denne nettleseren er like enkelt som å skjære pærer. Som i prinsippet med alle andre. Ordningen vil ikke bare være lik, men identisk. Åpne siden hvis kode vi vil vite, og høyreklikk hvor som helst. Klikk "Vis sidekode" i vinduet som vises.
Et kodeark åpnes i et nytt vindu, noe som er ganske vanskelig for en nybegynner å forstå. Men ikke vær skremt på forhånd.
Hvis du trenger å vite koden til bare ett element, er det bare å holde musepekeren over det og høyreklikke. Velg en annen Chrome-funksjon: "Se elementkode".
For eksempel kan jeg være interessert i hvordan logoen ble laget, ved å bruke et bilde eller et programmeringsspråk? Tross alt kan du tegne en firkant ved hjelp av CSS. Mange eksperter anbefaler å skrive ned så mye informasjon som mulig i kode. Hvordan fungerer de på populære nettsteder?
Nå har nødvendig informasjon dukket opp. html på toppen, css på bunnen. Dette er to språk. Den første er ansvarlig for tekstkomponenten, og den andre for utformingen. Hvis det ikke fantes noen CSS, måtte du spesifisere farge og skriftstørrelse hver gang. For hver side er dette veldig langt. Men hvis det ikke fantes html, så hadde vi ikke hatt tekster. Jeg forklarte det grovt, men generelt er det slik det er.
Er du forresten interessert i hvordan det fungerer her, kan du se på linken til bildet under. Her er svaret ditt.
Hvis du liker å jobbe i mastikk, vil alt være nøyaktig det samme. Åpne siden og klikk på høyre museknapp. "Sidekildekode" hvis du vil se hele koden.
Når du holder markøren over et element, kan du åpne koden.
Her vises dataene nederst på skjermen, men ellers er alt helt likt.
I Yandex-nettleseren er alt nøyaktig det samme som i de to foregående alternativene, åpne siden, høyreklikk, se sidekoden.
Vi holder markøren over et element hvis vi vil finne ut nøyaktig dets kode.
Alt vises her nøyaktig det samme som i Chrome.
Og til slutt, Opera.
Du har forresten kanskje lagt merke til at du ikke trenger å bruke mus. Det er en hurtig hurtigtast for å åpne koden, og den er lik for alle nettlesere: CTRL+U.
For elementer: Ctrl+Shift+C.
Slik ser resultatet ut.
Se nå hvordan alt fungerer. Du finner et nettsted og liker virkelig et element. For eksempel denne. Du vet allerede hvordan du åpner elementkoden.
Kopier det nå.
Jeg bruker , lim inn denne koden i en ny html-fil, inn i body-taggen (body på engelsk).
La oss nå se hvordan det hele vil se ut i nettleseren.
Klar. For at teksten skal justeres etter kantene og få en grønnaktig farge, må du koble css til dette dokumentet og kopiere en annen kode fra nettstedet som vi kopierte denne fra.
Jeg vil ikke gjøre dette nå. Dette krever mer tid: både mitt og ditt. Jeg tror at jeg vil beskrive alle detaljene i mine fremtidige publikasjoner. Abonner på nyhetsbrevet og vær den første som får vite når en artikkel dukker opp.
Hvis du ikke tåler det, men ønsker å lære mer om html og css nå, så kan jeg tradisjonelt anbefale deg gratis kurs.
Her er 33 leksjoner som lar deg mestre html - "Gratis kurs i HTML".
Og her er fullstendig informasjon om css - "Gratis kurs i CSS (45 videotimer!)".
Nå vet du litt mer. Jeg ønsker deg suksess i dine bestrebelser. Ser deg igjen!
Hvis du åpner en nettside, vil den inneholde typiske elementer som ikke endres avhengig av typen og fokuset til nettstedet. Eksempel 4.1 viser koden for et enkelt dokument som inneholder grunnleggende tagger.
Eksempel 4.1. Nettsidens kildekode
Eksempel på sidehode
Første ledd.
Andre ledd.
Kopier innholdet i dette eksemplet og lagre det i mappen c:\www\ som eksempel41.html. Deretter starter du nettleseren og åpner filen via menyelementet Fil > Åpne fil (Ctrl+O). I dialogboksen for dokumentvalg velger du filen example41.html. Nettsiden vist i fig. 1 åpnes i nettleseren. 4.1.
Ris. 4.1. Resultat av å kjøre eksempelet
Elementet er ment å indikere typen av gjeldende dokument - DTD (dokumenttypedefinisjon, beskrivelse av dokumenttypen). Dette er nødvendig for at nettleseren skal forstå hvordan den nåværende nettsiden skal tolkes, fordi HTML finnes i flere versjoner, i tillegg er det XHTML (EXtensible HyperText Markup Language), som ligner HTML, men skiller seg fra det i syntaks. For at nettleseren ikke skal bli forvirret og forstå i henhold til hvilken standard som skal vises nettsiden, er det nødvendig å stille inn den første linjen med kode.
Det finnes flere typer, de varierer avhengig av hvilken HTML-versjon de retter seg mot. I tabellen 4.1. Hovedtyper av dokumenter med beskrivelser er gitt.
| HTML 4.01 | |
| Strenge HTML-syntaks. | |
| Overgangs HTML-syntaks. | |
| Et HTML-dokument bruker rammer. | |
| HTML 5 | |
| Denne versjonen av HTML har bare én doctype. | |
| XHTML 1.0 | |
| Strenge XHTML-syntaks. | |
| Overgangs XHTML-syntaks. | |
| Dokumentet er skrevet i XHTML og inneholder rammer. | |
| XHTML 1.1 | |
| Utviklerne av XHTML 1.1 forventer at den gradvis vil erstatte HTML. Som du kan se, har denne definisjonen ingen inndeling i typer, siden syntaksen er den samme og følger klare regler. | |
Forskjellen mellom en streng dokumentbeskrivelse og overgangsdokumentbeskrivelse er en annen tilnærming til å skrive dokumentkode. Strenge HTML krever streng overholdelse av HTML-spesifikasjonen og er utilgivelig for feil. Transitional HTML er mer avslappet når det gjelder noen kodefeil, så denne typen er å foretrekke å bruke i visse tilfeller.
For eksempel, i streng HTML og XHTML kreves taggen, men i overgangs-HTML kan den utelates og ikke spesifiseres. Samtidig husker vi at nettleseren vil vise dokumentet uansett, uansett om det stemmer med syntaksen eller ikke. Denne kontrollen utføres ved hjelp av en validator og er først og fremst ment for utviklere for å spore feil i dokumentet.
I fremtiden vil vi bruke overveiende strenge, bortsett fra i tilfeller der dette er spesifikt oppgitt. Dette vil tillate oss å unngå vanlige feil og lære oss å skrive syntaktisk korrekt kode.
Du kan ofte finne HTML-kode uten bruk i det hele tatt; i et slikt tilfelle vil nettsiden fortsatt vises. Det kan imidlertid være at det samme dokumentet vises forskjellig i nettleseren når det brukes og når det ikke brukes. I tillegg kan nettlesere vise slike dokumenter på sin egen måte, som et resultat av at siden "smuldres", dvs. vil vises helt annerledes enn hva utvikleren krever. For å unngå situasjoner som dette, legg alltid til i begynnelsen av dokumentet.
Taggen definerer begynnelsen av HTML-filen og lagrer overskriften ( ) og brødteksten til dokumentet ( ) i den.
Dokumentoverskriften, som blokken også kalles, kan inneholde tekst og tagger, men innholdet i denne delen vises ikke direkte på siden, med unntak av containeren.
Taggen er universell og legger til en hel klasse med funksjoner, spesielt ved hjelp av metatags, som denne taggen vanligvis kalles, kan du endre sidekodingen, legge til nøkkelord, dokumentbeskrivelse og mye mer. Slik at nettleseren forstår at den har å gjøre med UTF-8-koding (Unicode-transformasjonsformat), og denne linjen legges til.
Eksempel på nettside
Taggen definerer tittelen på en nettside; det er et av de viktige elementene designet for å løse mange problemer. I Windows-operativsystemet vises tittelteksten i øvre venstre hjørne av nettleservinduet (Figur 4.2).
Ris. 4.2. Overskriftsvisning i nettleseren
Taggen er obligatorisk og må absolutt være til stede i dokumentkoden.
Du bør alltid legge til en avsluttende kode for å indikere at dokumentets tittelblokk er komplett.
Brødteksten i dokumentet er ment å inneholde tagger og innhold på nettsiden.
Overskrift
HTML tilbyr seks tekstoverskrifter på forskjellige nivåer som indikerer den relative betydningen av delen etter overskriften. Dermed representerer taggen den viktigste overskriften på første nivå, og taggen tjener til å indikere overskriften på sjette nivå og er den minst viktige. Som standard vises overskriften på første nivå med største fet skrift, og påfølgende nivåoverskrifter er mindre i størrelse. Tagger... refererer til blokkelementer, de starter alltid på en ny linje og etter dem vises andre elementer på neste linje. I tillegg legges det til et hvitt mellomrom før og etter tittelen.
Noe tekst kan skjules fra å bli vist i nettleseren ved å gjøre den til en kommentar. Selv om denne teksten ikke vil bli sett av brukeren, vil den fortsatt bli overført i dokumentet, så hvis du ser på kildekoden, kan du oppdage skjulte notater.
Det er en sjanse til å se på den første koden til en nettside, som mottas av nettleseren som et resultat av en forespørsel til serveren, i praktisk talt alle nettlesere. Tilgang til den tilsvarende kommandoen er organisert omtrent identisk, men det er betydelige forskjeller i metoden og formen som den første koden vil bli presentert for deg.
Bruksanvisning1. I Mozilla FireFox-nettleseren utvider du "Vis"-delen i menyen og klikker på "Sidestartkode". Det samme elementet er også i kontekstmenyen som vises hvis du høyreklikker på sideteksten. Du kan også bruke tastekombinasjonen CTRL + U. Mozilla FireFox bruker ikke eksterne programmer - den første sidekoden med syntaksutheving vil bli åpnet i et eget nettleservindu.
2. I Internet Explorer klikker du på "Fil"-delen i menyen og velger "Rediger i Notisblokk". I stedet for navnet Notisblokk kan det skrives et annet program som du har tilordnet i nettleserinnstillingene for å se startkoden. Ved å høyreklikke på siden, vises en kontekstmeny, som også har et element som lar deg åpne den første koden til siden i et eksternt program - "Se HTML-kode".
3. I Opera-nettleseren åpner du menyen, går til "Side"-delen, og du vil ha en sjanse til å velge elementet "Initial code" eller "Initial frame code" i underseksjonen "Utviklingsverktøy". Hurtigtastene CTRL + U og CTRL + SHIFT + U er henholdsvis tilordnet dette valget. I kontekstmenyen knyttet til å høyreklikke en side, er det også et element "Startkode". Opera åpner sidekilden i et eksternt program som er tilordnet i operativsystemet eller i nettleserinnstillingene for redigering av HTML-filer.
4. Google Chrome-nettleseren har uten tvil den beste organisasjonen for å se den første koden. Ved å høyreklikke på siden kan du velge alternativet "Se sidekode" og deretter åpnes kildekoden med syntaksutheving i en egen fane. Eller du foretrekker kanskje linjen "Vis elementkode" i samme meny, og nettleseren i samme fane vil åpne to ekstra rammer der du kan inspisere HTML- og CSS-koden til hvert sideelement. Nettleseren vil svare på at markøren beveger seg langs kodelinjene ved å markere elementer på siden som tilsvarer denne delen av HTML-koden.
5. I Apple Safari-nettleseren utvider du "Vis"-delen og velger linjen "Vis HTML-kode". I menyen som vises når du høyreklikker på en åpen side, heter det tilsvarende elementet "Vis kilde". Hurtigtastene CTRL + ALT + U er tilordnet denne handlingen Startkoden åpnes i et eget nettleservindu.
Høytiden nærmer seg – den internasjonale kvinnedagen. La oss forberede oss på det på forhånd. Du kan gratulere jenter og kvinner på en original måte ved å bruke postkorttjenestene som er omtalt nedenfor.
Lag et postkort for 8. mars online Bruk følgende tjenester for å lage et postkort praktisk talt fra bunnen av.
Jeg håper at ved å bruke en av disse generatorene, vil du være i stand til å gratulere damene dine på en tilstrekkelig måte den 8. mars!
Innholdet i artikkelen:
Google Plus stenges Google Plus-plattformen levde ikke opp til håpene til utviklerne og vil bli fullstendig fjernet 2. april 2019. Sammen med det vil albumene som er knyttet til det i Google Foto forsvinne, og autorisasjon på nettsteder med en Google Plus-konto vil bli utilgjengelig. Fra 4. februar har funksjonen for å opprette Google Plus-profiler, kanaler og sider blitt utilgjengelig. Hvis verdifullt innhold ble lagret på kontoen din, kan du laste ned en sikkerhetskopi.Endringene vil mest påvirke bloggere som driver bloggene sine på Blogspot. Noen G+-moduler, G+-kommentarer og Google+-profilen din vil ikke lenger være tilgjengelig. Dette står i varselet i Blogger-administrasjonsområdet:
Etter kunngjøringen om at Google+ API vil bli tatt ut av drift i mars 2019, vil det bli gjort en rekke endringer i Bloggers integrasjon med Google+ 4. februar.
Google+-widgeter. Bloggdesign vil ikke lenger støtte +1-knappen, Google+-følgere og Google+-merke-widgetene. Alle forekomster av disse widgetene vil bli fjernet fra bloggen din.
+1 knapper. +1- og G+-knappene vil bli fjernet, og det samme vil "Publiser til Google+"-koblingene under blogginnlegg og i navigasjonslinjen.
Vær oppmerksom på at hvis du bruker en egendefinert mal som har Google+-funksjoner, kan det hende at den må endres. Ta kontakt med personen som ga deg denne malen for anbefalinger.
Google+-kommentarer. Støtte for kommentarer ved hjelp av Google+ vil bli avviklet, og alle blogger som bruker denne funksjonen vil bli gjenopprettet til standard Blogger-kommentarer. Kommentarer postet via Google+ kan dessverre ikke overføres til Blogger, så de vil ikke lenger vises på bloggen din. Slette Google Plus-kommentarer Dessverre vil kommentarer som ble publisert i systemet bli slettet permanent. Du kan bare bruke det samme verktøyet https://takeout.google.com for å si sikkerhetskopikommentarer fra Google+ til datamaskinen din. Bare det er ingen bootloader for det, og du kan bare gjenopprette kommentarer manuelt på en ganske skjev måte. Det er bra at jeg var i tide Hvordan erstatte en Google Plus-profil med en Blogger-profil Hvis du blogger på Blogspot, så er det lurt å gå tilbake fra Google Plus-profilen til Blogger-profilen (for de som byttet til Google Plus kl. en gang). Jeg anbefaler å gjøre dette akkurat nå for å unngå uventede situasjoner som kan oppstå når du sletter Google Plus-kontoer. Slik får du tilbake Blogger-profilen din. Dette er enkelt å gjøre i Blogger-administratorinnstillingene:
Innstillinger –> Brukerinnstillinger –> Brukerprofil – her velger du Blogger
Lagre endringene dine.
Bekreft overgangen til og skriv inn navnet eller kallenavnet ditt.
Ikke glem å laste opp en avatar på Blogger-profilen din.
Slik sletter du en Google Plus-profil Hvis du bestemmer deg for å kvitte deg med G+-profilen din en gang for alle, gå til Google Plus-siden din -> Innstillinger -> rull til bunnen av siden -> slett Google Plus-kontoen:
I dag skal jeg fortelle deg hva CSS3 er, hva den brukes med, hvor du skal lete etter den og hvordan du skriver den riktig. Jeg advarer deg, vil jeg fortelle fra meg selv, forenklet for allmennheten, slik jeg ser det + eksempler. Så la oss starte langveis fra.
CSS er stiler der egenskapene til et objekt er skrevet. Dette betyr at de er i alle eksisterende motorer, hvis du ikke finner dem, så leter du enten på feil sted, eller så eksisterer de ikke ( skjev side). Hvor finnes de vanligvis? Vanligvis er dette roten til nettstedet, navnet på style.css-filen, selv om navnet i prinsippet ikke er like viktig som .css-utvidelsen hvis filen med en slik filtype er en stilfil.
Se også på bloggen min.