İlginizi Çekebilir
CSS Gölge Efekti

HTML Etiketler

HTML Etiketler

HTML ile kodlama yaparken, öğelerin işlevlerini belirtmek için etiket adını verdiğimiz nesneleri kıllanırız. HTML dilinde  yazılan bu etiketler, öğelerle birlikte birleşerek bir yapıyı oluştururlar. Oluşturulan bu yapıyı da web tarayıcısı okuyarak kullanıcıya sunar.

HTML Etiketler ,  < > büyüktür ve küçüktür işaretleri arasında yazılmaktadır. Başlatılan bütün etiketler kapanmalıdır. örneğin <font> etiketi açıldıktan sonra </font> biçiminde kapatılmalıdır.

Eğer ki kodlama kurallarını bilmiyorsanız bu yazımıza göz atabilirsiniz: HTML Kodlama Kuralları
 

Temel HTML İskeleti Etiketleri

HTML, bir Web sayfasının yapısını tanımlamaktadır. Yazılacak olan kodlar ile HTML öğeleri, tarayıcıya içeriği ne biçimde görüntüleyeceğini belirtir. HTML Kodlarıyla web sitesinin ana hatları belirlenir. Bu bölümleri insan vücudu şeklinde düşünebiliriz. Head kısmında sitenin en üst kısmında yer alacak içerikler eklenir, buna üst menü en iyi örnektir. Body kısmında vücut kısmı yani orta kısmında yer alacak içerikler eklenecektir. En alt kısım olarak ise footer şeklinde geçmektedir. Footer kısmında genellikle hakkında bölümü yer alır.
<html></html>
HTML Etiketleri arasında bütün kodlar bulunmaktadır.
 
<head></head>
İçeriğin üst kısmıdır, genellikle sayfanın başlığı bu kısıma yazılır. Üst menü, logo gibi veriler bulunur. Aynı zamanda css kodlarının yazıldığı bölümdür.
 
<body></body>
İçeriğin orta kısmıdır, görseller, yazılar, paragraflar,linkler kısacası içeriğe dair bütün veriler body kısmında yazılmaktadı
 
<footer></footer>
Sitenin en alt kısmıdır, hakkında bölümü veya copyright bölümüdür.

 
 

HTML Etiketleri

<head> etiketinin alt etiketleri

  • <base>

HTML Dökümanlarının temel adres tanımlamasını yapar. Uzun olan adreslere karşı kullanıcıya kolaylık sağlar.

Base etiketinin aldığı özellikler:
href : Bağlantı adresinin yönlendirileceği hedef adresi tanımlar.
target : Sayfa içerisinde ki bağlantıların nerede açılacağını belirtir. 4 farklı türevi vardır.
→ _self : Bağlantıyı aynı sayfa içerisinde açar.
→ _blank : Bağlantıyı yeni sayfa içerisinde açar.
→ _parent : Sayfa içinde bulunan bağlantıları aynı sayfada açar.
→ _top : Bağlantı tam ekran biçiminde açılır.
 

  • <meta>

Meta etiketi arama motorlarına bir web sitesi hakkında bilgi aktaran etiket türüdür

HTML Etiketler
Önerilen Yazı
HTML Meta Etiketi

 

  • <title>

HTML Dökümanına veya siteye bir başlık tanımlar.

 

  • <style>

CSS Kodlarının yazılmış olduğu bölümdür.

 

  • <LINK>

Sayfa içerisine harici bir CSS bağlamak için kullanılır.

LINK etiketinin aldığı özellikler:
href : Sayfa içerisine bağlanacak olan dosya yolunu belirtmektedir.
rel : HTML belgesi ve CSS belgesi arasındaki ilişki yolunu tanımlar.
type : Bağlantı adresinin tipini belirtir.
hreflang : Bağlantı adresinin dilini belirler.
 

  • <script>

Javascript, Jscript, Vbscript kodlarının yazıldığı bölümdür.

 

<body> etiketinin alt etiketleri

  • <body>

