1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Dersleri 2- Yazı Etiketleri

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 14 Şubat 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    Merhaba devrelerim. HTML derslerinde kaldığımız yerden devam ediyoruz. Bu dersimizde artık internet sayfamıza içerikler oluşturacağız. Yazı etiketleri ile başlıyoruz.
    Önceki Konu

    1- Başlık Etiketleri
    Sayfamıza bir başlık eklemek için "header" yani "başlık" anlamına gelen "h1" ile "h6" arası değişen etiketleri kullanırız. Başlığın boyutu rakamlarla ilgilidir. "h1" en büyük "h6" en küçük başlıktır. Şimdi şöyle bir çalışma yapabiliriz:
    HTML:
    <h1>Birinci Başlığım</h1>
    
    <h2>İkinci Başlığım</h2>
    <h3>Üçüncü Başlığım</h3>
    <h4>Dördüncü Başlığım</h4>
    <h5>Beşinci Başlığım</h5>
    <h6>Altıncı Başlığım</h6>
    [​IMG]
    Resimde gördüğünüz gibi büyükten küçüğe doğru 6 tane başlık oluşturduk.

    2- HR Etiketi
    Bu etiketin yazıyla bir ilgisi yoktur aslında.
    ________________________________________________________________________________________________
    HR etiketi yukarıda gördüğünüz gibi düz bir çizgi oluşturur. Yani sayfaya görsellik katar. HR etiketi <hr/> şeklinde özel bir kullanımı vardır. Bu HR etiketini kullanarak daha deminki başlık çalışmamızı şöyle güzelleştirebiliriz.
    HTML:
    <hr/>
    <h1>Birinci Başlığım</h1>
    <hr/>
    <h2>İkinci Başlığım</h2>
    <hr/>
    <h3>Üçüncü Başlığım</h3>
    <hr/>
    <h4>Dördüncü Başlığım</h4>
    <hr/>
    <h5>Beşinci Başlığım</h5>
    <hr/>
    <h6>Altıncı Başlığım</h6>
    <hr/>
    [​IMG]

    Resimdeki gibi görsellik açısından daha güzel bir çalışma yapmış olduk.

    3-Paragraf Etiketi
    Bir paragraf oluşturmayı sağlar ama paragraftan kasıt ille de uzun bir yazı olmak zorunda değildir. Kısa bir cümle de olabilir. İşareti "p" dir. Örnek:
    <p>Burası kısacık bir paragraf</p>

    4- Blockquote Etiketi
    Bu da bir çeşit paragraf etiketidir diyebiliriz. Tek farkı yazının sayfaya doğru biraz daha girintili olmasıdır. Kullanımı "p" etiketi ile de aynıdır.

    "P" Etiketi ile "blockquote" Etiketi:
    [​IMG]

    5- Satır Atlama Etiketi

    Yazımızın herhangi bir yerine yazılarak satır atlatılır. İşareti "br" dir ve kullanımı <br/> şeklinde özel kullanım grubundadır. <br/> yazarak bir satır atlanabiliyor peki iki satır atlamak için?
    <br/> <br/> şeklinde iki kere "br" etiketini kullanırız.

    6- Boşluk Bırakma İşareti
    HTML'de yazı yazarken boşluk tuşuna bastığımızda varsayılan olarak bir boşluk bırakılır. Ama buna dikkat edin: "varsayılan olarak!" yani bu ne demek? İki kere boşluk tuşuna bastığımızda yine bir tane boşluk bırakılacak. Peki daha fazla boşluk bırakmak
    için ne yapmalıyız? Bunun için kullanacağımız. "&nbsp;" şeklinde bir işaret var. Bu işaret bir etiket değildir. Bu yüzden "<" ve ">" işaretleri arasına yazılmaz. İki kelime arasına 3 boşluk bırakmak için 3 tane &nbsp; işareti yazılır.

    7- Pre Etiketi

    Diyelim ki biz bir paragraf yazacağız. Ama istiyoruz ki paragrafımızdaki her kelime arasında 3 boşluk ve her cümle arasında 3 satır boşluk bırakacağız. Şimdi biz her kelime arasına 3 tane "&nbsp;", her cümle arasına 3 tane <br/> etiketi yazmakla mı uğraşacağız? Hayır, yazımızı paragraf yani "p" etiketi arasına yazmak yerine "pre" etiketleri arasına yazarak; hiç boşluk işareti ve satır atlama etiketi kullanmadan yazımızı yazabiliriz.

    8- B ve Strong Etiketleri
    İkisi de aynı işlevdedir. Yazının istediğiniz yerini kalın yapmanızı sağlar.
    <b>Ayyıldız Tim</b> 2002 yılında kurulmuştur.
    <strong>Ayyıldız Tim</strong> 2002 yılında kurulmuştur.

    Sonuçta: "Ayyıldız Tim 2002 yılında kurulmuştur." şeklinde bir yazı bizi karşılayacak.

    9-İ ile Em Etiketi
    Bu ikisi de aynı işlevdedir. Yazıyı italik göründürürler.
    <i>Osmanlı Devleti</i> 1299 yılında kurulmuştur.
    <em>Osmanlı Devleti</em> 1299 yılında kurulmuştur.

    Sonuçta: "Osmanlı Devleti 1299 yılında kurulmuştur." şeklinde bir yazı ile karşılaşacağız.



    Kafanızda şöyle bir soru oluştu, biliyorum: B ile strong; i ile em etiketi aynı işe yarıyorsa ikisinin ne farkı var? Bu sizin ne amaçla kullanacağınıza göre değişir. Eğer siz sadece index hazırlayacaksanız hangisini kullanacağınızın bir önemi yok. Ama eğer kendinize bir site kuracaksanız yazıyı kalın yazmak için "strong" italik yazı yazmak için "em" etiketini kullanmanızı tavsiye ederim. Çünkü google buna öncelik veriyor. Yani siz google'de bir şey arattığınızda yüz binlerce site çıkıyor ve bu yapacağınız şeyler küçük detaylar da olsa sizin sitenizin aramada google'nin ilk sayfalarında çıkmasını sağlayabilir. Bunu da kafanıza bir not olarak düşelim.

    10- U Etiketi
    Altı çizili yazı yazmada kullanılır.
    <u>Bu yazının altı çizilidir. </u>

    Sonuç yazımız: Bu yazının altı çizilidir.

    Not: Bir yazıyı hem kalın hem italik hem de altı çizili yazabilirsiniz. Örnek:
    <u><i><strong>Diriliş Ertuğrul</strong></i></u>

    Sonuç: Diriliş Ertuğrul

    11- Big ve Small Etiketi
    Bir yazıyı varsayılan halinden büyük yapmak için "big", küçük yazmak için "small" etiketi kullanılır.
    <big>Ben büyüğüm</big>

    Sonuç yazımız:
    Ben büyüğüm

    <small>Ben küçüğüm</small>

    Sonuç yazımız:
    Ben küçüğüm


    12-ABBR ve ACRONYM Etiketleri
    Yine bu ikisi de aynı işi görür. Ama bu sefer farklı bir durum var. İlerideki derslerde biz Html 5'e geçiş yapacağız ama "Acronym" etiketi html5 desteklemez. Bu yüzden
    örneğimi "abbr" etiketi üzerinden yapacağım. Bu etiket kısaltma yazılarının yazımında kullanılıyor. <abbr>TSK</abbr> şeklinde kısaltmamızı yazmış olduk. Bunun yerine paragrafın içine sadece "TSK" yazsak olmuyor muydu? Oluyordu ancak biz daha yapmak istediğimizi yapmadık. İlk parametremizi şimdi öğreneceğiz. ;) Şimdi "abbr" etiketimizi açtığımız kısmını şu şekilde düzenliyoruz:
    <abbr title="Türk Silahlı Kuvvetleri">TSK</abbr>
    Açıklayalım: "abbr" etiketinin açılış kısmına "title" parametresini ekledik. "Title" kodunun hem etiketi hem parametresi var. Head etiketinin içinde kullanılmıyor muydu, diye sormayın. Title parametresi burada "açıklama" görevi görüyor. Title parametresini yazdıktan sonra "=" işareti koyup açıklamamızı tırnak içine alıp yazdık. Daha sonrasını zaten biliyorsunuz.
    Şimdi bu yazdığımız ne işe yaradı? Resimde gördüğünüz gibi TSK yazısın üzerine imleci getirdiğimizde "Türk Silahlı Kuvvetleri" açıklamamız baloncuk şeklinde gözüküyor.
    [​IMG]
    Devrelerim, bu dersimizin de sonuna geldik. Artık html'de yazı yazma ile ilgili çoğu şeyi biliyoruz. Konuyu beğenerek derslerin devamı için bana destek olabilirsiniz. Ayrıca anlamadığınız bir yer olursa sorun. Yorumlarınız benim için değerli. İyi günler... :)
     
    • Guest
    Katılım:
    24 Aralık 2016
    Mesaj:
    336
    Alınan Beğeniler:
    658

    Özel Mesaj
    Devrem eline sağlık. Renk kodları ile ilgili konu açmayı düşünüyor musun?
     
  2. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    Renk kodlarını ileride CSS Derslerinde vermeyi düşünüyorum devrem. Daha gelişmiş ve daha sağlıklı. Biz şuan XHTML öğreniyoruz ve XHTML'de yazı rengi <font> etiketi ile sağlanıyor. Ancak ileride html5'e geçiş yapacağız ve html5 <font> etiketini desteklemez. Bu yüzden renk kodlarını CSS'ye bırakıyorum.;)
     
    • Guest
    Katılım:
    24 Aralık 2016
    Mesaj:
    336
    Alınan Beğeniler:
    658

    Özel Mesaj
    Sağol devrem. Aralarında pek fark olmadığından konuları karıştırdım galiba.
     
    AydoganGotu, Lesyoner ve Kül Tigin bunu beğendi.
  3. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
  4. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    37

    Özel Mesaj
    Çok sağol devrem Senin sayende neye yatkın olduğumu az çok anladım.
     
    ERVAH-I-EZEL bunu beğendi.
  5. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    Eyvallah. Bu arada sorabilir miyim neye yatkınsın, html mi?:)
     
    barakli27 ve Mundy123 bunu beğendi.
  6. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    37

    Özel Mesaj
    hayır proglamlamaya tabiki :D html sadece başlangıç bir nevi temel atma gibi birşey devrem yoksa yanlış mı biliyorum ?
     
    barakli27 ve ERVAH-I-EZEL bunu beğendi.
  7. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    Doğru biliyorsun:D
     
    barakli27 ve Mundy123 bunu beğendi.
  8. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    37

    Özel Mesaj
    devrem bu arada bi sonraki dersinde ol,li,body gibi etiketleride eklersen sevinirim
     
    barakli27 ve ERVAH-I-EZEL bunu beğendi.
  9. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    barakli27 bunu beğendi.
  10. Jade Guest

    • Guest
    Katılım:
    29 Ağustos 2016
    Mesaj:
    2
    Alınan Beğeniler:
    2
    Meslek:
    Öğrenci

    Özel Mesaj
    Dostum saol çok işime yaradı.
     
    ERVAH-I-EZEL bunu beğendi.
    • Guest
    Katılım:
    9 Mart 2017
    Mesaj:
    9
    Alınan Beğeniler:
    2

    Özel Mesaj
    Devrem bunlar ortalama kaç ders sürer?
     
    ERVAH-I-EZEL bunu beğendi.
  11. ustduzey Atıldı

    • Guest
    Katılım:
    2 Ekim 2016
    Mesaj:
    145
    Alınan Beğeniler:
    91

    Özel Mesaj
    Bence yeni başlayanlar için güzel bir konu olmuş , devamını bekliyoruz.
     
    ERVAH-I-EZEL bunu beğendi.
  12. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
    Devrem çok sürmez bundan emin olabilirsin. 5. dersi bitirdik ve çok şey öğrendik. Sizler de bana destek çıktınız. Hepinize teşekkür ederim. Bu arada şu ana kadar hazırladığım HTML DERSLERİ:
    HTML DERSLERİ 1-Giriş ve İlk Sayfa
    HTML DERSLERİ 2-Yazı Etiketleri
    HTML DERSLERİ 3-Resimler ve Linkler
    HTML DERSLERİ 4-Tablolar ve Listeler
    HTML DERSLERİ 5-Form Etiketleri

    İlk ikisini zaten okuyup yorumunu bırakmışsın.:D Eğer okumadıysan diğer 3 konuyu takip edebilirsin. Bu arada güzel sabahlar... :)
    Devamının linkleri verdim. Bu arada güzel yorumun için teşekkür ederim. Sana da mutlu sabahlar... :)
     
    barakli27 bunu beğendi.
  13. DeadGuard0 Guest

    • Guest
    Katılım:
    21 Aralık 2016
    Mesaj:
    40
    Alınan Beğeniler:
    21

    Özel Mesaj
    Eline sağlık devrem çok yararlı bi konu olmuş
     
    ERVAH-I-EZEL bunu beğendi.
  14. hckr700 Guest

    • Guest
    Katılım:
    8 Eylül 2016
    Mesaj:
    51
    Alınan Beğeniler:
    13
    Meslek:
    yok

    Özel Mesaj
    devrem html de fotograf nasıl konulur :D güzel calışma olmuş eline saglık
     
    ERVAH-I-EZEL bunu beğendi.
  15. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,805

    Özel Mesaj
  16. DeowMirel Guest

    • Guest
    Katılım:
    11 Mart 2017
    Mesaj:
    7
    Alınan Beğeniler:
    3

    Özel Mesaj
    Devrem eline Koluna Sağlık, çok güzel, akıcı ve sade bir dil Kullanarak Cok Iyi bir Yazi ortaya cikarmissin okudukca okuyasim geldi. Başarılarınin devaminu dilerim, Saygılarla...
     
    ERVAH-I-EZEL bunu beğendi.
  17. barlabatrak Guest

    • Guest
    Katılım:
    12 Mart 2017
    Mesaj:
    11
    Alınan Beğeniler:
    7

    Özel Mesaj
    Sağol devrem, daha önce videolu anlatımları izlemiştim kafamda ufak bir hatırlatma yapmış oldun.
     
    ERVAH-I-EZEL bunu beğendi.

Bu Sayfayı Paylaş