Forum'da ara:
Ara


Yazar Mesaj
Mesaj03.02.2013, 19:20 (UTC)    
Mesaj konusu: HTML Div Tag

HTML <div> Tag
Merhaba sevgili TR.GG kullanıcıları. Sizlere bu konu altında birçok anlatım yapmayı planlıyorum. Bu anlatımlar benim olabilir, yabancı sitelerden türkçeleştirilmiş kaynaklar olabilir veya türkçe kaynakların düzenlenmiş halleri olabilir. Amaç tamamen sizlere div konusu anlatabilmektir.

Öncelikle divlerin nasıl çalıştığına bakalım.
Divler diğer Css terimleri gibi Html kodları içerisinde "<div>" ile başlayarak "</div>" ile biterler. Pek fazla üzerinde durmadan aşağıdaki kodu inceleyelim.

Kod:
<div style="color: #000">
Buraya yazı yazınız...
</div>

Bu kodda belirtilen style="color: #000" bölümü yazımızın rengini belirtmektedir. Yani biz o bölümü style="color: #ff0000" olarak değiştirirsek yazımız kırmızı rengini alır.

Şimdi biz aynı işlemi işin içine CSS kodlarını da ekleyerek daha düzenli bir hale getirelim. Öncelikle şimdilik sadece aynı işlemi yapacağız..

CSS KODUMUZ

Kod:
<style>
#divinadi {color: #000;}
</style>

HTML KODUMUZ
Kod:
<div id="divinadi">Buraya yazı yazınız...</div>


Burada yaptığımız işlem ne? Aslında çok basit. Css kodumuz bölümünde div'e verilmesini istediğimiz özellikleri ekliyoruz, Html kodumuz bölümünde ise yazının özelliklerini hangi div'den alacağını seçiyoruz.. Yani biz yukarıdaki kodda sadece yazımızın siyah olmasını belirlemiş olduk. Bakın şimdi yazımıza birden fazla özellik vererek ilk hali ve div ile düzenlenmiş hali arasındaki farkı sizlere yansıtalım..

Kod:
<strong><span style="color: #ff0000;"><span style="font-family: 'Calibri';"><span style="font-size: 20px;">Buraya yazı yazınız...</span></span></span></strong>


Bu kodu uyguladığımızda ekranımızda kırmızı renklerinde, yazı tipi Calibri, boyutu 20px ve kalın bir yazı çıkacaktır. Şimdi biz bunu aşağıda sizler için Css'i işin içine dahil edip div ile tasarladık.

CSS KODUMUZ

Kod:
<style>
#divinadi {font-family: Calibri; font-size: 20px; font-weight: bold; color: #ff0000;}
</style>

HTML KODUMUZ
Kod:
<div id="divinadi">Buraya yazı yazınız...</div>


Kodları web sitemizde Css temada Tasarım Ayarları > Gelişmiş Ayarlar > Css Kodu bölümüne "<style>" taglarını kaldırarak ekleyebiliriz.
Css tema dışında kullanan arkadaşlarımız da Tasarım Ayarları > Gelişmiş Ayarlar > Tasarımın Üzerindeki Yazı bölümüne ekleyebilir.

Şimdi iki kodunda işlevi aynı ise neden biz div kullanmalıyız?
Bu soruya genel olarak cevap verelim. Biz sitemizi table kodları ile de tasarlayabiliriz. Ama düzenlemek istediğimizde sorunlar ortaya çıkabilir. Kolay, hızlı ve çabuk bir düzenleme yapabilmek için şimdiden div kodlarına alışmalısınız. Aksi halde ücretli alan adlarına da geçtiğinizde her sayfayı tek tek kontrol etmenin ne kadar zor olacağını anlayacaksınızdır. Ek olarak Google table kodlarını pek sevmez ve Seo açısından da div çok iyidir. Bunu da geçersek div ile sayfanın istediğiniz her alanına bir şeyler ekleyebilirsiniz fakat table ile bu kadar rahat davranmanız çok zordur.
Tüm bunlardan anlayacağınız üzere div çok daha iyidir.

(Güncellenecektir.)
Mesaj04.02.2013, 22:33 (UTC)    
Mesaj konusu:

Hımm işime yarayacak bilgiler okudum. Teşekkürler anlatımlar için devamınıda takip etmek isterim
______________

Bundan sonra hep yek, hep tek başıma
Mesaj06.02.2013, 19:06 (UTC)    
Mesaj konusu: Re: HTML Div Tag

grafikdizayn yazmış:
HTML <div> Tag
Merhaba sevgili TR.GG kullanıcıları. Sizlere bu konu altında birçok anlatım yapmayı planlıyorum. Bu anlatımlar benim olabilir, yabancı sitelerden türkçeleştirilmiş kaynaklar olabilir veya türkçe kaynakların düzenlenmiş halleri olabilir. Amaç tamamen sizlere div konusu anlatabilmektir.

Öncelikle divlerin nasıl çalıştığına bakalım.
Divler diğer Css terimleri gibi Html kodları içerisinde "<div>" ile başlayarak "</div>" ile biterler. Pek fazla üzerinde durmadan aşağıdaki kodu inceleyelim.

