Hoe HTML-code in Chrome te bekijken

Apparaatkoppelingen

• Android
• iPhone
• Chromebook
• Mac
• ramen
• Toestel ontbreekt?

Ben je benieuwd waar een webpagina uit bestaat? Wilt u weten hoe u de lettergrootte of kleur op uw website kunt wijzigen? Door de HTML-code van een webpagina te bekijken, kunt u al deze dingen en meer doen.

In deze zelfstudie laten we u zien hoe u de HTML-code van een webpagina in Chrome kunt bekijken.

HTML-code bekijken in Chrome

Bij het schrijven in HTML is de broncode de reeks tags en attributen die worden gebruikt om de structuur en inhoud van een webpagina te definiëren.

De broncode wordt gelezen door webbrowsers en vertaald naar de grafische webpagina die u op het scherm ziet. Naast het definiëren van het uiterlijk van een webpagina, kan de broncode ook worden gebruikt om interactiviteit toe te voegen, zoals pop-upvensters, formulieren en vervolgkeuzemenu's.

Hoewel de gemiddelde internetgebruiker misschien nooit de HTML-broncode van een webpagina hoeft te bekijken, zijn er verschillende redenen waarom sommigen dit zouden willen doen.

Voor ontwikkelaars kan het bekijken van de broncode een handige manier zijn om te begrijpen hoe een pagina is gestructureerd en om te bepalen welke stijl- en scriptelementen worden gebruikt. Voor ontwerpers kan het nuttig zijn om te zien hoe andere ontwerpers HTML hebben gebruikt om effectieve lay-outs te maken.

In sommige gevallen willen gebruikers ook de broncode bekijken om fouten op te lossen of om meer te weten te komen over hoe een bepaalde website of webtoepassing werkt. Wat de reden ook is, het bekijken van de HTML-broncode is een relatief eenvoudig proces in Chrome.

Hoe de HTML-code van een webpagina in Chrome op een Windows-pc te bekijken

Het Windows-besturingssysteem is een van de meest compatibele systemen van Chrome. Chrome is gebouwd bovenop het open-source Chromium-project, waaraan Microsoft een belangrijke bijdrage levert. Deze compatibiliteit strekt zich uit tot het HTML-rijk, waar de populaire browser gebruikers in staat stelt de HTML-code van elke website te bekijken.

U kunt de HTML-code op twee manieren bekijken.

Paginabron bekijken gebruiken

Deze methode is eenvoudig:

1. Open Chrome en navigeer naar de pagina waar u de HTML-broncode wilt bekijken.
   
2. Klik met de rechtermuisknop op de pagina en selecteer Paginabron weergeven of druk op Ctrl + U op uw toetsenbord om de broncode in een nieuw tabblad te openen.
   

De broncode verschijnt op het nieuwe tabblad en u kunt er doorheen bladeren om de HTML-opmaak voor die pagina te bekijken.

Hulpprogramma's voor ontwikkelaars gebruiken

Volg de onderstaande stappen om de broncode van een webpagina te inspecteren met behulp van Developer Tools in Google Chrome.

1. Open Google Chrome en navigeer naar de webpagina die u wilt inspecteren.
   
2. Druk op Ctrl + Shift + I op je toetsenbord. Het deelvenster Hulpprogramma's voor ontwikkelaars wordt geopend in een dock naast de webpagina die u bekijkt.
   
3. Klik op het tabblad "Elementen" bovenaan het paneel. Hiermee wordt de HTML-broncode voor de webpagina weergegeven.
   
4. U kunt nu de broncode voor de pagina bekijken. Om een ​​element samen te vouwen, klikt u op het driehoekje naast de tagnaam. Om meer informatie over een onderdeel te bekijken, klikt u er met de rechtermuisknop op en selecteert u 'Inspecteren'.
   

Houd er rekening mee dat deze methode het beste is voor HTML-pagina's; het is mogelijk om de broncode van andere soorten webpagina's te bekijken, maar de opmaak kan moeilijker te lezen zijn.

Hoe de HTML-code van een webpagina in Chrome op een Mac te bekijken

Als u een webontwikkelaar bent, is het belangrijk om de HTML-code van een webpagina te kunnen bekijken. Zo kunt u zien hoe de pagina is gestructureerd en eventuele problemen oplossen. Gelukkig is het eenvoudig te doen in Chrome op een Mac. Volg gewoon deze stappen:

1. Open Chrome en navigeer naar de webpagina waar u de HTML-code wilt bekijken.
   
2. Klik met de rechtermuisknop op de pagina en selecteer 'Inspecteren'.
   
3. Onderaan het scherm wordt een nieuw venster geopend met de HTML-code.
   
4. U kunt ook op specifieke elementen in de HTML-code klikken om te zien hoe ze op de pagina zijn opgemaakt. U kunt bijvoorbeeld zien welke CSS-stijlen op een element worden toegepast door het te selecteren en vervolgens op het tabblad "Stijlen" te klikken in het venster dat wordt geopend.
   
5. Om het venster te sluiten, klikt u op de "X" in de rechterbovenhoek.
   

U kunt ook Chrome Developer Tools gebruiken om de broncode te bekijken.

1. Open Google Chrome en navigeer naar de webpagina die u wilt inspecteren.
   
