Kehyspohjaiset verkkosivustot näyttävät usein kehyssarjan asettelun sisällön sijaan.
Kuvan luotto: vetkit/iStock/Getty Images
Sivuston luomiseen käytetty taustalla oleva HTML-koodi ei ole piilotettu, vaan se on helposti kaikkien käytettävissä oikeilla työkaluilla. Esimerkiksi selaimissa, kuten Firefoxissa, Chromessa, Safarissa, Operassa ja Internet Explorerissa, on useita tapoja tarkastella verkkosivuston HTML-, CSS- tai JavaScript-koodia suoraan. Lisäksi jotkin web-kehittäjätyökalut voivat ladata ja avata Web-sivun Internetistä kuten paikalliselle levylle tallennetun tiedoston.
Näytä lähde selaimessa
Sivuston HTML-koodin näkemiseen vaadittavat vaiheet ovat periaatteessa samat Firefoxissa, Chromessa, Safarissa, Operassa ja Internet Explorerissa. Napsauta hiiren kakkospainikkeella Web-sivun osaa, joka sisältää vain tekstiä, ja valitse sitten vaihtoehto "Näytä lähde" tai "Näytä sivun lähde". Selainasetuksista riippuen HTML-koodi avautuu uudelle selaimen välilehdelle tai erilliseen sovellusikkunaan.
Päivän video
Tallenna lähdekoodi levylle
Jos haluat tarkastella tai muokata verkkosivuston koodia myöhemmin, voit tallentaa sivun kiintolevyllesi. Kun napsautat Web-sivua hiiren kakkospainikkeella Firefoxissa tai Safarissa, sinulle tarjotaan vaihtoehto "Tallenna sivu nimellä". Chromessa ja Operassa on "Tallenna nimellä" -vaihtoehto. Jos haluat tallentaa Web-sivun Internet Explorerilla, napsauta "Työkalut", "Tiedosto" ja sitten "Tallenna nimellä". Nettisivujen lisäksi itse selain tallentaa kaikki sivun käyttämät kuvat, CSS-tiedostot ja JavaScriptin, jotka on tallennettu paikallisesti sen verkkoon palvelin.
Firefox, Chrome, Opera ja Internet Explorer tarjoavat kumpikin kehittäjätilan, jonka avulla voit tarkastella samanaikaisesti renderöityä Web-sivua ja sen HTML-, CSS- ja JavaScript-koodia. Jos napsautat elementtiä verkossa, sen koodi tulee näkyviin kehittäjän näyttöpaneeliin. Kehittäjäpaneeliin pääsee asetusten tai konfigurointityökalun kautta. Vaikka Safarissa ei ole alkuperäistä kehittäjätyökalua, voit asentaa sellaisen laajennuksena.
Web-kehittäjäsovellukset
Verkkosivuston suunnittelutyökalut, kuten Dreamweaver, Kompozer ja Microsoft Expressions, mahdollistavat online-Web-sivun avaamisen sen URL-osoitteen avulla. Voit tarkastella HTML-koodia vain lähdekoodinäkymässä tai jaettuna, esikatselu- ja lähdenäkymänä. Lisäksi voit muokata koodia ja tarkastella muutoksia reaaliajassa. Varsinainen verkkosivuston palvelimelle tallennettu koodi ei koskaan muutu.
Ongelmia, joita saatat kohdata
Jotkin sivustot eivät luovuta HTML-koodiaan helposti tahallaan tai tahattomasti. Esimerkiksi jotkut sivustot käyttävät JavaScript-koodia, joka estää hiiren kakkospainikkeen napsautukset. Voit silti tarkastella lähdekoodia lataamalla sivun levyllesi tai poistamalla JavaScriptin käytöstä selaimessasi. Muut sivustot käyttävät HTML-kehyksiä tai iframe-kehyksiä, jotka estävät sinua pääsemästä suoraan niiden lähteeseen. Firefox, Chrome, Safari ja Opera tunnistavat kehyspohjaiset verkkosivustot ja tarjoavat automaattisesti mahdollisuuden tarkastella kehyksen lähdekoodia. Jos verkkosivu käyttää toiselle verkkotunnukselle tallennettua JavaScript- tai CSS-tiedostoa, voit tarkastella tiedoston koodia suoraan kopioimalla sen URL-osoitteen käytettävissä olevasta HTML-koodista ja liittämällä sen sitten uuden selaimen välilehden osoiteriville.
