Oavsett om du är ny för webbranschen eller en erfaren veteran, ser du HTML-källan till olika webbsidor, är något du sannolikt kommer att göra många gånger under din karriär.
För de som är nya för webbdesign är det en av de enklaste sätten att se hur vissa saker görs så att du kan lära av det arbetet och börja använda vissa koden eller teknikerna i ditt eget arbete. Som någon webbdesigner arbetar idag, särskilt de som har varit på det sedan branschens tidiga dagar, och det är en säker satsning att de med att säga att de lärde sig HTML enkelt genom att titta på källan till de webbsidor som de såg och var fascinerad av. Förutom att läsa webbdesignböcker eller närvara på professionella konferenser är det enkelt att läsa HTML-kod på en webbplatss källkod.
Mer än bara HTML
En sak att komma ihåg är att källfilerna kan vara väldigt komplicerade (och ju mer komplexa webbplatsen du tittar på desto mer komplex är den webbplatsens kod sannolikt). Förutom HTML-strukturen som utgör sidan du tittar på, kommer det också att finnas CSS (cascading style sheets) som dikterar det visuella utseendet på den webbplatsen. Dessutom kommer många webbplatser idag att inkludera skriptfiler som ingår tillsammans med HTML.
Det finns sannolikt att flera skriptfiler ingår, faktiskt, var och en som driver olika aspekter av webbplatsen. Uppriktigt sagt kan en källkod för en webbplats verka överväldigande, särskilt om du är ny för att göra det här. Bli inte frustrerad om du inte kan ta reda på vad som händer med den här webbplatsen omedelbart. Att visa HTML-källan är bara det första steget i den här processen. Med en liten erfarenhet börjar du bättre förstå hur alla dessa delar passar ihop för att skapa webbplatsen som du ser i din webbläsare. När du blir mer bekant med koden kommer du att kunna lära dig mer av det och det verkar inte så skrämmande för dig.
Så hur ser du källkoden på en webbplats? Här följer stegeninstruktionerna med Google Chrome-webbläsaren.
Steg för steg Instruktioner
-
Öppna Google Chrome webbläsare (om du inte har Google Chrome installerat, det här är en gratis nedladdning).
-
Navigera till webbsida du vill undersöka.
-
Högerklicka sidan och titta på menyn som visas. Från den menyn klickar du på Visa sidans källa.
-
Källkoden för den sidan visas nu som en ny flik i webbläsaren.
-
Alternativt kan du också använda kortkommandon på CTRL + U på en dator för att öppna ett fönster med en webbplatss källkod som visas. På en Mac är den här genvägen Kommando + Alternativ + U.
Utvecklarverktyg
Förutom det enkla Visa sidans källa förmåga som Google Chrome erbjuder kan du också dra nytta av sina utmärkta utvecklingsverktyg för att gräva ännu djupare in i en webbplats. Med dessa verktyg kan du inte bara se HTML, men även CSS som gäller för att visa element i det HTML-dokumentet.
För att använda Chrome: s utvecklingsverktyg:
-
Öppna Google Chrome.
-
Navigera till den webbsida du vill undersöka.
-
Klicka på ikon med tre linjer i övre högra hörnet av webbläsarfönstret.
-
Från menyn svänger du över Fler verktyg och klicka sedan på Utvecklarverktyg i menyn som visas.
-
Detta öppnar ett fönster som visar HTML-källkoden till vänster om rutan och relaterad CSS till höger.
-
Alternativt, om du högerklickar ett element på en webbsida och välj Inspektera från menyn som visas kommer Chrome utvecklingsverktyg att dyka upp och det exakta elementet du har valt kommer att markeras i HTML-koden med motsvarande CSS som visas till höger. Det här är super användbart om du vill lära dig mer om hur en specifik del av en webbplats skapades.
Visas källa koden juridiskt?
Under åren har vi haft många nya webbdesigners fråga om det är acceptabelt att visa en källkod för en webbplats och använda den till utbildning och i sista hand för det arbete de gör. Samtidigt som du kopierar en webbplats kodkodsproduktion och skickar bort den som din egen på en webbplats är det säkert inte acceptabelt. Det är faktiskt hur många framsteg som görs inom den här industrin med hjälp av den koden som ett springbräda för att lära av.
Som vi nämnde i början av den här artikeln skulle du vara svårt att hitta en arbetswebbprofessor idag som inte har lärt sig något genom att titta på en webbplatss källa! Ja, att visa en webbplatss källkod är laglig. Att använda den här koden som en resurs för att bygga något liknande är också bra. Tar kod som är och skickar bort den som ditt jobb är där du börjar stöta på problem.
I slutändan lär websekreterare sig av varandra och förbättrar ofta det arbete de ser och inspireras av, så tveka inte att se en webbplatss källkod och använda den som ett lärandeverktyg.
