Voor een lange tijd voor mij is de optie "show broncode pagina's" was nutteloos en oninteressant. Doei HTML leren op Codecademy en het opmaken van mijn eigen websites groeide niet uit tot mijn nieuwe hobby. Dit is waar de vraag rees: waar je echte cases kunt vinden en lenen interessante oplossingen voor uw “spaarpot”? Het antwoord was onverwacht eenvoudig, zoals alle ingenieuze dingen: kijk naar de broncode van de pagina in Google Chrome! Ik deel mijn bescheiden vondsten met jullie.

Wat is de broncode van de pagina

Als je, net als ik, net je eerste stappen zet in het programmeren van HTML, is het een goed idee om uit te zoeken wat de broncode van een pagina is.

Broncode, ook wel HTML-paginacode genoemd - tekst in Hyper-taal Tekstopmaak Taal (HTML). Het bevat de daadwerkelijke pagina-inhoud (tekst, tabellen) en tags. Deze laatste fungeren als instructies voor de browser: hoe inhoud moet worden weergegeven, welk type opmaak moet worden gebruikt, waar een hyperlink of mediabestand moet worden ingevoegd. Welnu, voor ons, beginnende programmeurs, is de broncode het beste oefenterrein: we vinden een interessante site en bespioneren deze, slaan deze op en gebruiken succesvolle fragmenten. Hoe?

Hoe u de broncode kunt bekijken op de Google Chrome-browserpagina

Zoek de pagina die u leuk vindt. Ik was bijvoorbeeld geïnteresseerd in het ontwerp van het sitemenu. Open source-code op Google-browser Chrome kan op drie manieren worden gedaan:

1. Klik op het pictogram menu rechts bovenste hoek browser en selecteer " Extra hulpmiddelen" Er is onder andere een optie “Bekijk broncode”. Eerlijk gezegd gebruik ik deze methode zelden: er zijn veel onnodige bewegingen. Het kan nog eenvoudiger gemaakt worden.
2. Druk op de toetsencombinatie Ctrl+U– een nieuw venster met de broncode wordt geopend;
3. Voor fans van het contextmenu: klik met de rechtermuisknop op de pagina en selecteer de optie “Paginacode bekijken”.

We hebben de taak op zich genomen om de HTML-code van de pagina in de browser te bekijken. Laten we verder gaan naar de meest interessante fase.

Hoe u de broncode kunt bewerken en opslaan

Om te leren hoe u websites kunt maken, is het niet voldoende om de HTML-code van iemand anders te lezen. Je moet ermee spelen, experimenteren, wijzigingen aanbrengen en het resultaat controleren. U kunt zelfs beginnen met het samenstellen van een paar succesvolle voorbeelden. Hoe de broncode bewerken en opslaan?

Optie 1. “Handmatig”

Nadat wij de broncode van de pagina hebben geopend, bellen wij contextmenu en selecteer de optie "Opslaan als" en sla het bestand op harde schijf. We bewerken het bestand in Kladblok of Kladblok, slaan de wijzigingen op en openen het via de browser. De resultaten van onze wijzigingen (succesvol en niet zo succesvol) zullen worden weerspiegeld in het browservenster.

Optie 2. Voor de profs

Als je elke dag met de broncode "speelt", wordt het proces van "opslaan - openen - wijzigen - opslaan - controleren" vermoeiend. Voor mezelf heb ik een oplossing gevonden in de vorm van het installeren van een plug-in voor Google Chrome - Firebug Lite. Hiermee kunt u de broncode bewerken en opslaan zonder het browservenster te verlaten.

1 stem

Goededag, lieve lezers mijn blog. Soms kom je iets tegen op de website mooie chip en de vraag begint te kwellen hoe de maker zo'n interessant effect heeft bereikt.

Het antwoord blijkt vrij eenvoudig te zijn. En als u over enige vaardigheden beschikt, kunt u veel van deze functies verzamelen en in korte tijd uw eigen unieke website maken.

