Boş Gezenin Boş Kalfası: HTML Orta Seviye

Merhaba.

Daha önce yayınladığım HTML'ye giriş yazımda HTML kodlarına temel bir giriş yapmıştık. Şimdi daha ileri ama tam ileri olmayan orta seviye bir yazı ile devam edeceğiz.

Span ve Div

HTML web sayfası içeriğine anlam kazandırır. <p> içeriğini paragraf yapar, <h1> içeriğini başlık yapar. span ve div tag'leri ise bir anlam kazandırmaz. Sadece içeriği kapsarlar. Ancak CSS ile birlikte kullanıldıklarında işe yararlar. Yani aslında bu tag'ler CSS yardımıyla içeriklere stil vermek amaçlı üretilmişlerdir.

Genel olarak içeriklerinde bir kısım HTML kodu bulunur, class veya id adlandırılmış özellikleri ile CSS kodunda bu elemanlara ulaşılır.

span ve div arasındaki farka gelince, span satır içi stillendirme amacıyla kullanılır. Mesela bir paragrafın içinde bir ya da bir kaç kelimelik yazıyı daha küçük, başka renk ve başka font yapmak için. div ise daha geniş HTML bloklarını içerir. Örneğin bir kaç paragraflık yazılar sayfanın solunda ya da sağında buluna menüler gibi.

<div id="makas">
    <p>Bu çok <span class="kağıt">çılgınca</span></p>
</div>

span ve div eğer yerlerine kullanabileceğimiz anlamı olan elemanlar varken tercih edilmemelidir. Örneğin yukarıda "çılgınca" kelimesi vurgulanmak isteniyorsa <em> de kullanılabilir. Yok ben yazısı italik olsun, rengi de farklı olsun istiyorum diyorsak da em tag'ine sınıf tanımlayarak stili CSS ile değiştirebiliriz. Böyle yaparsak koda bakıldığında span varken burada bu kelimeye bir şey yapılmış ama ne diye düşüneceğimize em varken kelimeye vurgu yapılmış ama stiliyle de oynanmış diye düşünürüz.

<div id="makas">
    <p>Bu çok <em class="kağıt">çılgınca</em></p>
</div>

class ve id özelliklerinin ne işe yaradığını nasipse "CSS orta seviye" yazımızda anlatacağız. Bu kısımdan anlamamız gereken div ve span içeriklerine bir anlam vermeyen tag'lerdir.

Not: HTML5 ile beraber sayfanın belli bölgeleri için div'e göre daha anlamlı tag'ler olsun diye article , header , footer gibi ilaveler yapıldı. Bunların da bir kısmını yazımızın ilerleyen kısımlarında göreceğiz.

Text: Kısaltmalar, Alıntılar ve Kod

Yazılarla ilgili temel konuları ilk bölümde başlıklar, paragraflar, vurgular olarak gördük. Başka text işleyen tag'ler de var. Burada kısaltmalar (abbr), alıntılar (blockquote) ve program kodları (code) üzerinde duracağız.

Kısaltmalar - abbr

abbr bir kısaltmayı gösterirken kullanılır. İçerikte kısaltılmış kelime varken açılımı title özelliğinde yazılır.

<p>Bu web sitesi <abbr title="HyperText Markup Language">HTML</abbr>
 ve <abbr title="Cascading Style Sheets">CSS</abbr> hakkındadır.</p>

Şu paragrafı verir -
Bu web sitesi HTML ve CSS hakkındadır.

Kursörü kısaltmaların üzerinde gezdirdiğimizde açılımını gösterecektir.

Alıntılar - blockquote

blockquote ve q tag'leri alıntı olan bir cümle gösterirken kullanılır. blockquote genelde paragraf yada cümleler gibi ayrı bir blok şeklinde alıntıyı göstermek için kullanılırken, q satır içinde , cümle içinde birinden alıntı yapacaksak kullanılır. Eğer alıntının kaynağı internette bir adreste ise cite özelliği ile bu adres verilebilir

    <p>Sonra Ahmet abime sordum bu pandemi ne demekki 
