Of u nu nieuw bent in de webbranche of een ervaren veteraan, het bekijken van de HTML-bron van verschillende webpagina's is iets dat u in de loop van uw carrière vaak zult doen.
Voor degenen die nieuw zijn in webdesign, is het bekijken van de broncode van een site een van de gemakkelijkste manieren om te zien hoe bepaalde dingen worden gedaan, zodat je van dat werk kunt leren en bepaalde code of technieken in je eigen werk kunt gaan gebruiken. Zoals elke webontwerper die vandaag werkt, vooral diegenen die er al zijn geweest sinds de begintijd van de industrie, en het is een veilige gok dat zij u vertellen dat ze HTML hebben geleerd door simpelweg de bron van de webpagina's te bekijken die ze hebben gezien en geïntrigeerd. door. Naast het lezen van webontwerpboeken of het bijwonen van professionele conferenties is het bekijken van de broncode van een site een geweldige manier voor beginners om HTML te leren.
Meer dan alleen HTML
Een ding om te onthouden is dat bronbestanden zeer gecompliceerd kunnen zijn (en hoe complexer de website die u bekijkt, hoe complexer de code van die site waarschijnlijk is). Naast de HTML-structuur die deel uitmaakt van de pagina die u bekijkt, zal er ook CSS (cascading style sheets) zijn die het visuele uiterlijk van die site dicteren. Bovendien zullen veel websites tegenwoordig scriptbestanden bevatten die bij de HTML zijn gevoegd.
Er zijn waarschijnlijk meerdere scriptbestanden inbegrepen, in feite elk die verschillende aspecten van de site aanstuurt. Eerlijk gezegd kan de broncode van een site overweldigend lijken, vooral als je nieuw bent om dit te doen. Raak niet gefrustreerd als je niet meteen weet wat er met die site gebeurt. Het bekijken van de HTML-bron is slechts de eerste stap in dit proces. Met een beetje ervaring, zult u beter begrijpen hoe al deze onderdelen bij elkaar passen om de website te maken die u in uw browser ziet. Naarmate je meer vertrouwd raakt met de code, kun je er meer van leren en het zal je niet zo ontmoedigend lijken.
Dus hoe bekijk je de broncode van een website? Hier zijn de stapsgewijze instructies om dit te doen met behulp van de Google Chrome-browser.
Stap voor stap instructies
-
Open de Google Chrome webbrowser (als u Google Chrome niet hebt geïnstalleerd, is dit een gratis download).
-
Navigeer naar de webpagina die u wilt bekijken.
-
Klik met de rechtermuisknop de pagina en kijk naar het menu dat verschijnt. Klik in dat menu op Bekijk paginabron.
-
De broncode voor die pagina verschijnt nu als een nieuw tabblad in de browser.
-
Als alternatief kunt u ook de sneltoetsen op het toetsenbord van gebruiken CTRL + U op een pc om een venster te openen met de weergegeven broncode van een site. Op een Mac is deze snelkoppeling Command + Option + U.
Ontwikkelaarstools
Naast het simpele Bekijk paginabron mogelijkheid die Google Chrome biedt, kunt u ook profiteren van hun uitstekende Developer Tools om nog dieper in een site te graven. Met deze hulpmiddelen kunt u niet alleen de HTML zien, maar ook de CSS die van toepassing is op weergave-elementen in dat HTML-document.
De ontwikkelaarstools van Chrome gebruiken:
-
Open Google Chrome.
-
Navigeren naar de webpagina die u wilt bekijken.
-
Klik op de pictogram met drie lijnen in de rechterbovenhoek van het browservenster.
-
Vanuit het menu, beweeg over Meer tools en klik vervolgens op Ontwikkelaarstools in het menu dat verschijnt.
-
Dit opent een venster met de HTML-broncode aan de linkerkant van het paneel en de bijbehorende CSS aan de rechterkant.
-
Als alternatief, als je met de rechtermuisknop klikt een element in een webpagina en selecteer Inspecteren in het menu dat verschijnt, verschijnen de ontwikkelaarstools van Chrome en wordt het exacte element dat u hebt geselecteerd, gemarkeerd in de HTML met de overeenkomstige CSS die rechts wordt weergegeven. Dit is super handig als u meer wilt weten over hoe een bepaald stuk van een site is gemaakt.
Is het bekijken van de broncode legaal?
In de loop der jaren hebben we veel nieuwe webontwerpers gevraagd of het acceptabel is om de broncode van een site te bekijken en te gebruiken voor hun opleiding en uiteindelijk voor het werk dat ze doen. Hoewel het kopiëren van de groothandel van een site en het doorgeven ervan als die van uzelf op een site zeker niet acceptabel is, is het gebruik van die code als springplank om van te leren eigenlijk hoeveel vooruitgang er in deze branche wordt geboekt.
Zoals we aan het begin van dit artikel al vermeldden, zou het moeilijk zijn om vandaag een werkende webprofessional te vinden die nog niets heeft geleerd door de bron van een site te bekijken! Ja, het bekijken van de broncode van een site is legaal. Het is ook prima om die code als een middel te gebruiken om iets soortgelijks te bouwen. As-is code nemen en doorgeven als je werk is waar je problemen begint tegen te komen.
Uiteindelijk leren webprofessionals van elkaar en verbeteren ze vaak het werk dat ze zien en laten inspireren, dus aarzel niet om de broncode van een site te bekijken en te gebruiken als een leermiddel.