Vandaag zullen we het hebben over hoe u de code van een pagina, een bepaald element, kunt openen en leren hoe u deze vaardigheid in uw voordeel kunt gebruiken.

Basiskennis van code

Mijn site is bedoeld voor beginners en eerst wil ik het kort hebben over sites en code in het algemeen.

Om een ​​afbeelding te tekenen en deze vervolgens in kleine delen te knippen, schrijft u code waarmee de browser alle elementen weer tot één geheel kan samenvoegen. Lijkt alles erg ingewikkeld? Helemaal niet, en het heeft geen zin om daarover te treuren.

Zo ontstaan ​​websites van hoge kwaliteit. Als je wilt, raak dan betrokken bij deze kwestie en bestudeer het; als je dat niet wilt, kan niemand je dwingen.

Ik wil maar één ding zeggen... er is niets leuker dan te zien hoe onbegrijpelijke woorden die je hebt geschreven, worden omgezet in één geheel en tot leven komen: links werken, knoppen bewegen, afbeeldingen bewegen, tekst kruipt. Ik denk dat ik weet hoe Victor Frankenstein zich voelde.

Wanneer je de geheime taal begint te begrijpen en ziet dat alles eigenlijk veel eenvoudiger is dan het aanvankelijk leek, kun je niet anders dan geloven in eigen kracht en hersencapaciteiten. Dit is erg cool.

Hoe worden websites gemaakt? Idealiter eerst. Hij schildert gewoon een schilderij. Bijvoorbeeld zoals weergegeven in de onderstaande afbeelding. Voorlopig is het slechts een beeld, een foto. Er werken geen links, als u klikt, gaat u nergens heen, er wordt niet gezocht.

Volgens deze tekening. Kijk naar de onderstaande schermafbeelding. Je denkt misschien dat dit een belachelijke en zeer complexe reeks symbolen is. In feite is alles niet zo ingewikkeld, er is een bepaald algoritme.

Er zijn slechts ongeveer 150 tags en elk van hen is verantwoordelijk voor een specifieke actie: link, woordafbreking, vetgedrukt, kleur, titel, enzovoort. Ze begrijpen is niet zo moeilijk als je het verlangen hebt en de tijd niet erg vindt.

Dankzij kennis van deze attributen kun je vrijwel elk probleem oplossen. Maar elke ontwikkelaar vindt zijn eigen manieren om het doel te bereiken.

Ervaren makers zien direct hoe ze resultaten kunnen behalen, terwijl anderen moeten nadenken, het antwoord moeten zoeken in artikelen of in de broncode van concurrenten. Ze halen eenvoudigweg het benodigde onderdeel van een site van derden en bewerken het zelf. Dit verkort het werkproces aanzienlijk.

Even later zal ik u een specifiek voorbeeld laten zien.

Code bekijken

Dus laat me je eerst laten zien hoe je moet handelen als je de html van iemand anders wilt achterhalen. Vervolgens gaan we dieper in op alle andere vragen.

De beste manier

De methode die ik als eerste zal beschrijven is een beetje ingewikkeld voor beginners, maar lees hem als introductie. Open de pagina en klik op de rechtermuisknop. Selecteer “Opslaan als...”

Sla de hele webpagina op. Zoals je in de screenshot kunt zien, heb ik alles van tevoren al gedownload. Hier hebben we twee mappen.

Alles wat je nodig hebt is hier. Elk element. Als je dit begrijpt, kun je snel alles krijgen wat je nodig hebt. Maar een dergelijke taak wordt steeds onmogelijker. Er is geen downloaden. Wat te doen als het kopiëren van een pagina verboden is?

Dit is Google Chrome