diye bana şöyle cevap verdi <q>bildiğim kadarıyla bunalrın hepsi yalan dolan 
işler</q>. Baktım Ahmet abiden fayda yok internete baktım ve şunu buldum:</p>

    <blockquote cite="https://tr.wikipedia.org/wiki/Pandemi">
 <p>Pandemiler veya pandemik hastalıklar, bir kıta hatta tüm dünya yüzeyi gibi 
çok geniş bir alanda yayılan ve etkisini gösteren salgın hastalıklara (epidemilere) verilen 
genel addır.</p>
    </blockquote>

HTML 5 ile gelen figure ve figcaption elemanları ile birlikte kullanıldığında blockquote çok daha etkili bir görünüm oluşturur.

<figure>
    <blockquote><h3>Hayatta en hakiki mürşit ilimdir, fendir</h3></blockquote>
    <figcaption>Mustafa Kemal ATATÜRK</figcaption>
</figure>

Code

code bir bilgisayar programını gösttermek amaçlı kullanılır. İçinde <var> kullanarak değişkenleri <samp> kullanarak örnek çıktıyı ve <kbd> kullanarak tuş takımından değer girişini ifade ederiz.

<p>Eğer <code>destroy_planet</code> subrutinine 
<code><var>givevaderachuckle</var> = true;</code> satırını eklerseniz ve konsolda 
<kbd>ilovejabba</kbd> yazarsanız , büyük yeşil kötü ölüm yıldızı gezegenin yüzeyine 
<samp>Slug Lover!</samp> diye yazı kazır.</p>

Bu code tag kullanımı Prism.css ile birlikte bu okuduğunuz sayfada pek çok kullanılıyor. Renklendirilen kodlar code tag ve css yardımıyla oluşuyor.

Preformat yazılar

pre tag ile içerikteki yazıda yer alan boşluklar, tablar, alt satıra geçmelerin hepsi geçerli olur. Hatırlarsanız paragraf gibi diğer HTML tag'ler boşlukları ve yeni satıra geçmeleri iptal ediyordu. Bir programı web sayfamızda göstermek istiyorsak program içine bir sürü alt satıra geçme, indent, boşluklar tablar olacağından ve bunların hepsi gösterilmesi gerektiğinden dolayı pre ve code içiçe kullanılır.

<pre><code>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

Şöyle bir çıktı verir,

< - < ve > > karakterleri yerine konan eşlenik yazılardır. Çünkü bu karakterleri kodumuza koyduğumuz anda tarayıcı onları Tag başlatma ya da bitirme işareti olarak algılar. İnanmazsanız deneyin ne çıktı alacağınızı.

Meta Tag'ler

Meta tag'ler sayfada görünecek bir işlem yapmazlar. Ama arama motorları için sayfa hakkında katalog bilgileri barındırırlar.

meta tag'ler <head> elemanı içine konulurlar. Bunların içinde en çok rastlayacaklarımız charset , name , http-equiv ve content. name ya da http-equiv özelliği kullanıldığında content özelliği ile birlikte data'yı verirler.

name

name özelliği istediğimiz herhengi bir şey olabilir. En çok kullanılan değerler author , description ve keywords değerleri. author sayfanın yazarını belirtmek için kullanılırken description arama motorlarının sayfada ne konuda içerik olduğunu anlamasını sağlar.

Meta tag kullanarak arama motorlarını provoke etmek çok kullanılmaya başladı. Özellikle keywords içinde sayfayla alakası olmayan şeyler kullanılarak arama motorlarından sayfaya herkesin gönderilmesine çalışılıyor. Bu yüzden bir çok arama motoru sayfanın içeriğine daha çok odaklanmaya başladılar. Özellikler sayfa içinde kullandığımız başlıklarda kullandığımız kelimele ve cümleler daha etkili olmaya başladı.

http-equiv

Bu tag ile sayfayı barındıran server'a sayfa hakkında bilgi verilir.