Body etiketi sayfanın içeriğini kapsar. Bu etiketin aldığı özellikler ise:
text : Sayfa içerisinde ki metinin rengini belirler.
link : URL Adresinin rengini belirler.
alink : Aktif URL adreslerinin rengini belirler.
vlink : Önceden ziyaret edilmiş URL adreslerinin rengini belirler.
bgcolor : Sayfanın arka plan rengini belirler.
background : Sayfanın arka plan göreslini belirler.
topmargin : Sayfanın üst kenar boşluğunu ayarlar.

HTML Etiketler
Önerilen Yazı
HTML Arka Plan Tasarımı

 

Metin biçimlendirme etiketleri

  • <font>

Yazıya çeşitli özelleştirmeler tanımlar. (Rengini değiştirmek, boyutunu değiştirmek gibi.)

face : Metinin yazı fontunu belirler.
color : Metin rengini belirler.
size : Metinin yazı boyutunu belirler.

HTML Etiketler
Önerilen Yazı
HTML Yazı Biçimlendirme

HTML Etiketler
Önerilen Yazı
HTML Yazı Formatları

 

  • <b>

Metini kalın yapar.
HTML Etiketler – Kod Kampüsü

 

  • <i>

Metini italik yapar.
HTML Etiketler – Kod Kampüsü

 

  • <u>

Metini altı çizili yapar.
HTML Etiketler – Kod Kampüsü

 

  • <s>

Metini üstü çizili yapar.
HTML Etiketler – Kod Kampüsü

 

  • <mark>

Yazacağınız yazının arka plan rengini sarı yaparak vurgular.
HTML Etiketler – Kod Kampüsü

 

  • <sub>

Metine alt yazı ekler. (H2O gibi)

 

  • <sup>

Metine üst yazı ekler. (X2 gibi)

 

Fonksiyonel vurgu etiketleri

HTML Etiketler
Önerilen Yazı
HTML Vurgu Etiketleri
  • <em>

Metini italik yapar.
HTML Etiketler – Kod Kampüsü

 

  • <strong>

Metini kalın yapar.
HTML Etiketler – Kod Kampüsü

 

  • <code>

Kod satırı belirtmek için kullanılır.

System.out.println("Kod Kampüsü");

 

  • <kbd>

Programlama dillerinde sıkça kullanılan, kullanıcıdan bir veri girişi alındığı zaman görüntülenecek yazıyı bu şekilde belirtebiliriz.
Kbd etiketi yazısı Normal yazı

 

  • <samp>

Metin grupları içerisinde örnek satırı oluşturmak için kullanılır.
Tek sayılar: 1,3,5,7,9

 

  • <cite>

Alıntı içeren metin gruplarını ifade eder.
Eğer bir gün benim sözlerim, bilimle ters düşerse; bilimi seçin. -Atatürk.

 

  • <var>

Değişken yapıda olan metin grupları için kullanılır.
Bu cihazda yüksek voltaj tehlikesi olabilir.

 

  • <dfn>

Tanımalama içeren metin grupları içindir.
Cebir: Geometri, sayısal analiz gibi konuları içine alan geniş bir matematik dalıdır.

 

  • <address>

Yazınız içerisinde bir konum, adres belirtmek isterseniz bu etiket kullanılır.

Saltak Caddesi, Sırakapılar Mahallesi NO:20 Kat:4 D:8 Merkezefendi/DENIZLI

 

  • <abbr>

Uzun yazımlı bir kelimenin kısaltmasını kullanarak, üzerine gelince uzun halini gösterebilirsiniz.
Bu gün TCMB faiz kararını açıklayacak.

 

  • <aside>

Ana bir içerik dahilinde bulunan alt içerikleri ve başlıkları belirtmek için kullanılır.

Kod Kampüsü HTML Dersleri

 

  • <time>

Zaman belirtmesi için kullanılır.
Şirketimiz, saatine kadar hizmet vermektedir.

 

  • <bdo>

Bir metin bloğunu, tersine çevirerek yazabilirsiniz.
Ters = MERHABA ARKDAŞLAR BU YAZI TERS!
Düz = MERHABA ARKDAŞLAR BU YAZI TERS!

 

