Yazar: Samed GÖZÜTOK

HTML <output> Tag

Örnek

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>Not:</strong> Output internet explorer tarafından desteklenmemektedir.</p>

Bu etiket bir hesaplama sonucu tanımlamak için kullanılır.

Codepen Ön izleme

 

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>Not:</strong> Output internet explorer tarafından desteklenmemektedir.</p>

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

Nitelikler

Nitelik Değer Açıklama
for element_id Hesaplama sonucu ve hesaplamada kullanılan öğeler arasındaki ilişkiyi belirtmek için kullanılır.
form form_id Elemente ait bir veya birden fazla form elemanı olduğunu belirtmek için kullanılır.
name name Elementin adını belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <option> Tag

Örnek

<select>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JAVA">JAVA</option>
  <option value="ASP">ASP</option>
</select>

Bu etiket seçim listesinde bir seçenek tanılamak için kullanılır. Option elementi bir <select> veya <details> elementinin içerisinde yer almalıdır.

Codepen Ön izleme

 

<select>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JAVA">JAVA</option>
  <option value="ASP">ASP</option>
</select>

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

Nitelik Değer Açıklama
disabled disabled elementin devre dışı bırakıp bırakılmayacağını belirtmek için kullanılır.
label text Etiketin görünür başlığını belirtmek için kullanılır.
selected selected Sayfa yüklendiğinde bir seçeneğin seçili olacağını belirtmek için kullanılır.
value text Sunucuya gönderilmesi için bir değer belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <ol> Tag

Örnek

<ol>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol start="50">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

Bu etiket sıralı listeler tanımlamak için kullanılır. Sıralı liste sayısal veya alfabetik olabilmektedir. Liste öğeleri oluşturmak için <li> etiketi kullanılmaktadır.

Codepen Ön izleme

 

<ol>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol start="50">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

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

Nitelikler

Nitelik Değer Açıklama
compact compact HTML5 tarafından desteklenmiyorListenin normal halinde daha küçük olacağını belirtmek için kullanılır.
reversed reversed Liste sırasının (.. 9,8,7) azalan şekilde sıralanacağını belirtmek için kullanılır.
start number Listenin başlangıç değerini belirtmek için kullanılır.
type 1
A
a
I
i		 Hangi tür madde imi kullanılacağını belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <object> Tag

Örnek

<object width="400" height="400" data="helloworld.swf"></object>

Bu etiket  HTML belgesi içine gömülü nesne tanımlamak için kullanılır. Ses,video,java uygulamaları,pdf ve flash dosyalarını bu etiket ile HTML belgelerinize ekleyebilirsiniz.

Codepen Ön izleme

 

<object width="400" height="400" data="helloworld.swf"></object>

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

Nitelikler

Nitelik Değer Açıklama
align top
bottom
middle
left
right		 HTML5 tarafından desteklenmiyorÇevresindeki elementlere göre konumlandırmak için kullanılır.
archive URL HTML5 tarafından desteklenmiyorArşivlenmiş metinlerin kaynağını belirtmek için kullanılır.
border pixels HTML5 tarafından desteklenmiyorobject nesnesinin border genişliğini belirtmek için kullanılır.
classid class_ID HTML5 tarafından desteklenmiyorBelirtilen sınıf kimliğini tanımlamak için kullanılır.
codebase URL HTML5 tarafından desteklenmiyorNesne kodunu bulmak için kullanılır.
data URL Kaynak URL nin başka bir nesne tarafından kullanıldığını belirtmek için kullanılır.
declare declare HTML5 tarafından desteklenmiyorihtiyaç kadar nesne kullanılması gerektiğini belirtmek için kullanılır.
form form_id Bir veya daha fazla form nesnesinin olduğunu belirtmek için kullanılır.
height pixels object elementinin yüksekliğini belirtmek için kullanılır.
hspace pixels HTML5 tarafından desteklenmiyorElementin sol ve sağ tarafında boşluk olacağını belirtmek için kullanılır.
name name Elementin adını belirtmek için kullanılır.
standby text HTML5 tarafından desteklenmiyorElement yüklenirken görüntülenmesi için bir metin tanımlamak için kullanılır.
type media_type Veri özniteliğinde belirtilen verilerin ortam türünü belirlemek için kullanılır.
usemap #mapname elementle birlikte görüntü haritası kullanıcağını belirtmek için kullanılır.
vspace pixels HTML5 tarafından desteklenmiyorElementin üst ve alt tarafında boşluk olacağını belirtmek için kullanılır.
width pixels Elementin genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <noscript> Tag

