Yazar: merhaba arkadaşlar.
html 5 ile birilkte kullanılan önemli etiketleri ele alacağız. bu etiketler çok sık kullandığımız etiketlerdir.
mutlaka öğrenmemiz gerekmektedir.
eğer okumadıysanız bir önceki dersimiz olan
temel html 5 etiketleri ve iskelet yapısı
başlıklı yazımı okuyabilirsiniz.
şimdi önemli html 5 etiketlerini ve bu etiketlerin kullanımlarını birlikte örnek yaparak inceleyelim.
<span> içerik </span>
bu etiketimizde metinlerin rengini değiştirebiliriz.
genelde divlerin içerisine yazılırlar.
bazen bizler divler boş kalmasın diye span etiketini kullanırız.
<figure>resinm </figure:
bu etiketimiz ile sayfamıza eklediğimiz resimleri eklemek için kullanırız. sayfamıza eklenen resmi bir şekil içerisinde gösterir.
<figcaption> resim açıklaması </figcaption>
yukarıdaki <figure> etiketi ile birlikte kullanılırlar. resim içerisine açıklama yapmak için kullanılır.
<button>
button etiketi düğmeleri oluştururken kullanabileceğimiz bir etikettir.
kullanımı şu şekildedir.
<button bu bir dğümedir </button>
ama bir çok tasarımcılar <input type=”button”> etiketini kullanmayı tercih ederler. bu konu ile ilgili detaylı bilgileri html kategorimizden takip edebilirsiniz.
<code> ve <pre> etiketleri
<code> etiketi HTML kodları içine yazdığımız başka kodların kendi kodlarımız ile karışmaması için kullanılır. Eğer <code> etiketi içine HTML kodu yazıyorsak yine bir HTML çıktısı alacağız. Fakat <pre> durum biraz farklı. Bu etiketin içine yazdığımız HTML kodlarının ise kod halini göreceğiz. pre’nin açılımı preview’dir ve dilimizde önizleme anlamına gelmektedir. Bize yazdığımız kodların önizlemesini verir.
Ayrıca belirtmeliyim ki, <pre> içine yazılan karakter boşlukları ne kadar karakter boşluğu varsa o kadar görünür.
mark etiketi
mark etiketi cümle içerisinde belirli bir bölümü vurgulamak ve o kısmı öne çıkarmak için kullanılırlar.
mark etiketini cümle içerisinde öne çıkacak kısımdan önce kullannırız.
<mark> öne çıkacak kısım </mark>
bu etiketleri kullanarak basit bir örnek hazırlayalım.
örnek:
<!doctype html>
html>
<head>
<meta charset=”utf-8″ />
<title> örnek sayfa </title>
</head>
<body>
<div>
<p>
Bu <span style=”color: blue”>kelimenin</span>nin rengi mavidir.
</p>
</div>
<div>
<span>> bu bir divdir. </span>
</div>
<div>
<span> bu da ikinci divimiz. </span>
</div>
</body>
</html>
örnek iki:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title> örnek sayfa iki </title>
</head>
<body>
<figure>
<img src=”images/resim1.jpg” alt=”resim1″>
<figcaption> resim1 </figcaption>
</figure>
</body>
</html>
örnek üç:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title> örnek sayfa üç </title>
</head>
<body>
<button> bu bir örnek düğmedir </button>
</body>
</html>
örnek dört:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title> dördüncü örnek </title>
</head>
<body>
<pre>
<p> html paragraf kodudur. </p>
</pre>
<br>
<code>
<p> html paragraf kodunun çıktısını aldım. </p>
</code>
</body>
</html>
örnek beş:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title> beşinci örnek </title>
</head>
<body>
<p>
Bu cümledeki vurgulanmış kelime <mark>html 5</mark>dir.
</p>
</body>
</html>
bu şekilde kullanabilirsiniz.
bu dersimizde bu kadar başka bir derste görüşmek üzre hoşçakalın.
Bir önceki yazımız olan temel html 5 etiketleri ve iskelet yapısı başlıklı makalemizde article, aside ve div etiketi hakkında bilgiler verilmektedir.