1. * 5651 Sayılı Kanun'a göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur.
    * Telif hakkına konu olan eserlerin yasal olmayan şekilde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahiplerinin İLETİŞİM bölümünden bize ulaşmaları durumunda ilgili şikayet incelenip gereği 1 (bir) hafta içinde gereği yapılacaktır.
    E-posta adresimiz

Html Tagları ve Birkaç İpucu

Konusu 'WebMaster Bölümü' forumundadır ve YoRuMSuZ tarafından 14 Mart 2007 başlatılmıştır.

  1. YoRuMSuZ
    Avare

    YoRuMSuZ Biz işimize bakalım!

    Katılım:
    7 Haziran 2006
    Mesajlar:
    24.415
    Beğenileri:
    7.327
    Ödül Puanları:
    11.330
    Cinsiyet:
    Bay
    Banka:
    8.717 ÇTL
    Sitenizi html ile hazırladınız ve yayınladınız. Ancak sizde veya ziyaretçinin tarayıcısında Türkçe karakterler farklı karakterler halinde görünüyor. Demekki birşeyi atladık. Bu da ziyaretinin tarayıcısına bak ben Türkçe karakterler içeriyorum demek. O halde bunu nasıl çözeriz.

    <head></head> tagları arasına gerekli kodları yerleştiriğimizde sorunu aşmış oluruz. Bu durumda bizim <head></head> tagları arasında şöyle bir kod bulunmalıdır.
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Tabi <head></head> tagları arasına yazacağımız kodlar bunlarla sınırlı değil. Örneğin <title>Başlık</title> tagları da <head></head> arasında kalıyordu.

    Bunlardan başka <head></head> tagları arasına javacript kodları be bağlantıları, css dosya bağlantıları (css lerle ilgili geniş açıklama sonraki bir makalede yapılacaktır) , meta etiketleri (bunlar arama motorları için gerekli) yerleştirilebilir.

    Bu bölümde açıklanan birkaç terimin (tag) anlamı:

    tag:
    Etiket. < ve > işaretleri arasına yazılan kodlara tag diyoruz.

    html: Ziyaretçinin tarayıcısına html ile yapılmış sayfa olduğunu bildirmek için gerekli. ayfamızın en başında açıp en sonunda kapatıyoruz.

    head: Kelime anlamı üst, baş olmakla birlikte burası sayfa başlığı, meta etiketleri kullanımı, css dosya linkleri yada css'lerin kendileri ile style tanımlamalarının yapıldığı bölümüdür.

    title: Sayfamızın tarayıcıda görünecek başlığı

    css: Css uzantılı dosyalara sayfamızdan bağlantı kurarak tüm sayfalarımızın görselliğini, yazı tiplerini, tablo biçimlerini vs. tek bir css dosyasından alabiiriz. Böylelikle sitemizde bulunan onlarca yüzlerce sayfadaki görsel bir değişikliği tek bir css dosyası ile yapmamız mümkündür.

    Css kullanımı oldukça kapsamlı ve kullanımı son derece önemli olduğu için ayrı bir makale olarak ele alınacaktır. Tabii hiç kulanılmadan da sayfalar oluşturulabilir. Ancak bu ileriki zamanlarda sayfalarımız çoğaldıkça düzenleme konusunda oldukça zamanınızı alan dezavantaja dönüşecektir.


    body: Sayfamızın gövdesi yani ziyaretçiye göstermek istediğimiz tüm içeriğin saklandığı bölüm.

    meta: Arama motorlarının sayfalarımızı kolay bulmasını ağlayan etiketler.

    bgcolor: Arkaplan rengini belirleme etiketi.

    table: Tablo etiketidir.

    td: Tablo içinde hücre etiketi.

    Hizalama Etiketleri: left (dola hizala), right (sağa hizala), center (ortala), justify (iki yana yasla)

    Buraya kadar birkeç temel etiketten bahettik. Ancak yine bunların hemen hepsini (css ve meta tagları dışındakileri) kullanacağınız html editörleri sizin yerinize hazırlayacak iz görsel olarak izle-gör yöntemi kullanarak sayfalarınızı hazırlayacaksınız.

    Front Page derslerinde bunların kolaylıkla yapılabildiğini göreceksiniz.

    Bu arada html de birkaç renk kodunu görelim. Kullandıkça temel renk kodları zaten ezberinizde kalacaktır.

    [FONT=Verdana, Arial, Helvetica, sans-serif]#000000= siyah
    [/FONT][FONT=Verdana, Arial, Helvetica, sans-serif]#0000FF=mavi
    [/FONT][FONT=Verdana, Arial, Helvetica, sans-serif]#FF0000=kırmızı
    [/FONT][FONT=Verdana, Arial, Helvetica, sans-serif]#FFFF00=sarı
    [/FONT][FONT=Verdana, Arial, Helvetica, sans-serif]#FFFFFF=beyaz
    #008000=yeşil
    [/FONT]
    Örneğin <body bgcolor="#FF0000"> yazarsanız ayfanızın arka plan rengi kırmızı olacaktır.

    Tablomuzun arka planı için renk atayacak olursak kodumuz <table bgcolor="#FF0000"> şeklinde olacaktır.

    Yazı rengini değiştirmek için: <font color="#FF0000"> kodunu kullanırız.

    < Kaynak göstermeden yayınlaması yasaktır. >
     
  2. YoRuMSuZ
    Avare

    YoRuMSuZ Biz işimize bakalım!

    Katılım:
    7 Haziran 2006
    Mesajlar:
    24.415
    Beğenileri:
    7.327
    Ödül Puanları:
    11.330
    Cinsiyet:
    Bay
    Banka:
    8.717 ÇTL
    Html tagları < ve > karakterleri arasında yer alırlar. Tag'lar genelde <> şeklinde başlar ve </> şeklinde biter. Sadece bazı taglar bu kurala uymazlar, bu konuya ileride değineceğim Tag yazılımında <b> ile <B> aynıdır. Fakat gelecekte çıkacak yeni HTML sürümleri için tag yazımında her zaman küçük yazı karakteri kullanılması önerilmektedir. Örneklerle tagları ve kullanılış biçimlerini inceleyelim.
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Yukarıdaki html dökümanını incelediğinizde tagların kullanımını çok kolay bir şekilde anlayacaksınız.

    ----------------
    Html dilinde boşluk bırakmak için &nbsp;, alt satıra inmek içinse <br> tagını kullanırız. Html belgesi oluştururken gereksiz yere spacebar ile boşluk bırakmaktan kaçınmalıyız.
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Başlıklar <h1> ile <h6> arasında tanımlanırlar.<h1> en büyük, <h6> ise en küçük başlıktır.
    <hr> ise yatay çizgi(horizonal rule) anlamındadır. Bölümleri birbirinden yatay bir çizgi ile ayırır. Dikkat ettiyseniz <p>, <hx> ve <hr> taglarında alt satıra geçmek için <br> tagına ihtiyaç yoktur. Ayrıca <br> ve <hr> taglarının sonunda </br> ve </hr> kullanılmaz.
    <!-- ile --> arasında kalan bölüm ise yorum aralığı olarak adlandırılır ve buraya yazılanlar tarayıcınızda gözükmez. Bu tagı yazdığınız kodları açıklamak için kullanabilirsiniz. Ayrıca yorum satırı sayesinde html dökümanınız düzene girer ve daha sonradan yapacağınız değişiklikleri uygulamada zorlanmazsınız.

    Bazen çok sayıda boşluk ve alt alta metinler içeren dökümanlar hazırmak zorunda kalırız. Bu iş için <pre> tagı biçilmiş kaftandır. Bu iki tag arasında kalan herşey tarayıcınıza olduğu gibi yansır.
    Bir örnekle açıklayalım.
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Yukarıdaki gibi bir html dökümanı hazırlayıp tarayıcınızla incelediğinizde tagın işlevini rahatça anlayacaksınız.

    ----------------
    Çoğu tagın kullanımında o taga değişik özellikler kazandıran yardımcı elemanlar vardır.Bunlardan bazıları şunlardır.
    <body> etiketi ile birlikte kullanılan yardımcı kodlar :
    "bgcolor" (arkaplan rengi) : Aldığı değere göre sayfanızın arka plan rengini ayarlar.
    "text" : Sayfadaki yazıların rengini ayarlar.
    "background" : Sayfanızın arka planına resim yerleştirir.
    "topmargin" : Sayfanın üst tarafındaki kenar boşluğunu ayarlar.
    "leftmargin" : Sayfanın sol tarafındaki kenar boşluğunu ayarlar.
    "rightmargin" : Sayfanın sağ tarafındaki kenar boşluğunu ayarlar.
    "onLoad" : Sayfa yüklenirken çalıştırılacak scripti belirler.
    "onUnload" : Sayfadan çıkarken çalıştırılacak scripti belirler.
    "link=renk adı" : Link rengini belirler.
    "alink=renk adı" : (Active Link) Aktif olan link rengini belirler.
    "vlink=renk adı" : (Visited Link) Daha önceden ziyaret edilmiş olan link rengini belirler.


    Not: Link Oluşturmayı öğrendikten sonra yukardaki 3 body elemanını rahatlıkla kullanabileceksiniz.

    Body Örneği - 1
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Body Örneği - 2
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Tagların yardımcı elemanlarına değer verirken " " veya ' ' işaretini kullanırız. Ama " " kullanmanızı öneririm. İleride bunun sebebini anlayacaksınız.

    --------------
    <p> ve <hx> gibi taglar ile kullanılan "align" elemanı sayesinde yazılarımızın "ortalanmasını, sağa veya sola" hizalanmasını ayarlayabiliriz. Ayrıca <center> tagıda yazıları ortalamak için kullanılır.

    Kullanımları aşağıdaki gibidir.
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    Html dökümanımızda <font> etiketi kulanarak yazı biçimimizi kontrol edebiliriz. Bu etiketle "color", "size" ve "face" elemanlarını kullanabiliriz."color" elemanı yazının hangi renkte olacağını, "size" elamanı ile yazının büyüklüğünü, "face" elamanı ile ise yazının belli bir fontta gözükmesini sağlar.


    Kullanımlarına göz atalım ;
    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    "size" elemanı ile kullanılan '+1,+2,+3,....+7' değerleri ile yazı boyutu büyürken, '-1,-2,-3,......,-7' değerleri ile ise yazı boyutunu küçültür.


    Herhangi bir sitenin html kodlarını görmek için tarayıcınızın "Görünüm" menüsünden "Kaynak" sekmesine tıklayın. Bu yöntemle web sayfalarında nasıl yapıldığını merak ettiğiniz şeyleri inceleyebilirsiniz ve bence kendinizi geliştirmenin en güzel yollarından biri.


    Buraya kadar öğrendiklerinizle farklı farklı html dökümanları hazırlayıp konuyu pekiştirmenizi öneririm.
     

Sayfayı Paylaş