Etiket: html

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

HTML <mark> Tag

Örnek

<p>Her gün <mark>süt</mark> içmeyi sakın unutma.</p>

Bu etiket  işaretlenmiş metin tanımlamak için kullanılır. Metinin bir parçasını işaretlemek yada vurgulamak istiyorsanız <mark> etiketini kullanmalısınız.

Codepen Ön izleme

 

<p>Her gün <mark>süt</mark> içmeyi sakın unutma.</p>

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

Posted on by Samed GÖZÜTOK 0

HTML <map> Tag

Örnek

<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun">
  <area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus">
</map>

Bu etiket  resim haritası oluşturmak için kullanılır. Resim haritaları görüntüye tıklanabilir alanlar tanımlamak için kullanılır. <map> etiketi alanları <area> etiketi ile tanımlanmaktadır.

Codepen Ön izleme

 

<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun">
  <area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus">
</map>

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

Nitelikler

Nitelik Değer Açıklama
name mapname zorunludur. Resim haritasının ismini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <main> Tag

Örnek

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome , Firefox ve Internet Explorer , bugün en çok kullanılan tarayıcılar.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome , 2008 yılında yayımlanan , Google tarafından geliştirilen bir ücretsiz, açık kaynak kodlu web tarayıcısıdır.</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>nternet Explorer 1995 yılında microsoft tarafından yayımlanan ücretsiz bir tarayıcıdır.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox, mozilla tarafından 2004 yılında yayımlanan ücretsiz bir tarayıcıdır</p>
  </article>
</main>

Bu etiket  ana belgenin içeriğini belirtmek için kullanılır. <main> etiketi içindeki içerik benzersiz  olmalıdır. Kenar çubuğu, telif hakkı bilgileri, site logo ve arama formları gibi belgeler arasında yinelenir herhangi bir içeriği içermemelidir.

Codepen Ön izleme

 

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome , Firefox ve Internet Explorer , bugün en çok kullanılan tarayıcılar.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome , 2008 yılında yayımlanan , Google tarafından geliştirilen bir ücretsiz, açık kaynak kodlu web tarayıcısıdır.</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>nternet Explorer 1995 yılında microsoft tarafından yayımlanan ücretsiz bir tarayıcıdır.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox, mozilla tarafından 2004 yılında yayımlanan ücretsiz bir tarayıcıdır</p>
  </article>
</main>

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

Posted on by Samed GÖZÜTOK 0

HTML <link> Tag

Örnek

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

Bu etiket  belge ile kaynak arasında bağlantı oluşturmak için kullanılır.

Not: Bu etiket sadece özellikleri içerir. Link etiketi herhangi bir yerde tanımlanabilmektedir.

Codepen Ön izleme

 

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

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

Nitelikler

Nitelik Değer Açıklama
charset char_encoding HTML5 tarafından desteklenmiyor.Bağlantılı belgenin karakter kodlamasını belirtmek için kullanılır.
crossorigin anonymous
use-credentials
href URL Bağlı belgenin konumunu belirtmek için kullanılır.
hreflang language_code Bağlı belgenin metin dilini belirtmek için kullanılır.
media media_query Bağlantı verilen adresin hangi medya cihazı ile optimize edileceği belirtmek için kullanılır.
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up		 Bulunduğumuz sayfayla bağlantı oluşturduğumuz sayfa arasındaki ilişkiyi bitirmek için kullanılır.
rev media_query HTML5 tarafından desteklenmiyorBağlantı verilen adresin hangi medya cihazı ile optimize edileceği belirtmek için kullanılır.
sizes HeightxWidth
any		 Bağlantılı kaynağın boyutunu belirlelemek için kullanılır.
target _blank
_self
_top
_parent
frame_name		 HTML5 tarafından desteklenmiyorBaşlığın nasıl hizalanacağını belirtmek için kullanılır
sizes HeightxWidth
any		 Bağlantılı kaynağın boyutunu belirlelemek için kullanılır.
type media_type Bağlı belgenin ortam türünü belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <li> Tag

