Yazar: Samed GÖZÜTOK

HTML <input> Tag

Örnek

<form action="demo_form.asp" method="get">
  ad: <input type="text" name="ad"><br>
  Soyad: <input type="text" name="soyad"><br>
  <input type="submit" value="Gönder">
</form>

Bu etiket  kullanıcının veri girişi yapabileceği giriş alanı tanımlamak için kullanılır. Type özelliğine bağlı olarak çeşitli şekillerde gösterilebilmektedir.

Codepen Ön izleme

 

<form action="demo_form.asp" method="get">
  ad: <input type="text" name="ad"><br>
  Soyad: <input type="text" name="soyad"><br>
  <input type="submit" value="Gönder">
</form>

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

Nitelikler

Nitelik Değer Açıklama
accept file_extension
audio/*
video/*
image/*
media_type		 Sunucun kabul ettiği dosya türlerini belirtmek için kullanılır.
align left
right
top
middle
bottom		 HTML5 tarafından desteklenmiyor.Çevresindeki nesnelere göre nasıl hizalanacağını belirtmek için kullanılır.
alt text Görüntü yerine alternatif metin belirtmek için kullanılır.
autofocus autofocus Nesneye otomatik olarak odaklanacağını belirtmek için kullanılır.
checked checked Seçilmesi istenen nesnelerin sayfa yüklendikten sonra seçileceğini belirtmek için kullanılır.
disabled disabled Nesnenin devre dışı bırakılacağını belirtmek için kullanılır.
form form_id Giriş alanının ait olduğu formu veya birden fazla formu belirtmek için kullanılır.
formaction URL Form verilerinin nereye gönderileceğini belirtmek için kullanılır.
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Form verilerinin sunucuya gönderilmeden nasıl kodlanacağını belirtmek için kullanılır.
formmethod get
post		 Form verileri gönderilirken hangi http yönetimine göre kodlanacağını belirtmek için kullanılır.
formnovalidate formnovalidate Form verileri gönderilirken doğrulama gerekmediğini belirtmek için kullanılır.
formtarget _blank
_self
_parent
_top
framename		 Form verileri gönderildikten sonra yanıtın nerede görüntüleneceğini belirtmek için kullanılır.
height pixels Giriş alanının yüksekliğini belirtmek için kullanılır.
list datalist_id Form verileri gönderildikten sonra yanıtın nerede görüntüleneceğini belirtmek için kullanılır.
max number
date		 Giriş alanının alabileceği maksimum değeri belirtmek için kullanılır.
maxlength number Giriş alanının alabileceği maksimum karakter sayısını belirtmek için kullanılır.
min number
date		 Giriş alanının alabileceği minimum değeri belirtmek için kullanılır.
multiple multiple Giriş alanına birden fazla değer girilebileceği belirtmek için kullanılmaktadır.
name text Giriş alanının ismini belirtmek için kullanılır.
pattern regexp Giriş alanına girilen değer ile regexp değerinin denetleneceğini belirtmek için kullanılır.
placeholder text Giriş alanına girilmesi istenen değer ile ilgili ipucu belirtmek için kullanılır.
readonly readonly Giriş alanının salt okunur olduğunu belirtmek için kullanılır.
required required Giriş alanının doldurulması gerektiğini belirtmek için kullanılır.
size number Giriş alanının genişliğini karakter sayısı olarak belirtmek için kullanılır.
src URL Gönder düğmesi olarak kullanılacak görüntünün URL adresini belirtmek için kullanılır.
step number Giriş alanı için artık eksiliş sayısını belirtmek için kullanılır.
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		 Giriş alanının görüntülenme türünü belirtmek için kullanılır.
value text Giriş alanının değerini belirtmek için kullanılır.
width pixels Giriş alanının genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <hr> Tag

Örnek

<h1>HTML</h1>
<p>HTML web sayfaları tanımlamak için kullanılan bir dildir.....</p>

<hr>

<h1>CSS</h1>
<p>HTML öğelerinin nasıl görüntüleneceğini belirlemek için kullanılan bir dildir.....</p>

Bu etiket  belgede bir konu sonu tanımlamak için kullanılır. Ancak görsel açıdan bir çizgi oluşturmak içinde kullanabilirsiniz.

Codepen Ön izleme

 

<h1>HTML</h1>
<p>HTML web sayfaları tanımlamak için kullanılan bir dildir.....</p>

<hr>

<h1>CSS</h1>
<p>HTML öğelerinin nasıl görüntüleneceğini belirlemek için kullanılan bir dildir.....</p>

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

Nitelikler

Nitelik Değer Açıklama
align top
bottom
middle
left
right		 HTML5 tarafından desteklenmiyor.Çevresindeki nesnelere göre nasıl hizalanacağını belirtmek için kullanılır
noshade noshade HTML5 tarafından desteklenmiyor.Tek bir renge sahip yatay çizgi belirtmek için kullanılır. Normal görünümü gölge şeklindedir.
size pixels HTML5 tarafından desteklenmiyor.Çizginin yüksekliğini (kalınlığını) belirtmek için kullanılır.
width pixels % HTML5 tarafından desteklenmiyor.çizginin genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <img> Tag

Örnek

<img src="http://lorempixel.com/output/technics-q-c-640-480-2.jpg" alt="..." height="42" width="42">

Bu etiket  HTML belgelerimize görüntü(resim) tanımlamak için kullanılır.

Not: <img> ile birlikte src ve alt özelliklerini kullanmak zorundasınız. Görüntüler sayfaya eklenmez sadece HTML sayfalarına bağlantı oluşturulur . Görüntü üzerine bağlantı vermek istiyorsanız <img> etiketini <a> etiketinin içinde kullanmalısınız.

Codepen Ön izleme

 

<img src="http://lorempixel.com/output/technics-q-c-640-480-2.jpg" alt="..." height="300" width="300">

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

Nitelikler

Nitelik Değer Açıklama
align top
bottom
middle
left
right		 HTML5 tarafından desteklenmiyor.Çevresindeki nesnelere göre nasıl hizalanacağını belirtmek için kullanılır
alt text Görüntü yerine alternatif metin oluşturmak için kullanılır.
border pixels HTML5 tarafından desteklenmiyor.Görüntü çevresindeki kenarlığın genişliğini belirtmek için kullanılır.
crossorigin anonymous
use-credentials		 etiketine erişime diğer sitelerden izin verileceğini belirtmek için kullanılır.
height pixels Görüntünün yüksekliğini belirtmek için kullanılır.
hspace pixels Görüntünün sağ ve sol tarafından bırakılacak boşluğu belirtmek için kullanılır.
ismap ismap Sunucu taraflı bir resim haritası olduğunu belirtmek için kullanılır.
longdesc URL Görüntünün uzun açıklamasını içeren URL adresini belirtmek için kullanılır.
src URL Görüntünün URL adresini belirtmek için kullanılır.
usemap #mapname İstemci taraflı bir resim haritası olduğunu belirtmek için kullanılır.
vspace Pixels HTML5 tarafından desteklenmiyor.Görüntünün alt ve üst tarafında bırakılacak boşluğu belirtmek için kullanılır.
width Pixels Görüntünün genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <iframe> Tag

Örnek

<iframe src="http://www.w3tr.com"></iframe>

Bu etiket  satır içi bir çerçeve tanımlamak için kullanılır. Bu çerçeveye başka bir HTML belgesi yüklemenizi  sağlar.

Codepen Ön izleme

 

<iframe src="http://www.w3tr.com"></iframe>

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

Nitelikler

Nitelik Değer Açıklama
align left
right
top
middle
bottom		 HTML5 tarafından desteklenmiyor.İçeriğin nasıl hizalanacağını belirtmek için kullanılır.
frameborder 1
0		 HTML5 tarafından desteklenmiyor.Çerçevenin kenarlığının olup olmayacağını belirtmek için kullanılır.
height pixels Çerçevenin yüksekliğini ayarlamak için kullanılır.
longdesc URL HTML5 tarafından desteklenmiyor.Çerçevenin içeriğinin uzun açıklamasını içeren URL adresini belirtmek için kullanılır.
marginheight pixels HTML5 tarafından desteklenmiyor.Çerçevenin üst ve alt kenarıyla içeriğin boşluk miktarını belirtmek için kullanılır.
marginwidth pixels HTML5 tarafından desteklenmiyor.Çerçevenin sağ ve sol kenarıyla içeriğin boşluk miktarını belirtmek için kullanılır.
name text Çerçevenin ismini belirtmek için kullanılır.
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
scrolling yes
no
auto		 HTML5 tarafından desteklenmiyor.Kaydırma çubuğunun gözüküp gözükmeyeceğini belirtmek için kullanılır.
src URL Çerçevenin içerisinde gösterilmek istenen belgenin URL adresini belirtmek için kullanılır.
srcdoc HTML_code Çerçevenin içinde HTML belgesinin içeriğinin görüntüleneceğini belirtmek için kullanılır.
width pixels Çerçevenin genişliğini ayarlamak için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <i> Tag

Örnek

<p>Onun arabasının adı  çok hızlı olduğu için <i>Yıldırım</i></p>

Bu etiket  metinin bir kısmını alternatif bir ses tanımlamak için kullanılır. Etiketin içeriği genellikle italik olarak görüntülenir. Genelde teknik terimler, başka dilden alıntı vb. işaretlemelerde kullanılır.

Codepen Ön izleme

 

<p>Onun arabasının adı  çok hızlı olduğu için <i>Yıldırım</i></p>

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

Posted on by Samed GÖZÜTOK 0

HTML <html>Tag

Örnek

<!DOCTYPE HTML>
<html>
 <head>
  <title>Belgenin başlığı</title>
 </head>
 <body>
  Belgenin içeriği ......
 </body>
</html>

Bu etiket  belgenin HTML belgesi olduğunu belirtmek için kullanılır. HTML etiketinin kök etiketidir.

Codepen Ön izleme

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>Belgenin başlığı</title>
 </head>
 <body>
  Belgenin içeriği ......
 </body>
</html>

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

Nitelikler

Nitelik Değer Açıklama
manifest URL Önbelleğe yüklenecek verilerin konumu belirtmek için kullanılır.
xmlns URL http://www.w3.org/1999/xhtml
Posted on by Samed GÖZÜTOK 0

HTML <hr> Tag

Örnek

<h1>HTML</h1>
<p>HTML web sayfaları oluşturmak için kullanılan bir dildir.....</p>

<hr>

<h1>CSS</h1>
<p>HTML öğelerinin nasıl görüntüleneceğini tanımlamak için kullanılan bir dildir.....</p>

Bu etiket  belgede bir konu sonu tanımlamak için kullanılır. Ancak görsel açıdan bir çizgi oluşturmak içinde kullanabilirsiniz.

Codepen Ön izleme

 

<h1>HTML</h1>
<p>HTML web sayfaları oluşturmak için kullanılan bir dildir.....</p>

<hr>

<h1>CSS</h1>
<p>HTML öğelerinin nasıl görüntüleneceğini tanımlamak için kullanılan bir dildir.....</p>

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

Nitelikler

Nitelik Değer Açıklama
align left
center
right		 HTML5 tarafından desteklenmiyor.İçeriğin yatay olarak nasıl hizalanacağını belirtmek için kullanılır.
noshade noshade HTML5 tarafından desteklenmiyor.Tek bir renge sahip yatay çizgi belirtmek için kullanılır. Normal görünümü gölge şeklindedir.
size pixels HTML5 tarafından desteklenmiyor.Çizginin yüksekliğini (kalınlığını) belirtmek için kullanılır.
width pixels % HTML5 tarafından desteklenmiyor.çizginin genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <header> Tag

Örnek

<article>
  <header>
    <h1>En önemli başlık</h1>
    <h3>Az önemli başlık</h3>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Bu etiket  belge veya bir bölüm için başlık tanımlamak için kullanılır. Bu içerik <nav> menüleri ve tanıtıcı içerikler olarak kullanılmalıdır. Bir belgede birden fazla <header> kullanılabilmektedir.<header> etiketi,<footer>,<address>  veya başka bir <header> etiketi içerinde kullanılamamaktadır.

Codepen Ön izleme

 

<article>
  <header>
    <h1>En önemli başlık</h1>
    <h3>Az önemli başlık</h3>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

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

Posted on by Samed GÖZÜTOK 0

HTML <h1> .. <h6> Tags

Örnek

<h1>Başlık 1</h1>
<h2>Başlık  2</h2>
<h3>Başlık  3</h3>
<h4>Başlık  4</h4>
<h5>Başlık  5</h5>
<h6>Başlık  6</h6>

Bu etiket  HTML ‘ de başlıklar tanımlamak için kullanılır. <h1> en önemli başlığı,<h6> en önemsiz başlığı  tanımlamak için kullanılır.

Codepen Ön izleme

 

<h1>Başlık  1</h1>
<h2>Başlık  2</h2>
<h3>Başlık  3</h3>
<h4>Başlık  4</h4>
<h5>Başlık  5</h5>
<h6>Başlık  6</h6>

See the Pen HTML h1 to h6 tag by W3TR (@w3tr) on CodePen.

Nitelikler

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

HTML <form> Tag

Örnek

<form action="demo_form.asp" method="get">
  ad: <input type="text" name="ad"><br>
  Soyad: <input type="text" name="soyad"><br>
  <input type="submit" value="Gönder">
</form>

Bu etiket  kullanıcı girişleri oluşturmak için HTML formları oluşturmak için kullanılır.

Beraber kullanılabileceği etiketler;

  • input
  • textarea
  • button
  • select
  • option
  • optgroup
  • fieldset
  • label

Codepen Ön izleme

 

<form action="demo_form.asp" method="get">
  ad: <input type="text" name="fname"><br>
  Soyad: <input type="text" name="lname"><br>
  <input type="submit" value="Gönder">
</form>

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

Nitelikler

Nitelik Değer Açıklama
accept file_type HTML5 tarafından desteklenmiyor.Sunucun kabul ettiği dosya türünü belirtmek için kullanılır.
accept-charset character_set Form göndermek için kullanılacak karakter kodlamasını belirtmek için kullanılır.
action URL Form verilerinin nereye gönderileceğini belirtmek için kullanılır.
autocomplete on
off		 Otomatik tamamlanan özelliğinin açık veya kapalı olacağını belirtmek için kullanılır.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Form verileri sunucuya gönderilirken nasıl kodlanacağını belirtmek için kullanılır.
method get
post		 Form verileri gönderilirken hangi http yöntemini n kullanılacağını belirtmek için kullanılır.
name text Form un ismini belirtmek için kullanılır.
novalidate novalidate Form verilerinin doğrulanmaması gerektiğini belirtmek için kullanılır.
target _blank
_self
_parent
_top		 Form verileri gönderildikten sonra yanıtın nerede gözükeceğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0