HTML Programlama Kullanarak Bir Görüntü Nasıl Ortalanır

...

Web sayfası görünümünü belirtmek için CSS kullanın.

Bir Web sayfası kodlayıcısı, Web tarayıcısına bir sayfadaki paragraf, başlık veya liste gibi her öğenin işlevsel amacını anlatmak için Köprü Metni Biçimlendirme Dili kullanır. HTML 4'ten beri Basamaklı Stil Sayfaları, kodlayıcıya, ne olduklarını tanımlamaktan ayrı olarak, bu öğelerin her birinin nasıl görünmesi gerektiğini tarayıcıya söylemenin bir yolunu sağlamıştır. Bir sayfa, cep telefonları ve masaüstü bilgisayarlar gibi farklı cihaz türleri için farklı CSS stillerine sahip olabilir ve bu, kodlayıcının HTML'yi değiştirmesine gerek kalmadan sayfa görünümünün değişmesine olanak tanır. Bir görüntüyü ortalamak için CSS özelliklerini kullanın.

Aşama 1

"img" etiketini, resminizin Web sayfasında görüntülenmesini istediğiniz HTML dosyasına yerleştirin. "body" etiketleri arasında ve "h1" etiketlerinden sonra olmalıdır. Örneğin,

Günün Videosu

Bu senin metnin.

Resmin açıklaması

170 piksel genişliğinde ve 50 piksel yüksekliğinde photo.jpg adlı bir görüntüyü tanımlar. Üst başlıktan sonra sayfada ilk sırada yer alır.

Adım 2

Resimler gibi sayfa öğelerinin etrafındaki boşluğu tanımlamak için "kenar boşluğu" CSS özelliğini kullanın. Kenar boşluğu özniteliği için "otomatik" değeri, Web tarayıcısına alan miktarını otomatik olarak belirlemesini söyler. Yani, Resmin açıklaması görüntünün etrafındaki boşluğun tarayıcı tarafından belirlendiğini tanımlar.

Aşama 3

Bir sayfa öğesinin nasıl görüntüleneceğini tanımlamak için "display" özelliğini kullanın. display özelliğinin "block" değeri, Web tarayıcısına öğeyi üstünde ve altında boşluk olacak şekilde kendi satırında görüntülemesini söyler. Yani, Resmin açıklaması aynı görüntüyü tanımlar, ancak "display: blok;" eklenmesi şimdi kendi çizgisine yerleştiriyor.

4. Adım

Görüntünün düzgün bir şekilde ortalandığını doğrulamak için Web sayfasını birkaç farklı tarayıcıda görüntüleyin.

Resim açıklamasını bir "alt" etiketine dahil edin. Bu, sayfanızı görme engelli okuyucular için daha erişilebilir hale getirir ve kodunuzun standartlara uygun olmasını sağlar. Resmin açıklaması