Blogger ve temel HTML eğitimi (bölüm 2)

htmlBir ö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.

 

  1. 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ç:

     

     

    İlk bolum
    İkinci bolum

Paylaş !

5 yorum:

  1. Blogger'da kullanılan etiketleri listesi ve fonksiyonel anlatımlarını yapacak mısınız merak ediyorum ? Çok işe yarar bir kaynak olacağı kesin. Diğer tüm konular css altında olduğu için, etiketleri bilmeden tasarım yapmak işe yaramıyor.

    YanıtlaSil
    Yanıtlar
    1. etiketlerden kastın ne blogger'ın kendi kodlarımı yoksa HTML taglarmı?

      Sil
  2. b:section gibi örnekler

    YanıtlaSil
    Yanıtlar
    1. Aslında en sevdiğim konular tasarıma daha fazla nasıl müdehale edilebileceği, yani seninde bahsettiğin etiketler ve fonkiyonlarını ve daha başka kodların nasıl kullanılabileceği işin kötü tarafı vakit bulamıyorum , boş bir vaktimde bu konuda bir yazı hazırlarım hatta daha fazla tasarımla ilgili yazılar hazırlamaya çalışırım.

      Sil
  3. Merhaba, sitenizde çok güzel yararlı bilgiler vermişsiniz teşekkürler. Benim bir sorum olacaktı blogger tasarım bölümünde yanlışlıkla başlığımı kaldırdım ve artık hangi şablonu seçersem seçeyim başlık geri gelmiyor var mıdır bunun bir yolu? Gül gibi headerım gitti, aksi header ekleyecek bölüm yok şuan blogumda http://pastelzamanyolcusu.blogspot.com/

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz