" Hetzelfde punt is binnen contextmenu, wat als u klikt klik met de rechtermuisknop muis tekst pagina's. U kunt ook de sneltoets CTRL + U gebruiken. Mozilla FireFox gebruikt geen externe programma's - origineel code pagina's met syntaxisaccentuering wordt in een apart browservenster geopend.

IN Internetbrowser Verkenner, klik op het gedeelte 'Bestand' in het menu en selecteer 'Bewerken in Kladblok'. In plaats van de naam Kladblok kan er een andere naam worden geschreven, deze heeft u in de browserinstellingen toegewezen om het origineel te bekijken code A. Op klik pagina's met de rechtermuisknop verschijnt een contextmenu, waarin ook een item staat waarmee u de bron kunt openen code pagina's in extern programma- "HTML bekijken- code A".

IN Opera-browser open het menu, ga naar de sectie "Pagina" en u krijgt de mogelijkheid om het item "Bron" te selecteren in de subsectie "Ontwikkelingstools" code"of het item "Origineel code kader." Deze selectie wordt hot toegewezen CTRL-toetsen+ U en CTRL + SHIFT + U respectievelijk. In een contextmenu gebonden aan een klik pagina's klik met de rechtermuisknop, er is ook een item “Initial code" Opera-bron pagina's in een extern programma dat is toegewezen in het besturingssysteem of in de browserinstellingen voor het bewerken van HTML-bestanden.

Browser Google Chrome zonder enige twijfel de beste organisatie het origineel bekijken code A. Door met de rechtermuisknop te klikken, kunt u Weergave selecteren code A pagina's"en dan wordt de broncode met syntaxisaccentuering op een apart tabblad geopend. Of u kunt in hetzelfde menu de regel “Beeld” selecteren code element” en op hetzelfde tabblad worden twee extra frames geopend waarin u HTML en CSS kunt inspecteren code element pagina's. De browser reageert op de cursor die over lijnen beweegt code en het markeren van elementen op de pagina die overeenkomen met dit HTML-gedeelte code A.

Browserontwikkelaars hebben gezorgd voor het gemak van degenen die sites maken die in dezelfde browsers worden geopend, 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-instructie:

Elementcode bekijken | verken element | inspecteer element

Als u plotseling niet de gehele 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:

Alle HTML-code bevindt zich in de grote linkerkolom. A CSS-stijlen- aan de rechterkant.

Het voordeel van deze methode is uiteraard 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/

Lange tijd was de optie ‘paginabron weergeven’ nutteloos en oninteressant voor mij. 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 het zelden deze methode: 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 we de broncode van de pagina hebben geopend, roept u het contextmenu op en selecteert u de optie “Opslaan als” en slaat u 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.

Ctrl+U

Hoe kan ik de broncode van een element bekijken?

Klik met de rechtermuisknop op het gewenste pagina-element.

Google Chrome: “Bekijk elementcode”

Opera: “Inspecteer element”

Firefox: “Analyseer element”

Zoek in andere browsers naar een menu-item met een vergelijkbare betekenis.

Hallo allemaal!

Ik heb het hele punt vooral aan het begin van het artikel uiteengezet, voor degenen die op zoek zijn naar een snel antwoord.

De informatie is misschien bij velen bekend, maar aangezien ik schrijf voor beginnende bloggers, webprogrammeurs en andere goudzoekers, is dit referentieartikel een must-have.

In de toekomst zul je zeker de broncode van pagina's en individuele elementen bestuderen.

Laten we eens kijken specifiek voorbeeld hoe u de broncode van een pagina kunt bekijken.

We willen bijvoorbeeld zien wat trefwoorden(trefwoorden) worden gebruikt specifieke pagina. We gaan naar de webpagina waarin we geïnteresseerd zijn en drukken op Ctrl+U. De broncode van deze pagina wordt geopend in een apart venster of op een apart tabblad. Druk op Ctrl+F om naar een codefragment te zoeken. IN in dit geval typ het woord "in het zoekvak" trefwoorden". Je wordt automatisch doorgestuurd naar een stukje code met deze metatag en het gezochte woord wordt gemarkeerd.

Naar analogie kun je andere codefragmenten zoeken en bestuderen.

Het bekijken van de gehele broncode van een pagina is in de meeste gevallen niet erg handig, waardoor het mogelijk is om de code in alle browsers te bekijken individueel onderdeel of fragmenteren.

Laten we een specifiek voorbeeld gebruiken van het bekijken van de code van een element. Laten we bijvoorbeeld eens kijken of de link dat wel heeft nofollow-attribuut. Klik met de rechtermuisknop op de link die ons interesseert en klik in het vervolgkeuzemenu met de linkermuisknop op het item “Bekijk elementcode” of iets dergelijks (afhankelijk van uw browser). Hieronder, in een speciaal venster voor codeanalyse, krijgen we iets soortgelijks.

We zien dat de linkcode rel=”nofollow” bevat. Dit betekent dat PR niet via deze link zal ‘lekken’. We zullen hier in de volgende artikelen meer in detail over praten. Het belangrijkste is nu dat je nu weet hoe je de broncode van de pagina en de broncode van een afzonderlijk element kunt bekijken.

Vaardigheid wijzig de broncode van de pagina – nuttige vaardigheid voor de gevorderde internetgebruiker. Door HTML-code te vervangen, kunt u wijzigen webpagina openen zoals je wilt. In dit artikel vertellen we het je hoe u de paginacode kunt wijzigen in Google Chrome. In andere browsers gebeurt alles echter op dezelfde manier, dus er zouden geen problemen moeten zijn.

Wat is de HTML-code van de pagina?

Elke pagina die u in uw browser opent, heeft zijn eigen code in de taal HTML-opmaak. Deze code vertegenwoordigt tags en tekst. Tags zijn unieke labels die de browser vertellen hoe dit of dat deel van de site moet worden weergegeven. Tekst is de inhoud van de pagina, wat de gebruiker ziet. Ook kunnen CSS-stijlen aan de pagina worden gekoppeld, waardoor deze wordt ingesteld verschijning pagina-elementen. Naar wijzig de broncode van de site je hoeft HTML en CSS niet grondig te kennen, en je zult het snel zelf zien.

Waarom een ​​webpagina wijzigen?

U kunt de gegevens op de site vervangen, de tekst van het bericht wijzigen of een nep-screenshot maken. Houd er rekening mee dat alle wijzigingen alleen voor u zichtbaar zijn en verdwijnen wanneer u de pagina opnieuw laadt. Ook zullen de gewijzigde gegevens niet reëel zijn. Als ik bijvoorbeeld geen 10 dollar heb, en ik verander het in 100, dan heb ik geen geld meer. Dit is slechts de weergave van de pagina door de browser. Voorbeeld:

Na:

Ik neem bijvoorbeeld dezelfde site en wijzig de vorige aankondiging van het artikel “” Opening startpagina in Google Chrome. Ik klik met de rechtermuisknop op het element dat ik wil wijzigen, bijvoorbeeld de titel van de aankondiging en selecteer ‘Code bekijken’.

Ga in het geopende venster naar het tabblad Elementen en bekijk de HTML-code van de pagina. Daarin moeten we de tekst vinden waarin we geïnteresseerd zijn. (rood onderstreept)

Nu zal ik de oude tekst verwijderen en een nieuwe schrijven.

Dat is alles, de titel van de aankondiging is gewijzigd. Nu zal ik de aankondiging zelf, tags en categorie wijzigen.

U kunt nog een afbeelding invoegen door het src-attribuut in de img-tag te wijzigen.