HTML <details> Tag

Örnek

<details>
  <summary>Telif Hakkı - 2015</summary>
  <p> - ARAYÜZ tarafından tüm hakları saklıdır.</p>
  <p>Bu sitenin tüm içeriği ARAYÜZ şirketinin mülkiyetindedir.</p>
</details>

Bu etiket  kullanıcı tarafından görüntülenip gizlenebilen ek bilgiler tanımlamak için kullanılır.

Codepen Ön izleme

 

<details>
  <summary>Telif Hakkı - 2015</summary>
  <p> - ARAYÜZ tarafından tüm hakları saklıdır.</p>
  <p>Bu sitenin tüm içeriği ARAYÜZ şirketinin mülkiyetindedir.</p>
</details>

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

Nitelikler

Nitelik Değer Açıklama
open open Sayfa yüklendiğinde içeriğin gösterilip gösterilmeyeceğini belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 1

HTML <del> Tag

Örnek

<p>Favori rengim <del>mavi</del></p>

Bu etiket  belgeden silinmiş bir metin tanımlamak için kullanılır.

Codepen Ön izleme

 

<p>Favori rengim <del>mavi</del></p>

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

Nitelikler

Nitelik Değer Açıklama
cite URL Metinin neden silindiğini açıklayan belgenin URL adresini belirtmek için kullanılır.
datetime YYYY-MM-DDThh:mm:ssTZD Metinin silinme tarihini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <dd> Tag

Örnek

<dl>
  <dt>kavve</dt>
  <dd>Siyah sıcak içecek</dd>
  <dt>Süt</dt>
  <dd>Beyaz soğuk içecek</dd>
</dl>

Bu etiket  kullanıcı tarafından görüntülenip gizlenebilen ek bilgiler tanımlamak için kullanılır.

Codepen Ön izleme

 

<dl>
  <dt>kavve</dt>
  <dd>Siyah sıcak içecek</dd>
  <dt>Süt</dt>
  <dd>Beyaz soğuk içecek</dd>
</dl>

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

Posted on by Samed GÖZÜTOK 0

HTML <datalist> Tag

Örnek

<input list="tarayıcı">

<datalist id="tarayıcı">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Bu etiket <input> etiketi  içinde tanımlanmış açılır bir liste tanımlamak için kullanılır.<datalist> etiketine bağlanması için <input> etiketinin list özelliğini kullanmamız gerekir.

Codepen Ön izleme

 

<input list="tarayıcı">

<datalist id="tarayıcı">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

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

Posted on by Samed GÖZÜTOK 0

HTML <colgroup> Tag

Örnek

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>No</th>
    <th>Başlık</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML</td>
    <td>50 TL</td>
  </tr>
</table>

Bu etiket bir yada birden fazla sütunlu biçimlendirmek için kullanılır.  Her satır ve sütun için stiller tanımlayabiliriz stillerin tekrarlanmaması için güzel bir yöntemdir.<table> etiketinin içinde kullanılmalıdır.

Codepen Ön izleme

 

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>No</th>
    <th>Başlık</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML</td>
    <td>50 TL</td>
  </tr>
</table>

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

Nitelikler

Nitelik Değer Açıklama
align left
right
center
justify
char		 HTML5 tarafından desteklenmiyor.İçeriğin yatay olarak nasıl hizalanacağını belirtmek için kullanılır.
char character HTML5 tarafından desteklenmiyor.içeriğin hizalaması bir karakter belirtmek için kullanılır.
charoff number HTML5 tarafından desteklenmiyor.Char özelliği için tanımlanan karaktere hizalanacak karakter sayısını belirtmek için kullanılır.
span number HTML5 tarafından desteklenmiyor.Birleştirilecek sütun sayısını belirtmek için kullanılır.
valign top
middle
bottom
baseline		 HTML5 tarafından desteklenmiyor.İçeriğin dikey olarak nasıl hizalanacağını belirtmek için kullanılır
width %
pixels
relative_length		 Temsil ettiği sütunun genişliği belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <col> Tag

Örnek

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>No</th>
    <th>Başlık</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML</td>
    <td>50 TL</td>
  </tr>
</table>

Bu etiket tüm satır ve sütunlara stiller uygulamak için kullanılır. Stillerin tekrarlanmaması daha kullanışlıdır.

Codepen Ön izleme

 

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>No</th>
    <th>Başlık</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML</td>
    <td>50 TL</td>
  </tr>
</table>

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

Nitelikler

Nitelik Değer Açıklama
align left
right
center
justify
char		 HTML5 tarafından desteklenmiyor.İçeriğin yatay olarak nasıl hizalanacağını belirtmek için kullanılır.
char character HTML5 tarafından desteklenmiyor.içeriğin hizalaması bir karakter belirtmek için kullanılır.
charoff number HTML5 tarafından desteklenmiyor.Char özelliği için tanımlanan karaktere hizalanacak karakter sayısını belirtmek için kullanılır.
span number HTML5 tarafından desteklenmiyor.Birleştirilecek sütun sayısını belirtmek için kullanılır.
valign top
middle
bottom
baseline		 HTML5 tarafından desteklenmiyor.İçeriğin dikey olarak nasıl hizalanacağını belirtmek için kullanılır
width %
pixels
relative_length		 Temsil ettiği sütunun genişliği belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <code> Tag

Örnek

<code>Bu bir bilgisayar kod parçasıdır</code>

Bu etiket bir bilgisayar kodu tanımlamak için kullanılır. CSS ile daha zengin hala getirmek mümkündür.

Codepen Ön izleme

 

<code>Bu bir bilgisayar kod parçasıdır</code>

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

Posted on by Samed GÖZÜTOK 0

HTML <cite> Tag

Örnek

<!DOCTYPE html>
<html>
<body>

<img src="http://www.sakipsabancimuzesi.org/sites/default/files/exhibitions/highlights/dino1.jpg" width="220" height="277" alt="The Scream">
<p><cite>eller</cite> Abidin dino. 1993.</p>

</body>
</html>

Bu etiket bir çalışmanın başlığını tanımlamak için kullanılır.

Codepen Ön izleme

 

<!DOCTYPE html>
<html>
<body>

<img src="http://www.sakipsabancimuzesi.org/sites/default/files/exhibitions/highlights/dino1.jpg" width="220" height="277" alt="The Scream">
<p><cite>eller</cite> Abidin dino. 1993.</p>

</body>
</html>

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

Posted on by Samed GÖZÜTOK 0

HTML <caption> Tag

Örnek

<table>
  <caption>Aylık Gider</caption>
  <tr>
    <th>ay</th>
    <th>gider</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>100 TL</td>
  </tr>
</table>

Bu etiket bir tablo başlığı tanımlamak için kullanılır. Her tablo için sadece bir tanımlayabilirsiniz.

Codepen Ön izleme

 

<table>
  <caption>Aylık Gider</caption>
  <tr>
    <th>ay</th>
    <th>gider</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>100 TL</td>
  </tr>
</table>

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

Nitelikler

Nitelik Değer Açıklama
align left
right
top
bottom		 HTML5 tarafından desteklenmiyor.Başlığın hizalaması için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <canvas> Tag

Örnek

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Bu etiket script dilleriyle anında grafik çizmek için kullanılır. Etiket sadece bir taşıyıcıdır grafik çizmek için script dilini kullanmanız gerekir.

Codepen Ön izleme

 

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

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

Nitelikler

Nitelik Değer Açıklama
height pixels <canvas> yüksekliğini belirlemek için kullanılır.
width pixels <canvas> genişliğini belirlemek için kullanılır.
Posted on by Samed GÖZÜTOK 0