HTML DERSLERİ 2 SERİSİNDE ÖRNEKLER İLE YENİ ETİKETLERİ ÖĞRENİYORUZ…
<Bir olayın hem sorunu hem de çözümü yine kendisinde saklı olabilir mi?> Kodlarla ilgilenmeye başladıysanız bu sorunun cevabını yaşayarak rahatlıkla öğrebilirsiniz.
Bu bölümde, yeni etiketleri bir konu üzerinden öğreneceğiz. Bir önceki yazıda bahsettiğimiz head <h1> ve paragraf <p> kullanımını hatırlarsak; head (h1,…, h6) sitenin üst başlığını, paragraf da altına metin eklememize yardımcı olan etiketlerdi. Bakalım HTML dünyasında daha neler var?
YAZI STİLLERİ
Etiketleri öğreneceğimiz konu örneğin; şehirler olsun. Burada yazı stillerinin etiketlerini şehirlerde inceleyelim…
Yazı stilleri:
- <b> yazıyı kalın </b>
- <small> küçük </small>
- <del> üstü çizili </del>
- <i> italik </i>
- <q> tırnak işaretli </q>
- <tt> daktilo </tt> stilinde yazar.
STYLE ETİKETİ
Etiket içerisindeki tüm kelimelere aynı stili uygulamak için “style” etiketini inceleyelim…
Style: Burada başlığa renk katması için <h1> tagın içerisinde kullandık. Eğer paragrafı da renkli yapmak isteseydik o zaman <p style=”color:… ;”> şeklinde olurdu.
Stil için ayrı bir etiket açmayıp, hangi etikete style uygulanacaksa onun içerisine yazıyoruz. Şehirlerin yazı stili için <b> tagını seçtik, üst kısımda daha anlaşılır olması için etiketi her defasında açıp / kapatarak aynı işlemi yaptık. Aslında alt kısımda kısa yolu var. Eğer kelimelerimize uygulamak istediğimiz stil hepsi için aynı ise <b> tagını bir kez açıp keliemleri, şehirleri ya da yazmak istediğiniz yazıları yazdıktan sonra </b> tagı ile kapatabiliriz.
Eğer style her bir şehir için farklıysa o zaman her tagın içerisine tekrar style yazmak gerekir. Peki paragrafın yazı boyutunu büyütmek isteseydik? O zaman, <p style=”font-size=50px” > ‘ı kullanmamamız gerekir.
Yine aynı örnek üzerinden giderek “border“ı inceleyelim…
Adı kadar yaptığı işte de havalı olan border stiline geçtik. Border, yazdığımız yazıyı çerçeveliyor. Kenarlık olarak anılan border’ın yanına yazdığımız rakam, bu kenarlığın ne kadar kalınlıkta olmasını istiyorsak ona göre daha kalın veya daha ince olmasını sağlıyor. Solid ise çizgi anlamında, bu çerçevenin düz çizgi şeklinde olmasını istediğimizi ve rengini de yanına yazarak belirtmiş olduk.
Örnekte border style‘in içerisinde yer alıyor. Bir önceki örnekte “color” ile yerini değiştirdik. Bu şekilde belirlemiş olduğumuz şehirlere kenarlık eklenmiş oldu.
LİSTELER
<ul> Sırasız Liste
Konuyu biraz daha ileri taşırsak, bu şehirleri liste halinde nasıl yazacağımızı inceleyelim…
ul: açılımı unordered list yani sırasız liste. Eğer liste herhangi bir düzen içerisinde olmayacaksa <ul> tagını kullanabiliriz. Sırasız olacağını belirttikten sonra <li> yazarak listeyi başlatabiliriz. Ayrıca listeye style ekleyerek görselleştirmek isterseniz; style listenin hepsine uygulamak için <ul style=” “> yapabilir, birbirinden farklı stiller olacaksa <li style=” “> şeklinde yazabiliriz. (Not: Yeni öğrenilen konuya bir öncekini eklemek konuyu daha iyi pekiştirmenize yardımcı olacaktır.)
Ayrıca <ul> listeleri için de stiller vardır. Sırasız da olsa işaretler önemli tabi… Burada yapmamız gereken tek şey, stili seçmek <ul style=”list-style-type:disc;“> Burada <ul> da style olduğunu bildirip listede kullanacağımız stil tipini yazıyoruz.
Stil tipleri şu şekildedir:
- Stil tipi (varsayılan)disc; “●” içi dolu daire
2. Stil tipi circle; “○” içi boş daire
3. Stil tipi square; “■” içi dolu kare
4. Stil tipi none; işaret olmamasını sağlar.
<ol> Sıralı Liste
ol: açılımı ordered list yani sıralı liste. <ol> tagını yazdığımızda <li> tagı otomatik numara alarak kendisini sıraya dizer. Fark ettiniz mi? <li> tagı <ul> ya da <ol> tagından sonra geldi. Aslında sadece direkt olarak <li> de yazabiliriz. Ama o zaman ilk yaptığımız örneklerle arasındaki tek fark <br> yerine <li> kullanmış olacaktık ki ikisi de aynı sonucu verirdi. Hatta bazı yerlerde <li> için ul / ol tagının çocuğu ifadesi geçer. <ol> listeleri için de stiller vardır. Nasıl sıralandığı da önemli… Burada yapılması gereken daha kısa <ol type=”1″> direkt listede kullanacağımız stil tipini yazıyoruz.
- Stil tipi (varsayılan) ” 1 “; Numaralı sıralanır.
2. Stil tipi ” A ” / ” a “; Büyük ya da küçük harfle yazılmasına bağlı olarak alfabetik sıralanır.
3. Stil tipi ” I ” / ” i “; Büyük yada küçük harfle yazılmasına bağlı olarak Roman rakamları ile sıralanır.
Ve son örnek, eğer bu şehirlerin ilçelerini de liste halinde yazmak isteseydik nasıl yazardık?
Normal sıralı bir liste yapar gibi <ol> tagı ile başladık. Listemizin ilk sırasına <li> ile Ankara’yı yazdıktan sonra onu kapatmıyoruz ki içerisinde bir liste daha oluşturmaya başlamak için. Ankara’ya ait ilçeler bunun içerisinde listeleneceği için tekrar <ol> tagını yazarız. Şimdi sıra geldi bu ilçeleri <li> ile yazmaya, burada da tip olarak “a” stilini seçtik ve listeyi bu şekilde sıraladı. Listeleme işimiz bittiğinde, önce ilk baştaki </ol> tagını sonra Ankara için açtığımız </li> tagını kapatıyoruz. Tagları kapatmayı unutmayın. İlerde iç içe liste çok işinize yaracak. Bundan sonra yazılacak olan şehirleri mantığı yine aynı sadece İstanbul listesinin ilçelerini yazalım. Liste tipi olarak “i” stili kullandık. Bu şekilde çoğaltabiliriz.
<Bölüm Sonu>
HTML DERSLERİ 2 Yeni etiketlerle dolu bir bölüm oldu. Deneme, yanılma ile örnekleri uygulayabilirsiniz. Ya da hangisi kolay geldiyse onunla da başlayabilirsiniz. Çalışma için henüz bir program edinmediyseniz eğer; w3schools web sitesinde ‘try’ butonuna bastığınızda oradaki kodlarla çalışmanıza fırsat veriliyor. Bu şekilde hem el alışkanlığı kazanırsınız hem de istediğini yerde istediğiniz zaman HTML çalışabilirsiniz.
Hangi konuda olursa olsun bir amaç için yola çıktıysanız eğer kararınız yolunuzdaki ışık, azminiz de bu yolda yürüme gücünüz olur. Pes etmeyin! Keyifli çalışmalar….
Yeni haber ve gelişmelerden geri kalmayın.
