Sıralı – Sırasız Listeler Ve HTML5 & CSS3 Üzerine Açıklamalar

Ders 03: Sıralı – Sırasız Listeler ve HTML5 & CSS3 Üzerine Açıklamalar

CSS Eğitim & Dersler HTML

Herkese merhabalar, 3. video dersimiz ile birlikteyiz.
Bugün web sayfalarındaki liste yapıları üzerinde duracağız ancak gelen sorular üzerine bir kafa karışıklığını giderme konuşması ile
derse girmekte fayda olduğunu düşünüyorum. Çok vaktinizi almak istemem ancak temel bakımından önemli bir konu bu.

Ders 03: Video

Konumuz : HTML5 ve CSS3 diye tabir ettiğimiz şeyler nedir?

HTML5 ile gelen bazı özellikler:

1) Dahili (sayfa içi) ses / video oynatabilme
Video etiketi geldi ve embed kodlarına ya da flash bileşenlerine ihtiyaç duymadan video oynatabilir hale geldik.
Öncesinde flash player, shockwave ya da SilverLight kullanmak zorundaydık.
Kullanıcının bilgisayarında bu üçüncü parti bileşenler yüklü değilse video görüntülenemiyordu.
Bugün Youtube başta olmak üzere HTML5 videolar yaygınlaşmıştır.

2-) HTML5 Çoğu tarayıcı ile uyumludur ve uyumlu olmayanlar için html5shiv.js ya da Modernizr.js gibi javascript çözümleri sunulmuştur.
Modernizr zaten tek başına html5shiv dosyasının özelliklerini de barındırmaktadır.

3) Daha düzenli kod yazma (etiket dili yazımı) imkanı sunmuştur.

4) Responsive (duyarlı = derslerdeki adıyla “tepkisel”) tasarım için mutlak gereklilik halini almış, kullanıcının ekran çözünürlüklerine
göre meta etiketleri ile viewport niteliğini kullanabilme durumu doğmuştur. Böylelikle mobil cihazlardan siteye gelen ziyaretçi ile masaüstü veya dizüstü bilgisayardan gelen ziyaretçiler siteden içerik anlamında tam olarak faydalanmaya başlamışlardır.
Masaüstü görünümünde bir sitenin menüsü sayfanın üst sıralarında yatay bir şekilde dizilmiş iken, mobil görünümünde tıklayınca açılan bir menü olarak karşımıza çıkabilmektedir.

HTML5 ile CSS3 yakından ilişkilidir. Bahsettiğimiz viewport özelliği CSS3 ile birlikte gelen media query adı verilen ekrana göre tepki verilmesini isteyebileceğimiz bileşenler ile desteklenmektedir. Yani kullanıcının ekran genişliğinin 1200 pikselin üzerinde olduğunda gösterilmesini istediğimiz bir web sayfası bölümünü ya da etiketini, ekranının maksimum genişliği 768 piksel olan kullanıcıdan gizleme ya da farklı biçimde gösterme işlemini media query dediğimiz medya sorguları ile yapmaktayız…

CSS3 sayesinde web sitelerinin görsel işleri daha hızlı ve esnek şekilde halledilebiliyor. Photoshop’a daha az ihtiyacımız olacak.

Daha önce JavaScript ile yaptığımız görsel işlevselliği CSS3 ile yapıyoruz. Örneğin animasyon işleri artık CSS3 ile daha performanslı bir şekilde yapılıyor.

Kullanıcının gördüğü alanına ait tüm görsel ayarlar CSS tarafından yapılmalı. Animasyon, renk geçişleri, gölgeler vs. gibi uygulamalar için CSS3’ün transition özelliği kullanılmalıdır.

Bugün genel CSS ve HTML özelliklerini kullanarak :

  • <ul> — Sırasız liste (unordered list)
  • <li> — Liste (maddeleme)
  • <ol> — Sıralı liste (ordered list)

gibi etiketlere değineceğiz. Bunların birleşiminden oluşan bir kitap içeriği sayfası oluşturmaya çalışacağız.

