HTML & CSS Dersleri - HTML, BODY Etiketleri 1. Kısım ve Çıplak Özellikleri
03.10.2018 22:14:02

Daha önceki derslerde Body etiketinin diğer görsel etiketlerin tamamını kapsayacağından bahsetmiştik. CSS 3'ün çıkışıyla birlikte bu etiketlerin görsel olarak pek bir anlamı kalmamıştır. CSS 3 ile birlikte her etiket her şekle girdirilebildiği için artık bazı etiketler hariç görsel olarak hepsi aynı şekle girdirilebilmektedir. Bazıları hariç bu etiketler artık belli CSS kodlarının önceden tanımlanmış haline gelmişlerdir. Fakat şekil olarak tüm etiketler artık aynı şekilde gösterilebilir. 


Asla ihtiyacınız olmayacak gereksiz etiketlere yer vermektense ihtiyacınız olacak, kullanacağınız etiketler anlatılacaktır. Şimdi bu etiketlere yakından bakalım.


*** Aşağıda anlatılan etiketler için "çıplak halde bulunmak" diye bir tabir kullanılacak. Bu tabir, CSS ile görsel müdehale edilmemiş anlamına gelmektedir. Aşağıda anlatılan görsel özelliklerin TAMAMINA CSS ile müdehale edip farklılaştırmak mümkündür. Programcılıkta değişmez çok az şey vardır.


*** HTML üzerinde yazılacak <!-- YORUM --> şeklinde bulunan ifadeler tarayıcı tarafından okunmaz. Genelde programcının kendisine veya kendisinden sonra kodlamaya devam edecek kişi için bıraktığı notlar bu bölgeye girilir. İyi bir programcı kendine ve kendinden sonrakilere notlar bırakarak kodlarını yazar. Böylece karmaşanın önüne geçilmiş olur.


