Bir önceki yazımızla başladığımız HTML nedir blogger’da nasıl kullanılır gibi sadeleştirerek size sunmaya başladığımız yazı serisinin 2. bölümünde yazımıza kaldığımız yerden devam ediyoruz.
Blogger şablon yapısını incelemeye başladığımız ilk yazımızda <head> ve </head> tagı arasında kalan kodlarımızdan sonra şimdide bir şablondaki en önemli diğer kodlardan biri olan <body> kodunu inceliyoruz.
body blog’uğunuzda yada sitenizde oluşturduğunuz tüm bölümleri yerleştirmeniz gereken bölüm blog’uğunuzun HTML’yi düzenle bölümünü açtığınızda <body> ile başlayıp </body> ile biten bölümde bir çok HTML kodu ile birlikte javascrip(json),blogger’ın özel kodları ve bazen de CSS kodları bulunabiliyor.
Bu bölümler her şablonda değişiklik gösterebiliyor.
Bizi bu bölümde ilgilendiren header(blog başlığı) ,Main wrapper(yazıların geldiği bölüm) veya side barı (kenar çubuğunu) gibi oluşturmamızı sağlayan HTML kodları .
Bir HTML belgesinde standart bazı kurallar vardır bu kuralları bilirseniz konuları anlamanız daha da kolaylaşacaktır.
- Tarayıcılar, HTML kodlarını yorumlarken etiketler(tag) arasındaki boşlukları dikkate almaz Ama sizin kodları kolay okuyabilmeniz için gerektiğinde satır atlamanız ve boşluk kullanmanız faydalı olacaktır.
HTML dilinde bütün iflaretlemeler <etiket> şeklinde başlar ve </etiket> ile biter. HTML’deki bu komutlara “etiket” (tag) adı verilir.
HTML’de bağlantı oluşturmak divler ve claslarla bölümler oluşturmak.
bir html belgesinde dikkat ederseniz html belgesi diyorum çünkü biz HTML’i bloggerda sadece şablonumuzu düzenlerken kullanmıyoruz yazı yazrken,blog’uğunuza bir gadget eklerken veya her hangi bir blog’a yorum yaparken kullanabileceğiniz bazı temel öeğeleri bulunmakta.
şimdi her hangi bir sayfaya,resime veya dosyaya bir bağlantıyı nasıl oluşturabileceğimize bakalım.
bağlantılar <a> tagı ile başlayıp </a> tagı ile kapanır bu tagın içerisine her hangi bir sayfaya bağlantı oluşturmak istersek örneğin kendi blog’uğuma bir bağlantı oluşturuyorum.
<a href”http//blogger modifiye.bogspot.com” > blogger modifiye </a>
bu bağlantıya target=”_blank” değeri ekleyerek sayfanın farklı bir pencerde de açılmasını sağlayabilirim.
<a href”http//blogger modifiye.bogspot.com” target=”_blank” > blogger modifiye </a>
ayrıca bunun gibi bir kaç bağlantıyı kullanmak istersem bunu bir menü haline getirebilirim.
<ul>
<li><a href='http://bloggermodifiye.blogspot.com/'>Anasayfa</a></li>
<li><a href='http://bloggermodifiye.blogspot.com/feeds/posts/default'>Yazılar RSS</a></li>
<li><a href='http://bloggermodifiye.blogspot.com/feeds/comments/default'>Yorumlar RSS</a></li>
<li><a href='http://bloggermodifiye.blogspot.com/p/arsiv-imgr-new-array-imgr0-httplh5.html'>Arşiv</a></li>
<li><a href='http://bloggermodifiye.blogspot.com/p/blogger-modifiye-iletisim-oneri-istek.html'>İletişim</a></li>
<li><a href='http://bloggermodifiye.blogspot.com/p/blogugumuzdaki-yazlardan-alnt-yapmak.html'> Gizlilik</a></li>
</ul>
tabi daha sonra bu menünün görüntüsünü ayarlayabilmek için CSS kodları kullanmam gerekir.
div kullanımı bir belgede çeşitli bölümler oluşturmanın en elverişli ve kullanışı yöntemir.
örneğin iki bölümden oluşan bir HTML belgesi oluşturalım.
ilk bölümün solda görünmesini istiyorum ve hemen yanında ikinci bölümün yer almasını istiyorum.
<div id=”ilk-bolum” > İlk bolum</div> <div id=”ikinci-bolum”> ikinci bölüm </div>
istediğim şekilde ilk bölümün solda yer alması ve arka planın kırmızı renkte görünebilmesi için css kodlarından yararlanacağım ve bu kodları da direk HTML kodlarına gömeceğim.
<div id=”ilk-bolum” style=”float:left;width:380px; height:100px;background:#0000ff;”> İlk bolum</div>
CSS kodlarını eklerken style=” ” etiketinden yararlandım ve bu bölümü içerisine
float:left; diyerek sola yaslanmasını sağladım.
width:380px; diyerek genişliğini ayarladım.
height:100px; diyerek yüksekliğini ayarladım
background:#ff0000; diyerek te arka planın kırmızı olmasını sağladım
diğer bölümün kodları da şu şekilde
<div id=”ikinci-bolum” style=” float:rigt;width:200px;height:100px;background:#ffff00;”> İkinci bolum</div>
ve sonuç:
Hiç yorum yok: