Het bekijken van de broncode van een willekeurige HTML-pagina is een goede manier om HTML te leren, zowel voor beginners als voor gevorderde programmeurs. Als u gegevens moet extraheren van sites die dergelijke acties niet beperken voor uw webscrapingprojecten, moet u de codeblokken en tags in de broncode begrijpen.

Met Google Chrome kunt u op twee manieren de broncode van een webpagina controleren. En manier is om de HTML-broncode rechtstreeks van de webserver te bekijken. Het wordt meestal geopend als een enkel tabblad "Bron weergeven".

Een andere manier is om de code te controleren nadat de webbrowser de echte broncode heeft geoptimaliseerd en eventuele Javascript-manipulatie heeft toegevoegd. Chrome toont dit als de Inspect Elements-tool, en dit hulpprogramma is er eigenlijk voor elke ontwikkelaar.

Snelkoppelingen gebruiken

De eenvoudigste manier om de broncode van een webpagina in Chrome te openen, is via de sneltoets.
Om het tabblad Bron weergeven te openen, drukt u op Ctrl + U in Windows. Op Mac is deze snelkoppeling ⌘-Option-U.

Als u de tool Inspect Elements wilt openen, moet u op Ctrl + Shift + C drukken. U kunt ook op F12 of Ctrl + Shift + I drukken om de Developers-tool te openen en vervolgens naar het tabblad Elementen te gaan.

Contextmenu gebruiken

Het contextmenu (rechtsklikmenu) op de webpagina's van Google Chrome bevat ook de opties om de broncode te openen. U kunt ervoor kiezen om de ongewijzigde broncode te bekijken of de code na optimalisatie door de browser.

1. Klik met de rechtermuisknop ergens op de webpagina.
2. Selecteer Paginabron bekijken of Inspecteren volgens uw behoefte. Inspect brengt u naar het exacte codeblok dat overeenkomt met het grafische element waarop u met de rechtermuisknop hebt geklikt.

Door de URL te bewerken

Een andere manier om de broncode te bekijken, is door een codefragment aan de URL toe te voegen. Als u de bovenstaande opties gebruikt om de paginabron te bekijken, heeft u mogelijk view-source: gezien in het URL-adres van de broncode. U kunt deze code handmatig invoeren om dezelfde taak uit te voeren.

Deze methode is ook handig als u de broncode op mobiele apparaten wilt bekijken, aangezien deze meestal geen andere methoden bieden.

1. Klik op op de adresbalk.
2. Druk op Home of houd de linkertoets ingedrukt totdat de toetsenbordcursor voor de URL komt, zelfs vr https://
3. Typ view-source: en druk op Enter. Dus als de URL https://www.google.com was, zou het nu view-source moeten worden: https://www.google.com

Via het Chrome-menu

Het is ook mogelijk om de Inspect Elements-tool te openen vanuit het bedieningsmenu van Chrome. Hier kunt u de Developers-tool openen die Elements bevat, samen met andere tools zoals de Chrome Console.
1. Klik op het pictogram met de drievoudige stip in het Chrome-venster.
2. Ga naar Meer hulpprogramma's en selecteer Hulpprogramma's voor ontwikkelaars.

Broncodes begrijpen

Na het bekijken van de broncode moet u Hypertext Markup Language (HTML) kennen om de broncode te kunnen analyseren en lezen. Als u niet zo bekend bent met deze programmeertaal, volgen hier een paar dingen over de code om u op weg te helpen.

Tags of elementen

Dit zijn de belangrijkste zoekwoorden in een HTML-code. Ze worden afgesloten met en vertegenwoordigen het type inhoud. Een element bestaat meestal uit de openings- en sluitingstag om respectievelijk het begin en het einde van de inhoud van het element weer te geven. Maar sommige elementen gebruiken slechts n enkele tag.

Bijvoorbeeld: pHier is een alinea/p

"Hier is een alinea" is een alinea-element dat wordt ingesloten door de tags p en /p die deze inhoud specificeren als een alinea.

Tags zijn niet hoofdlettergevoelig.

attributen

Dit zijn de trefwoorden die de aanvullende eigenschappen van de HTML-elementen bepalen. Ze zijn ook aanwezig binnen de punthaken, maar na het trefwoord van de openingstag. Enkele veel voorkomende kenmerken zijn klasse, titel, stijl, id, enz.

Bijvoorbeeld: p id=paraHier is een alinea/p

De alinea heeft als identiteit (id) het attribuut para.

Sommige specifieke kenmerken zijn hoofdlettergevoelig en de rest is niet hoofdlettergevoelig.

Belangrijke elementen van de broncode

Head (head/head) Geeft informatie over de webpagina.
Titel (title/title) Toont de titel van de webpagina. Zoekmachines zoals Google Search indexeren de inhoud van de titel zodat deze webpagina's kunnen worden gevonden wanneer iemand ernaar zoekt.
Body (body/body) Specificeert alle inhoud van de webpagina.
Koppen Verschillende niveaus van koppen worden geleverd met afzonderlijke tags zoals h1/h1, h2/h2, enzovoort. Deze zorgen ook voor automatische marges voor en na de kop.
Alinea's p/p Bevat alle tekst binnen of buiten een kop.
Lijsten De geordende lijsten die alfabetten of cijfers gebruiken om de lijst te ordenen, gebruiken de tags ol/ol en de ongeordende lijsten die opsommingstekens gebruiken, gebruiken de tags ul/ul. Binnen deze root-tags komen alle lijstelementen binnen li/li.
Afbeeldingen (img) Het heeft geen inhoud nodig en gebruikt het attribuut src om de afbeeldingsbron te specificeren. Het alt-attribuut specificeert de alternatieve tekst die de afbeelding beschrijft.
Hyperlinks (a/a) Het gebruikt het attribuut href om de verwijzingslink te specificeren. Meestal is het het beste om het attribuut rel=noopener noreferrer toe te voegen aan externe links.
Als het href-attribuut een hashtag bevat en vervolgens wat tekst, zoals a href=#linklink/a, toont het een interne link naar het element met de id-link.
Opmerkingen Alle teksten binnen ! en zijn opmerkingen en kunnen worden genegeerd. Ze geven meestal aanvullende informatie over de opeenvolgende elementen.

voor meer informatie google bellen nederland