Zoals je misschien al hebt gemerkt, gebruik ik meestal Google Chrome en het leren van de code van iemand anders in deze browser is net zo eenvoudig als het pellen van peren. Zoals in principe met ieder ander. Het schema zal niet alleen vergelijkbaar zijn, maar ook identiek. Open de pagina waarvan we de code willen weten en klik met de rechtermuisknop ergens. In het venster dat verschijnt, klikt u op “Paginacode bekijken”.

Een vel code wordt geopend in een nieuw venster, wat voor een beginner vrij moeilijk te begrijpen is. Maar wees niet van tevoren ongerust.

Als u de code van slechts één element wilt weten, beweegt u er met de muis overheen en klikt u met de rechtermuisknop. Selecteer een andere Chrome-functie: “Bekijk elementcode”.

Ik ben bijvoorbeeld misschien geïnteresseerd in hoe het logo is gemaakt, met behulp van een afbeelding of een programmeertaal? Je kunt er immers een vierkant mee tekenen css-hulp. Veel experts adviseren hoe meer informatie schrijf in code. Hoe werken ze op populaire sites?

Zo bleek noodzakelijke informatie. html bovenaan, css onderaan. Dit zijn twee talen. De eerste is verantwoordelijk voor de tekstcomponent en de tweede voor het ontwerp. Als er geen CSS zou zijn, zou je telkens de kleur en lettergrootte moeten opgeven. Dit is per pagina erg lang. Maar als er geen html zou zijn, zouden we geen teksten hebben. Ik heb het grofweg uitgelegd, maar in grote lijnen is het zo.

Als je trouwens geïnteresseerd bent hoe het hier werkt, kun je de link naar de onderstaande afbeelding bekijken. Hier is je antwoord.

Mozilla Firefox

Als je graag in mastiek werkt, zal alles precies hetzelfde zijn. Open de pagina en klik op rechter knop muizen. “Paginabroncode” als u de volledige code wilt zien.

Wanneer u over een element beweegt, kunt u de code ervan openen.

Hier worden de gegevens onderaan het scherm weergegeven, maar verder is alles precies hetzelfde.

Yandex-browser

In de Yandex-browser is alles precies hetzelfde als in de vorige twee opties, open de pagina, klik met de rechtermuisknop, zie de paginacode.

We bewegen de cursor over een element als we precies de code ervan willen weten.

Alles wordt hier precies hetzelfde weergegeven als in Chrome.

Opera

En tot slot Opera.

Het is je misschien opgevallen dat je geen muis hoeft te gebruiken. Om de code te openen is er snelle combinatie toetsen en het is hetzelfde voor alle browsers: CTRL+U.

Voor elementen: Ctrl+Shift+C.

Dit is hoe het resultaat eruit ziet.

Dit zal interessant zijn voor beginners

Kijk nu hoe alles werkt. U vindt een site en vindt een bepaald element erg leuk. Deze bijvoorbeeld. Je weet al hoe je de elementcode moet openen.

Kopieer het nu.

Ik gebruik het, plak deze code in een nieuwe html-bestand, in de body-tag (body in het Engels).

Laten we nu eens kijken hoe het er allemaal uit zal zien in de browser.

Klaar. Om ervoor te zorgen dat de tekst op de randen wordt uitgelijnd en een groenachtige kleur krijgt, moet u hiermee verbinding maken css-document en kopieer nog een code van de site waarvan we deze hebben gestolen.

Ik zal dit nu niet doen. Dit vergt meer tijd: zowel die van mij als die van jou. Ik denk dat ik alle details in mijn toekomstige publicaties zal beschrijven. Schrijf je in voor de nieuwsbrief en weet als eerste wanneer er een artikel verschijnt.

Kun je er niet tegen, maar wil je nu meer leren over html en css, dan kan ik je traditioneel gratis trainingen aanbevelen.

Hier zijn 33 lessen waarmee je HTML onder de knie krijgt - « Gratis cursus door HTML" .

En hier volledige informatie over CSS - “Gratis cursus CSS (45 videolessen!)” .

