HTML Kod Goruntuleyici
Sol taraftaki alana HTML kodunuzu yapistirin, 'Onizlemeyi Guncelle' butonuna basin ve sonucu sag tarafta aninda gorun. Onizleme, izole edilmis (sandboxed) bir cerceve icinde calisir; kodunuz sitenizin geri kalanina veya cerezlerinize erisemez.
Onizleme sonucunu nasil degerlendirmeliyim?
Sag paneldeki onizleme, kodunuzun bir tarayicida nasil goruneceginin gercege yakin bir temsilidir. Beklenmedik bir gorunum varsa, HTML etiketlerinin dogru kapatildigindan emin olun.
Onizleme nasil calisir?
Yapistirdiginiz HTML kodu, 'sandbox' ozelligiyle izole edilmis bir iframe icine yerlestirilir. Bu izolasyon, kodun calismasina izin verirken sitenin geri kalanina, cerezlere veya diger sekmelere erisimini engeller; bu sayede guvenilmeyen kod bile guvenli sekilde test edilebilir.
Formül
- Kod alanina HTML (ve isterseniz CSS/JavaScript icerebilen) kodunuzu yapistirirsiniz.
- 'Onizlemeyi Guncelle' butonuna bastiginizda, kod izole edilmis bir iframe'e aktarilir.
- Iframe, 'sandbox' ozelligi sayesinde ana sayfadan izole bir ortamda kodu render eder.
- Sonuc, sag paneldeki onizleme alaninda gorsel olarak gosterilir.
- Kodu degistirip butona tekrar bastiginizda onizleme guncellenir.
Ornek kullanim
Bir embed iframe kodu veya basit bir HTML/CSS denemesi yapistirdiginizda, sonuc aninda sag panelde gorsel olarak belirir; boylece kodu canli sitenize eklemeden once nasil goruneceğini kontrol edebilirsiniz.
HTML onizleme icin ipuclari
- Bir embed kodunun (ornegin bir iframe widget'inin) sitenizde nasil gorunecegini yayina almadan once buradan test edin.
- Onizleme her degisiklikte otomatik guncellenmez; kodu duzenledikten sonra 'Onizlemeyi Guncelle' butonuna basmayi unutmayin.
- Onizleme alani izole edildigi icin, kod icindeki script'ler sayfanizin geri kalanini etkileyemez veya veri okuyamaz.
Karşılaştırmalar
Aninda dogru gorunur
Baslik, paragraf, buton gibi temel elemanlar sorunsuz calisir.
Yayinlamadan once test edilebilir
Bir widget'in boyut ve gorunumunu kontrol etmek icin idealdir.
Calisir ama izole
Script'ler onizleme alani disina veya ana sayfaya erisemez.
HTML onizleme araci rehberi
Web gelistirme surecinde, bir HTML parcasinin veya embed kodunun gercek sitede nasil gorunecegini gormek icin genellikle kodu canli ortama eklemek gerekir; bu ise zaman kaybettirebilir ve hatali kod durumunda sitenin gorunumunu bozabilir. Bu arac, kodu izole bir ortamda test etmenizi saglayarak bu riski ortadan kaldirir.
Aracin merkezinde, tarayicilarin sundugu 'sandbox' iframe ozelligi yer alir. Bu ozellik, bir iframe icindeki icerigi ozel bir izin kumesi disinda tamamen izole eder; varsayilan olarak script calistirma disinda hicbir yetenek (ust sayfaya erisim, form gonderme, pencere acma gibi) verilmez.
Bu tasarim secimi bilinclidir: kullanicilarin guvenmediklerini bile test edebilecegi bir alan sunmak, ama bu sirada asil siteyi (ve kullanicinin cerezlerini, oturum bilgilerini) korumak. Bircok profesyonel kod paylasim platformu (ornegin CodePen tarzi araclar) aynı izolasyon prensibini kullanir.
Onizleme, her kod degisikliginde otomatik olarak guncellenmez; bunun yerine 'Onizlemeyi Guncelle' butonuyla manuel olarak tetiklenir. Bu, hem performansi korur hem de kullaniciya kodunu tamamlamadan once yanlislikla calistirmama kontrolu verir.
Bu arac; embed widget'lari test etmek, bir HTML/CSS fikrini hizlica denemek, bir hata raporunda paylasilan kodu guvenli sekilde incelemek veya bir ogrenme surecinde HTML'in nasil render edildigini gormek isteyen herkes icin kullanislidir.
FAQ
Yapistirdigim kod bir sunucuya gonderiliyor mu?
Hayir. Kod yalnizca tarayicinizda islenir ve onizleme icin kullanilir; hicbir sunucuya gonderilmez veya kaydedilmez.
Onizleme alani neden 'sandbox' ile sinirlandirilmis?
Bu, yapistirdiginiz kodun (ozellikle guvenilmeyen bir kaynaktan geliyorsa) sitenizin geri kalanina, cerezlerinize veya diger verilerinize erisimini engellemek icin bir guvenlik onlemidir.
JavaScript iceren kodu test edebilir miyim?
Evet, onizleme alani script calistirmaya izin verir, ancak izole edilmis oldugu icin bu script'ler ana sayfanizla etkilesime giremez.
Onizleme neden otomatik guncellenmiyor?
Her tus vurusunda yeniden render etmek yerine, kontrolu size birakmak icin 'Onizlemeyi Guncelle' butonu kullanilir; bu, buyuk kod bloklarinda performansi da korur.
Bu araci embed kod testleri icin kullanabilir miyim?
Evet, bu aracin en yaygin kullanim alanlarindan biri, bir iframe embed kodunun sitenize eklenmeden once dogru gorunup gorunmedigini kontrol etmektir.
Hazir bir ornek kod var mi?
Evet, sayfa acildiginda kod alaninda basit bir ornek HTML onceden yuklu gelir; bunu silip kendi kodunuzu yapistirabilirsiniz.
Onizlemede gordugum tasarim, gercek sitemde ayni mi gorunur?
Genellikle evet, ancak onizleme alani kendi stil sifirlamasina sahip oldugundan, sitenizin genel CSS'i ile etkilesen kodlarda kucuk gorsel farkliliklar olabilir.
Guvenilmeyen bir kaynaktan aldigim kodu buraya yapistirmak guvenli mi?
Sandbox izolasyonu sayesinde kod sitenize zarar veremez, ancak yine de bilmediginiz kaynaklardan gelen kodlari dikkatli inceleyerek kullanmanizi oneririz.
Ilgili araclar
Bu aracı sitenize ekleyin
<iframe src="https://pinfox.tech/tr/tools/genel/html-kod-goruntuleyici/?embed=1" width="100%" height="720" loading="lazy" style="border:0;border-radius:12px;overflow:hidden" title="HTML Kod Goruntuleyici: Canli Onizleme - Pinfox"></iframe>