Neler Öğreneceğim?
- FARKLI RENKTE OLAN METİN ETİKETLERİ
- METİN ETİKETLERİ İLE VURGULAMA KODLARININ KULLANIMI
- LEAD ETİKETİ İLE BERABER KULLANIM
- METİN ETİKETLERİ İLE ARKAPLANLI METİNLER
- ÖZELLEŞTİRİLMİŞ BUTONLAR
- CLOSE (KAPAT) BUTONU
- CARET (AÇILIR MENÜ) BUTONU
- DIV ETİKETİ İLE YAPILMIŞ FLOAT KODLARI
- DISPLAY: BLOCK KODU
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
HTML İÇİN YARDIMCI ÖĞELER
Bu zamana kadar kullanıcı deneyiminin ne kadar önemli olduğundan bahsettik.
Kullanıcı deneyimi demek, o sitenin ne kadar işlevsel olduğunu belirliyor. Şimdi ise, kullanıcı deneyimine yardımcı olan öğeleri inceleyeceğiz.
FARKLI RENKTE OLAN METİN ETİKETLERİ
Bu kısımda öğrenmiş olduğumuz metin etiketlerini, renk kodları ile beraber nasıl kullanabiliriz, bunu öğreneceğiz.
Bu etiketleri oluştururken, daha önceden öğrenmiş olduğumuz varsayılan renk kodlarını kullanacağız.
Renkli metin kodlarımız ise aşağıdaki gibidir :
<p class="text-success">Başarılı</p>
Bu renk kodu yeşil renkte çıktı verir. Ayrıca işlemin başarı ile sonuçlandığını belirtir.
<p class="text-danger">Hatalı</p>
Bu renk kodu ise kırmızı çıktı verir. Özellikle işlemin başarısız sonuçlanması durumunda kullanabilirsiniz.
<p class="text-warning">Uyarı</p>
Bu renk kodu sarımsı bir renkte çıktı verir. Bir uyarı vermek isterseniz bu kodu kullanabilirsiniz.
<p class="text-info">Yeni Bildirim</p>
Bu renk kodu bildirimler için kullanılır. Aynı zamanda mavi renkte çıktı verir.
<p class="text-primary">Primary (Mavi)</p>
Primary direkt mavi renkte çıktı verir. Temel renk kodu olarak bilinir.
<p class="text-muted">Hatalı</p>
Bu renk kodu ise pasif işlemlerde kullanılmak üzere yapılmıştır. Soluk renkte çıktı verir.
RENK KODLARI İLE DİĞER METİNSEL SINIF KODLARININ KULLANILMASI
Diğer sayfalarda birçok tipografi kodu görmüştük. Şimdi ise bu kodların hepsini nasıl bir arada kullanabiliriz buna değineceğiz.
METİN ETİKETLERİ İLE VURGULAMA KODLARININ KULLANIMI
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<p class="text-success"><strong>Başarılı</strong></p>
Daha önceden < strong> kodunu görmüştük. Bu kod sayesinde, yazılar daha kalın bir tipografi ile ekrana yansıyor. Görüldüğü üzere "Başarılı" yazısını yazdıktan sonra, sol ve sağ kısımda etiketimizi açıp kapattık. Ayrıca "text-success" kullanarak yeşil renkte çıktı vermesini sağladık.
Kodumuzun çıktısı ise şekildeki gibi olacaktır:
Çıktıda gözündüğü gibi, varsayılan yazı tipi olan "Semibold" ile çıktı elde ettik. Bununla beraber yazımız kalın yazı tipi ile vurgulanmış oldu.
LEAD ETİKETİ İLE BERABER KULLANIM
Lead etiketini tipografi kısmında öğrenmiştik. Lead etiketi sayesinde, daha ince yani "light" yazılar oluşturabiliyorduk. Bununla beraber, yazılar daha büyük oluyordu. Şimdi bu etiket' nasıl renkler ile beraber kullanabiliriz bunu öğreneceğiz.
Örnek kullanım için gerekli olan kodlarımız ise aşağıdaki gibidir :
<p class="text-danger lead"><em>Hatalı</em></p>
Kodumuzda vurgulanmış kısımda gözündüğü gibi "text-danger" kodundan sonra, bir boşluk vererek "lead" sınıfını yazdık. Bu sayede yazının hem kırmızı olmasını, hem de "lead" stilinde çıktı vermesini sağladık.
Kodumuzun çıktısı ise şekildeki gibi olacaktır:
Resimde dikdörtgen içine aldığım kısımda görüldüğü üzere, yukarıda yazan "Başarılı" yazısından daha büyük ve daha ince yazı elde etmiş olduk. Aynı zamanda yazımız "italik" şekilde çıktı vermiş oldu.
METİN ETİKETLERİ İLE ARKAPLANLI METİNLER
Bu başlıkta metinlerimizi öğrendiğimiz renk kodları ile, nasıl arkaplanlı yapabiliriz bunu göreceğiz.
Renk kodlarını, arkaplanlı metinler için kullandığımız zaman "Primary" kodunun metin rengi beyaz, diğer renk kodlarının ise siyah renk olacaktır.
Arkaplanlı metin kodlarımız aşağıdaki gibidir :
<p class="bg-success">Başarılı</p>
<p class="bg-danger">Hatalı</p>
<p class="bg-warning">Uyarı</p>
<p class="bg-info">Yeni Bildirim</p>
<p class="bg-primary">Primary (Mavi)</p>
Kodlarda görüldüğü üzere "background" teriminin kısaltması olan "bg" yazıp, tire(-) işareti ile renk kodları arasında bağlantı kurduk.
Görüldüğü gibi bu sefer yazılar renkli değil. Onun yerine yazıların arkasına, renk gelmiş oldu.
Bu tarz kullanım çok fazla içeriğin olduğu kısımlarda, yazılar arasında geçiş yapmanızda faydalı olabilir. Bu yüzden "Tablolar" kısmında olduğu gibi burada da renkleri kullanmanız daha başarılı kullanıcı deneyimi oluşturacaktır. Bununla birlikte eğer bu kodların kullanımında sorun yaşarsanız < div> etiketleri ile beraber kullanmanız hataları önleyecektir.
ÖZELLEŞTİRİLMİŞ BUTONLAR
Bu butonlar "close" ve "caret" olmak üzere iki adettir.
"close" butonu kapatma işlemleriniz için veya işlemlerin reddedilmesi gibi durumlarda kullanabileceğiniz bir butondur.
"caret" butonu ise genelde açılır menüler için kullanabileceğiniz bir butondur ve ters üçgen şeklinde bir görünüme sahiptir. Zaten bu görünüm sayesinde alt kısımda birşeylerin olduğu belirtilmektedir.
CLOSE (KAPAT) BUTONU
Kapat butonu adından da anlaşılacağı üzere kapatma işlemleriniz için kullanabileceğiniz bir butondur. Özellikle sekmelerin kapatılması veya daha farklı amaçlarda yapmak istediğiniz işlerde, özellikle silme gibi işlemlerde kullanabileceğiniz bir butondur.
Kodumuzun kullanımı ise < button> koduna sınıf atayarak gerçekleşmektedir. Sınıfımız ise sadece "close" etiketinden oluşuyor, bu yüzden aklınızda kolayca kalacağını düşünüyorum.
Gerekli olan kodlarımız aşağıdaki gibidir :
<button type="button" class="close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span></button>
Göründüğü gibi burada sınıf olarak "close" kullandık, bununla beraber "span" etiketlerine yer verdik. Ayrıca < span> etiketimize "sr-only" sınıfı verdik ve bu etiketi < button> kodları arasında kullandık.
Kodumuzun çıktısı ise şekildeki gibi olacaktır :
Hover efektli çıktı ise şekildeki gibidir:
Göründüğü gibi fare ile üzerine gelindiği zaman renk değişmiştir. "Hover" efekti olduğu için başarılı bir kullanım sunuyor.
CARET (AÇILIR MENÜ) BUTONU
Bu buton sayesinde, alt kısımda birşeylerin olduğunu bildirebilirsiniz.
Butonu kodlarken < span> kodunu kullanacağız, bununla beraber sadece "caret" isimli bir sınıf atayacağız.
Kullanım için gerekli olan kodumuz aşağıdaki gibidir :
<span class="caret"></span>
Göründüğü gibi sadece sınıf kullanarak kodumuzu yazmış olduk.
Kodumuzun çıktısı ise şekildeki gibi olacaktır:
Göründüğü gibi ters üçgen şeklinde, açılır menü için gerekli olan öğemiz oluşturulmuş oldu.
HTML KODUNA ÇEVRİLMİŞ BAZI CSS KODLARI
Bootstrap ile gelen bazı kodlar bulunuyor, bu kodlar CSS tarafında kullandığımız bazı ufak-tefek şeyler ve Bootstrap ile HTML kodlarına çevrilmiş bulunuyor.
DIV ETİKETİ İLE YAPILMIŞ FLOAT KODLARI
Bu etiketler sayesinde CSS ile "float-left;" veya "float-right;" yazmadan, sadece HTML sınıfları kullanarak, aynı işlemi uygulayabilirsiniz.
Kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<div class="pull-left">
<div class="pull-right">
Göründüğü gibi CSS kodlarında olduğu gibi "left" ve "right" kullanarak sınıflarımızı yazmış olduk.
Örnek uygulama için gerekli olan kodlarımız aşağıdaki gibidir:
<div class="pull-left">
<p class="lead">Merhaba</p>
</div>
<div class="pull-right">
<p class="lead">Dünya</p>
</div>
Göründüğü üzere sağ ve sol tarafta gözükmesini istediğimiz öğeyi oluşturmuş olduğumuz "div" etiketinin içerisine yazarak istediğimiz bölgede gözükmesini
sağladık.
Örneğimizin çıktısı ise şekildeki gibi olacaktır:
Resimde göründüğü gibi eklediğimiz öğeler sol ve sağ olmak üzere iki ayrı bölgede çıktı vermiş oldu.
DISPLAY: BLOCK KODU
Display:Blcok kodu CSS tarafında sıkça kullandığımız bir koddur. Bu kod Bootstrap ile HTML sınıfına çevrildiği için CSS olmadan yazabilirsiniz.
Kullanım için gerekli olan kodumuz aşağıdaki gibidir :
<div class="center-block">Merhabalar</div>
Görüldüğü üzere bu çevirme için sınıf olarak "center-block" kullandık.
Bu kod yapılandırılırken yazılmış olan CSS kodları aşağıdaki gibidir :
.center-block{
display: block;
margin-left: auto;
}
.element{
.center-block();
}
HTML türünde olan sınıfımız, yukarıda yer alan CSS kodları kullanılarak oluşturulmuştur.
Posted on Utopian.io - Rewarding Open Source Contributors