Nu weet je iets meer. Ik wens u succes bij uw inspanningen. Tot ziens!

Browserontwikkelaars hebben gezorgd voor het gemak van degenen die sites maken die in dezelfde browsers openen, namelijk webmasters. Zij voegden toe standaard kenmerken ontwikkelaarstools waarmee u eenvoudig bestanden kunt openen en bekijk de broncode van de sitepagina in de browser: HTML, CSS, JavaScript (JS), krijg verschillende nuttige gegevens over de structuur van de site, navigeer erin technische analyse. Zie over het algemeen veel nuttige dingen.

Natuurlijk worden deze tools niet alleen door websitemakers gebruikt voor werk, maar ook gewone gebruikers, waarmee u via de broncode verschillende nuttige gegevens kunt bekijken.

In dit artikel leert u hoe u de broncode van een websitepagina in een browser kunt bekijken (hoe u HTML, CSS, JavaScript-code website).

Hoe de broncode van een pagina in een browser te openen

Er zijn twee manieren om de broncode van een webpagina in een browser te openen:

1. Sneltoetsen gebruiken;
2. Openen vanuit contextmenu.

Ctrl+U– een sneltoetscombinatie om de broncode van de gehele sitepagina in een apart nieuw venster te bekijken. Standaard voor alle browsers: Google Chrome, Opera, Mozilla Firefox, Yandex-browser, IE.

U kunt de ontwikkelaarstools ook als volgt invoeren:

Om snel te vinden vereiste code, woord of tekst op de pagina, kunt u de standaard zoeksneltoetscombinatie voor alle browsers gebruiken: Ctrl + G.

Video-instructies:

Elementcode bekijken | verken element | inspecteer element

Als u plotseling niet de volledige broncode hoeft te bekijken, maar slechts een afzonderlijk deel ervan, een bepaald gebied op de pagina, wilt weergeven, dan zal de vorige tool niet werken. Voor dit doel hebben de ontwikkelaarstools nog een andere functie, die hieronder zal worden besproken.

Zo bekijk je de code van een element op een pagina:

U kunt ook sneltoetsen gebruiken om snelle toegang om het element te inspecteren.

Sneltoetsen (knoppen):

Google Chrome: Ctrl+Shift+I en Ctrl+Shift+C

Opera: Ctrl+Shift+I en Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I en Ctrl+Shift+C

Yandex-browser: Ctrl+Shift+I en Ctrl+Shift+C

Na deze stappen wordt het originele bestand in hetzelfde browservenster geopend. webcode pagina's:

Allemaal HTML De code staat in de grote linkerkolom. A CSS-stijlen- aan de rechterkant.

Voordeel deze methode, is natuurlijk dat de gebruiker de mogelijkheid heeft om de broncode te wijzigen en stijlen te bewerken. Dat wil zeggen dat u de stijlen op de site kunt bewerken en kunt zien hoe deze er met bepaalde stijlen uit zal zien, zonder dat u onmiddellijk wijzigingen hoeft aan te brengen in de bestanden op de hostingservers. Om te wijzigen of toe te voegen programmacode, moet u dubbelklikken het benodigde fragment of plot. Uiteraard wordt de codecorrectie in de browser niet uitgevoerd op de hostingservers. Daarom zult u in de toekomst in ieder geval deze code moeten kopiëren en in bestanden moeten schrijven.

Deze video-instructie beschrijft in detail en laat zien hoe u met de ontwikkelaarstools kunt werken:

Zo kunt u, gewoon online, rechtstreeks in uw browser, de broncode van de sitepagina bekijken, basisgegevens over de HTML- en CSS-code opvragen, deze wijzigen en kopiëren, zonder dat u de bestanden van deze site naar uw computer hoeft te downloaden. .

Overigens zullen onervaren internetgebruikers die de paginacode hebben gewijzigd en verwachten dat deze wordt opgeslagen, teleurgesteld zijn. Na het vernieuwen van de pagina verdwijnen immers alle wijzigingen erop. Dit is niet genoeg om de site te hacken :)