Örnek

<script>
document.write("Merhaba Dünya!")
</script>
<noscript>Tarayıcınız javascript desteklemiyor!</noscript>

Bu etiket  komutların devre dışı bırakıldığı ve ya komutları desteklemeyen tarayıcılar için alternatif bir içerik oluşturmak için kullanılır.<body> etiketinin alabileceği tüm etiketler kullanılabilir.

Codepen Ön izleme

 

<script>
document.write("Merhaba Dünya!")
</script>
<noscript>Tarayıcınız javascript desteklemiyor!</noscript>

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

Posted on by Samed GÖZÜTOK 0

HTML <nav> Tag

Örnek

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Bu etiket  gezinti linklerinin bulunduğu bölümü tanımlamak için kullanılır.

Codepen Ön izleme

 

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

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

Posted on by Samed GÖZÜTOK 0

HTML <meter> Tag

Örnek

<p>Gösterge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> Meter internet explorer ve safari 5 ile önceki sürümlerini desteklememektedir.</p>

Bu etiket  bilinen ölçü veya değerde bir skala tanımlamak için kullanılır. Göstergede denilebilir.

Not:<meter> etiketi  ilerleme göstermek için kullanılmamalıdır. İlerleme çubuğu için <progress> etiketi tercih edilmelidir.

Codepen Ön izleme

 

<p>Gösterge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> Meter internet explorer ve safari 5 ile önceki sürümlerini desteklememektedir.</p>

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

Nitelikler

Nitelik Değer Açıklama
form form_id meter etiketinin ait olduğu bir veya daha fazla form belirtmek için kullanılır.
high number min ve max özellikleri ile tanımlanan aralıkta yüksek olarak kabul edilecek değer tanımlamak için kullanılır.
low number min ve max özellikleri ile tanımlanan aralıkta düşük olarak kabul edilecek değer tanımlamak için kullanılır.
max number Aralığın en yüksek değerini tanımlamak için kullanılır. 1,0 değerini alır.
min number Aralığın en düşük değerini tanımlamak için kullanılır. 0 değerini alır.
value number Ölçüm değerini kullanıcıya göstermekte kullanılmaktadır
optimum number Optimal değeri belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <meta> Tag

Örnek

<head>
<meta charset="UTF-8">
<meta name="description" content="Ücretsiz Web öğreticiler">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>

Bu etiket  veri hakkında bilgiler vermek için kullanılır. HTML belgesi hakkında meta verileri sağlamaktadır. Metalar  tarayıcılarda gözükmez. Genellikle de description(açıklama), keywords(anahtar kelimeler), author(sayfa yazarı), last modified(son değiştirilme tarihi) ve diğer tüm meta verilerini tanımlamakta kullanılır.

Not:Meta etiketi her zaman <head> öğesinin içinde yer almalıdır.

Codepen Ön izleme

 


<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
<body>

<p>Meta bilgi başlık bölümüne gider....</p>

</body>
</html>

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

Nitelik Değer Açıklama
charset character_set HTML belgesi için karakter kodlamasını belirtmek için kullanılır.
content text
name application-name
author
description
generator
keywords		 Meta verileri için bir isim belirtmek için kullanılır.
http-equiv content-type
default-style
refresh		 Content özelliği için bir http üstbilgisi belirtmek için kullanılır.
scheme format/URI HTML5 tarafından desteklenmiyor.
Posted on by Samed GÖZÜTOK 0

HTML <menuitem> Tag

Örnek

<div data-height="268" data-theme-id="19659" data-slug-hash="YyQLKX" data-default-tab="html" data-user="w3tr" class='codepen'><pre><code><menu>
  <li>
    <button type=&quot;menu&quot; value=&quot;File&quot; menu=&quot;file-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;file-menu&quot;>
      <menuitem label=&quot;Yeni&quot; onclick=&quot;newFile()&quot;>
      <menuitem label=&quot;Kaydet&quot; onclick=&quot;saveFile()&quot;>
    </menu>
  </li>
  <li>
    <button type=&quot;menu&quot; value=&quot;Edit&quot; menu=&quot;edit-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;edit-menu&quot;>
      <menuitem label=&quot;Kes&quot; onclick=&quot;cutEdit()&quot;>
      <menuitem label=&quot;kopyala&quot; onclick=&quot;copyEdit()&quot;>
      <menuitem label=&quot;Yapıştır&quot; onclick=&quot;pasteEdit()&quot;>
    </menu>
  </li>
