Yazar: Samed GÖZÜTOK

HTML <button> Tag

Örnek

<button type="button">Tıkla</button>

Bu etiket tıklanabilir düğmeler oluşturmak için kullanılır. <button> etiketiyle oluşturduğumuz düğmelerin içerisine resim veya metin eklenebilir. <input> etiketiyle oluşturduğumuz düğmelerden en büyük farkı da budur. <button> etiketine type özelliğini mutlaka ayarlayın ayarlamazsanız tarayıcılar varsayılan olarak başka değerler verebilir.

Codepen Ön izleme

 

<button type="button">Tıkla</button>

See the Pen HTML button tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
autofocus autofocus Sayfa yüklendiği anda <button> a otomatik olarak odaklanacağını belirtmek için kullanılır.
disabled disabled <button> un kullanılamaz olduğunu belirtmek için kullanılır.
form form_id Bir veya daha fazla form düğmesinin olduğunu belirtmek iç n kullanılır
formaction URL Form verilerinin gönderileceği yeri belirtmek için kullanılır.
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Form verilerinin gönderilmeden önce kodlanmış olması gerektiğini belirtmek için kullanılır.
formmethod get
post		 Form verilerini göndermek için kullanılacak http yöntemini belirtmek için kullanılır.
formnovalidate formnovalidate Form verilerinin gönderme doğrulamasının olmadığını belirtmek için kullanılır.
formtarget _blank
_self
_parent
_top
framename		 Form gönderildikten sonra görüntüleneceği yeri belirtmek için kullanılır.
name name <button> için bir isim belirlemek için kullanılır.
type button
reset
submit		 <button> türünü belirlemek için kullanılır.
value text <button> başlangıç değerini belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <head> Tag

Örnek

<html>
  <head>
    <title>Belge Başlığı</title>
  </head>
</html>

Bu etiket  belgenin başlık kısmını tanımlamak için kullanılır. Bu etiketin içerisinde <title> .stiller ve meta bilgileri de bulunmaktadır. Etiketin içerisinde tanımlanan etiketler: <title> (kesinlikle tanımlanmak zorundadır.)

Aşağıdaki elementler head’ın içinde yer alabilir;

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

Codepen Ön izleme

 

<html>
  <head>
    <title>Belge Başlığı</title>
  </head>
</html>

See the Pen MamPxp by W3TR (@w3tr) on CodePen.

Nitelik Değer Açıklama
profile URL HTML5 tarafından desteklenmiyorBelgenin kurallarını belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 2

HTML <body> Tag

Örnek

<html>
<head>
<title>Belgenin başlığı</title>
</head>

<body>
Belgenin içeriği ..........
.</body>
</html>

HTML belgesindeki metinler,bağlantılar,resim,tablolar,listeler vb gibi HTML sayfasının tüm içeriği <body> etiketinin içinde bulunur.

Codepen Ön izleme

 

<html>
<head>
<title>Belgenin başlığı</title>
</head>

<body>
Belgenin içeriği ..........
.</body>
</html>

See the Pen HTML body tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
alink color HTML5 tarafından desteklenmiyor.Belgede bulunan aktif bağlantıların renklerini belirlemek için kullanılır.
background URL HTML5 tarafından desteklenmiyor.Belgenin arka plan resmini belirlemek için kullanılır.
bgcolor color HTML5 tarafından desteklenmiyor.Belgenin arka plan rengini belirlemek için kullanılır.
link color HTML5 tarafından desteklenmiyor.Belgede bulunan tüm bağlantıların renklerini belirlemek için kullanılır.
text color HTML5 tarafından desteklenmiyor.Belgede bulunan tüm metinlerin renklerini belirlemek için kullanılır.
vlink color HTML5 tarafından desteklenmiyor.Belgede bulunan ziyaret edilmiş bağlantıların renklerini belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <blockquote> Tag

Örnek

<blockquote cite="http://www.w3tr.com/">
  <p>Bu w3tr'den alınan bir alıntıdır.</p>
</blockquote>

Bu etiket başka bir kaynaktan alıntı bir bölüm olduğunu belirtmek için kullanılır. Tarayıcılar <blockquote> genelde girintili(tırnak işareti) şekilde gösterir.