Hoe de broncode op een Android-telefoon te bekijken

Ik zou ook willen opmerken dat de ontwikkelaarstools niet alleen beschikbaar zijn in de desktopversie van browsers, dat wil zeggen op computers en laptops. Op telefoons en tablets (Android, iOS) kun je ook de broncode bekijken.

Om dit te doen, voegt u het view-source-voorvoegsel toe aan de URL van de pagina die wordt geïnspecteerd:

Bijvoorbeeld:

view-source:https://site/turbo-rezhim-opera/

Elke internetgebruiker heeft zijn eigen favoriete sites waarop hij geld uitgeeft lange tijd. En alleen de lui dachten er niet aan om te kijken hoe het was gemaakt en waaruit het bestond. Het is onmogelijk om al deze vragen te beantwoorden, aangezien er veel manieren zijn om een ​​website te maken, maar kijken naar de commando's en codes waaruit deze bestaat is mogelijk en voor iedereen toegankelijk.

Een andere vraag is of iemand die niet bij het programmeren betrokken is, de symbolen waaruit de code bestaat, zal begrijpen. Maar uit de voorbeelden die hieronder zullen worden gegeven, geen enkele Google-gebruiker Chrome zal het kunnen zien individuele elementen sites.

Hoe u de broncode van een html-pagina in een Google-browser kunt bekijken

Om de paginacode in Chrome te kunnen bekijken, moet u naar de site waarin u geïnteresseerd bent gaan en de volgende stappen uitvoeren:

Deze twee items verschillen in functionaliteit en informatie voor de gebruiker, programmeur of hacker.

Wat is het verschil tussen de paginacode en alleen de opdracht “Code bekijken”?

Als u elk van deze functies analyseert, kunt u een afzonderlijk artikel schrijven. Voor programmeurs is dit verschil aanzienlijk en zij begrijpen in welke gevallen het nodig is om “View Code” te gebruiken en in welke gevallen “View Page Code” in de Google Chrome browser.

Maar om het voor de gemiddelde gebruiker uit te leggen, kunnen deze functies worden onderverdeeld in de volgende doeleinden:

1. “Paginacode bekijken” is alleen nodig om de hoofdcombinatie van de pagina te zien. Kortom, dit is de structuur van de site (zonder extra modellen in de vorm CSS-bestanden en andere toevoegingen die in de map van de maker van de site zijn achtergebleven). Deze structuur niet geschikt om te creëren eigen pagina door "kopiëren en plakken", maar u kunt dan wel zien wat de programmeur precies heeft gedaan en in welke volgorde, zodat de site in de Google Chrome-browser zo'n extern ontwerp heeft.
2. “Code bekijken” geeft een gedetailleerde structuur weer, waarbij alle betrokken gebieden op de pagina worden gemarkeerd. Als u wijst naar specifieke code lijst - het zal het element markeren op de site waartoe het behoort.
3. Het bekijken van de paginacode wordt geopend in een aparte browser zonder de mogelijkheid om deze te bewerken. Dat wil zeggen, het is alleen geschikt voor het kopiëren en lezen van sitecode. Maar dit is niet minder nuttige functie.
4. “Bekijk code” is veranderlijk en u kunt elk element bewerken op een manier die voor u handig is. Natuurlijk zullen al deze wijzigingen “leven” totdat de pagina wordt vernieuwd, maar soms is het leuk om door die instellingen te gaan en te begrijpen waarom deze of gene waarde nodig is, en wat er zal gebeuren als je deze wijzigt. U mag er niet van uitgaan dat u door dergelijke acties uzelf of de site op enigerlei wijze schade toebrengt - deze wijzigingen hebben alleen invloed op de code van uw Google Chrome en gaan niet online.

We overwegen de vraag hoe we de elementcode moeten bekijken

