Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Paragraf / Link / Görsel / Başlık Etiketleri adlı yazımızda HTML için gerekli temel etiketlerin kullanımı öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 3 - Paragraf / Link / Görsel / Başlık Etiketleri linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de İçerik oluşturmak için gerekli içerik etiketleri öğreneceğiz.
Geçen dersimizde, HTML'de Temel Etiket yapılarını görmüştük, < p > etiketi ile paragraflar , < a > etiketi ile linkler , < img > etiketi ile resimler ve < h > etiketleri ile başlıklar oluşturmayı öğrenmiştik. Bu dersimizde ise sitemizde oluşturmak istediğimiz içerikleri nasıl biçimlendireceğimizi öğreneceğiz.
< em > etiketi yazılarımızın italik (yatık şekilde) yazılmasında kullanılan etikettir. Yatık karakterlere italik denilmekte birlikte , italic kelimesinin baş harfini alan etiketi de aynı işlevi görmektedir. Her ikisininde kullanımı doğrudur lakin sıklıkla < i > etiketi kullanılmaktadır.
İtalik Etiketi Örneği ;
<p>Normal Yazı.</p> <p><i> i etiketi ile italik yazı.<i></p> <p><em> em etiketi ile italik yazı.</em></p>
İtalik Etiketi Çıktısı ;
Normal Yazı.
i etiketi ile italik yazı.
em etiketi ile italik yazı.
< strong > etiketi yazıların kalınlaştırılmasında kullanılır , gördüğünüz üzere sitemizde ki bir çok makalede kalın şekilde yazılmış kelimeler mevcuttur. Diğer bir alternatifi ise İngilizce’de Bold anlamına gelen kalın kelimesinin baş harfini alan < b > etiketidir. Her iki etikette aynı işlevi görüyor olup , yine sıklıkla < b > etiketi kullanılır.
Strong Etiketi Örneği;
<p>Normal Yazı.</p> </p><strong>Kalın Yazı.</strong></p> </p><b>Kalın Yazı.</b></p>
Strong Etiketi Çıktısı ;
Normal Yazı.
Kalın Yazı.
Kalın Yazı.
< s > etiketi yazıların üstünü çizili hale getirmemizi sağlar , İngilizce’de Strike kelimesinin kısaltmasıdır , < strike > şekilde kullanımı da vardır. Ama HTML5 bu etiket yazımını desteklememektedir , onun yerine < del > etiketi kullanılır.
< u > etiketi yazıların altını çizmemizi sağlar , İngilizce’de ki underline kelimesinin kısaltmasıdır.
Strike ve Underline etiketi kullanımı ;
<p>Normal Yazı.</p> <p><s>Üzeri Çizili Yazı.</s></p> <p><del>HTML5'in desteklediği üzeri çizili yazı.</del></p> <p><strike>Artık kullanılmayan üzeri çizili yazı.</strike></p> <p><u>Altı çizili yazı.</u></p>
Strike ve Underline etiketi çıktısı ;
Normal Yazı.Üzeri Çizili Yazı.HTML5'in desteklediği üzeri çizili yazı.
Artık kullanılmayan üzeri çizili yazı.
Altı çizili yazı.
< center > etiketi yazılarımızı ortalamak için kullanılır , İngilizce'de Center dilimizde merkez anlamına gelmektedir. HTML5'de bu etiketi desteklemez , bu etiket yerine CSS kodları ile ortalamalar yaparız ilerleyen derslerimizde öğreneceğiz. Ama bazı tarayıcılar bu etiketi desteklerle o yüzden bilmekte fayda vardır.
Center Etiketi Örneği ;
<p>Normal Yazı.</p> <p><center>Ortalanmış Yazı.</center></p>
Bilimsel makalelerde sıklıkla kullanılan bu etiketler , < sub > İngilizce'de subscript anlamına gelmekte olup yazıları altyazı şeklinde yazmamızı , < sup > etiketi ise superscript anlamına gelip yazıları üstyazı şeklinde yazmamızı sağlar.
Sup ve Sub etiketi Örneği ;
<p>Normal Yazı.</p> <p>Bu yazının <sub>bu kısmı</sub> altyazı olarak yazıldı.</p> <p>Bu yazının <sup>bu kısmı</sup> üstyazı olarak yazıldı.</p>
Sup ve Sub etiketi Çıktısı;
Normal Yazı.
Bu yazının bu kısmı altyazı olarak yazıldı.
Bu yazının bu kısmı üstyazı olarak yazıldı.
< small > etiketi yazıları küçük yazmak için kullanılır , İngilizce'de Small kelimesinden gelmiş olup küçük anlamına gelmektedir. Çoğunlukla sitelerin alt kısmında ki telif hakkı kısmında kullanılır.
< big > etiketi yazıları büyük yazmak için kullanılır , İngilizce'de Big kelimesinden gelmiş olup anlamı büyüktür.
Small ve Big Etiketi Örneği ;
<p>Normal Yazı.</p> <p><small>Küçük Yazı.</small></p> <p><big>Büyük Yazı.</big></p>
< tt > etiketi daktilo tipinde yazı yazmamızı sağlar , İngilizce'de Teletype kelimesinin kısaltmasıdır.
Teletype Etiketi Örneği ;
<p>Normal Yazı.</p> <p><tt>Daktilo tipinde yazı.</tt></p>
Önceki dersimizde , < img > etiketi ile ilgili "boş etiket" sıfatını kullanmıştık , < br > ve < hr > etiketleri de bu sınıfa dahildir. Her zaman tek etiket şeklinde yazılırlar ( < br /> , < hr /> ) .
< br/ > etiketi satır boşluğu oluşturmak için kullanılır , İngilizce'de Line Break cümlesinin kısaltmasıdır ve satır boşluğu anlamına gelir.
< hr /> etiketi ise bir satır yatay çizgi oluşturmak için kullanılır. İngilizce'de horizontal rule cümlesinin kısaltması olup yatay cetvel anlamına gelmektedir.
Hr ve Br etiketi Örneği ;
<p>Normal Yazı.</p> <p>İlk satır<br />ikinci satır.</p> <hr> <p>Normal Yazı.</p> <p>İlk satır <br /><br />iki satırlık boşluk bırakıldı.</p>
< cite > etiketi alıntı metinler eklemek için kullanılır , İngilizce'de Cite kelimesinden gelmektedir.
< abbr > etiketi kısaltma kullanmamıza yarar , İngilizce'de abbreviation kelimesinin kısaltmasıdır. < abbr > etiketini kullanırken title parametresi kullanılır. Title parametresinin içerisine kısaltmanın orjinal hali yazılır ve imleç ile kısaltmanın üzerine geldiğimizde orjinal hali ipucu şeklinde görülür.
Cite ve Abbr Etiketi Örneği ;
<p>Normal Yazı.</p> <p><cite>"Her zaman millet hükümetin bekçisi olmalıdır."</cite></p> <p><abbr title="Türkiye Büyük Millet Meclisi">TBMM</abbr> 23 Nisan 1920 tarihinde kuruldu.</p>
< dl > etiketi tanım listeleri oluşturmak için kullanılır , İngilizce'de definition list cümlesinin kısaltmasıdır tanım listesi anlamına gelmektedir.
< dt > etiketi tanım listesinin elemanlarını oluşturmak için kullanılır , İngilizce'de definition item cümlesinin kısaltmasıdır.
< dd > etiketi ise tanım liste elemanlarını tanımlar.
Bu kodların hiyerarşik sırası şu şekildedir. < dl > -> < dt > -> < dd >
Dl , Dt ve Dd Etiketi Örneği ;
<dl>
<dt>Meyve Çeşitleri</dt>
<dd>Ayva</dd>
<dd>Elma</dd>
<dd>Armut</dd>
<br />
<dt>Sebze Türleri</dt>
<dd>Patlıcan</dd>
<dd>Kabak</dd>
<dd>Pırasa</dd>
</dl>
Yazılarımızda liste şeklinde içerikler üretmek için bu etiketler kullanılır.
< ol > etiketi sıralı liste oluşturmamızı sağlar ve İngilizce'de ordered list cümlesinin kısaltmasıdır sıralı liste anlamına gelmektedir.
< ul > etiketi ise sırasız liste oluşturmamızı sağlar ve İngilizce'de unordered list cümlesinin kısaltmasıdır , sırasız liste anlamına gelmektedir.
< li > etiketi ile bu liste türlerinin içerisine elemanlar eklemek için kullanılır.
Web sitesi yaparken sıklıkla kullanacağınız bu etiketler , sitelerin menülerinin ve yan barlarda ki listelerinin yapımında sıklıkla kullanılır.
Ol , Ul , Li etiketi Örneği ;
<ul>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<ol>
<li>Kendine inan.</li>
<li>Sınırlarını zorla.</li>
<li>Hevesli ol.</li>
<li>Kodlama öğren.</li>
</ol>
Tebrikler! Bu derste HTML’de İçerik Etiketlerini öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin dördüncü kısmı olan dersimizde , HTML’de İçerik Etiketlerinin kullanımı gibi konuları öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
Bir sonraki derse “HTML Dersleri 5 – Belge Tipi Bildirimi (DOCTYPE)” geçmek için tıklayınız !