content-type sayfada kullanılan karakter setini belirtmek için kullanılır.
default-style ile link olarak verilen yada style tag stillerden hangisinin default olduğu belirtilir.
refresh sayfanın saniye olarak ne sıklıkta tekrar yükleneceğini veya başka bir sayfaya yönlendirileceğini belirtir. Pek kullanılan bir şey değildir.

Sayfada kullanılan karakter seti için charset özelliği kısaltma olarak kullanılır. <meta charset="utf-8"> satırı <meta http-equiv="content-type" content="text/html; charset=utf-8"> satırı ile aynı anlama gelir.

<head>
    <title>Klimalar? Evet Klimalar!</title>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="3"><!--tavsiye edilmez-->
    <meta name="description" content="Bu benim klimalar hakkında gerçekten ama GERÇEKTEN
    heyecan verici sayfam">

Tablolar - rowspan ve colspan

İlk bölümde tabloları anlatırken görsel üzerinde pek durmamıştık, tablo hücrelerini birbirinden ayırt etmek neredeyse imkansızdı. Arka arkaya gelen hücreler tek bir satır gibi görünüyordu. rowspan ve colspan özellikleri ile bu konuyu çözebiliriz.

İlk bölümdekine benzer bir tablo sayfası yapalım.

        <table border="1">
            <tr>
                <th>Sütun 1 Başlık</th>
                <th>Sütun 2 Başlık</th>
                <th>Sütun 3 Başlık</th>
            </tr>
            <tr>
                <td>Satır 1, sütun 1</td>
                <td colspan="2">Satır 1, sütun 2 ve sütun 3</td>
            </tr>
            <tr>
                <td rowspan="2">Satır 2 ve satır 3, sütun 1</td>
                <td>Satır 2, sütun 2</td>
                <td>Satır 2, sütun 3</td>
            </tr>
            <tr>
                <td>Satır 3, sütun 2</td>
                <td>Satır 3, sütun 3</td>
            </tr>
        </table>

Tabloya border özelliği vererek hücrelerin daha net görülmesini sağladık, sonr akaldırılabilir. Bir hücrede collspan="2" dediğimizde o hücrenin 2 sütunu işgal edeceğini bildiriyoruz. İki satırın aynı sütununa gelen hücrelerini birleştirmek için se rowspan="2" diye yazarız.

İlk satıra dikkat edersek td yerine th elemanı kullanılarak tablo için sütun başlığı olarak belirtiyoruz.

Görüntü şöyle olacaktır.

Description List

İlk bölümde list elemanları incelerken sıralı (ol) ve sırasız (ul) listelerden bahsettik. Bir diğer list elemanı da açıklamalı liste dl . Bu listelerde bir konu ve açıklaması gibi sıralama vardır. dl listenin tamamını kapsarken dt konuyu dd açıklamasını vermek için kullanılır.

        <h1>Bazı rastgele bilgiler</h1>

        <dl>
            <dt>HTML</dt>
            <dd>HyperText Markup Language kısaltılmışıdır - 
            web sayfalarını yazmak için kullanılan dil.</dd>

            <dt>Köpek</dt>
            <dd>Etoburlar familyasından evcil olabilen bir hayvan</dd>

            <dt>Muu suyu</dt>
            <dt>Kedi birası</dt>
            <dt>Süt</dt>
            <dd>İnekler tarafından insanlar sömürsün diye 
            üretilmiş beyaz sıvı</dd>
        </dl>

Text - adres , tanımlama , çift yönlü , editörel

Şimdiye kadar bir sürü text ile ilgili tag gördük , bunlardan başka gereksiz tag'ler var bir kaç tane. Eğer bunlardan biri bir web sayfasında karşınıza çıkarsa bilin ki süper harika bir web tasarımcısıyla karşı karşıyasınız.

address

address özel olarak kişi ayrıntıları yazarken kullanılır.

        <h3>Yazarın bilgileri</h3>
        <address>
            <ul>
                <li>0123-456-7890</li>
                <li>yazar_biri@hicbiryer.com</li>
                <li>http://www.hicbiryer.com/contact/</li>
            </ul>
        </address>

