Html Sayfa Ortalama Kodu

Bu makalemizde HTML yazı ve resim ortalama ile ilgili bilgilerimizi paylaşacağız. Özellikle bu işe yeni başlayan webmaster adayı arkadaşlarımızın öğrenmesi gereken konulardan bir tanesi resimleri, yazıları ortalama konusudur. HTML&#;de bunları size uygulamalı olarak göstereceğiz. Öncelikli olarak bir metin&#;imiz var ve bunu nasıl ortalayabiliriz bunu size gösterelim.

Herşeyi ortalamak: <center> kodumuzun içine altığımız herşey ortalanacaktır. Bu kod Html5 standartlarına uyumlu olmadığı için günümüzde pek kullanılmamakta. Örnek uygulama şu şekildedir.

Yazı ortalama kodu: Yazıyı ortalamak için <div> içinde kullanacağımız &#;align&#; parametresi işimizi görecektir. Kullanımı ise şu şekildedir.

Yazıyı veya resimi ortalamak için altarnetif olarak css kullanabilirsiniz. Satır için css kullanımı ile resmi veya metini şu şekilde ortalayabiliriz.

HTML ile resmi ortalamak: Bunun için resim çekme kodumuzu <div> &#;in içine aldığımızda ve div&#;e align parametresini verdiğimizde doğal olarak resim ortalanmış olur.

Css ile ortalamak için ise yine aynı mantıktan yola çıkıyor ve işlemlerimizi şu şekilde yapıyoruz.

Bu şekilde işlemimizi tamamlamış oluyoruz. İşlemler bu kadar basit, eğer anlamadığınız bir şey olursa yorum yapmakta çekinmeyiniz.

Bir önceki yazımız olan Html Renk Kodları başlıklı makalemizi de okumanızı öneririz.

Anasayfa  &#;  Css Dersleri   &#;   Css ile Sayfayı Ortalama

PAYLAŞ Facebook Twitter LinkedIn Pinterest

Merhaba arkadaşlar, bu makalemizde CSS ile Sayfayı Ortalama konusunu ele alacağız. Tasarımların farklı ekran çözünürlüklerinde ortalı olarak durması kullanıcı tecrübeleri göz önüne alınırsa çok önemlidir.

Tasarımlarını 3 farklı şekilde ortalı olarak gösterebilirsiniz. Bunlardan ilki sayfayı body etiketi için css değeri tanımlayarak ortalamadır.

1. Body etiketi için ortalama

Body etiketine verilen değer tüm sayfa değişkenleri için global bir değer olacaktır. Bu yüzden tanımlanan verilerin doğru olması büyük önem taşır. Body etiketi ile ortalama yapılması durumunda taşıyıcı div etiketine vereceğiniz genişlik değerinin dışında kalan alanları kullanamayacaksınız. Kod örneğimiz şu şekildedir;

Bu kod örneğimizde px genişlik ile sayfamızı body etikene verdiğimiz css değerleri ile ortalamış olduk.

2. Taşıyıcı div değerli ile ortalama

Taşıyıcı bir div değeri kullanarak sayfa ortalamanın sağladığı en büyük avantaj HTML5 ile birlikte gelen yeni özelliklerinde dahil edilmesi ile div dışında kalan alanlarıda kullanabilecek olmamızdır. İleriye dönük projelerde taşıyıcı bir div değer kullanmak çok büyük kolaylık sağlayacaktır.

CSS Örneği;

HTML Kullanım Örneği;

Görsel olarak;

3. Body etiketi ve taşıyıcı div değeri ile birlikte ortalama

Bu yapıyı kullanım durumunda bir öncelik ortalama yapısında bahsettiğimiz BODY içeriğini kullanabilmeyi ele alacağız. Bu özellik sayesinde ortaladığımız div etiketinin genişliği dışında kalan alanlarda reklam yerleşimi için vs kullanılabilir. Ayrıca arkaplan renklendirme ve farklı görsel objeleri arka olanda kullanmak için bu değerler yeterli olacaktır.

CSS Örneği;

HTML Kullanım Örneği;

Görsel olarak;

Css ile Sayfayı Ortalama konulu makalemiz burada sona erdi. Yukarıda verilen anlatımlarda dikkat etmeniz gereken en önemli husus genişlik olarak verilmiş olan px değerinin sizin tasarımlarınız için değişmesi gerektiğidir. Yorumlarınız ile takıldığınız noktaları sıkılmadan sorabilirsiniz. CSS öğrenmek zaman ister bu yüzden pes etmeyin!

İyi bloglar.

Web sitesinde tablo ortalama sorunu genellikle WordPress kullanıcıları tarafından merak ediliyor. Bunun en büyük sebebi herhangi bir kod bilgisi olmadan kullanılabilen platformda reklam ortalama ve yazı içerisinde tablo ortalama konularında kod ihtiyacı duyulmasıdır.

WordPress tablo ortalamaya reklam konumlandırma işlemlerinde ihtiyaç duyulduğu için bunun için hazır eklentiler kullanmak daha mantıklı gelebiliyor. Yada sitelerin bazı özellikle reklam konumlarını belirlemeniz için seçenekler sunabiliyor. Ancak sadece tablo ortalamak için eklenti kullanmak hiçte mantıklı değildir. Yüklenen her eklenti sitenizi biraz daha yavaşlatacaktır.

HTML tablo içeriğini ortalama sorunu genelde karşımıza sıkça çıkmaktadır. HTML tablo ortlama sorununu çözmek için aşağıdaki kodları kullanmanız yeterli olacaktır.

HTML Tablo Ortalama Sorunu Çözümü

Tablo arasındaki içerik kısmına ortalanmasını istediğiniz &#;yazı, kod, resim&#; içeriği ekleyin ve kodları seçip sitede istediğiniz yere yapıştırın. Reklam kodlarının çalıştırdığınız sayfada ortalı olarak konumlandığını göreceksiniz.

<table align=”center”>
<tr align=”center”>
<td align=”center”>

&#; &#; &#; İÇERİK &#; &#; &#;

<td>
<tr >
<table>

Bu makalede sitemizi yatay olarak nasıl ortalayacağımızı öğreneceğiz. Makalenin en başında şunu söylemek isterim, eğer sayfanızda !DOCTYPE kullanmazsanız, bazı taracıyılar (özellikle Internet Explorer) sitenizi ortalamayacak ya da hatalı ortalayacaktır. !DOCTYPE kullanmanızı kesinlikle tavsiye ediyorum, !DOCTYPE nedir diyorsanız buraya tıklayın. Ayrıca bu konu önemli olduğu için baştan sonra okumanızı tavsiye ederim.

Şimdi size 3 farklı örnek vereceğim ve tek tek yorumlayacağım.

Örnek 1) Sadece body etiketi ile ortalama

Body etiketi ekranda gördüğünüz sayfanın tümüdür. Bu etikette yapacağınız her ayarlama sayfanın tümünü etkiler (link, renk, yazı büyüklüğü vb.). Dolayısıyla body etiketini ortalarsanız sayfanın kenarlarında kalan kısmını artık kullanamayacaksınız demektir. Yani bu işlem sayfanızın kenarlarını kesip atmak gibi bir şey dolayısıyla çok kullanılmaz.

Kod:

Örnek 2) Container ile ortalama

Container ne ola ki? Container dediğimiz şey taşıyıcıdır. Üstteki örnekte yaptığımız işlemi body etiketi üzerinden alıp bir taşıyıcı üzerine koymaktır ve böylece bütün sayfayı body üzerine değil de container üzerine kurmak temel amaçtır. Yani üsteki örneğin aksine kenarda kalan kısımları kullanabileceğiz. HTML5'in getirdikleri yenilikleri düşünecek olursak container tipi kullanım işimizi çok kolaylaştıracaktır.

CSS Kodu:

HTML Kodu:

Örnek 3) Container ile ortalama ve body etiketini kullanma

Bu örnek aslında üsttekinin aynısıdır, sadece body ve container'ın birlikte kullanımını göstereceğim. Body etiketi genelde arkaplanı renklendirmek için kullanılır. Container kullanımının bir avantajı da budur çünkü body'den etkilenmez.

CSS Kodu:

HTML Kodu:

Not: "width: px;" ayarını kendinize göre değiştirebilirsiniz. Bu kod sayfa ortasının piksel olmasını sağlar.