Firefox'taki Inspect Element geliştirici aracı, web sayfanızda gördüğünüz her şey için HTML kodunu belirlemenize olanak tanır. Bu araçlar açıldığında HTML ve beraberindeki CSS stil sayfası tamamen düzenlenebilir. İstediğiniz değişiklikleri deneyin, ardından web sayfasının amaçlanan görünümüne geri dönmek için sayfayı yenileyin.
adımlar
Bölüm 1 / 2: Elemanları İnceleme
Adım 1. Herhangi bir web sayfası öğesini sağ tıklayın
Resimlere, metne, arka planlara veya başka herhangi bir öğeye sağ tıklayabilirsiniz. İki düğmeli bir fareniz yoksa, Kontrol tuşunu basılı tutarken sol tıklayın.
Adım 2. Açılır menüden Öğeyi İncele'ye tıklayın
Pencerenizin altında bir araç çubuğu görünmelidir. Araç çubuğunun altında sayfanın HTML kodunu görüntüleyen bir bölme de görünür.
Adım 3. Araç çubuklarını ve bölmeleri tanımlayın
Öğeyi İncele'ye tıkladığınızda, pencerenizin altında birkaç bölme açılır. İşte kullanımlarının ve adlarının bir dökümü:
- En üst sıra Araç Kutusu Araç Çubuğudur. Bunun birkaç geliştirici aracı var, ancak soldaki Müfettiş ile ilgileniyoruz. Bu kılavuzun tamamı için bunu seçili (mavi renkle vurgulanmış) tutun.
- Araç çubuğunun altında, seçili öğeyle ilgili tam yolu gösteren tek bir Breadcrumbs HTML öğesi satırı vardır.
- Bu satırın altındaki bölme, sayfanın HTML ağacını veya "İşaretleme Görünümü"nü gösterir. Seçtiğiniz öğenin HTML'si vurgulanır ve bu bölmede ortalanır.
- Sağdaki bölme, bu sayfanın CSS stil sayfasını görüntüler.
Adım 4. Başka bir öğe seçin
Araç çubuğu açıldığında, başka bir öğe seçmek kolaydır. İşte bunu yapmanın üç yolu:
- İlgili öğeyi vurgulamak için bir HTML satırının üzerine gelin (Firefox 34+ gerektirir). Bu öğeyi seçmek için HTML'yi tıklayın.
- Araç çubuğunun en solundaki Öğe Seç aracını tıklayın: simge, bir karenin üzerinde bir imleçtir. Öğeleri vurgulamak için imlecinizi sayfanın üzerine getirin, ardından bir öğe seçmek için tıklayın.
Adım 5. Kodda gezinin
HTML bölmesinde herhangi bir yeri tıklayın. Kodda gezinmek için klavyenizdeki sol ve sağ okları kullanın (Firefox 39+ gerektirir). Bu, elle seçilemeyecek kadar küçük öğeler için kullanışlıdır.
- Gri HTML, sayfada görüntülenmeyen öğelerle ilgilidir. Buna yorumlar, gibi belirli düğümler ve CSS görüntüleme özelliğiyle gizlenmiş öğeler dahildir.
- İçeriğini genişletmek veya gizlemek için kapların solundaki oku tıklayın. Tüm içeriği genişletmek için, tıklarken alt=""Image" veya seçeneğini basılı tutun.</li" />
Adım 6. Bir öğe arayın
Breadcrumbs satırının en sağındaki arama çubuğunu (büyüteç simgesi) arayın. Genişletmek için buna tıklayın, ardından aradığınız HTML kodunu yazın. Siz yazarken, eşleşen öğeleri listeleyen bir açılır pencere görünecektir. Bu öğeyi seçmek için birine tıklayın ve HTML bölmesini koduna kaydırın.
Bölüm 2/2: HTML'yi Düzenleme
Adım 1. İstediğiniz zaman baştan başlamak için sayfayı yenileyin
Web geliştirici araçlarında yeniyseniz, bunların kalıcı değişiklikler yapmadığını anlayın. Düzenlemeleriniz yalnızca ekranınızda ve yalnızca siz sayfayı kapatana veya yenileyene kadar görünür olacaktır. Ne olacağından emin olmasanız bile denemekten çekinmeyin.
Adım 2. Metni düzenlemek için HTML'ye çift tıklayın
Bir HTML satırına çift tıklayın. Yeni metni yazın ve değişikliklerinizi kaydetmek için enter tuşuna basın.
Adım 3. Daha fazla seçenek için bir içerik haritasına tıklayın ve basılı tutun
Breadcrumb araç çubuğunun tam HTML ağacı ile üst araç çubuğu arasına sıkıştırıldığını unutmayın. Kapsamlı bir menü açmak için bu satırdaki öğelerden herhangi birine tıklayın ve basılı tutun. İşte bu seçenekler için eksik bir kılavuz:
- "HTML olarak düzenle", her satırı ayrı ayrı düzenlemek yerine, düğümü ve tüm içeriğini HTML ağacında düzenlenebilir hale getirir.
- "İç HTML'yi Kopyala", düğümün tüm içeriğini kopyalarken, "Dış HTML'yi Kopyala" da düğümü kopyalar (örneğin veya
- "Yapıştır →", bu düğümden önce veya düğümün ilk alt öğesinden sonra olduğu gibi, nereye yapıştırılacağına ilişkin çeşitli seçeneklere yol açar.
- :hover,:active ve:focus, kullanıcı onunla etkileşim kurduğunda öğenin görünümünü değiştirir. Kesin etki, CSS stil sayfası tarafından belirlenir (sağdaki bölmeden düzenlenebilir).
Adım 4. Sürükleyip bırakın
Koddaki öğeleri yeniden düzenlemek için HTML'ye tıklayın ve kesikli bir çizgi görünene kadar basılı tutun. Ağacı yukarı veya aşağı hareket ettirin ve kesikli çizgi istenen yere geldiğinde bırakın.
Bu, Firefox 39 veya sonraki bir sürümünü gerektirir
Adım 5. Geliştirici araç çubuğunu kapatın
Tüm bu süslü pencereleri kapatmak için, araç çubuğunun en sağ köşesinde, CSS bölmesinin üzerindeki X'e basmanız yeterlidir.
İpuçları
- Araç çubuğunu şu üst menü seçenekleriyle de açabilirsiniz:
- Windows: Firefox → Web Geliştirici → Araçları Değiştir
- Mac veya Linux: Araçlar → Web Geliştirici → Araçları Değiştir
- Firefox 40, HTML'yi düzenlerken size daha fazla alan sağlamak için CSS bölmesini gizleme seçeneğini sundu. Arama çubuğunun sağındaki Ekmek Kırıntıları satırının en sağındaki ok simgesini arayın. CSS bölmesini gizlemek için bu simgeye tıklayın ve tekrar genişletmek için tekrar tıklayın.
- CSS bölmesi de düzenlenebilir, ancak bu, bu kılavuzun kapsamı dışındadır. Bu makale CSS temellerini öğretir.