Metin blokları etiketleri

  • <p>

Paragraf türünde bir metin yazmak için kullanılır.
Merhaba bu bir paragraf örneğidir.

 

  • <br>

Bir satır boşluk bırakmak için kullanılır.
Merhaba

br etiketi ile boşluk bıraktık.

 

  • <nobr>

İçerikte bulunan metin bloklarının kaymaması için kullanılır.
Merhaba burası içerik.

 

  • <h1>

Başlık içindir.

H1 Etiketi Örnek

 

  • <h2>

Başlık içindir.

H2 Etiketi Örnek

 

  • <h3>

Başlık içindir.

H3 Etiketi Örnek

 

  • <h4>

Başlık içindir.

H4 Etiketi Örnek

 

  • <h5>

Başlık içindir.

H5 Etiketi Örnek

 

  • <h6>

Başlık içindir.

H6 Etiketi Örnek

 

  • <pre>

Kod sayfasında ki text ekranına benzer bir yapı oluşturur.

 

  • <hr>

Sayfaya yatay bir çizgi eklemek için kullanılır.

hr etiketinin çeşitli özellikleri bulunmaktadır.
align : Çizginin konumunu belirler.
size : Çizginin kalınlığını belirler.
color : Çizginin rengini belirler.
noshade :  Yalın halde bir çizgi ekler.
width :  Çizginin genişliğini belirler.

 

  • <div>

HTML sayfası içinde bölüm oluşturmak için kullanılır.

HTML Etiketler
Önerilen Yazı
HTML Div Etiketi

 

  • <nav>

Site içerisinde menü oluştururken kullanılır.

 

  • <blockquote>

Cümle içerisinde kullandığınız alıntı içerek cümleleri, kelimeleri belirtmek için kullanabilirsiniz.

Bu yazı kodkampusu.com sitesinden alınmıştır.

 

  • <center>

İçeriği ortalamak için kullanılır.

Kod Kampüsü

 

  • <span>

Öğeleri şekillendirme amacıyla gruplamak için veya site içerisinde bölümler oluştururken kullanılır. Kullanıldığı satır içerisini etikleyerek biçimlendirme yapmamıza olanak tanır.
Kod
Kampüsü
HTML
Dersleri

HTML Etiketler
Önerilen Yazı
HTML Span Etiketi

 

Resim ekleme etiketleri

  • <img>

img etiketinin çeşitli özellikleri bulunmaktadır.
src : Resimin hedef bağlantısını ve adını belirtir.
width : Resmin genişliğini belirler.
height : Resmin genişliğini belirler.
border :  Resime çerçeve ekler.

HTML Etiketler
Önerilen Yazı
HTML Resim Ekleme

 

  • <map>

Resim üzerinde belirli bir bölgeye bağlantı vermek için kullanılır.

 

  • <area>

Resim üzerinde ki istenmekte olan bölgeyi belirtmek için kullanılmaktadır.

 

Link verme etiketi

  • <a>

HTML Etiketler
Önerilen Yazı
HTML Yazıya Link Verme

 

Eklenti etiketleri

  • <embed>

Web sitenizde veya HTML dökümanınızda, mevcutta var olan sayfaya bir multimedya akışı (video,müzik v.b) eklemek isterseniz embed etiketini kullanmalısınız.

Embed etiketinin çeşitli özellikleri vardır.
src : Medya içeriğinin kaynak hedef bağlantısını belirtir.
width : İçeriğin genişliğini ayarlar.
height : İçeriğin yüksekliğini ayarlar.
type :  İçeriğin medya tipini belirtir.
volume : Medyanın ses seviyesini ayarlar.
loop : Medyanın oynatması bittikten sonra döngü halinde sürekli oynatmasını sağlar.
aurostart : Medya içeriğinin bulunduğu sayfaya girince, medyanın otomatik başlamasını sağlar.

HTML Etiketler
Önerilen Yazı
HTML Embed Etiketi

 

  • <object>

Tarayıcılar tarafından görüntülenmesi desteklenmeyen içerikler için kullanılır.

 

  • <param>

object etiketi içerisinde, öğelerin parametrelerini belirtmek için kullanılır.

 

  • <video>

Sayfa içerisine video eklemek için kullanılır.

Video etiketinin çeşitli özellikleri vardır.
controls : Oynatma durdurma gibi düğmelerin bulunması için kullanılır.
src : Medya içeriğinin kaynak hedef bağlantısını belirtir.
width : İçeriğin genişliğini ayarlar.
height : İçeriğin yüksekliğini ayarlar.
type :  İçeriğin medya tipini belirtir.
loop : Medyanın oynatması bittikten sonra döngü halinde sürekli oynatmasını sağlar.
autoplay : Medya içeriğinin bulunduğu sayfaya girince, medyanın otomatik başlamasını sağlar.

HTML Etiketler
Önerilen Yazı
HTML Video Ekleme

 

  • <audio>

Sayfa içerisine ses eklemek için kullanılır.

Audio etiketinin çeşitli özellikleri vardır.
controls : Oynatma durdurma gibi düğmelerin bulunması için kullanılır.
src : Medya içeriğinin kaynak hedef bağlantısını belirtir.
type :  İçeriğin medya tipini belirtir.
loop : Medyanın oynatması bittikten sonra döngü halinde sürekli oynatmasını sağlar.
autoplay : Medya içeriğinin bulunduğu sayfaya girince, medyanın otomatik başlamasını sağlar.

HTML Etiketler
Önerilen Yazı
HTML Müzik Ekleme

 

  • <picture>

Sayfaya resim eklemek için kullanılır.

 

  • <source>

Video, audio, picture etiketleri için birden fazla kaynak belirtmek için kullanılmaktadır.

 

Liste etiketleri

HTML Etiketler
Önerilen Yazı
HTML Listeler
  • <li>

Liste içerisine eleman ekler.

 

  • <ul>

Sırasız listelerdir.

  • Çay
  • Kahve
  • Su

 

  • <ol>

Sıralı listelerdir.

  1. Çay
  2. Kahve
  3. Su

 

  • <dl>

Tanımlama listesinin başını ve sonunu belirtir.

 

  • <dt>

Tanım yapılacak olan öğeyi belirtmek içindir.

 

  • <dd>

Alt öğe tanımlamak içindir.

 

Tablo etiketleri

HTML Etiketler
Önerilen Yazı
HTML Tablo Oluşturma
  • <table>

Tablo oluşturmak için kullanılır.

İsimlerVizeFinal
Ali5570
Veli8065

 

  • <tr>

Tabloya satır eklemek için kullanılır.

 

  • <td>

Bir satır üstünde sütun oluşturmak için kullanılır.

 

Çerçeve etiketleri

  • <frameset>

Çerçeve grubu oluşturmak için kullanılmaktadır.

 

  • <frame>

Frameset dahilinde oluşturulan çerçevelerin özellik parametrelerini ayarlamak için kullanılır.

 

  • <iframe>

Web sitenizde başka bir web sitenin canlı görüntüsünü eklemek içindir.

HTML Etiketler
Önerilen Yazı
HTML Iframe Etiketi

 

Form etiketleri

HTML Etiketler
Önerilen Yazı
HTML Form Etiketi
  • <form>

Formu oluşturan temel etikettir.

 

  • <input>

Kullanıcıdan veri girişini kontrol eder.

 

  • <keygen>

Veri güvenliği için kullanılır.

 

  • <button>

Form içerisinde buton oluşturur.

 

  • <label>

Form üzerinde metin etiketi oluşturur.

 

  • <fieldset>

Öğeleri form içerisinde gruplara ayırır.

 

  • <legend>

Öğe grupları için başlık oluşturur

 

  • <textarea>

Metin giriş kutusudur.

 

  • <select>

Form içerisinde açılır liste oluşturur.

 

  • <option>

Açılır listede seçenek tanımlar.

 

  • <optgroup>

Açılır listede ilgili seçenekler tanımlar.

Yorum Yap

Yorum Yap