*** Aksi belirtilmedikçe yazılan tüm etiketler <etiket> şeklinde açılır ve </etiket> şeklinde kapatılır.


    BODY VE İÇİNE GELEBİLECEK (GÖRSEL) ETİKETLER

   

    0) BODY Etiketi: Bu etiketin Türkçe anlamı GÖVDE'dir. Özelliklerinden daha önce çokça bahsettiğim için tekrarlamaya gerek görülmemiştir. Bu sebeple sıfırıncı etiket olarak listeye girmiştir.

    1) DIV Etiketi (Division): Bu etiketin Türkçe anlamı BÖLÜM'dür. Çocuk etiketlere sahip olabilir. Ekstra bir özellik tanımlaması mecburi değildir. Aşağıda anlatılan standart HTML etiket özellikleri ile CSS haricinde de şekillendirilebilir. Çıplak halde eğer başka bir etiketin çocuğu ise genişliği bu etiketi %100 oranında dolduracak şekilde ön tanımlı olarak ayarlanmıştır.

    2) SPAN Etiketi: Çocuk etiketlere sahip olabilir. Ekstra bir özellik tanımlaması mecburi değildir. Aşağıda anlatılan standart HTML etiket özellikleri ile CSS haricinde de şekillendirilebilir.İçeriğinin genişliği kadar yer kaplaması ön tanımlı görsel özelliğidir. Çıplak halde alt alta span etiketleri yazıldığında ekran genişliği kadar yan yana yazılacak, daha sonra aşağıdan devam edecektir.

    3) P Etiketi (Paragraph): Bu etiketin Türkçe anlamı PARAGRAF'tır. Çocuk etiketlere sahip olabilir. Çıplak halde nasıl yazılırsa yazılsın alt satıra geçmesi, içinde bulunduğu etiketi genişlemesine %100 doldurması ön tanımlı görsel özelliğidir. Yani bir paragraf açmaktadır.

    4) STRONG Etiketi: Bu etiketin Türkçe anlamı GÜÇLÜ'dür. Span etiketi ile aynı mantık ve çıplak görsel düzende işler. Tek farkı içinde bulunan içeriği kalın yazı haline getirmektir. Çocuk etiketlere sahip olabilir ve içerisindeki içeriğin genişliği kadar genişlemesine yer kaplar. SEO ve anahtar kelime belirlenmesinde önemli bir yeri olduğu düşünülmektedir. Değişen arama motoru algoritmalarında bu rol değişebilir.

    5) H1, H2, H3, H4... Etiketleri (Heading): Bu etiketlerin düz Türkçe anlamı BAŞLANGIÇ olsa da BAŞLIK anlamıyla yer alır. Bu etiketin çıplak hali yazı tipinin (font) büyüklüğü ile görsel olarak tanımlanabilir. Yanındaki sayı küçüldükçe yazı tipinin boyutu küçülür. H1 etiketi 14 px boyutundayken, H2 etiketi 12 px ve H3 etiketi daha küçük olacak şekilde sıralanır. Çocuk etiketlere sahip olabilir.

    6) OL Etiketi (Ordered List): Bu etiketin Türkçe anlamı DÜZENLİ LİSTEdir. Çıplak haliyle, annesi olan etiketin içini genişlemesine dolduracak şekildedir. Bu etiketin görünebilir olması için az sonra anlatılacak LI (li), çocuk etiketlere ihtiyacı bulunmaktadır. Ek özellikler tanımlanmadıkça çocuğu olan LI etiketlerinin başına 1,2,3,4 gibi sayılar getirerek numaralandırmaktadır. Ek özelliklerle a,b,c,d gibi harfler de gelebilmektedir. Çıplak halde yüksekliği, çocuğu olan LI etiketleri kadardır.

    7) UL Etiketi (Unordered List): DÜZENSİZ LİSTE şeklinde Türkçeleştirilebilir. Çıplak haliyle OL etiketi ile aynı görsel özelliklere sahip olması dışında tek farkı, altına gelecek çocuk LI (li) etiketlerinin başına sembol koymasıdır.

    *** UL ve OL etiketleri, birbirlerinin içine yazılabilir. Çıplak haliyle üst listenin sol kenarında bir miktar boşluk bulunarak yeni liste oluşturulur. Aşağıda örneklendirilecektir, kafanız karışmasın :-)

    8) LI Etiketi (List Item): MENÜ ÖĞESİ şeklinde Türkçeleştirilebilir. OL veya UL etiketlerinin çocuğu olması mecburidir. Düzenli veya düzensiz listenin öğesini tanımlar. Annesi olan UL veya OL'nin genişliği kadar geniş yer kaplar.

    9) TABLE Etiketi: TABLO şeklinde Türkçeleştirilebilir. Çocuk etiketlere sahip olmadan bir anlamı bulunmaz. Tablolar oluşturmak için kullanılan ANA ETİKETTİR. Alt etiketlerin genişliği ve yüksekliği kadar boyut kaplar.

        a) THEAD Etiketi (Table Head): TABLO BAŞLIĞI şeklinde Türkçeleştirilir. Tabloda kullanılacak kolonların başlığını içerir. Altında TR (Table Row/Tablo Satırı) ve bunun da altında TH (Table Heading/Tablo Başlığı) etiketleri olmadan bir işe yaramaz.

            i) TR Etiketi (Table Row): TABLO SATIRI şeklinde Türkçeleştirilir. THEAD etiketinin çocuğu olarak yazıldığında kolon başlıklarının bulunduğu satırı sembolize eder. Altına TH (Table Heading/Tablo Başlığı)  etiketleri yerleştirilmedikçe bir işe yaramaz.

            ii) TH Etiketi (Table Heading): TABLO BAŞLIĞI şeklinde Türkçeleştirilir. Tablo başlığı hücresidir. THEAD etiketinin çocuğu olan TR etiketinin altına yazılır. Bazı tarayıcılar bu etiketi ORTALANMIŞ ve/veta KALIN YAZI biçiminde ön tanımlı halde sunsa da bazı tarayıcılarda düz yazı halindedir. CSS ile şekillendirilmesi şiddetle tavsiye edilir.

        b) TBODY Etiketi (Table Body): TABLO GÖVDESİ şeklinde Türkçeleştirilir. Tabloda bulunan veri satırlarını içerir. Altında TR (Table Row/Tablo Satırı) ve bunun da altında TD (Tablo Hücresi) olmadan bir anlam ifade etmez.

            i) TR Etiketi (Table Row): TABLO SATIRI şeklinde Türkçeleştirilir. THEAD etiketinin çocuğu olarak yazıldığında kolon başlıklarının bulunduğu satırı sembolize eder. Altına TH (Table Heading/Tablo Başlığı)  etiketleri yerleştirilmedikçe bir işe yaramaz.

            ii) TD Etiketi (Table Division): TABLO BÖLÜMÜ şeklinde Türkçeleştirilse de TABLO HÜCRESİdir. Çıplak halde sola yaslanmış yazı şeklindedir.

   

    10) PRE Etiketi (Preformatted): ÖN BİÇİMLİ şeklinde Türkçeleştirilir. Bu etiketin içerisine yazılan içerik Monospace, yani her harfi aynı genişlikte olan bir yazı tipi ile biçimlendirilir.

    11) A Etiketi: Bu etiketin Türkçe'si bulunmadığı gibi İngilizce'si de bulunmamaktadır. SPAN etiketi ile aynı görsel özelliklere sahip olmasının yanında ön tanımlı olarak altı çizili ve mavi olarak biçimlendirilir. HYPER LINK belirtir, yani bir sayfadan diğer sayfaya yönlendirme/link verir. Bu etikete tıkladığında kullanıcı farklı bir sayfaya yönlenir. Çocuk etiketlere sahip olabilir. HREF özelliği ile gidilecek sayfa belirtilmezse aynı sayfaya yeniden yönlendirme yapacaktır.

        a) HREF Özelliği: Bu özellik <a href="http://www.websanat.net">WebSanat.net</a> şeklinde belirtilir. A etiketine tıklandığında gidilecek sayfayı bildirir. Bu etiketin olmaması durumunda tarayıcı, hangi sayfadan tıklandıysa o sayfayı yenileyecektir.

        b) TARGET Özelliği: Hedef anlamına gelen bu özellik, açılacak sayfanın yeni sekmede mi yoksa aynı sekmede mi açılacağını belirtir.

            i) "_blank" Değeri: TARGET özelliğine bu değer verildiğinde açılacak olan sayfa yeni sekmede açılır. Değerin başında alt çizgi ( _ ) bulunmaktadır.

            ii) "_self" Değeri: TARGET özelliğine bu değer verildiğinde açılacak olan sayfa, daha sonra anlatılacak IFRAME veya direkt tarayıcı penceresi içinde açılır. Her neyin içinde çalışıyorsa aynı şeyin içeriğini yönlendirir. Değerin başında alt çizgi ( _ ) bulunmaktadır.

            iii) "_top" Değeri: TARGET özelliğine bu değer verildiğinde açılacak olan sayfa, daha sonra anlatılacak IFRAME'in içinde olsa dahi direkt tarayıcı penceresini yönlendirir. Değerin başında alt çizgi ( _ ) bulunmaktadır.



