Yazar: Samed GÖZÜTOK

HTML <summary> 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  <details> etiketinin başlığını belirtmek için kullanılır. Başlık içeriğin gösterilip/gizlenebilmesi için tıklanabilir şekildedir.

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 summary tag by W3TR (@w3tr) on CodePen.

Posted on by Samed GÖZÜTOK 0

HTML <style> Tag

Örnek

<html>
<head>
<style>
h1 {color:yellow;}
p {color:green;}
</style>
</head>
<body>

<h1>Başlık</h1>
<p>Paragraf.</p>

</body>
</html>

Bu etiket  HTML belgeleri için stil bilgileri tanımlamak için kullanılır.

Codepen Ön izleme

 

<html>
<head>
<style>
h1 {color:yellow;}
p {color:green;}
</style>
</head>
<body>

<h1>Başlık</h1>
<p>Paragraf.</p>

</body>
</html>

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

Nitelikler

Nitelik Değer Açıklama
media media_query Optimize edilecek media türünü belirtmek için kullanılır.
media media_query Optimize edilecek media türünü belirtmek için kullanılır.
scoped scoped Stilleri sadece bir öğeye ve o öğenin alt öğelerine uygulanacağını belirtmek için kullanılır.
type text/css Etiketin ortam türünü belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <span> Tag

Örnek

<p>HTML <span style="color:red">CSS</span></p>

Bu etiket belgede satır içi grup tanımlamak için kullanılır.

Not: Bir metin <span> etiketinin arasına alındığında CSS ile biçimlendirebilir ve javascript ile hareketlendirebilirsiniz.

Codepen Ön izleme

 

<p>HTML <span style="color:red">CSS</span></p>

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

Posted on by Samed GÖZÜTOK 0

HTML <source> Tag

Örnek

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

Bu etiket <audio> ve <video> gibi  medyalar için birden fazla medya kaynağı belirtmek için kullanılır.

Codepen Ön izleme

 

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

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

Nitelikler

Nitelik Değer Açıklama
media media_query Media türünü belirtmek için kullanılır.
src URL Ortam dosyasının URL sini belirtmek için kullanılır.
type media_type Medya dosyasının türünü belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <select> 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 açılır listeler oluşturmak için kullanılır. option etiketi  içerisinde select kullanarak liste öğeleri tanımlayabilirsiniz.

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 select tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
autofocus autofocus Sayfa yüklendiğinde açılır listeye otomatik olarak odaklanacağını belirtmek için kullanılır.
disabled disabled Açılır listenin devre dışı bırakılacağını belirtmek için kullanılır.
form form_id Açılır listeye ait bir veya daha fazla form alanı tanımlamak için kullanılır.
multiple multiple Açılır listeden birden fazla seçeneğin seçilebileceğini belirtmek için kullanılır.
name name Açılır listenin ismini belirtmek için kullanılır.
required required Açılır listeden bir seçenek seçmenin zorunlu olduğunu belirtmek için kullanılır.
size number Açılır listede kaç seçeneğin görüneceğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <section> Tag

Örnek

<section>
  <h1>HTML</h1>
  <p>HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir.</p>
</section>

<section>
  <h1>CSS</h1>
  <p>Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.</p>
</section>

Bu etiket belgede bir bölüm tanımlamak için kullanılır. Üstbilgi, altbilgi sayfanın herhangi bir bölümünde kullanılabilir.

Codepen Ön izleme

 

<section>
  <h1>HTML</h1>
  <p>HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir.</p>
</section>

<section>
  <h1>CSS</h1>
  <p>Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.</p>
</section>

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

Posted on by Samed GÖZÜTOK 0

TML <script> Tag

Örnek

<script>
document.write("Hello world!");
</script>

Bu etiket istemci tarafında çalışacak bir script tanımlamak için kullanılır. Örneğin javascript.

Codepen Ön izleme

 

<script>
document.write("Hello world!");
</script>

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

Nitelikler

Nitelik Değer Açıklama
async async
charset charset Komut dosyasında kullanılan karakter kodlamasını belirtmek için kullanılır.
defer defer Sayfa ayrıştırma sona erdiğinde komut dosyasının yürütüleceğini belirtmek için kullanılır.
src URL Çağrılacak dosyanın URL sini belirtmek için kullanılır.
type media_type Çağrılacak dosyanın türünü belirtmek için kullanılır.
xml:space preserve HTML5 tarafından desteklenmiyor. Kod boşluklarının korunması gerektiğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0