HTML DERSLERİ 5 serimizde, site üzerinde çalışırken bu işin biraz daha detaylarına ve özünü iniyoruz.
Şu an üzerinde çalıştığımız ders, zaman zaman bizi sıkıyor, çalışma isteğimizin az olduğu dönemlere denk geliyor olabilir.
Bu gibidurumlarda 5 dakika kuralını uygulayabilirsiniz. Yapmanız gereken, sayacı başlatıp sadece 5 dakikanızı bu işe veya o devamlı ertelenene ayırmak. Sonrasında ister kalkarsınız isterseniz başlamışken bu süre daha ayırmaya karar verirsiniz…
Bir önceki serimizde tablolarla örnekler yaptık ve son örnekte <a href> etiketini kullandık.
<a href>
Örneğin, bir otobiyografi siteniz olduğunu düşünelim. Her kişi için ayrı bilgiler yazıyorsunuz. Sitenizi ziyaret eden kullanıcı bu bilgilere ulaşmak istediğinde dinamik sayfaya, URL/link bırakarak bilgi metnini görüntülemesini sağlayabilirsiniz. Site içerisinde, üzerine tıklandığında iç veya dış bağlantılarla gezinti yapmak için kullanılan linke Hiperlink denilmektedir.
Ayrıca bu link üzerine tıklandığında açılacağı konumu da belirtebiliriz;
| target=”_self” | Bağlantı aynı sayfada/sekmede açılır. |
| target=”_blank” | Bağlantı yeni sekmede açılır. |
| target=”_top” | Bağlantıyı herhangi bir sekmede değil, tarayıcı penceresinde açar. |
| target=”_parent” | Bağlantıyı çerçevenin bağlı olduğu bir üst çerçevede açar. |
Bunlardan herhangi birini kullanmak istediğimizde, <a href=”#” target”_blank”>…</a> şeklinde yazarız.
COLORS
HTML’de renkler ad ile tanımlanabilir. 140 standart renk adını destekler. Ayrıca renkler; RGB, RGBA, HSL, HSLA ve HEX öğelerini kullanılarak da belirtilebilir. Bu öğeleri ilerleyen örneklerde göreceğimiz için biraz inceleyelim.
RGB= (Red, Green, Blue) Bu öğe, kırmızı, yeşil, mavi ışık kaynaklarını temsil eder. Uygulayacağımız zaman değerleri (153, 78, 147) bu şekilde istediğimiz renk hangisi ise sayıları ona göre değiştirebiliriz. Renklerin 0 ile 255 arasındaki yoğunluğunu girmiş oluyoruz.
RGBA= (Red, Green, Blue, Alpha) Bu öğe RGB’nin alfa kanallı (opaklık) uzantısıdır. Uygulayacağımız zaman değerleri (140, 93, 190, 0.4) şeklinde yazarız. Opaklık değeri yani; Alfa için 0.0 tamamen opakken 1.0 de opak değil anlamındadır.
HSL= (Hue, Saturation, Lightness) Bu öğe, renk tonu, doygunluk, açıklık anlamındadır. Uygulayacağımız zaman değerleri (305, 54%, 45%) şeklindedir. Hue (renk tonu) 0 ile 360 arasında bir derecedir.
HSLA= (Hue, Saturation, Lightness, Alpha) Bu öğe HSL’nin alfa kanallı (opaklık) uzantısıdır. Uygulayacağımız zaman değerleri (230, 38%, 50%, 0.6) olacak şekilde yazarız.
HEX= (Hexadecimal) Onaltılık. HTML ve CSS’de 16 milyondan fazla renk bulunuyor. Bunlardan sadece 140 tanesini isimle kullanırken geride kalanları renk kodları ile kullanıyoruz. Renk kodları mantığını daha iyi oturtmak için 16’lık sistem kurmuşlar. (0123456789ABCDEF) 0=siyah/koyu F=beyaz/açık anlamındadır. Renk kodları tüm tarayıcılarda desteklenir. Uygulayacağımız zaman renk kodu #8f6193 kalıbı kullanılır. istediğiniz renge göre değerler değişiklik gösterir. Muhakkak 6 tane değer atamanız gerekir.
Renklerin ayarlarını daha yakından incelemek ve değerler arasındaki değişimi görmek isterseniz, W3.Schools ziyaret edebilirsiniz…
HTML ‘de birçok etiket kullanıyoruz. Bu etiketler kendi içinde Block ve Inline olarak ikiye ayrılır. Eğer etiket, kendisi kadar yer kaplıyorsa “Inline” değilse “Block” deriz.
BLOCK – INLINE
Aşağıdaki block etiketlerinden birini kullandığımızda, ekranda görünen sadece etiket olsa da, arka planda satırı tamamen kaplar, bize sadece bu satırın ne kadarını kullandıysak onu gösterir. Yanında yer olmasına rağmen başka bir etiket girdiğimizde otomatik alt satıra atar. Buna “geliştirme” denilir. Neyi geliştirecekse sonuna kadar kullanır. Block yapıp orayı kapatır (bloke eder).
Inline ise daha tevazulu, etiket ne kadar kullanıldıysa o kadar yer kaplar. Yeni bir tag kullanıldığında otomatik yanına yazar. Peki hangi etiketler Block? Hangileri Inline?
| BLOCK | INLINE |
|---|---|
| .<adress> .<article> .<aside> .<blockquote> .<canvas> .<dd> .<div> .<dl> .<dt> .<fieldset> .<hr> .<figcaption> .<figure> .<footer> .<form> .<h1>-<h6> .<header> .<li> .<main> .<nav> .<ul> .<p> .<noscript> .<ol> .<pre> .<table> .<section> .<tfoot> .<video> | .<a> .<abbr> .<acronym> .<code> .<bdo> .<big> .<br> .<strong> .<button> .<cite> .<dfn> .<em> .<i> .<img> .<input> .<kbd> .<b> .<label> .<map> .<object> .<tt> .<output> .<q> .<samp> .<script> .<select> .<small> .<span> .<var> .<textarea> .<sup> .<sub> .<time> |
Kodlar çoğaldıkça düzenini ayarlamak ve nerde ne kullandığınızı geriye dönüp hatırlamak zorlaşabilir. Bir projede bir çok adımdan oluşan kodlar yazmaya başlandığımızda kod aralarına ufak yorum / açıklama bırakabiliriz. Bunun için yorum satırı dediğimiz <! – – ” “ – – > işareti kullanırız. tırnak işareti olan kısım açıklama yazacağımız alandır.
Title etiketini başka bir etiket içerisinde kullandığımızda ilgili yere fare imlecini getirdiğimizde o yerle ilgili bize (tanımlanan) ek bilgiyi gösterir.
Buradaki paragrafta yazılı metnin üzerine geldiğimizde kullanıcıya hangi mesajı ya da bilgiyi vermek istiyorsak, <p> etiketinin içerisine title ile onu yazabiliriz.
Peki bunu bütün paragraf için değil de sadece bir kelime için yapmak istersek;
<abbr> etiketi genelde açıklama için kullanılır. Kısaltmaların üzerine geldiğimizde açıklamasını görürüz.
<hr> etiketi düz çizgi yapmak istediğimizde uygulayabiliriz. Tıpkı <br> gibi bir kez yazmamız yeterli, kapatma </> yapmamıza gerek yoktur.
Paragraf etiketi içerisine şiir ya da bir dörtlük yazmak istediğimizde her ne kadar parçalara bölerek kodlamış olsak da <p> etiketi bunu metin olarak algıladığı için yan yana yazar. Kodladığımız şekilde yazdırmak için <pre> etiketini kullanırız.
Kullanımda pek ihtiyaç duyulmasa da   etiketi, görevi boşluk tuşu ile aynı. Farkı ise tarayıcı, metninizde bulunan 10 boşluk varsa bunun 9’unu kaldıracaktır. Bu da metninizin anlaşılma veya okumadaki aksaklığına sebep olabilir. Bunun önüne geçmek için bölünemez boşluk görevi gören   etiketini kullanabiliriz. Bölünemez denilmesindeki sebep   etiketi karakter varlığı gösterdiği içindir. Uygulayacağınız zaman hangi etiketin yanında kaç tane boşluk olmasını istiyorsanız yanına ” ” şeklinde yazmanız yeterli. Az kullanımlı etiketler olsalar da bazen durumu kurtaran sadece onlar oluyor. Etiketlerin hepsini aklınızda tutamayabilirsiniz bu gayet normal, en azından kullanımını bilmek iyidir. Bunlara benzer bir sorun yaşadığınızda çözümü olduğunu bilmek bile yeter. Keyifli çalışmalar…
Yeni haber ve güncel bilgilerden geri kalmayın!…
