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:

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.