Örnek

<ol>
  <li>kahve</li>
  <li>çay</li>
  <li>süt</li>
</ol>

<ul>
  <li>kahve</li>
  <li>çay</li>
  <li>süt</li>
</ul>

Bu etiket  liste öğesi tanımlamak için kullanılır. Sıralı liste <ol>, sırasız liste <ul> ve menü listeleri oluşturmak içinde <menu> kullanılır.

Codepen Ön izleme

 

<ol>
  <li>kahve</li>
  <li>çay</li>
  <li>süt</li>
</ol>

<ul>
  <li>kahve</li>
  <li>çay</li>
  <li>süt</li>
</ul>

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

Nitelikler

Nitelik Değer Açıklama
type 1
A
a
I
i
disc
square
circle		 Hangi tür madde imi kullanılacağını belirtmek için kullanılır.
value number Liste öğesinin değerini belirtmek için kullanılır. Yalnızca

    listeleri bu numaradan değer alır.
Posted on by Samed GÖZÜTOK 0

HTML <legend> Tag

Örnek

<form>
  <fieldset>
    <legend>eleman:</legend>
    adı: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
   Doğum tarihi: <input type="date" size="10">
  </fieldset>
</form>

Bu etiket  <fieldset> etiketi için bir başlık tanımlamak için kullanılır.

Codepen Ön izleme

 

<form>
  <fieldset>
    <legend>eleman:</legend>
    adı: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
   Doğum tarihi: <input type="date" size="10">
  </fieldset>
</form>

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

Nitelikler

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

HTML <label> Tag

Örnek

<form action="demo_form.asp">
  <label for="Erkek">Erkek</label>
  <input type="radio" name="cinsiyet" id="Erkek" value="Erkek"><br>
  <label for="Bayan">Bayan</label>
  <input type="radio" name="cinsiyet" id="Bayan" value="Bayan"><br>
  <input type="submit" value="gönder">
</form>

Bu etiket  <input> etiketi için bir başlık tanımlamak için kullanılır.

Codepen Ön izleme

 

<form action="demo_form.asp">
  <label for="Erkek">Erkek</label>
  <input type="radio" name="cinsiyet" id="Erkek" value="Erkek"><br>
  <label for="Bayan">Bayan</label>
  <input type="radio" name="cinsiyet" id="Bayan" value="Bayan"><br>
  <input type="submit" value="gönder">
</form>

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

Nitelikler

Nitelik Değer Açıklama
for element_id Form elementi ile label etiketinin ilişkisini belirtmek için kullanılır.
form form_id label elementi için bir veya daha fazla form elementi belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <keygen> Tag

Örnek

<form action="demo_keygen.asp" method="get">
  Kullanıcı Adı: <input type="text" name="usr_name">
  Şifreleme: <keygen name="security">
  <input type="submit">
</form>

Bu etiket  klavye formlar için bir anahtar çifti oluşturmak için kullanılır. Form verileri gönderildikten sonra, özel anahtar istemcide tutulur ve ortak anahtar sunucuya gönderilir. Kullanıcın kimliği doğrulanmak istendiğinde bu anahtar kullanılmaktadır.

Codepen Ön izleme

 

<form action="demo_keygen.asp" method="get">
  Kullanıcı Adı: <input type="text" name="usr_name">
  Şifreleme: <keygen name="security">
  <input type="submit">
</form>

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

Nitelikler

Nitelik Değer Açıklama
autofocus autofocus Sayfa yüklendiği anda elemente otomatik olarak odaklanacağını belirtmek için kullanılır.
challenge challenge Gerçekleştirilecek işleme süre sınırı koymak için kullanılır.
disabled disabled elementin devre dışı bırakılacağını belirtmek için kullanılır.
form form_id element için bir veya daha fazla form belirtmek için kullanılır.
keytype rsa
dsa
ec		 element için güvenlik algoritması belirtmek için kullanılır.
name name element için isim belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0