Açıklamalar

dfn ile aynı kısaltmalardaki gibi title özelliğinde açıklamamızı yazarız.

<p>Bob'un annesi <dfn title="Köpek">Canine</dfn> ve babası 
<dfn title="At">Equine</dfn> onu oturttular ve dikkatlice ona bir <dfn title="Farklı türlerin 
kromozomlarının birleşmesinden oluşan bir mutasyon">allopolyploid</dfn> organizması 
olduğunu anlattılar.</p>

Kelimelerin üzerine kursörü getirdiğimizde açıklamalar gelecektir.

Çift yönlü yazı

bdo ile yazıyı ters yönde yazabiliriz. dir özelliği yazının yönünü belirler. rtl sağdan sola ltr soldan sağa doğru olur.

<bdo dir="rtl">god lmth</bdo>

Editöryel

ins ve del ile editörün yaptığı ilave ve silmeler ifade edilir. Her türlü yazılarda kullanılabilir ancak genellikle yazılarda editörün yaptığı düzeltmeleri göstermek için kullanılır. datetime özelliği ile değişimin yapıldığı zaman da bildirilebilir. cite ile de değişimin sebebine link verilebilir.

 <p>I have decided to <del datetime="2013-01-26">decrease</del> 
 <ins cite="http://www.icecreamforall.com/changeofpolicy/">increase</ins> the amount of free 
ice cream that the State will provide for its citizens.</p>

Genel olarak del elemanın yazıların üstü çizilir ve ins elemanın yazıların altı çizilir.

Bölümlendirmek

Başlıklar sayfamızdaki bölümler için çok faydalı olsalar da bölümlendirme için kullanılan başka şeyler de var.

div elemanları bölümlendirme için çok kullanılsalar da daha anlamlı elemanlar kullanarak kodumuzdaki bölümü belirtebiliriz.

Article ve section

Bir article elemanı tek başına bir bölüm ifade edebilir. Ama onu section ile alt bölümlere ayırmak kodumuzu daha anlanabilir yapacaktır.

        <article>
            <section id="intro">
                <p>Giriş yazısı</p>
            </section>
            <section id="main_content">
                <p>İçerik</p>
            </section>
            <section id="related">
                <ul>
                    <li><a href="o.html">Bağlantılı yazı</a></li>
                    <li><a href="bu.html">Bağlantılı yazı</a></li>
                </ul>
            </section>
        </article>

Bu şekilde yapmak div elemanları ile yapmaktan çok daha anlamlı görünüyor.

Header ve Footer

header ve footer ile çok daha anlamlı bölümlendirmeler yapılabilir.

<article>
    <header>
        <h1>Değişik&hellip;</h1>
        <p>Giriş yazısı</p>
    </header>
    <section id="main_content">
        <p>Ana içerik</p>
    </section>
    <footer>
        <p>Son notlar</p>
    </footer>
</article>
<footer>
    <p>Kopya hakları vs.</p>
</footer>

İki footer konmuş biri artikelin içinde diğeri ise sayfanın footer'ı gibi.

Navigasyon

nav elemanı genellikle sayfaların üsütünde yer alan site içi linkleri belirtmek içindir.

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Eğitimler</a></li>
        <li><a href="/techniques/">Teknikler</a></li>
        <li><a href="/examples/">Örnekler</a></li>
        <li><a href="/references/">Referanslar</a></li>
    </ul>
</nav>

Bu kodun sayfanın üzerindeki linklere dönebilmesi içinse bir hayli CSS ile stilleri değiştiriliyor. Ama o bu yazının konusu değil.

Bu yazı da bu kadar. Sonrakin de CSS'e geçelim de görsel olarak gözümüz şenlensin. Kalın sağlıcakla..

Boş Gezenin Boş Kalfası

Hakkımda

30 Mayıs 2020 Cumartesi

HTML Orta Seviye