TeknoKültür

HTML DERSLERİ 2

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.

HTML DERSLERİ-örnekler
HTML DERSLERİ 2 ÖRNEKLER

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…

HTML DERSLERİ #2-yazı stilleri
YAZI STİLLERİ

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…

HTML DERSLERİ #2-style
HTML DERSLERİ 2 <style=” “>

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…

HTML DERSLERİ #2-border
HTML DERSLERİ 2 <style=”border”>

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…

HTML DERSLERİ #2-ul
HTML DERSLERİ 2 <ul>/<li>

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:

  1. 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

HTML DERSLERİ #2-ol
HTML DERSLERİ 2 <ol>/<li>

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.

  1. 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?

HTML DERSLERİ #2-iç içe liste
HTML DERSLERİ 2 Liste İçinde Liste Yapımı

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.

3 Yorum

  1. What’s up to all, it’s in fact a good for me
    to pay a visit this web site, it contains valuable Information.

  2. Hello, its fastidious post about media print, we all be aware of media
    is a wonderful source of information.

  3. First of all I would like to say excellent blog! I had a quick question which I’d like to
    ask if you don’t mind. I was interested to know how you center yourself and clear your mind prior to writing.
    I’ve had a hard time clearing my thoughts in getting my ideas out there.
    I do enjoy writing however it just seems like the first 10 to 15 minutes tend to be lost just trying to figure out how to begin. Any ideas or tips?
    Appreciate it!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu