Anasayfaya geri dön

HTML Etiketleri

15 Ağustos 2020 09:31   •   ☕️☕️ 12 dk okuma süresi   •   🖊 yusuf





Bu çalışmamda elimden geldiği kadar tüm html etiketlerini ve ufak açıklamalarını yazdım. Bu çalışmayı hazırlarken kullandığım kaynakları yazının en alt kısmında bulabilirsiniz.

Konular:

  1. Html ve Metaverileri
  2. Sayfa Alanlarını Oluşturma
  3. İçeriğin Gruplandırılması
  4. Yazıya Anlam Verme
  5. Medya dosyaları ile çalışmak
  6. Tablolar
  7. Formlar
  8. Script
  9. İnteraktif Elementler


Html ve Metaverileri

!DOCTYPE
Aslında bu bir html etiketi değildir. İnternet tarayıcısına html5 kullandığımızı bildirmeye yarayan birseydir. Html sayfasinin en üstüne yazilir.
html
Dökümani bir html dökümani olarak tanimlar.
head
Tarayici penceresinde gözükmiyen bilgiler buraya yazilir.
title
Sayfanin basligi. Tarayici cubuguda gözükür.
base
Bir web sitesinin temel URL'sitesinin.
link
Gecerli ve ilgili döküman arasinda bir baglanti(link) olusturur.
meta
Site bilgilerinin tanimlandigi yerdir. Genellikle arama motorlari tarafindan kullanilirlar(Arama sonuclarinda cikan bilgileri tarayicilar genellikle bu etiketlerden ceker). Herzaman head icerisine yazilmasi gerekir.
style
Mevcut sayfada gecerli olan evrensel css kodlarinin yazildigi yer. Genellikle head kismina yazilir.



Sayfa Alanlarını Oluşturma

body
Tarayıcı penceresinde gözükecek tüm içerik.
article
Bağımsız içerikleri tanımlar.
section
Sayfa içeriğini bölümlere ayırır.
nav
Sayfanın navigasyon çubuğu. Yani başka sitelere uzanan linklerin veya site içerisinde hareket edebilmek için gerekli olan linklerin bulunduğu yer.
aside
Sayfanın ana içeriğine dahil olmayan içerikleri tanımlamak için gerekli etiket.
h1, h2, h3, h4, h5, h6
Başlıklar.
header
Sayfanın giriş kısmı.
main
Sitenin ana içeriğini barındırır.
footer
Yazar, telif hakkı, iletişim bilgileri, site haritası gibi bilgileri içeren ve sayfanın en altında bulunan kısım.
address
Site sahibi'nin iletişim bilgilerini belirlemek için gerekli olan alan.



İçeriğin Gruplandırılması

div
Hiç bir özelliği olmayan bir konteyner. (Css ile biz bu özellikleri kazandırıyoruz bu etikete).
p
Paragraf
hr
Düz yatay bir çizgi oluşturur.
pre
Pre-Formatlanmış yazı.
blockquote
Alıntı.
ol
Düzenli liste.
ul
Düzensiz liste.
li
Liste elemanı.
dl
Açıklama listesinin başlangıcı.
dt
Açıklama listesine terim/ad tanımlar.
dd
Açıklama listesinin açıklaması
figure
Resim, grafik vs. için bir konteyner elementi.



Yazıya Anlam Verme

a
Yazıya link verir.(Hyperlink)
em
Yazıyı hafif vurgulamak
i
Yazıyı italik yapar.
b
Yazıyı kalın yapar.
strong
Yazıyı vurgular.
small
Ufak yazı
cite
Ufak alıntı
dfn
Açıklama(Definition)
data
Belirli bir içeriğin makine tarafından okunabilir çevirisini eklemek için kullanılır.
time
Belirli bir zamanı (veya tarih saatini) tanımlar.
code
Kod göstermek
var
Programlama veya matematiksel ifadedeki bir değişkeni tanımlamak için kullanılır. İçindeki içerik genellikle italik olarak görüntülenir.
samp
samp etiketi bir bilgisayar programından örnek çıktı tanımlamak için kullanılır. İçindeki içerik tarayıcının varsayılan tek aralıklı yazı tipinde görüntülenir.
kdb
klavye girişi tanımlar.(keyboard input)
sub
alt yazı.
sup
üst yazı.
u
Yazıya alt çizgi ekler.
mark
Bir yazıyı vurgular.
bdi
Bir içeriğin içindeki seçili yazıları izole eder. Genellikle kullancı tarafından oluşturulan yazılarda kullanımı daha mantıklıdır.
bdo
Yazı yönünü ayarlayabilirsin. dir="" icerisine iki değer yazabiliyosun. "rtl" yani right-to-left ve "ltr" yani left-to-right.
span
Tek satırlık konteyner.
br
Yeni satır.
wbr
Bu etiket yazıldığı gibi yazı bi alt satıra geçer.
del
Silinmiş yazı olarak gösterme.
ins
Yeni eklenmiş yazı olarak gösterme.



Medya dosyaları ile çalışmak

img
Resim
picture
Alternatif resim formatı
iframe
Başka bir websitesinin iceriğini sayfaya eklemek
embed
Eklenti veya html olmayan içerikleri sayfaya gömmme.
object
Dışarıdan medya alıp siteye eklemeye yarar.
video
Video
audio
Ses dosyası.
source
Sayfaya video, ses ve resim koyarken alternatif vermeye yarar.
track
Video ve ses dosyalarına alt dosya, çeviri vs. eklemek için kullanılır.
area
Görüntü haritasının içindeki bir alanı tanımlar (görüntü haritası, tıklanabilir alanlara sahip bir resimdir). area etiketi herzaman map etiketi icerisinde kullanilmasi gerekir.
map
Görüntü haritası oluşturmaya yarar.
svg
Sayfaya svg-grafik gömmer.
mathml
Sayfaya formüller gömmeye(emmbed etme) yarar.



Tablolar

table
Tablo
caption
Tablo başlığı/konusu ekler.
col
Tablo sütunu
colgroup
Tabloda birden fazla sütunu ayarlamak/formatlamak için seçer.
tbody
Bir tablonun gövdesi.
thead
Tablo'nun başlık kısmı.
td
Tablo hücresi
th
Bir tablonun başlık hücresi
tr
Tablo satırı.



Formlar

form
Form
fieldset
Form içeriklerini tutmaya yarayan konteyner.
label
Form elemanının açıklaması. (Başlığı da diyebiliriz.)
legend
Form alanının tanımlanması. fieldset etiketine başlık veriyor kısacası.
input
Giriş alanı(input field)
datalist
Giriş alanı. (Ama burda seçeneklerde oluyo.)
button
Buton
select
Seçim listesi oluşturur.
option
Seçim listesindeki bir eleman.
optgroup
Bir select öğesindeki (açılır liste) ilgili seçenekleri gruplandırmak için kullanılır.
textarea
Uzun yazılar için giriş alanı.
output
Bir hesaplamanın sonucunu göstermek için kullanılır (komut dosyası tarafından gerçekleştirilen gibi).
progress
Bir görevin tamamlanma ilerlemesini gösterir.
meter
Bilinen bir aralıktaki skaler ölçümü veya kesirli bir değeri tanımlar. Bu, gösterge olarak da bilinir.
keygen
keygen öğesinin name özelliği, form gönderildikten sonra form verilerine başvurmak için kullanılır.



Script

noscript
Javascript desteklemeyen veya bloke edilmiş tarayıcılar için alternatif içerik.
script
Javascript kodu yazmak veya çağırmak.
canvas
Javascript tarafından resimlerle/çizimlerle doldurulan bir yazı-çizim alanı oluşturur.
template
Sayfa yüklendiğinde kullanıcıya gösterilmeyen html içeriğini kapsar.



İnteraktif Elementler

details
Kullanıcının istek üzerine açıp kapatabileceği ek ayrıntıları belirtir.
summery
details için tıklanabilir başlık.
dialog
Bir dialog kutusu veya alt pencere oluşturur.


-





Kullandığım kaynaklar

Bu yazıyı hazırlarken kullandığım kaynaklar: