html-4-body-ve-metin-etiketleri-kisim-2

HTML Dersleri #4 Body Etiketleri Kısım 2

html-4-body-ve-metin-etiketleri-kisim-2

Kısım 2

Merhaba;

Bu dersimizde bir önceki body kısmı ve metin etiketlerinin devamından bahsedeceğiz. Bu arada HTML derslerinin sonuna yaklaşmaya başladık. Dersleri biraz daha kısa ve açıklayıcı tutmaya çalışıyorum ki daha fazla öğretici olsun. Yinede sormak istediğiniz herhangi birşey için yazı altına yorum yapabilirsiniz ya da iletişim kısmından benimle iletişime geçebilirsiniz.

Bir önceki derste body kısmında içeriğin çoğunluğunu oluşturacak olan metinlerin temel etiketlerinden bahsetmiştik.

[code language=”html”]
<!DOCTYPE html>
<html lang="tr-TR">
<head>

<title>hiercelik.net | Benim Sitem</title>
<meta charset="utf-8">
<meta name="description" content="Site hakkında açıklama">
</head>
<body>

<h1>Ders #4</h1>

<h2>Ders 3’ün devamı</h2>

Burası bir metin ve bu <big>big</big> etiketi kullanılarak büyütülmüş kısmı

<!– big etiketi metni olduğundan daha büyük bir halde sunulmasını sağlar –>

Yazılacak bir metnin üst ya da alt indisinde bir metin yazmak istiyorsak
Bunu şu şekilde yaparız. HI<sub>alt içerik için sub etiketi</sub>
ya da HI<sup>üst içerik için sup etiketi</sup> kullanırız.

<!– Genelde kimyasal terimlerde ya da marka tescil simgelerinde sub ve sup çok kullanılır. Bilmekte fayda var. –>

Peki biz kod yazdık. Bunu nasıl belirteceğiz? Tabi ki <code>code</code> etiketi kullanarak : )

Daha geniş bir örnekle;

<code>

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

</code>

şeklinde kullanabiliriz. Canlı önizleme yapıldığında bu kısmın stilinin kod şeklinde belirtilmiş olmasının
sebebi code etiketleri arasına yazılmış olması.

Ayrıca yukarıdaki html kodlarının biçimi kafanızı karıştırmasın. doğrudan kod şeklinde yazsaydım
sayfada gözükmeyecek ve yapıyı bozacaktı.

İlerleyen dönemlerde HTML encode ve HTML decode mevzularından bahsedeceğiz. Şimdi konu dağılmasın.
Kabaca neden bu şekilde yazıldığını bilseniz yeterli.

<!– kod içeriği her zaman code etiketleri arasına gelmelidir–>

Biz birde klavye tuşlarını belirtmek istiyoruz. Bunun içinde <kbd>kbd</kbd> etiketi kullanırız.
Örneğin; <kbd>ctrl</kbd>

Genelde tek satırlık örnek kod yazılacağı zamanda <samp>samp</samp> etiketi kullanırız

Bir de matematiksel verileri belirteceğimiz etiket var. <var>var</var> etiketini bu tarz yerlerde kullanırız.

<!– Hiçbir stillendirme yapılmayan kbd,code,pre,samp gibi etiketlerin içindeki içerik hep aynı stilde gözükebilir. CSS derslerinde bunun için nasıl bir dokunuş yapacağımıza değineceğiz. –>

Bir yerden alıntılanan içerik

<blockquote>blockquote

</blockquote>

etiketi ile
metin içinde bulunacak kısa alıntılar ise <q>q</q> etileti ile belirtilir.

blockquote etiketi ayrı bir satırda yer alır.
Eğer metin içinde bulunması gereken alıntı var ise ya yukarıdaki gibi q etiketi kullanırsınız.

Ya da <cite>cite</cite> etiketi kullanırsınız

<!– Ünlü bir düşünürün sözü için blockquote en ideal etiket sonuçta. Bu gibi alıntı kısımlar uzunsa blockquote kısa ve tırnak içinde olacak ise q ile sadece farklı bir stille belli olmasını istiyorsanızda cite etiketiyle belirtilir. –>

Tanımlama gereği duyulan kısımlar içinde <dfn title="Tanımlaması buraya yazılır">dfn</dfn> etiketi kullanılır.

Bir adres belirteceksek

<address>address</address>

etiketi kullanılır.

Ve metnin yönü soldan sağa değilde sağdan sola doğru olacaksa <bdo>bdo</bdo> etiketi kullanılır

Güzel bir örnekle; <bdo dir="rtl">bu metin rtl metindir.</bdo>

<!– bdo etiketinde tek başına kullanmamız pek bir anlam ifade etmez. Genelde Arapça gibi sağdan sola olan metinler bu etiketler arasına alınır etiketin parametresi dir="rtl" şeklinde belirtilir. –>
<!– rtl ise web tasarımcılar arasında sıkça sözü geçen bir terimdir. right to left yani sağdan sola anlamına gelir.–>

</body>
</html>
[/code]

Bu dersimizide burada noktalayalım. Temel body ve metin etiketleri bu kadar. Artık kullanılmayan etiketlerden bahsetmedim. Burada anlattığım etiketleride sürekli kullanmayacağız.
Tekrar söyleyeyim. Buradaki her kodu bir html dosyasına yazıp test ederek kavramaya çalışırsanız daha akılda kalıcı olur. Tavsiye ederim.

Ders esnasında oluşturduğumuz index dosyasını buradan indirebilirsiniz.

Tekrar görüşmek üzere; esen kalın.

Önceki Ders  –  Sonraki Ders

İlginizi çekebilir...