2. Klik op het menupictogram (drie puntjes) in de rechterbovenhoek van de browser en selecteer Meer hulpprogramma's en Hulpprogramma's voor ontwikkelaars in het vervolgkeuzemenu.
   
3. Het deelvenster Developer Tools wordt onder aan het scherm geopend. Selecteer de "Elementen" bovenaan het paneel.
   
4. U ziet nu de HTML-code voor de huidige pagina die wordt weergegeven in het deelvenster Elementen. U kunt de verschillende opties in het paneel gebruiken om de code te inspecteren en te debuggen indien nodig.
   

Met slechts een paar klikken kunt u eenvoudig de HTML-code voor elke webpagina bekijken in Chrome op een Mac. Dit kan handig zijn als u problemen met webontwikkeling probeert op te lossen of als u beter wilt bekijken hoe een bepaalde website is opgebouwd.

Hoe de HTML-code van een webpagina in Chrome op de iPhone-app te bekijken

Als u een iPhone gebruikt, kunt u de HTML-code van elke pagina in Chrome op twee manieren bekijken:

De URL aanpassen

U kunt eenvoudig de HTML-code van elke pagina bekijken door een kleine aanpassing aan de URL te maken:

1. Open Chrome en navigeer naar de webpagina waarvan u de HTML-code wilt bekijken.
   
2. Tik eenmaal in de adresbalk om de bewerkingsmodus te starten.
   
3. Verplaats de cursor naar de voorkant van de URL.
   
4. Typ "View-source" en druk vervolgens op de knop "Go". De HTML-code voor de webpagina wordt weergegeven in Chrome.
   

Hulpprogramma's voor ontwikkelaars gebruiken

Chrome Developer Tools zijn ook beschikbaar op iOS, maar er zijn andere stappen nodig om het te starten in vergelijking met pc's.

1. Tik op de drie stippen in de rechterbovenhoek van het scherm en selecteer 'Instellingen'.
2. Scrol omlaag en tik op 'Geavanceerd' en schakel vervolgens de schakelaar naast 'Hulpprogramma's voor ontwikkelaars' in.
3. Blijf een leeg gedeelte van de pagina aanraken en selecteer vervolgens 'Element inspecteren'. Dit opent een zijpaneel met de HTML-code voor die pagina.

Hoe de HTML-code van een webpagina in Chrome op de Android-app te bekijken

Wanneer u de Chrome-app op uw Android-telefoon gebruikt, wilt u misschien de HTML-code voor een webpagina bekijken. Dit kan handig zijn als u een probleem met de pagina probeert op te lossen of als u wilt zien hoe de pagina is gestructureerd. Volg deze stappen om de HTML-code voor een webpagina in Chrome op uw Android-telefoon te bekijken:

1. Open Chrome op je Android.
   
2. Typ "view-source:" gevolgd door de URL van de pagina waar u de broncode wilt bekijken. Als u bijvoorbeeld de broncode voor www.google.com wilt bekijken, typt u 'view-source:www.google.com' in de adresbalk van Chrome.
   

Hierdoor wordt de HTML-code voor die pagina geopend in de ingebouwde Developer Tools-interface van Chrome. Van daaruit kunt u de code naar wens bekijken en bewerken. Houd er rekening mee dat deze methode alleen werkt als de website die u probeert te bekijken toegang geeft tot de broncode. Als dit niet het geval is, kunt u niets anders zien dan een foutmelding.

Hoe de HTML-code van een webpagina in Chrome op een iPad te bekijken

Chrome op de iPad-app maakt het gemakkelijk om de HTML-code van elke webpagina te bekijken. Volg gewoon deze stappen:

1. Open Chrome en typ "view-source:" gevolgd door de URL van de pagina die u wilt bekijken. Als u bijvoorbeeld de broncode van www.alphr.com wilt bekijken, typt u 'view-source:www.alphr.com' in de adresbalk van Chrome.
   
2. Druk op de knop "Go".
   

Dit zou de broncode van de pagina in een nieuw tabblad in Chrome moeten laden. Van daaruit kunt u de code naar behoefte opslaan of delen.

De broncode is de lijm die pagina's bij elkaar houdt

HTML is de basis van elke website. Het biedt de structuur en inhoud die bezoekers zien wanneer ze een pagina in hun browser laden.

Hoewel het uiteindelijke uiterlijk van een pagina kan worden bepaald door CSS of andere stylingtalen, bepaalt de HTML-code de basisstructuur en inhoud van de pagina. Sommige wijzigingen kunnen de pagina mogelijk breken. Om deze reden is het belangrijk om een ​​goed begrip van HTML te hebben bij het bekijken of wijzigen van de broncode.

Houd er ook rekening mee dat terwijl het bekijken van de HTML-code in sommige gevallen nuttig kan zijn, wijzigingen in de code niet worden weergegeven op de live webpagina. Alleen wijzigingen die door de beheerder van de site zijn gepubliceerd, zijn zichtbaar voor bezoekers.

Heb je geprobeerd de HTML-code van een webpagina te bekijken met behulp van een van de methoden die in deze zelfstudie worden besproken? Hoe ging het?

Laat het ons weten in het opmerkingengedeelte.