Codepen Ön izleme

 

<blockquote cite="http://www.w3tr.com/">
  <p>Bu w3tr'den alınan bir alıntıdır.</p>
</blockquote>

See the Pen HTML blockquote tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
cite URL ÖAlıntının kaynağını belirtirmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <bdo> Tag

Örnek

<bdo dir="rtl">
Bu metin  sağdan sola doğru devam edecek
</bdo>

Bu etiket metnin yönünü değiştirmek  için kullanılır.

Codepen Ön izleme

 

<bdo dir="rtl">
Bu metin  sağdan sola doğru devam edecek
</bdo>

See the Pen HTML bdo tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
dir ltr
rtl		 Öğedeki metin yönünü değiştirmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <bdi> Tag

Örnek

<ul>
  <li>Kullanıcı: <bdi>arayüz</bdi>10</li>
  <li>Kullanıcı: <bdi>إيان</bdi>20</li>
</ul>

Bu etiket Arapça gibi farklı yönde başlayan metinleri diğerlerinden ayırmak için kullanılır.

Codepen Ön izleme

 

<ul>
  <li>Kullanıcı: <bdi>arayüz</bdi>10</li>
  <li>Kullanıcı: <bdi>إيان</bdi>20</li>
</ul>

See the Pen HTML bdi Tag by W3TR (@w3tr) on CodePen.

Not: Eğer bu etiketi tanımlamamış olsaydık 20 sayısıyla arap.a metin yer değiştirecekti.

Posted on by Samed GÖZÜTOK 0

HTML <base> Tag

Örnek

<head>
<base href="http://www.w3tr.com/images/" target="_blank">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3tr.com">w3tr</a>
</body>

Belgedeki tüm URL’ler için geçerli bir URL veya konu belirtmek için kullanılır. Bir belge en fazla bir element <base> olabilir ve <head> öğesi içinde olmak zorundadır.

Codepen Ön izleme

 

<head>
<base href="http://www.w3tr.com/images/" target="_blank">
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3tr.com">w3tr</a>
</body>

See the Pen HTML base Tag by W3TR (@w3tr) on CodePen.

Nitelikler

 

Nitelik Değer Açıklama
href URL Belgedeki tüm URL’ler için geçerli bir URL tanımlamak için kullanılır.
target _blank
_parent
_self
_top
framename		 Belgede bulunan tüm bağlantılar ve formlar için hedef belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 1

HTML <audio> Tag

Örnek

<audio controls>
  <source src="http://w3tr.com/file/flut1.mp3" type="audio/mpeg">
   Tarayıcınız audio elementini desteklemiyor.
</audio>

HTML sayfalarımıza ses uygulamaları eklemek  için kullanılır.

Codepen Ön izleme

 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Tarayıcınız ses uygulamalarını desteklemiyor.
</audio>

See the Pen HTML audio Tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
autoplay autoplay Sesin sayfa açılışına çalmaya başlayacağını belirtmek için kullanılır.
controls controls Oynat/duraklat gibi kontrol düğmelerinin olmasını istediğimizi belirtmek için kullanılır.
loop loop Ses dosyasının sürekli tekrar edeceğini belirtmek için kullanılır.
muted muted Ses çıkışının sessiz olacağını belirtmek için kullanılır.
preload auto
metadata
none		 Ses dosyasının sayfa açılışında yüklenip yüklenmeyeceğini belirtmek için kullanılır.
src URL Ses dosyasının konumunu belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 2

HTML <aside> Tag

Örnek

<p>ATATÜRK ÜNİVERSİTESİ TEKNOKENT</p>
<aside>
  <h4>Erzurum ATATEKNOKENT</h4>
</aside>

Sayfanın sidebar olarak adlandırılan yan tarafını belirtmek için kullanılır. Sayfanın sadece sağında veya solunda yer alabilir.

Codepen Ön izleme

<p>ATATÜRK ÜNİVERSİTESİ TEKNOKENT</p>
<aside>
  <h4>Erzurum ATATEKNOKENT</h4>
</aside>

See the Pen HTML aside Tag by W3TR (@w3tr) on CodePen.

Posted on by Samed GÖZÜTOK 0