Yaklaşık olarak oluşturmak istediğimiz HTML sayfası şu olsun:

kitap.html adında bir dosya oluşturalım ve içeriği aşağıdaki gibi olsun:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kitabımın İçeriği</title>
    <style>
        h1 {
            font: bold 18px/22pt 'Verdana';
            background-color: #ff4400;
            color: #FFF;
            max-width: 400px;
            text-indent: 10px;
        }

        h2 {
            background-color: rgb(59, 27, 199);
            color: #FFF;
            display: inline;
            padding: 4px 10px;
        }

        ul>li {
            color: rgb(41, 175, 41);
            font-weight: bold;
        }

        ol[type='i'] {
            font-family: 'Arial';
        }

        ol[type="A"]>li {
            font-weight: bold;
        }

        ol[type='i']>li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>HAZIR PORTALLAR KİTABI - İÇERİK</h1>
    <h2>Ünite 1: WordPress</h2>
    <ul>
        <li>WordPress Nedir?</li>
        <li>WordPress Kullanımı</li>
        <ol type="A">
            <li>Kurulumu</li>
            <li>Yönetici Ayarları</li>
            <li>Temalar</li>
            <ol type="i">
                <li>Tema Yükleme</li>
                <li>Tema Değiştirme</li>
                <li>Tema Düzenleme</li>
            </ol>
            <li>Eklentiler (Plug-Ins)</li>
            <ol type="i">
                <li>Eklentileri Bulma ve Yükleme</li>
                <li>Eklentileri Güncel Tutma</li>
                <li>Sık Kullanılan ve Önerilen Eklentiler</li>
            </ol>
        </ol>
        <li>WordPress ve SEO Arasındaki İlişki</li>
        <li>WordPress'in Olumu ve Olumsuz Yönleri</li>

    </ul>
    <h2>Ünite 2: Joomla</h2>
</body>

</html>

Önce direkt olarak <body> …. </body> alanındaki HTML elemanlarından bahsedelim.

<h1> ile “HAZIR PORTALLAR KİTABI – İÇERİK” şeklinde genel bir başlık attık.
<h2> etiketleri ile de ünite başlıklarını yazdık. WordPress ve Joomla gibi … Burada sadece birinci üniteyi konularına göre yapılandırdık. Siz üniteleri dilediğiniz gibi çoğaltabilirsiniz.
Bir <ul> oluşturduk. Buna sırasız liste (unordered list) dendiğini hatırlatmış olalım.. Bu sırasız listenin içerisine yine sıralı veya sırasız listeler oluşturmamız mümkün; ki oluşturduk. Listemizin elemanlarını tanımlamaya başladık ve WordPress Nedir? , WordPress Kullanımı gibi elemanları <li> tag’leri ile yerlerine yazdık. İkinci liste elemanı olan WordPress Kullanımı bölümü için alt liste oluşturduk ve bu listeyi sıralı (ordered) liste olarak seçtik.
<ol> etiketleri ile sıraladığımız bu alt listenin madde işaretinin standart olarak değil de büyük harflerle A,B,C, … şeklinde sıralanmasını istedik. Bunu gerçekleştirmek için bir nitelik (attribute) kullandık. Böylece <ol> etiketi şu şekilde oldu:

 <ol type="A">

Bu listenin altındaki tüm <li> maddeleri A,B,C,D … şeklinde sıralanacaktır. Çünkü listenin type özelliğinde bunun böyle olmasını istedik.
Listemiz “Temalar” başlığına ulaştığı zaman yeni bir maddeleme daha istedik ve:

 <li>Temalar</li>
            <ol type="i">
                <li>Tema Yükleme</li>
                <li>Tema Değiştirme</li>
                <li>Tema Düzenleme</li>
            </ol>

şeklindeki yapıyı oluşturduk. Yine <ol type=”i”> diyerek listemizin küçük Roma rakamları kullanarak oluşturulmasını ayarladık. Yani “Temalar” başlığının alt başlıkları:

i. Tema Yükleme
ii. Tema Değiştirme
iii. Tema Düzenleme


şeklinde dizilmiş oldu. Sonraki madde öğeleri için de buna benzer işlemleri tekrarladık.

Şimdi gelelim CSS seçicileri (selectors) ile ilgili kısma. Yani <style> ….. </style> alanına…

 h1 {
            font: bold 18px/22pt 'Verdana';
            background-color: #ff4400;
            color: #FFF;
            max-width: 400px;
            text-indent: 10px;
        }

Yukarıda <h1> başlığının yazısını: kalın yaptık, yazı boyutunu/satır yüksekliğini ayarladık ve yazı ailesi olarak Verdana’yı seçtik. Arka plan rengini (ulaşmaya çalıştığımız hedefteki gibi) kırmızı, yazımızın rengini de beyaz yaptık. Kırmızı alan çok da uzayıp gitmesin diye maksimum genişliğini (max-width) 400 piksel olarak ayarladık. Yazımızın sola yapışık olmasını beğenmedik ve soldan girinti (indent) olarak 10 pikseli uygun gördük.

h2 {
            background-color: rgb(59, 27, 199);
            color: #FFF;
            display: inline;
            padding: 4px 10px;
        }

Bu bölümde ise iki numaralı başlıklarımızı yani <h2> etiketlerimizi biçimlendirdik. Bu kez arka planı renklendirmede hex renk kodu (#FF4400 gibi) değil de RGB (red-green-blue) değeri kullandık. İsteseydik buna bir de alfa değeri ekler ve arka planı istediğimiz yüzde kadar silik hale getirebilirdik. Örneğin %30 silik bir arka plan için kodumuz:
background-color: rgba(59, 27, 199, 0.7); şeklinde olabilirdi. Biz alfa tercih etmeyip rgb(59, 27, 199); renk kodu ile koyu mavi bir arka plan oluşturduk. Yine color özelliği ile yazı rengimizi beyaz (#FFF) yaptık. <h2> etiketlerimizin görünüm şeklini satır içi ayarlamak için display: inline; stil özelliğini kullandık. Son olarak da nesnenin çerçevesini baz aldığımızda yazının kenarlara olan uzaklığını üstten ve alttan 4 piksel, sağdan ve soldan 10’ar piksel olacak şekilde tayin ettik.

Diğer CSS biçimlendirmelerinde de benzer işler yaptık. Ancak bilerek ve isteyerek farklı seçiciler (selector) kullandık. Bu seçicileri tanımlamakta fayda var:

ul > li : Burada dedik ki “sırasız listelerin DİREKT OLARAK içinde bulunan <li> etiketlerine şu stili uygula…”

ol[type=’i’] : Sıralı (ordered) listelerin SADECE TYPE NİTELİĞİ “i” OLANLARA şu stili uygula… Bu seçim bizim kodlarımızdaki <ol type=”A”> gibi bir elemanın etkilenmesini engelledi. Çünkü type niteliği farklı !

ol[type=”A”] > li : Sadece maddeleme tipi type=”A” şeklinde olan sıralı listelerin içerisindeki <li> elemanlarına şu stili uygula…

ol[type=’i’] > li:hover : Sıralı liste tipi type=”i” şeklinde olan, küçük Roma rakamları ile sıralanmış liste elemanlarının üzerine gelince (hover) renginin değişmesini ve altının çizili (underline) olmasını sağladık. Tabi bu “hover” özelliği bilgisayar kullanıcılarını kapsar. Dokunmatik ekranlı cihazlarda “üzerine gelindiğinde” diye bir tabir kullanmamız söz konusu değildir.

Tüm bunlar sonucunda hedefimizdeki HTML sayfası görüntüsüne ulaşmış olduk. Bu dersteki seçiciler bilerek farklı şekillerde kullanılmıştır. Amaç sizlerin mümkün olan en fazla seçici kullanım örneklerini görmenizdir.

Sonraki dersimizde JavaScript ile tanışacağız.