T.C.S.F.B.A.T - Alılı Tilki

ileri html

Temel HTML   İleri HTML   Basamaklı Stil Sayfaları (CSS)   Web Renkleri

BELGE TÜRÜ

<html> etiketinden önce belge tipi, DOCTYPE ifadesi ile belirlenebilir. HTML'de üç tip belge türü seçeneği vardır. Bunlar Transitional (Geçişli), Strict (Katı), Frameset (Çerçeve Kümeleri) 'dir.

  • Transitional (Geçişli): Bu belge türü standart HTML üzerine kurulmuş olup artık geçerli olmayan HTML etiketleri ile de uyumludur. Genelde kullanılan belge türüdür. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Strict (Katı) : Uygunluğu kabul edilmemiş etiketleri kabul etmeyen bir belge türüdür. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Frameset (Çerçeve Kümeleri) : Bu belge tipi sayfada çerçeve kullanımına izin verir. Çerçeveler fazla kullanışlı olmadıkları için tavsiye edilmezler. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • Başa Dön


    META ETİKETLERİ

    Oluşturulan belgenin Başlık kısmına sayfanın açıklamasının yapılabileceği ve sayfa hakkında anahtar kelimelerin belirtilebileceği meta etiketler konabilir. Anahtar kelimeler bazı arama motorlarının sayfayı tanımasını ve tespit etmesini sağlar. Yeni nesil arama motorları (Ör : Google) meta etiketlerinin yanısıra belgenin Gövde kısmındaki içeriği de dikkate alır. Aşağıda, meta etiketlerinin content bölümünde açıklama yapılmış ve parantez içinde bu sayfa için uygun örnekler verilmiştir.

    <meta name="author" content="Sayfayı düzenleyenin ismi(ODTÜ-EG)">
    <meta name="Description" content="Sayfanın açıklaması(HTML öğrenmek isteyenler için dersler.)">
    <meta name="keywords" content="Arama motorlarına yardımcı olmak için sayfa hakkında anahtar kelimeler(HTML,ders,web sayfası,web sitesi,bilgi işlem)">

    Eğer sayfa içeriği T ürkçe ise hazırlanan sayfada herhangi bir T ürkçe karakter sorunu yaşamamak için Başlık bölümü içine aşağıdaki meta etiketi eklenir.

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">

    Başa Dön


    STİLLER

    Stil (style) bir biçimlendirme kuralıdır. Bir belgedeki belirli bir etikete uygulanabileceği gibi, bir sayfa içerisindeki etiketin kullanıldığı her belgeye veya belgeler kümesinde belirli bir etiketin kullanıldığı yere uygulanabilen bir kuraldır.

    Tek bir etikete uygulanması etikete style değişkeninin eklenmesi ile yapılır. Aşağıda <h1> etiketi, style değişkenine color özelliği eklenerek biçimlendirilmiştir.

    <h1 style="color:red">Başlık</h1>

    Başlık

    Bir etikete ikinci bir özellik eklemek için style değişkeni içinde ilk özellikten sonra noktalı virgül ve ikinci özellik yazılır.

    <h1 style="color:red; background:AliceBlue">Başlık</h1> Aşağıda başlığın arkaplan rengi AliceBlue olarak belirlendi.

    Başlık

    Eger bir belgedeki veya belirledigimiz belgeler kümesindeki <h1> etiketinin stilini belirlemek istersek Basamakli Stil Sayfaları (CSS) kullanırız. Stil Sayfaları hakkında detaylı bilgiye buradan ulaşabilirsiniz.

    Başa Dön


    BÖLÜMLER

    <div> etiketi ile belgede bölümler oluşturulabilir. <div> etiketi için herhangi bir stil özelliği belirlendiğinde <div>..</div> arasına yazılan tüm etiketler bu stilden etkilenir. Aşağıda oluşturulan bölümde <div> etiketine style="color:#FF0000;" stili uygulandığında bölüm içindeki paragraf ve başlık da kırmızı oldu.

    HTML etiketi Etiketin Web Sayfasındaki görüntüsü

    <div style="color:#FF0000;">
    <h4>Bölüm içinde bir başlık</h4>
    <p>Bölüm içinde herhangi bir paragraf</p></div>

    Bölüm içinde bir başlık

    Bölüm içinde herhangi bir paragraf

    Başa Dön


    SATIR İÇİ KAPSAYICILARI

    Herhangi bir bölümde veya paragrafta diğerlerinden ayrı stile sahip olması istenen herşey <span>...</span> etiketleri içerisine yazılabilir. Bu etiket Basit HTML dersinde kullanılması artık desteklenmeyen <font> etiketi yerine kullanılabilir.

    HTML etiketi Etiketin Web Sayfasındaki görüntüsü

    <div style="color:#FF0000;"><h4>Bölüm içinde bir başlık</h4>

    <p><span style="color:#00FF33"> Bölüm içinde herhangi bir paragraf</span></p>
    </div>

    Bölüm içinde bir başlık

    Bölüm içinde rengi bölümün renginden farklı bir paragraf

    Başa Dön


    RESİM HARİTASI

    Resimlerin faklı bölgelerinden farklı yerlere linkler vermek için resim haritası kullanılır. Örneğin bu sayede Türkiye haritasındaki tüm illere ayrı link verilip kullanıcılar o ille ilgili sayfaya yönlendirilebilir. Resim haritası bir resim üzerindeki tanımlanmış etkin noktaları (hotspots) link olarak belirler. Etkin noktalar dikdörtgen veya yuvarlak olabileceği gibi düzensiz şekiller de olabilir.

    Dikdörtgen etkin noktanın konumu iki noktayla tanımlanır: sol üst ve sağ alt köşeler. Her nokta resmin sol-üst köşesinden yatay ve dikey uzaklığını piksel cinsinden belirten bir sayı çiftiyle tanımlanır. Aşağıdaki örnekte 0,0 etkin noktanın sol üst köşesinin 50,50 de sağ alt köşesinin resmin sol üst köşesine olan uzaklığıdır.

    <map name="haritaismi" id="haritaismi">
    <area shape="rect" coords="0,0,50,50" href="index.htm" />
    </map>

    Yuvarlak etkin noktanın konumunu tanımlamak için üç adet koordinat kullanılır: ikisi (yatay ve dikey değerler) dairenin merkezini tanımlamak için, üçüncüsü dairenin yarı çapı içindir.

    <map name="haritaismi" id="haritaismi">
    <area shape="circle" coords="100,110,50" href="index.htm" />
    </map>

    Çok köşeli etkin noktanın konumunu tanımlamak için şeklin tüm köşelerinin koordinatları kullanılır. Çok köşeli etkin noktalar tanımlanan noktaları birleştiren düz çizgilerden oluşur. Aşağıda beş köşeli bir etkin nokta için gereken kod verilmiştir:

    <map name="haritaismi" id="haritaismi">
    <area shape="poly" coords="310,14,559,195,274,356,5,118,126,411" href="index.htm" />
    </map>

    Aşağıdaki resimde 4 adet geometrik şekle de link verilmiştir. <img> etiketine usemap="#haritaismi" eklendiğinde haritaismi adlı resim haritasına göre resim içerisinde linkler belirir.

    HTML etiketi Etiketin Web Sayfasındaki görüntüsü

     

    <map name="Map" id="Map">
    <area shape="rect" coords="20,158,170,210" href="#" />
    <area shape="circle" coords="130,117,28" href="#" />
    <area shape="poly" coords="97,27,96,40,157,95,164,90,160,27" href="#" />
    <area shape="poly" coords="28,27" href="#" />
    <area shape="poly" coords="21,110,83,111,84,27,26,25" href="#" />
    </map>

    Başa Dön

    => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=