Kod:
<div style="color: #000">
Buraya yazı yazınız...
</div>

Bu kodda belirtilen style="color: #000" bölümü yazımızın rengini belirtmektedir. Yani biz o bölümü style="color: #ff0000" olarak değiştirirsek yazımız kırmızı rengini alır.

Şimdi biz aynı işlemi işin içine CSS kodlarını da ekleyerek daha düzenli bir hale getirelim. Öncelikle şimdilik sadece aynı işlemi yapacağız..

CSS KODUMUZ

Kod:
<style>
#divinadi {color: #000;}
</style>

HTML KODUMUZ
Kod:
<div id="divinadi">Buraya yazı yazınız...</div>


Burada yaptığımız işlem ne? Aslında çok basit. Css kodumuz bölümünde div'e verilmesini istediğimiz özellikleri ekliyoruz, Html kodumuz bölümünde ise yazının özelliklerini hangi div'den alacağını seçiyoruz.. Yani biz yukarıdaki kodda sadece yazımızın siyah olmasını belirlemiş olduk. Bakın şimdi yazımıza birden fazla özellik vererek ilk hali ve div ile düzenlenmiş hali arasındaki farkı sizlere yansıtalım..

Kod:
<strong><span style="color: #ff0000;"><span style="font-family: 'Calibri';"><span style="font-size: 20px;">Buraya yazı yazınız...</span></span></span></strong>


Bu kodu uyguladığımızda ekranımızda kırmızı renklerinde, yazı tipi Calibri, boyutu 20px ve kalın bir yazı çıkacaktır. Şimdi biz bunu aşağıda sizler için Css'i işin içine dahil edip div ile tasarladık.

CSS KODUMUZ

Kod:
<style>
#divinadi {font-family: Calibri; font-size: 20px; font-weight: bold; color: #ff0000;}
</style>

HTML KODUMUZ
Kod:
<div id="divinadi">Buraya yazı yazınız...</div>


Kodları web sitemizde Css temada Tasarım Ayarları > Gelişmiş Ayarlar > Css Kodu bölümüne "<style>" taglarını kaldırarak ekleyebiliriz.
Css tema dışında kullanan arkadaşlarımız da Tasarım Ayarları > Gelişmiş Ayarlar > Tasarımın Üzerindeki Yazı bölümüne ekleyebilir.

Şimdi iki kodunda işlevi aynı ise neden biz div kullanmalıyız?
Bu soruya genel olarak cevap verelim. Biz sitemizi table kodları ile de tasarlayabiliriz. Ama düzenlemek istediğimizde sorunlar ortaya çıkabilir. Kolay, hızlı ve çabuk bir düzenleme yapabilmek için şimdiden div kodlarına alışmalısınız. Aksi halde ücretli alan adlarına da geçtiğinizde her sayfayı tek tek kontrol etmenin ne kadar zor olacağını anlayacaksınızdır. Ek olarak Google table kodlarını pek sevmez ve Seo açısından da div çok iyidir. Bunu da geçersek div ile sayfanın istediğiniz her alanına bir şeyler ekleyebilirsiniz fakat table ile bu kadar rahat davranmanız çok zordur.
Tüm bunlardan anlayacağınız üzere div çok daha iyidir.

(Güncellenecektir.)


Anlatım İcin Saol .
Mesaj10.02.2013, 22:27 (UTC)    
Mesaj konusu: Re: HTML Div Tag

grafikdizayn yazmış:
HTML <div> Tag


Şimdi iki kodunda işlevi aynı ise neden biz div kullanmalıyız?
Bu soruya genel olarak cevap verelim. Biz sitemizi table kodları ile de tasarlayabiliriz. Ama düzenlemek istediğimizde sorunlar ortaya çıkabilir. Kolay, hızlı ve çabuk bir düzenleme yapabilmek için şimdiden div kodlarına alışmalısınız. Aksi halde ücretli alan adlarına da geçtiğinizde her sayfayı tek tek kontrol etmenin ne kadar zor olacağını anlayacaksınızdır. Ek olarak Google table kodlarını pek sevmez ve Seo açısından da div çok iyidir. Bunu da geçersek div ile sayfanın istediğiniz her alanına bir şeyler ekleyebilirsiniz fakat table ile bu kadar rahat davranmanız çok zordur.
Tüm bunlardan anlayacağınız üzere div çok daha iyidir.



Ayrıca table elementinin içeriği tamamen yüklenmeden sayfadaki diğer elementler yüklenmeye veya tablo içi gösterilmeye başlanmaz. Bu da sitenizin hem daha geç yüklenmesine, hem de büyük bir bölümü yüklenene kadar ziyaretçilerinizin hiçbir şey görememesine ssebep olabilir.
______________

Mesaj21.07.2013, 08:42 (UTC)    
Mesaj konusu:

Güzel anlatım, konunun güncel kalması yerinde olur.
Mesaj21.07.2013, 08:45 (UTC)    
Mesaj konusu:

Paylaşım için teşekkürler.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu