Html Dersleri 2- Yazı Etiketleri

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>

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/>

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:


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.

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

 

Devrem eline sağlık. Renk kodları ile ilgili konu açmayı düşünüyor musun?

 

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.

 

Sağol devrem. Aralarında pek fark olmadığından konuları karıştırdım galiba.

 

Yeni konu:
http://forum.ayyildiz.org/konu/html-dersleri-3-resimler-ve-linkler.85209/

 

Çok sağol devrem Senin sayende neye yatkın olduğumu az çok anladım.

 

Eyvallah. Bu arada sorabilir miyim neye yatkınsın, html mi?

 

hayır proglamlamaya tabiki html sadece başlangıç bir nevi temel atma gibi birşey devrem yoksa yanlış mı biliyorum ?

 

Doğru biliyorsun

 

devrem bu arada bi sonraki dersinde ol,li,body gibi etiketleride eklersen sevinirim

 

Bir sonraki derste "ol" "li" gibi etiketleri göreceğiz lâkin "body" etiketini ilk derste gördük:

http://forum.ayyildiz.org/konu/html-dersleri-1-giriş-ve-ilk-sayfa.83727/

 

Dostum saol çok işime yaradı.

 

Devrem bunlar ortalama kaç ders sürer?

 

Bence yeni başlayanlar için güzel bir konu olmuş , devamını bekliyoruz.

 

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

 

Eline sağlık devrem çok yararlı bi konu olmuş

 

devrem html de fotograf nasıl konulur güzel calışma olmuş eline saglık

 

Devrem resim eklemeyi şu konuda anlattım:
http://forum.ayyildiz.org/konu/html-dersleri-3-resimler-ve-linkler.85209/
Tüm konuları sırayla okumanı tavsiye ederim. Bu arada teşekkürler...

 

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

 

Sağol devrem, daha önce videolu anlatımları izlemiştim kafamda ufak bir hatırlatma yapmış oldun.