Als we zo'n vraag zouden beantwoorden, dan is de enige optie die zichzelf voorstelt een voorbeeld. Omdat het in één artikel erg moeilijk is om iemand te worden die dit onderwerp begrijpt (webontwikkelaar), maar het is veel gemakkelijker om met een voorbeeld te laten zien dat de vraag wordt opgelost.

De functionaliteit van de elementcode is erg breed, daarom nemen we een van de woorden op de Google Chrome-browserwebsite. We wilden overwegen welke trefwoorden (in de code wordt dit geschreven als “trefwoorden”) voor onze site werden gebruikt. Om dit te doen, voeren we het volgende algoritme uit:

Andere manieren om deze functie in de Google Chrome-browser te gebruiken

Over het algemeen moet u, als u de vraag blijft beantwoorden hoe u naar de code van een element moet kijken en waarom dit nodig is, de functies ervan opsommen. Dankzij de mogelijkheid om de code van een element van elke site in de Google Chrome-browser te bekijken, kunnen we namelijk:

• Bekijk de structuur van de site, beginnend bij head (“site header”) en eindigend met end (de laatste opdracht van elk programma);
• Bekijk alle functies van de site, namelijk: links naar andere sites, extra modules van externe sites en de aanwezigheid van ingebouwde tellers voor het verzamelen van diverse informatie;
• Ontdek of kopiëren van de site verboden is of niet;
• De code registreert alle links naar andere pagina's van de site, evenals hun ontwerp en de daaropvolgende acties nadat erop is geklikt.

Dit is zeker geen eindige lijst. Maar er moet aan worden herinnerd dat u zonder speciale kennis de code kunt "lezen". Google-pagina's Chrome is bijna onmogelijk en de verkregen gegevens voor de gemiddelde gebruiker praktisch niet nodig.

Het item “Bekijk elementcode” werkt niet

Er moet meteen worden gezegd dat elke site dat zal hebben open toegang naar elementcodes. Dat wil zeggen dat zelfs de populairste en duurste sites openstaan ​​voor het bekijken van hun code. Als het item in de Google Chrome-browser niet actief is of een fout genereert, heeft dit daarom de volgende mogelijke redenen:

• Gebruikersprofiel is beschadigd;
• De aanwezigheid van malware op de computer;
• Blokkeren door een bepaalde extensie om de prestaties te verbeteren (zelfs dit kan gebeuren).

Een beschadigd gebruikersprofiel repareren

Om te creëren nieuw profiel, moet u de oude van uw computer verwijderen. Om dit te doen doen wij het volgende:

1. Sluit Google Chrome en start het ingebouwde programma Windows-browser Ontdekkingsreiziger.
2. Kom binnen adresbalk het volgende commando: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Wanneer de map wordt geopend, zoekt u naar de map “Default” en voegt u “Backup” aan de naam toe, zodat deze er als volgt uitziet: “Backup Default”.
4. Nu wordt na het opnieuw opstarten van de Chrome-browser een nieuw profiel aangemaakt.

Wij verwijderen malware of de restanten daarvan

Als het nieuwe profiel ons geen toegang geeft tot de pagina-elementcode en we de fout nog steeds zien, moeten we het volgende doen:

1. Open de opdrachtregel Windows-tekenreeks(“Run”) en voer daar de opdracht “cmd” in.
2. Voer de volgende opdracht in de regel in: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
3. Nadat u de actie heeft bevestigd, voert u dit in: RD /S /Q “%WinDir%\System32\GroupPolicy”.
4. Nu “gpupdate /force” (zonder aanhalingstekens).

Als alles correct is gedaan, dan na het opnieuw opstarten Google-computer Chrome opent de code van de elementen en de browser werkt normaal.

Als u door talloze sites op internet bladert, kunt u sites tegenkomen die wij erg leuk vinden. Er rijzen meteen een aantal vragen. Is de site gemaakt met zelfgemaakte code of een soort CMS? Welke CSS-stijlen heeft het? Wat zijn de metatags? En zo verder.

Er zijn veel tools die kunnen worden gebruikt om informatie over de code van een websitepagina te extraheren. Maar we hebben altijd de rechtermuisknop bij de hand. Dit is wat we zullen gebruiken, met mijn site als voorbeeld.

Hoe de paginacode bekijken?

Om de broncode van een sitepagina te bekijken, moet u met uw muis over een deel van de webpagina bewegen (behalve afbeeldingen en links). Klik hierna op de rechtermuisknop. Er wordt een venster met verschillende opties voor ons geopend (in verschillende browsers ze kunnen enigszins verschillen). In de Google Chrome-browser zijn dit bijvoorbeeld de opdrachten:

• rug;
• vooruit;
• opnieuw opstarten;
• opslaan als;
• zegel;
• vertalen in het Russisch;
• paginacode bekijken;
• code bekijken.

We moeten doorklikken paginacode bekijken, en de html-code van de sitepagina wordt voor ons geopend.

Paginacode bekijken: waar moet u op letten?

De HTML-paginacode is dus een genummerde lijst met regels, die elk informatie bevatten over hoe deze site is gemaakt. Om dit enorme aantal tekens snel te leren begrijpen en speciale karakters, moet u onderscheid maken tussen verschillende delen van de code.

Bijvoorbeeld de coderegels die binnenin worden gevonden hoofd label informatie bevatten voor zoekmachines en webmasters. Ze worden niet weergegeven op de site. Hier kun je zien hoe trefwoorden Deze pagina wordt gepromoot op basis van de manier waarop de titel en beschrijving zijn geschreven. U kunt hier ook een link vinden, door erop te klikken, zullen we meer te weten komen over de familie Google-lettertypen gebruikt op de site.

Als de site is gemaakt op CMS-WordPress of Joomla, dan zal het hier ook zichtbaar zijn. In dit gebied wordt bijvoorbeeld informatie weergegeven over WordPress-thema of Joomla-sjabloon plaats. U kunt dit zien door de inhoud van de blauw gemarkeerde links te lezen. Eén link toont een websitesjabloon.

Bijvoorbeeld:

//fonts.googleapis.com/css?family=Bron+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

We zullen de CSS-lettertypestijlen van de pagina zien. IN in dit geval lettertype gebruikt. Dit kun je hier zien - font-family: 'Bron Sans Pro'.

Deze site is geoptimaliseerd met behulp van een SEO-plug-in Yoast SEO. Dit kun je zien in dit commentaargedeelte van de code:

Deze site is geoptimaliseerd met de Yoast SEO-plug-in v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Alle informatie in de body-tag wordt door de browser op het beeldscherm weergegeven. Hier zien we de html-code van de pagina en helemaal onderaan staat de Yandex Metrics-scriptcode. Het is omgeven door een commentaartag met de tekst:

/Yandex.Metrika-teller

Laten we het samenvatten

Na een nogal oppervlakkige analyse van de code te hebben uitgevoerd startpagina site kunnen we een conclusie trekken over de tools waarmee deze pagina is gemaakt. Wij zagen erop:

• CMS-WordPress;
• Google-lettertype Bron Sans Pro;
• WordPress-thema – Sydney;
• Yoast-plug-ins;
• Yandex-statistiekenteller.

Nu het principe van analyse html-code De sitepagina is vrij duidelijk. Het is helemaal niet nodig om de pagina die u onderzoekt open te houden in de browser. U kunt de paginacode op uw computer opslaan met de toetscombinaties ctrl+a, ctrl+c, ctrl+v. Plak het in een willekeurig teksteditor(Notepad++ is beter) en sla op met html-extensie. Op deze manier kunt u het op elk moment dieper bestuderen en meer nuttige informatie voor uzelf vinden.