</menu></code>

Bu etiket  kullanıcının açılan menüden çağırabileceği bir komut/menü tanımlamak için kullanılır.

Codepen Ön izleme

 

<div data-height="268" data-theme-id="19659" data-slug-hash="YyQLKX" data-default-tab="html" data-user="w3tr" class='codepen'><pre><code><menu>
  <li>
    <button type=&quot;menu&quot; value=&quot;File&quot; menu=&quot;file-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;file-menu&quot;>
      <menuitem label=&quot;Yeni&quot; onclick=&quot;newFile()&quot;>
      <menuitem label=&quot;Kaydet&quot; onclick=&quot;saveFile()&quot;>
    </menu>
  </li>
  <li>
    <button type=&quot;menu&quot; value=&quot;Edit&quot; menu=&quot;edit-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;edit-menu&quot;>
      <menuitem label=&quot;Kes&quot; onclick=&quot;cutEdit()&quot;>
      <menuitem label=&quot;kopyala&quot; onclick=&quot;copyEdit()&quot;>
      <menuitem label=&quot;Yapıştır&quot; onclick=&quot;pasteEdit()&quot;>
    </menu>
  </li>
</menu>

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

Nitelikler

Nitelik Değer Açıklama
checked checked Radio veya checkbox kutularının seçili olup olmayacağını belirtmek için kullanılır.
default default Varsayılan komut olarak komut/menü elementlerini işaretlemek için kullanılır.
disabled disabled Komut/menü öğesinin devre dışı bırakılacağını belirtmek için kullanılır.
icon URL Komut/menü öğesi için bir simge belirtmek için kullanılır.
label text Zorunlu kullanıcıya gösterilecek ismi belirtmek için kullanılır.
radiogroup groupname Birden fazla radio olduğu durumlarda radio grouplarını isimlendirmek için kullanılır.
type checkbox
command
radio		 Menuitemin görüntülenme türünü belirmek için kullanılır
Posted on by Samed GÖZÜTOK 0

HTML <menu> Tag

Örnek

<div data-height="268" data-theme-id="19659" data-slug-hash="YyQLKX" data-default-tab="html" data-user="w3tr" class='codepen'><pre><code><menu>
  <li>
    <button type=&quot;menu&quot; value=&quot;File&quot; menu=&quot;file-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;file-menu&quot;>
      <menuitem label=&quot;Yeni&quot; onclick=&quot;newFile()&quot;>
      <menuitem label=&quot;Kaydet&quot; onclick=&quot;saveFile()&quot;>
    </menu>
  </li>
  <li>
    <button type=&quot;menu&quot; value=&quot;Edit&quot; menu=&quot;edit-menu&quot;>
    <menu type=&quot;context&quot; id=&quot;edit-menu&quot;>
      <menuitem label=&quot;Kes&quot; onclick=&quot;cutEdit()&quot;>
      <menuitem label=&quot;kopyala&quot; onclick=&quot;copyEdit()&quot;>
      <menuitem label=&quot;Yapıştır&quot; onclick=&quot;pasteEdit()&quot;>
    </menu>
  </li>
</menu>

Bu etiket  komut listesi veya menü tanımlamak için kullanılır. İçerik menüleri, araç çubukları ve form kontrolleri için komut listeleri oluşturmakta kullanılır.

Codepen Ön izleme

 

<menu>
  <li>
    <button type="menu" value="File" menu="file-menu">
    <menu type="context" id="file-menu">
      <menuitem label="Yeni" onclick="newFile()">
      <menuitem label="Kaydet" onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="edit-menu">
    <menu type="context" id="edit-menu">
      <menuitem label="Kes" onclick="cutEdit()">
      <menuitem label="kopyala" onclick="copyEdit()">
      <menuitem label="Yapıştır" onclick="pasteEdit()">
    </menu>
  </li>
</menu>

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

Nitelikler

Nitelik Değer Açıklama
label text Menünün içinde görünür bir etiket belirtmek için kullanılır.
type popup
toolbar
context		 Menünün görüntülenme türünü belirmek için kullanılır
Posted on by Samed GÖZÜTOK 0