Buraya kadar yazılan kodların tümünün bir sayfaya yazsak şöyle görünecektir;



<!DOCTYPE html>
<html>
    <head>
        <title>Sayfa Başlığı - WebSanat.net</title>
    </head>
    <body>
        <div>Buraya bazı yazılar gelecek ve bu yazılar tüm genişliği kaplayacak :-)</div>
        <span>Buraya bazı yazılar gelecek ve kendi genişliği kadar kaplayacak</span>
        <p>Bu bir paragraf ve ne olursa olsun alt satıra geçecek, kendisinden sonrayı da bir satır aşağıdan başlatacak</p>
        <strong>Buraya yazılacak yazı kalın görünecek</strong>
        <h1>Bu büyük bir başlık</h1>
        <h2>Bu biraz daha küçük bir başlık</h2>
        <h3>Bu daha da küçük bir başlık</h3>
        <ol>
            <li>Düzenli liste öğesi</li>
            <li>Düzenli liste öğesi</li>
            <li>Düzenli liste öğesi</li>
        </ol>
        <ul>
            <li>Düzensiz liste öğesi</li>
            <li>Düzensiz liste öğesi</li>
            <li>Düzensiz liste öğesi</li>
        </ul>
        <ul>
            <li>
                <ol>
                    <li>Düzensiz liste içerisinde düzenli liste öğesi</li>
                    <li>Düzensiz liste içerisinde düzenli liste öğesi</li>
                    <li>Düzensiz liste içerisinde düzenli liste öğesi</li>
                </ol>
                <ul>
                    <li>Düzensiz liste içerisinde düzensiz liste öğesi</li>
                    <li>Düzensiz liste içerisinde düzensiz liste öğesi</li>
                </ul>
            </li>
        </ul>
        <table>
            <thead>
                <tr>
                    <th>Tablo Başlığı 1</th>
                    <th>Tablo Başlığı 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Hücre: Satır 1 / Sütun 1</td>
                    <td>Hücre: Satır 1 / Sütun 2</td>
                </tr>
                <tr>
                    <td>Hücre: Satır 1 / Sütun 1</td>
                    <td>Hücre: Satır 2 / Sütun 2</td>
                </tr>
            </tbody>
        </table>
        <pre>
           Buraya
           Bazı Yazılar
           Gelecek
        </pre>
        WebSanat.net adresine gitmek için <a href="http://www.websanat.net" target="_blank">buraya tıklayın!</a>
    </body>
</html>


Bu kodun sitenizdeki görünümü şu şekilde olacaktır;


HTML Etiketleri Bölüm 1



*** Üstteki ekran görüntüsünde tabloların anlaşılabilmesi için hücrelere sınır çizgileri çizilmiştir. Gerçek görüntüde bu çizgiler yoktur. İlerleyen derslerde nasıl çizileceği anlatılacaktır.


Etiketlerin devamı sonraki derste anlatılacaktır.



İçerikle İlgili Görüş & Sorularınız

Bu içerikte hiç yorum yok, neden ilk yorumu siz yapmıyorsunuz?
Yorum yapabilmek için giriş yapmalısınız, üyemiz değilseniz kayıt olmak için tıklayın
+90 555 141 00 25
info@websanat.net
Cemalpaşa Mah. Toros Cad. 63007 sok. Doktorlar Sitesi No:202 Seyhan/ADANA