https://wovenstory.tr.gg/
wovenstory
a weaving story

weaving is to touch the world.

Html etiketleri

Html etiketleri Html Tags   (Html etiketleri)
HTML Tag F U N C T I O N More
❮!--comment--❯ "yorum" etiketi More info

Definition:
Comment\ Yorum etiketi HTML koduna notlar veya ek açıklamalar ekler. Yorumlar web tarayıcısı tarafından gösterilmez. Yorumlar geliştiricilerin ve tasarımcıların kod içinde açıklamalar, hatırlatıcılar veya talimatlar sunması için tasarlanmıştır, bununla birlikte yorum etiketi HTML'deki herhangi bir şeyin amacını tanımlamak için de kullanılır.

Sample code and output looks like this.

<html>
<body>
Alt satırdaki comment tag (<!-- ….. -->) içindeki açıklama, not ve yorum metinleri tarayıcıda görünmeyecektir.
<!--- Bu alan HTML kodlarına açıklama, not ve yorum eklemek için kullanılan (comment) yorum etiketi alanıdır, bu alandakiler tarayıcıda görünmez.--->
Bu HTML <body> etiketi içinde normal bir metindir ve tarayıcıda görünecektir, zira HTML'de <body> …. </body> etiketi içindeki her şey tarayıcıda görünecektir, (comment\ yorum etiketinin içindekiler hariç).
</body>
</html>

❮!DOCTYPE❯ Doküman tipi More info
Definition:

Doctype\ Doküman tipi, HTML <!DOCTYPE> tag tarayıcıya sayfanın hangi HTML sürümünde yazıldığını bildirir. Tüm HTML belgeleri bir <!DOCTYPE> bildirimiyle başlamalıdır.

Doküman ve tip (DOCUMENT and TYPE) kelimelerinin birleşik kısaltmasından oluşturulan <!DOCTYPE> tag html belgelerinin başlangıç etiketidir.

HTML'nin,
◈HTML 4.01 Strict,
◈HTML 4.01 Transitional,
◈HTML 4.01 Frameset,
◈XHTML 1.0 Strict,
◈XHTML 1.0 Transitional,
◈XHTML 1.0 Frameset,
◈XHTML 1.1 vb. belge türleri için ; Bakınız: (wikipedia.org/wiki/Document type declaration)

Aşağıdaki "<!DOCTYPE Html>" belgesi artık HTML 5'te standartlaştırılmış olan doküman tipi'ne sahip temel bir HTML 5 belgesidir.

<!DOCTYPE html>
<html>
<head>
<title> HTML Sayfa başlığı </title>
</head>
<body>

Burası HTML Sayfasının gövdesi yani içerik alanıdır. Bu alandaki ögeler tarayıcıda görünecek olanlardır.

</body>
</html>

URL Web adresi More info

Definition: Tükçe karşılığı "Tekdüzen Kaynak Bulucu" olan URL, "Uniform Resource Locator" deyiminin kısaltmasıdır.
Bir URL alan adını içeren kelimelerden (örn. wovenstory.tr.gg) veya bir Internet Protocol (IP) adresini içeren numaralardan (örn. 192.68.20.68) oluşabilir. Kullanıcılar internet aramalarında genellikle kelimelerden oluşan alan adlarını kullanırlar çünkü adları hatırlamak IP adresindeki sayıları hatırlamaktan çok daha kolaydır.
URL, İnternette bir kaynağı bulmak için kullanılan benzersiz bir tanımlayıcıdır. Aynı zamanda Web adresi olarak da adlandırılır. URL'ler, bir web tarayıcısına bir kaynağın nasıl ve nereden alınacağını söyleyen, protokol ve alan adı da dahil olmak üzere birden çok parçadan oluşur.
URL, bir kaynağa erişmek için gereken protokolün adının yanı sıra kaynak adını da içerir. URL'nin ilk kısmı, birincil erişim ortamı olarak hangi protokolün kullanılacağını tanımlar. İkinci bölüm, kaynağın bulunduğu IP adresini veya etki alanı adını tanımlar. URL olarak bilinen bir adres, web tarayıcısının belirli bir web sayfasını, görseli, dosyayı veya diğer kaynakları bulmasına yardımcı olur.
URL'nin ilk kısmında birincil erişim ortam URL protokolleri bulunur;
• Web kaynakları için URL protokolleri;
HTTP (Hyper Text Transfer Protocol. / Köprü Metni Aktarım Protokolü) Şifrelenmemiş ortak web sayfaları ve
HTTPS (Hyper Text Transfer Protocol Secure. / HTTP'nin Güvenli versiyonu) Şifrelenmiş güvenli web sayfaları.
HTTPS, şifreler, kredi kartı numaraları ve kimlik verileri gibi hassas bilgilerin yetkisiz erişime karşı koruma amaçlı bir protokoldür.
• e-posta adresleri için URL protokolü;
FTP (File Transfer Protocol. / Dosya Aktarım Protokolü) internet üzerinden dosya transferi yapmak için kullanılan bir protokoldür.
TELNET uzak bilgisayarlara erişim amaçlı bir oturum için.
Çoğu URL protokolünün ardından iki nokta üst üste ':' ve iki eğik çizgi '//' gelir; "mail to" ifadesinin ardından ise yalnızca iki nokta üst üste ':' gelir.
Tarayıcıdaki URL'nin geri kalanı, tarayıcının adresini alıp alan adını sunucunun IP adresine dönüştürdükten sonra o sunucudaki belirli dosyaya giden yolu görüntüler.
Alan adı tüm web sitesi veya sunucunun genel "adresi" iken, URL belirli bir dosya veya sayfaya işaret eder.
"https://wovenstory.tr.gg/iplik- tipleri.htm" nin URL örneğinde;
https= URL Protokolünü (PROTOCOL),
wovenstory.tr.gg= Alan adını (DOMAIN),
iplik-tipleri.htm= Bağlantı yolunu (PATH) ifade eder.
Yerel bağlantılar (aynı web sitesi içindeki bir sayfaya bağlantı), göreceli bir URL ile ("https ve www" kısmı olmadan) belirtilir.

Sample Output:

Go to yarn type page sola ok Bağlantıya tıklandığında "wovenstory.tr.gg/iplik tipleri" sayfası açılacaktır, çünkü örnek bağlantının URL'sinde wovenstory web sitesinin iplik tipleri sayfasına (göreceli) bağlantı verilmiştir.
•••


❮anchor❯ tags "Bağlantı" etiketleri More info
Definition:

Anchor tags\ "Bağlantı" etiketleri, anchor kelimesinin ilk harfi olan <a> ile temsil edilir. <a> bağlantı etiketleri aşağıda listelenen özellikleri alır.
• web sitesi içinde başka bir sayfaya,
• Sayfanın belirli bir bölümüne,
• e-posta adresine,
• Bir dosyaya
• Başka herhangi bir web adresine (URL'ye) bağlantı vermek için kullanılabilir.

Metin bağlantıları oluşturulduğunda
<a> …… </a> etiketleri arasına girilen metin, çapa metnidir. Çapa metni, bağlantının tıklanabilen kısmıdır. Google bu metni, bağlantı ve işaret ettiği içerik hakkında daha fazla bilgi edinmek için kullanır.

<a> bağlantı etiketi nitelikler listesi
(<a> anchor tag attributes list)
❮a href❯ attribute "Bağlantı referansı" özelliği More info
Definition:

HTML'de <a> etiketi aynı zamanda bağlantı etiketi olarak da bilinir. Bir sayfayı diğerine bağlayan bir köprüyü tanımlar.

<a> etiketinin href özelliği ise bağlanılacak web sitesinin, sayfanın veya belgenin referansını yani bağlantı elemanının yolunu belirtir.

<a href> bağlantısı tıklanabilir bir köprü (hyperlink) oluşturmak için <a> etiketini ve href özelliğini kullanan HTML kodudur. Bağlantı elemanlarının başlangıç ​​etiketi <a> bitiş etiketi ise </a>'dır.
href kelimesi "hypertext reference" kelimelerinden kısaltılmıştır, Türkce karşılığı ise "köprü metni referansı"'dır.
  Aşağıdaki örnekte, "Go to Woven Story website" metni bir köprü görevi görecek ve kullanıcıyı wovenstory web sitesine götürecektir. O sitenin web adresi href özelliğinde referans olarak verilmiştir.

Sample Output:

Go to Woven Story website sola ok Bağlantıya tıklandığında Woven Story ana sayfası açılacaktır.
•••


❮a hreflang❯ attribute "Dil kodu" özelliği More info
Definition:

Hreflang\ "Dil kodu" özelliği, bir web sayfasının dilini ve hedeflenen bölgesini belirten bir HTML özelliğidir. Birden çok dilde içeriğe sahip olan veya farklı coğrafyalara hitap eden web siteleri için kullanışlıdır. Google gibi arama motorları, bir sayfanın en uygun versiyonunu kullanıcılara sunmak için bu özelliği kullanır.

Alternatif sayfaları belirtmenin en temel yolu sayfanın HTML kodunu kullanmaktır. İlgili tüm hreflang niteliklerini sayfanın <head> kısmına eklemek yeterlidir.

Bağlantılı kaynağın dilini belirten <Hreflang> dil kodu özelliğinin bağlantılar için basit kullanımı aşağıda verilmiştir, bu örnekte kullanılan dil kodu Türkçe'dir.

Sample Output:

Go to Woven Story website sola ok Bağlantıya tıklandığında dil codu "tr" olan Woven Story ana sayfası açılacaktır.

Hreflang hakkında geniş bilgi için: ahrefs.com sayfasını ziyaret ediniz.
•••

❮a download❯ attribute "indirme" özelliği More info
Definition:

Dovnload\ "İndirme" özelliği, tarayıcıya bağlantılı kaynağı açmak yerine indirmesini söyler.

Sample Output: — Download file
Download, Dokuma page sola ok Bağlantıya tıklandığında Wovenstory.tr.gg/Dokuma" sayfasını indirmeye çalışacaktır.
•••

Sample Output: — Download İmage
logo
 sola ok
Görselin üzerine tıklandığında görüntüyü indirmeye çalışacaktır.
•••

❮a target❯ attribute "Hedef" özelliği More info
Definition:

Target "Hedef" özelliği, tarayıcıya bağlantıyı nerede açacağını söyler; örneğin aynı sekmede, yeni bir sekmede, yeni bir pencerede veya çerçevede.
target parametreleri:
•_blank: Bağlantıyı yeni bir web sayfası sekmesi olarak açar.
•_self: Bağlantıyı aynı iframe veya aynı web sayfası içinde açar, ancak yalnızca bağlantı aynı alandaysa. Bağlantı başka bir alana aitse çalışmaz.
•_top: Bağlantının, aynı web sayfası içinde en üstten itibaren açar.
•_parent: İframe'in dışında (aynı web sayfasında olduğu gibi) bir bağlantı açar.
•_framename: (çerçeve adı) Bağlantının adlandırılmış bir çerçevede açılmasını sağlar.

Sample Output:

Go to Coversion tools sola ok Bağlantıya tıklandığında "Çevirim araçları" sayfası "yeni bir sekme" de açılacaktır, nedeni ise örnek kod'da bağlantının target özelliğine "blanc" parametresi verilmiş olmasıdır.
***

❮a rel❯ attribute "Göreceli bağlantı" özelliği More info
Definition:

a rel \ "Göreceli" bağlantı özelliği, geçerli belge ile bağlantılı belge arasındaki ilişkiyi belirtmek için kullanılır. Bağlantı verilenden gelebilecek risklere karşı hassas içerikler için önerilen bir bağlantı şeklidir.
Hassas içerikler dahil her bağlantı için
<a rel="noopener"> veya <a rel="noreferrer"> bağlantı nitelikleri kullanılabilir.

Web sayfalarında öğeler arasındaki ilişkileri tanımlamak için kullanılabilecek "rel" özelliğinin birkaç farklı türünden bazıları aşağıda listelenmiştir:

  • Noopener - Noreferrer (Yönlendireni gizleme): Yeni bir sekmede bir bağlantı açar ve herhangi bir web sitesinin yönlendiren URL'si gibi belirli verilere erişmesini engeller.
  • Related (İlgili): Web sitenizdeki iki sayfanın ilişkili olduğunu veya aynı konunun parçası olduğunu belirtir.
  • Alternate (Alternatif): Tarayıcılara, mevcut olduğunda sayfanın alternatif bir sürümünü göstermeleri gerektiğini söyler, örneğin, yazdırılabilir veya indirilebilir bir sürüm vb..
  • Canonical (Kanon- Genel kural): Çevrimiçi olarak birden fazla sürümü varsa hangi sayfanın ana sayfa olarak değerlendirilmesi gerektiğini belirtir.
  • Help (Yardım): Bağlantılı sayfanın gerekli yardım belgelerini içerdiğini belirtir.
  • Appendix (İlave- Ek): Tarayıcıların, bağlantılı sayfanın ana sayfanın bir eki olduğunu bilmesini sağlar.
  • Contents (İçindekiler): Bağlantılı sayfanın bir içindekiler tablosu içerdiğini belirtir.
  • Copyright (Telif hakkı): Tarayıcılara, bağlantılı sayfanın telif hakkı bilgileri içerdiğini bildirir.
  • Index (Fihrist - Dizin): Tarayıcılara, bağlantılı sayfanın ana sayfa için bir dizin olduğunu söyler.
  • License (Lisans): Bağlantılı sayfanın web sitenizdeki içeriğin lisanslanmasıyla ilgili bilgiler içerdiğini belirtir.
  • Shortcut (Kısayol): Bağlantılı sayfanın ana sayfa için bir kısayol olduğunu belirtir.
  • Prefetch (Önceden getir): Erişildiğinde daha hızlı yüklenmesi için tarayıcılara bağlantılı sayfayı önceden getirmesini söyler.
  • Prev (Önceki): Bağlantılı sayfanın bir serideki önceki sayfa olduğunu belirtir.
  • Next (Sonraki): Tarayıcılara bağlantılı sayfanın bir serideki sonraki sayfa olduğunu söyler.
  • Nofollow (Takibe kapalı): Bağlantılı sayfanın arama motoru tarayıcıları tarafından takip edilmemesi gerektiğini belirtir.

❮a rel noopener❯ attribute "yönlendirene erişimi engelleme" özelliği More info
Definition:

rel noopener\ "yönlendirene erişimi engelleme" özelliği, bağlantılı sitenin, bağlantı veren web sayfasına erişim almasını engeller. Bu, bağlantılı sitenin kontrolü ele geçirmesini veya bağlantı veren siteyi başka şekilde etkilemesini önler.

Sample Output:

Noopener Anchor sola ok Bu örnekte Google.com adresine bağlantı verilmiştir, bağlantının "noopener" özelliği bu siteyi, bağlanı verilen siteden başlık yazısında bahsi geçen risklere karşı koruyacaktır.
•••

❮a rel noreferrer❯ attribute "yönlendireni gizleme" özelliği More info
Definition:

rel noreferrer\ "Yönlendireni gizleme" özelliği, yönlendiren bilgilerini bağlantı verilen siteden gizler. Site ziyaretçisi <a rel="noreferrer"> özelliği uygulanmış bir bağlantıya tıkladığında, bağlantı verilen site, ziyaretçiyi hangi sitenin yönlendirdiğini bilmeyecektir.

<a rel="noreferrer"> bağlantı özelliği aynı zamanda <a rel="noopener"> bağlantı özelliği ile aynı işlevi görür, çünkü bağlantılı sitenin bağlantı veren sitenin kontrolünü ele geçirmesini engeller.

Sample Output:

noreferrer anchor sola ok Bu örnekte Birgün.net adresine bağlantı verilmiştir, bu bağlantıya tıklayıp birgün.net adresine giden bir kullanıcının hangi bağlantı kanalını kullanarak geldiğini bilmeyecektir, zira bağlantının "noreferrer" özelliği bu bilgiyi gizlemiş olacaktır.
•••

❮a id❯ attribute "kimlik" özelliği More info
Definition:

HTML'de kimlikler, identity kelimesinin kısaltması olan "id" ile temsil edilir, identity kelimesinin Türkçe karşılığı ise "kimlik"tir.

• "id" özelliği HTML öğesine benzersiz bir kimlik vermek üzere eklenen bir özelliktir.

• HTML'de kimlikler büyük/küçük harfe duyarlıdır, örneğin combed ve Combed aynı kimlik değildir.

• HTML'de kimliği yazarken boşluk kullanılamaz, eğer iki kimlik kullanmak istenirse bu kimlik, combed yarn yerine combed-yarn şeklinde olmalıdır.

Aynı sayfa içinde çapa bağlantıları için "id" kullanımı:

Çapa bağlantıları, hızlı gezinme amacıyla sayfanın "id" (kimlik) yerleştirilen bölümlerine atlama yapmak için kullanılır. Bu, sayfa başı, sayfa sonu veya sayfa içindeki konu başlıkları olabilir.

Çapa bağlantısı link'i oluşturmak iki aşamalı bir eylemdir.
1- Bağlanmak istenen bölüme "id" özelliği eklemek.
2- Bağlantıya "id" özelliği eklemek.

Örneğin, bu sayfadaki "cite tag" ile ilgili konuya bağlantı vermek için "cite tag" konu başlığına gidip -
<div id="citetag"> … </div> şeklinde bir id özelliği ekleyerek bağlanmak istenen bölümü belirledik.

Buraya da <a href="#citetag"> Cite tag konu başlığına git </a> şeklinde bir "id" özelliği ekleyerek bağlanmak istenen bölüme bir bağlantı (çapa) oluşturduk.

Sonuç, Go to cite tag sola ok linkini oluşturdu, linke tıklayan kullanıcılar bu sayfadaki "cite tag" konu başlığına gidecektir.
•••

Farklı sayfalara çapa bağlantısı için "id" kullanımı:

Sayfa içi çapa uygulamasındaki yöntemler burada da geçerlidir, ancak burada bağlanmak istenen bölüm başka bir sayfadaki bölüm veya konu başlığıdır. Örneğin, wovenstory.tr.gg/iplik tipleri sayfasında Penye (Combed) paragrafına bağlanmak için ilgili sayfanın ilgili paragrafının başlığına <div id="Combed"> … </div> şeklinde bir "id" özelliği ekleyerek bağlanmak istenen bölümü belirledik.

Buraya da <a href="iplik-tipleri.htm# Combed"> Go to Combed </a> şeklinde bir "id" özelliği ekleyerek bağlanmak istenen bölüme bir bağlantı (çapa) oluşturduk.

Sonuç, Go to Combed sola ok linkini oluşturdu, linke tıklayan kullanıcılar bu sitenin "iplik-tipleri" sayfasında Penye (Combed) konu başlığına gidecektir.
•••

❮a mailto❯ attribute "e-posta bağlantısı" özelliği More info
Definition:

mailto\ e-posta bağlantısı özelliği, kullanıcıyı önceden tanımlanmış bir alıcı adresine sahip varsayılan posta istemcisine yönlendiren HTML köprüsü türüdür. HTML'de bir mailto bağlantısı (link'i) oluşturmak için, "a" etiketini "href" özelliğiyle birlikte kullanıp devamında mailto bağlantısı özelliği (mailto protokolü) eklenir.

Örneğin
<a href="mailto:example@example.com"> Click to send email </a> şeklinde bir kod dizimi aşağıdaki varsayılan e-posta (mailto) bağlantısını yaratacaktır,

Click to send email sola ok Kullanıcı bu bağlantıya tıklandığında belirli bir adrese e-mail göndermesi için, tarayıcı bilgisayarın varsayılan e-posta istemcisini açar ve alıcı adresini, yani Kime: alanını mailto özelliğinde belirtilen adresle otomatik olarak doldurur, buna "mailto protokolü" denir.
•••

❮a phone❯ attribute "telefon bağlantısı" özelliği More info
Definition:

Phone\ Telefon bağlantısı özelliği, Telefon bağlantıları, telefon özellikli cihazlarda bir numarayı aramak için dokunduğunuz bağlantılardır. Bazı cihazlar telefon numaralarını tanıyabilir ve bağlantıyı otomatik olarak sağlayabilir.

Telefon bağlantısı özelliğinde, telefon protokolü ve telefon numarası eklenmiş telefon bağlantısı kodu; <a> href="tel:8331234567"> 833 123 4567" </a> Aşağıdaki bağlantıyı oluşturacaktır.

833 123 4567 sola ok Bu bağlantı tıklandığında, bu özelliğe sahip cihazlar numarayı arayacaktır.
•••

Ülke kodu eklemek

Ülke kodu eklemek için "+" işareti ve arkasından ülke kodu eklenmesi yeterlidir.
<a href="tel:+908331234567"> +90 833 123 4567" </a> Bu kod dizimi, "+" işareti ile Türkiye için ülke kodu olan "90" eklenmiş telefon bağlantısını oluşturacaktır.

+90 833 123 4567 sola ok Bu bağlantı, Türkiye için ülke kodu eklenmiş bir telefon bağlantısıdır, bağlantı tıklandığında bu özelliğe sahip cihazlar numarayı arayacaktır.
•••

Ülke kodlarının sıralı listesi için
Telefon kodları sola ok sayfasını ziyaret ediniz.

❮a title❯ attribute "bağlantı başlığı" özelliği More info
Definition:

Bir html sayfasının metni içinde geçen benzer yada farklı bir konu hakkında, konunun geçtiği cümleye veya görsele "link" vermek suretiyle kullanıcının daha fazla bilgiye ulaşmasını sağlayan kullanıcıya araç ipucu olarak görünen bir bağlantının başlığını tanımlar.

İmleç bağlantının üzerine getirildiğinde bağlantı hakkında özet bilgiler ön izlenir, link tıklandığında ise kullanıcı ilgili sayfaya yönlendirilir. Önizleme özelliği sadece klavye maus kullanılan cihazlarda mevcuttur, dokunmatik cihazlarda bu özellik desteklenmez.

Sample Output:
a title attribute

Kış koşullarında kullanılacak giysi ve örtüler, kış koşullarına uygun seçilmiş elyaf cinslerinden Tekstil liflerinin 4 ana kaynağı vardır, İlk 3 kaynak Hayvansal, Bitkisel ve Mineral olmak üzere Doğal lifler’dir. 4. Kaynak ise kimyasal olarak yapılandırılmış Sentetik (Yapay) Lifler’dir. sola ok yapılmış ipliklerle sık dokuma veya örme kumaşlardan, kumaş terbiyesinin de yardımıyla yumuşak bir tutum (el hissi) , dolgun bir tuşe (yoğunluk oranı) ve minimum hava geçirgenliğine sahip materyallerden oluşmalıdır, söz konusu özelliklere sahip kumaşlardan yapılmış giysiler veya örtüler kullanıcıyı soğuk, rüzgar vb. dış etkenlerden koruyacak aynı zamanda vücut ısısını da muhafaza etmek suretiyle kış koşullarından olumsuz etkilenmeyi en aza indirecektir, buna rağmen giysilerin yetersiz kaldığı durumlar da olabilir, zira bilinmesi gerekir ki, giysi veya örtüler ısı üretmez sadece dış etkileri en aza indirip vücut ısısını muhafaza ederek olumsuz hava koşullarından etkilenmeyi en aza indirmeyi hedefleyen materyallerdir.
•••

❮abbr❯ tag "kısaltma" etiketi More info
Definition:

Bu etiket, Türkçe karşılığı "kısaltma" olan abbreviation kelimesinin kısaltmasıdır ve html'de <abbr> ile temsil edilir.

abbr "kısaltma" etiketi, bir web sayfasının metni içindeki bir kısaltmayı tanımlamak için kullanılır. Bu özellik kullanıcıya kısaltmanın anlamı hakkında ek bilgi sağlamaya yardımcı olmak için kullanılır ve sayfanın içeriğini netleştirmek için yararlı olabilir.

ABBR etiketi web sayfasında tutarlı bir şekilde kullanılmalıdır. Sayfanın bir bölümünde kısaltma kullanıldığında onu tanımlamak için <abbr> ögesi mutlaka kullanılmalıdır, ayrıca maus üzerine geldiğinde tam genişlemeyi sağlamak için, başlık (title) özelliğini kullanılması tavsiye edilir.

Sample Output:

Amerika Birleşik Devletleri'nde "National Organic Program" NOPsola ok kurallarının organik pamuk tarlalarında uygulanması zorunludur. Bu kurum, organik mahsullerin haşere kontrolü, yetiştirilmesi, gübrelenmesi ve işlenmesi için izin verilen uygulamaları belirler.

•••

❮acronym❯ tag "kısaltma" etiketi More info
Definition:

Acronym\ "kısaltma" etiketi, aynı "abbr" etiketi gibi bir html sayfasının metni içinde bir kısaltma tanımlamak için kullanılır. Uzman tavsiyeleri bunun yerine <abbr> etiketinin kullanılması yönündedir.

❮address❯ tag "adres" etiketi More info
Definition:

Address\ "Adres" etiketi, site sahibi veya makale yazarı hakkında iletişim bilgisi sağlamak için kullanılır. Adres etiketi, e-posta, telefon, adres, siteye bağlantı vb. bilgileri içerebilir.

Adres etiketi, bir HTML Belgesinde farklı yerlerde kullanıldığında farklı bir anlam taşır; <body> etiketi içinde kullanıldığında sitenin veya site bir işletmeye ait ise işletmenin iletişim bilgilerini gösterir, <article> etiketi içine bir address öğesi ekleyerek kullanıldığında bir makalenin yazarını veya yazarın iletişim bilgilerini kapsar, <footer> etiketi içinde kullanıldığında adres bilgileri makalenin sonuna alt bilgi olarak yerleştirilir.

HTML adres etiketi her zaman <body> etiketinin içinde olmalıdır. Adres etiketi genellikle "article" veya "body" için "footer" (alt bilgi) etiketinin içine yerleştirilir.

Sample Output:
HTML document main content: HTML tags
Article heading: Address tag
  Contact us at
Subject writer: Wovenstory author team
Contact: Contact Author team
Address: 925. cadde no:101, İzmir / TURKEY

❮align❯ tag "hizalama" etiketi More info
Definition:

Align etiketi, Türkçe karşılığı hizalama olan "alignment" kelimesinin kısaltmasıdır.
Align\ Hizalama etiketi, elemanın html kapları ve formlar üzerinde nasıl konumlanacağını belirtmek için genellikle "CSS style" başlığı altında kullanılan bir html öğesidir.
Hizalama için ana başlıklar; Yatay, dikey ve yüzen pozisyonlarda hizalama olarak verilebilir.

Üstteki örneklerde Kap olarak tablo (table) etiketi kullanılmıştır, ihtiyaca göre diğer Kap etiketleri <div> - <p> gibi blok etiketler veya <span> etiketi kullanılabilir. (span etiketi display block özelliği ile birlikte kullanılmalıdır)
Aşağıdaki 3 örnek sırasıyla (div) - (p) ve (span) etiketleriyle üretilmiştir.

YATAY HIZALAMA (horizontal)

Yatay pozisyonda hizalanacak unsurlar kap içinde pozisyon alması için
• left (Sol kenara yanaşık),
• center (Yatay ortalanmış),
• right (Sağ kenara yanaşık)
değerlerinden birini alır. Varsayılan değer (left) sol kenara yanaşık pozisyondur.
Sola hizalama (left) 
 <td style="text-align:left;">
kod içindeki "left" değeri
logo Kap içindeki metin, görsel vb. unsurları kabın sol sınırından itibaren hizalayacaktır.
center: Yatay ortalamak <td style="text-align:center;">
kod içindeki "center" değeri
logo
Kap içindeki metin, görsel vb. unsurları
kabın yatay ortasına hizalayacaktır. </td>
right: Sağa hizalamak 
<td style="text-align:right;">

kod içindeki "right" değeri
logo
Kap içindeki metin, görsel vb. unsurları kabın sağ sınırından itibaren hizalayacaktır. </td>
Kap: div etiketi
logo
<div style="text-align:center;">..!..</div>

Kap: p etiketi
logo
<p style="text-align:center;">..!..</p> Kap: span etiketi
(display:block özelliği ile)
logo
<span style="text-align:center;display:block;">..!..</span>

DİKEY (vertical) HIZALAMA

Kap içindeki unsurları Dikey pozisyonda hizalamak.

• top (En üste yanaşık),
• middle (Dikey ortalanmış), veya
• bottom (En alta yanaşık) değerlerinden birini alır.
<td style="vertical-align:top;">
kod içindeki "top" değeri
logo
kap içindeki metin, görsel vb. unsurları kabın üst sınırından itibaren hizalayacaktır. </td>
<td style="vertical-align:middle;">
kod içindeki "middle" değeri
logo
kap içindeki metin, görsel vb. unsurları kabın dikey orta kısmında hizalayacaktır. </td>
<td style="vertical-align:bottom;">
kod içindeki "bottom" değeri
logo
kap içindeki metin, görsel vb. unsurları kabın alt sınırından itibaren hizalayacaktır. </td>
YÜZEN (float) HIZALAMA

Yüzen veya Kayan anlamına gelen "float" özelliği, özellikle görsel ile desteklenmek istenen makalede, görselin makale içindeki konumunu aşağıdaki özelliklerden hangisini alacağı belirleyecektir.
• left Öge bulunduğu kabın soluna kayar,
• right Öge bulunduğu kabın sağına kayar,
• none Öge kaymaz (metinde geçtiği yerde görüntülenecektir). Bu varsayılandır,
• inherit Öge ebeveyninin float değerini miras alır.

Position float: left and float: right
SHOW

cord fabric

Bedford cord fabric, bedford kordonu veya kordu olarak bilinen, düz ve burgulu kordon olmak üzere iki tür örgünün birleşiminin meydana getirdiği '3d' kord tasarımlarını ön plana çıkaran, genellikle pamuktan yapılmış cord fabric kadife benzeri dokuma kumaş. Genellikle döşemelik veya dış giyimde kullanılan dayanıklı bir kumaştır. Fitilli kadifeye benzer ancak fitilli kadife aslında bir havlı kumaştır.

Bu makalenin içinde;
float değeri "left" verilen görsel sola yanaşık,
float değeri "right" verilen görsel sağa yanaşık pozisyonları almışlardır.

Position float: none
SHOW

cord fabric Bedford cord fabric, bedford kordonu veya kordu olarak bilinen, düz ve burgulu kordon olmak üzere iki tür örgünün birleşiminin meydana getirdiği '3d' kord tasarımlarını ön plana çıkaran, cord fabric genellikle pamuktan yapılmış kadife benzeri dokuma kumaş. Genellikle döşemelik veya cord fabric dış giyimde kullanılan dayanıklı bir kumaştır. Fitilli kadifeye benzer cord fabric ancak fitilli kadife aslında bir havlı kumaştır.

Bu makalenin içindeki görsellerin float değerleri "none" olarak verilmiştir, bu nedenle görseller yerleştirildikleri satırdaki yazıya göre pozisyon alarak bulunduğu satırda sağa sola yüzmektedir.


❮area❯ tag "alan" etiketi More info
Definition:

Area\ "Alan" etiketi, görüntü haritalarında bir bağlantıyla ilişkilendirilen tıklanabilir alanları tanımlar.

Area parametreleri
  • alt: Resim haritasında tıklanabilir bir alan için alternatif metin belirtir.
  • coords: Resim haritasındaki tıklanabilir bir alanın şeklini ve boyutunu tanımlar. shape değeri; default ayarlanmışsa bu özellik kullanılmaz.
  • href: Bağlı belgenin veya kaynağın URL'sini (web adresi) tanımlar.
  • nohref: Resim haritasının bir alanının başka bir kaynağa bağlanmadığını belirtir.
  • shape: Resim haritasında bir tıklanabilir alanın şeklini, boyutunu ve yerleşimini belirtir.
  • target: Bağlı kaynağın nasıl açılacağını belirtir. _blank, _parent, _self ve _top değerlerinden birini alır.
  • title: Tıklanabilir alanın başlık metnini tanımlar. (Başlık metni çoğu tarayıcıda bir araç ipucu olarak görünür).
Shape (şekil) özellikleri

• rect (Rectangle): Dikdörtgen bir bölgeyi tanımlar, rect değeri: x1,y1,x2,y2'dir bu değer, dikdörtgenin sol üst ve sağ alt köşesinin koordinatlarını belirtir. <area Shape="rect" coords="0,0,280,56"> kod diziminde koordinatlar sırasıyla dikdörtgenin sol üst ve sağ alt köşelerini gösteren 0,0 ve 280,56'dir.

• circle: Dairesel bir bölgeyi tanımlar, daire değeri: x,y,radius'dır, bu değer, daire merkezinin ve yarıçapının koordinatlarını belirtir, örnek kod dizimi ise <area shape="circle" coords="160,186,60"> şeklinde verilebilir.

• poly (Polygon): Çokgen bir bölgeyi tanımlar, poly değeri: x1,y1,x2,y2,..,xn,yn'dir, bu değer, çokgenin kenarlarının koordinatlarını belirtir (İlk ve son koordinat çiftleri aynı değilse, tarayıcı çokgeni kapatmak için son koordinat çiftini ekleyecektir).

• default (Varsayılan): Hiçbir değer almaz ve görüntünün tamamını tanımlar.

Sample Output:
Area Tag Demo filament_viscose staple viscose yarn

Bu resim haritasının solundaki iplik bobininde, filament fiber viscose iplik vardır, üzerine tıklandığında wikipedia Rayon sayfası açılacaktır.

Sağındaki iplik bobininde ise, staple fiber viscose iplik vardır, üzerine tıklandığında wikipedia Staple sayfası açılacaktır.
•••

❮aside❯ tag "kenar notu" etiketi More info
Definition:

Aside tag\ "Kenar not'u" etiketi, birincil içerik dışında ek bilgiler görüntüler. Kenar not'u etiketi içindeki içerik, birincil içeriğin bir parçası değildir, ancak yine de onunla ilişkilidir. Başka bir ifadeyle, birincil içeriğin bağlamsal akışını bozmamak için kullanılır.

Sample Output:
Use of aside tag Twill ya da Türkçe bilinen adıyla "dimi" örgü, birbirine paralel nervür çubuklarını diyagonal olarak kumaşın bir ya da iki yüzeyine yansıtan bir dokuma tekniğidir. Bu teknikle; 2/1 ve 3/1 Twill (dimi) gibi kumaşın bir yüzünde diyagonal nervür çubukları oluşturulan klasik Twill dokumaların yanısıra 2/2, 3/2, 4/2 Twill gibi kumaşın iki yüzeyinde de nervür çubukları oluşturacak dokumalar da yapılabilmektedir.
•••

❮audio❯ tag "ses" etiketi More info
Definition:

audio tag\ ses etiketi, ses dosyalarının bir web sayfasına gömülmesine izin vermek için eklenen HTML5 öğelerinden biridir.


Audio kontrol parametreleri:

• Autoplay: Sayfayı yükledikten sonra ses dosyasını otomatik olarak oynatır.

• Controls: Kontrol panelini görüntüler (başlat düğmesi, kaydırma, ses kontrolü).

• Loop: Döngü tamamlandıktan sonra ses dosyasını baştan itibaren sürekli olarak tekrarlar.

• Muted: Ses dosyası çalınırken sesi kapatır.

• Preload: Önyüklenmiş veriler tarayıcının ne yapması gerektiğini tanımlar ve aşağıdaki değerleri alır.

a) Auto: Sayfa yüklendikten sonra oynatma başlar.

b) None: Oynatma yalnızca ilgili düğmeye tıklandıktan sonra başlar.

c) Audio volume: Başlangıç ses düzeyini ayarlar.

• Src: Ses dosyasının yolunu (URL) belirtir.

❮b❯bold❮/b❯ tag "kalın" etiketi More info
Definition:

Kalın anlamına da gelen bold kelimesinin ilk harfi olan <b> ile temsil edilen "kalın" etiketi, herhangi bir özel önem taşımadan metnin bir bölümünü kalın yapmak için kullanılır. <b> etiketinin amacı kullanıcının dikkatini makale içindeki bir konuya çekmektir. Örneğin bir metin özetindeki anahtar sözcükler, bir incelemedeki ürün adları veya vurgulanmak istenen bir harf, kelime ya da cümlede kullanılabilir.

Sample Output:

Pamuk, Malvaceae ebegümeci familyasından Gossypium cinsi bitkilerinin tohumlarının çevresinde bir koza veya koruyucu kılıf içinde büyüyen yumuşak, kabarık bir elyaftır. Pamuk lifleri neredeyse saf selülozdur ve eser miktarlarda mumlar, yağlar, pektinler ve su içerir.


•••

❮base❯ tag "baz" etiketi More info
Definition:

Baz, temel ya da kök anlamına gelen HTML'deki <base> etiketi, bir HTML belgesindeki tüm göreli URL'ler için temel URL'yi belirtir. Geliştiricinin, belgede görünen ilgili URL'leri çözümlemek için kullanılacak varsayılan bir URL belirlemesine olanak tanır.
Temel etiket, HTML belgesinin başlığına yerleştirilmeli ve her belgede sadece bir kez kullanılmalıdır.
HTML temel etiketinin iki özelliği vardır: href ve target.
href: Bu özellik belgenin temel URL'sini belirtir. Belgedeki tüm göreceli URL'ler bu temel URL'ye göre çözümlenecektir.
target: Bu özellik, belgedeki tüm göreceli bağlantılar için varsayılan hedefi belirtir. Bağlantılı belgelerin nerede görüntüleneceğini kontrol etmek için kullanılabilir (örn. geçerli pencerede, yeni bir pencerede veya sekmede vb.).

Sample Code: 
<html>
<head>
<base href="https://wovenstory.tr.gg/" target="_blank">
<title>  base tag title <title>
</head>
<body>
<a href="Cevirim-Araclari.htm"> Çevirim araçları </a>
<a href="iplik-numaralandirma-sistemleri.htm"> İplik Numaralandırma sistemleri </a>
<a href="Tekstil-lifleri.htm"> Tekstil lifleri </a>
</body>
</html>

örnek kodda görüleceği gibi geçerli belge için "https://wovenstory.tr.gg" <base> etiketi içinde temel URL olarak verilmiştir, bu nedenle örnek kodun alt kısmındaki üç bağlantı da sadece sayfa isimleriyle göreceli bağlantılar olmasına rağmen sorunsuz çalışacaktır nedeni ise başlıkta verilen temel URL'dir. Aynı şekilde başlıkta verilen blank hedef özelliği, hiçbir hedef verilmemiş olan üç bağlantının da yeni bir sayfada açılmasını sağlayacaktır.

! Base etiketin target özelliği HTML5'te kullanımdan kaldırılmış ve kullanımı önerilmiyor. Bunun yerine, bireysel bağlantıların hedeflerini belirtmek için öğenin hedef (target) özelliğinin kullanılması daha işlevsel olacaktır.

❮bdo❯ tag "metin yönü" etiketi More info
Definition:

HTML <bdo> etiketi "Bi-Directional Override" cümlesinden kısaltılmıştır, Türkçe’ye "çift yönlü geçersiz kılma" olarak çevrilebilen "Bi-directional override" html'de temsil edildiği şekliyle <bdo> etiketi özellikle ve öncelikle Arapça benzeri okunması sağdan sola doğru olan diller için metin çıktısının yönünü sağdan sola ayarlamakta kullanılır.

Metin yönü, <bdo> etiketi ile kullanılması gereken <dir> özelliğinin <ltr> veya <rtl> değerlerinden birini kullanmak suretiyle tanımlanabilir.

Sample Output:
bdo tag title Metin yönü: SOLDAN SAĞA 

<bdo dir="ltr"> . . . </bdo>

Burada soldan sağa doğru yazılmış bir metin vardır.

HTML (text) metin sayfalarının varsayılan yönü zaten soldan sağa olduğundan <bdo> etiketinin bu özelliğinin normal şartlarda kullanımı yoktur.

Metin yönü: SAĞDAN SOLA 
<bdo dir="rtl"> . . . <bdo>

Bu metin sağdan sola doğru yazılmış olarak gürüntülenecektir.

Bu örnekteki metin sağdan sola doğru olarak görüntülenecektir ancak latin harfleri ile hiçbir anlam ifade etmediği gözlenecektir. zira <bdo> Arapça, Aramice, Farsça, ibranice, Urduca gibi yazılması ve okunması sağdan sola olan dillere yönelik desteğin zayıf olduğu durumlarda kullanılmaya başlanmıştır, günümüzde böyle bir sorun olmadığından <bdo> etiketi kullanımından büyük ölçüde kaçınılmalıdır.

bdo: Bi-Directional Override.
dir: direction
ltr: left to right.
rtl: right to left.

❮blockquote❯ tag "blok alıntı" etiketi More info
Definition:

Blockquote\ Blok alıntı etiketi, başka bir kaynaktan alıntılanan bir metin bloğunu belirtmek için kullanılır. Kısa veya satır içi alıntılar için <blockquote> etiketi yerine <q> etiketi kullanılmalıdır.

Alıntılarda üç ana HTML öğesi yer alır:
• <blockquote>: Blok alıntılar,
• <q>: Satır içi veya kısa alıntılar,
• <cite>: Bu özellik, alıntılanan materyal için bağlam veya referans sağlayan bir URL'yi içerir.

Sample Output:

Türkiye Cumhuriyetinin kurucusu Gazi Mustafa Kemal Atatürk, Cumhuriyeti en iyi şekilde savunup, koruyacağına inandığı Türk Gençliğine emanet ederek, Türk gençliğine güvenini teyit etmiştir. Atatürk, kurtuluş Savaşı öncesinin karanlık günlerinde gençliğe olan güvenini şu sözlerle ifade etmektedir.

Her şeye rağmen muhakkak bir nura doğru yürümekteyiz. Bende bu imanı yaşatan kuvvet yalnız aziz memleket ve milletin hakkındaki payansız muhabbetim değil, bu günün karanlıkları içinde sırf vatan ve hakikat aşkıyla ışık serpmeye, ışık aramaya çalışan bir gençlik gördüğündendir.

Ulu önder Gazi Mustafa Kemal Atatürk Cumhuriyet kurulduktan sonra da gençliğinin en zor durumlarda bile başarılı olacağına inanıyor, gençliğe değer ve önem veriyordu. Ulu önder büyük nutkunda Türkiye Cumhuriyetini ilelebet muhafaza ve müdafaa etmek için gerekli kudretin Türk gençliğin damarlarındaki asil kanda mevcut olduğunu ifade ederken Türk gençliğine olan sarsılmaz inancını büyük bir hitabet örneğiyle ortaya koyuyordu.

Blockquote / Output :

Atatürk'ün büyük nutkunda gençliğe hitabesi

Cebren ve hile ile aziz vatanın bütün kaleleri zaptedilmiş, bütün tersanelerine girilmiş, bütün orduları dağıtılmış ve memleketin her köşesi bilfiil işgal edilmiş olabilir. Bütün bu şeraitten daha elim ve daha vahim olmak üzere, memleketin dahilinde iktidara sahip olanlar gaflet ve dalalet ve hatta hıyanet içinde bulunabilirler. Hatta bu iktidar sahipleri şahsi menfaatlerini, müstevlilerin siyasi emelleriyle tevhit edebilirler. Millet, fakrü zaruret içinde harap ve bitap düşmüş olabilir.

Ey Türk istikbalinin evladı! İşte, bu ahval ve şerait içinde dahi, vazifen, Türk istiklal ve Cumhuriyetini kurtarmaktır! Muhtaç olduğun kudret, damarlarındaki asil kanda mevcuttur.

Nutuk, Türkiye cumhuriyetinin kurucusu ve ilk cumhurbaşkanı olan Gazi Mustafa Kemal'in 1927 yılının 15-20 Ekim günlerinde TBMM de sabah ve akşam olmak üzere günde iki oturumla aralıksız 6 gün boyunca 1919'dan 1927'ye kadar kendisinin ve silah arkadaşlarının faaliyetlerini bizzat kaleme alıp özetlediği konuşmasının metnidir.

Nutuk metni, Gazi Mustafa Kemal Atatürk'ün Ey Türk gençliği diye başlayan yukarıdaki alıntıyı da içeren gençliğe hitabe'siyle son bulmuştur.

Nutuk metninin tamamı için
ADD org.tr - Nutuk sola ok sayfasını ziyaret ediniz.

❮body❯ tag "gövde" etiketi More info
Definition:

Vücut veya Gövde anlamına gelen <body> bir web sayfasının gövdesini oluşturmakta kullanılan HTML etiketidir. <body>….. </body> etiketleri arasında yer alanlar sayfada görünecek olanlardır.

"body" parametreleri • body bgcolor: Gövde arka plan (background) rengini belirler.
• body link: Link rengini belirler.
• body alink: Link tıklandığında alacağı rengi belirler.
• body vlink: Link gerçekleştikten sonraki rengi belirler.
• body onFocus: Ziyaretçi, geçerli sayfaya odaklandığında bir komut dosyası başlatır.
• body onLoad: Sayfa yükleme tamamlandığında bir senaryo başlatır.
• body onUnload: Ziyaretçi sayfayı terk ettiğinde bir senaryo başlatır.
Sample HTML body 

<!DOCTYPE html> 
<html> 
<head> 
<title> page title !  </title> 
</head>
<body>
 Bu alan HTML sayfa gövdesidir, bu alanda yer alan nesneler HTML sayfasında görünecek olanlardır, buradaki nesneler;
karakter, 
metin, 
makale, 
obje, 
ikon, 
image, 
video v.b'den biri veya birkaçı birden olabilir.
</body>
</html>

❮br❯ tag "satır sonu" etiketi More info
Definition:

Satır sonu etiketi HTML'de Satır sonu anlamına gelen line break cümlesindeki kırmak, kesmek anlamındaki break kelimesinin ilk iki harfi olan <br> ile temsil edilmektedir.

<br> etiketi, satır sonu vermek için paragraf kapatmak yerine etkili bir şekilde yeni bir satır başlatarak metinde bir satır sonu oluşturur. Bu, özellikle paragraf içi metinlerde konunun bağlamını koparmadan metni belirli bir şekilde bölmek için kullanışlıdır.

Metin satırları arasında daha fazla boşluk yaratmak istenirse, birden fazla <br> etiketi kullanılabilir. <br> etiketi <p>, <div> ve <span> gibi diğer HTML etiketlerinin içine yerleştirilebilir, ayrıca html formları, tabloları ve liste ögelerinde de kullanılabilir. <br> etiketi, yerleştirildiği her yerde bir satır sonu oluşturacaktır, özetle <br> etiketi tüm html öğelerinin içindeki metni veya içeriği bölmek için kullanılabilir.

❮button❯ tag "düğme (buton)" etiketi More info
Definition:

HTML <button> etiketi, form göndermek, olayları tetiklemek veya başka eylemler gerçekleştirmek için hazırlanmış web sayfasındaki tıklanabilir bir düğmeyi (buton) temsil eder. Butonun türünü belirtmek için type niteliği kullanılır, örneğin bir formu göndermek için "submit", bir formu sıfırlamak için reset" veya başka bir eylemi gerçekleştirmek için "button" olarak ayarlanabilir.

Sample Button/Form Combination Buttonform







Single Married Other

Submit: Gönder butonu oluşturur, tıklandığında form içeriğini gönderir.

Reset: Sıfırlama butonu oluşturur, tıklandığında form sıfırlanır.


Submit ve Reset Butonları form içinde gösterilmiştir, diğer Buton ve form ögeleri ise aşağıda verilmiştir.

Button: Standart buton oluşturur. Bu, varsayılan değerdir. 

<button type="button"> Click me </button>

Sonuç:

disabled: Bir butonda bu özellik mevcut olduğunda butonu kullanılamaz hale getirecektir, bu özellik kullanıcının bir koşulu yerine getirinceye kadar formu göndermesini önlemek için kullanılabilir, benzer şekilde bir web sitesinin şart ve koşullarını kabul ettiğini onaylamadan giriş izni vermez.
kurallar veya koşullar yerine getirilmesi durumunda buton aktif olacaktır.

<button type="button"disabled> Button(disabled)</button>

Sonuç:
Some button attributes

name özelliği, form gönderildiğinde form verilerinde butonu tanımlamak için kullanılabilecek butonun adını belirtir.

value özelliği, form gönderildiğinde sunucuya gönderilecek buton için bir değer belirtir.

onclick özelliği, butona tıklandığında yürütülecek bir JavaScript işlevini belirtir.

form özelliği, butonun ait olduğu formu belirtir.

formaction özelliği, butona tıklandığında form verilerini işleyecek dosyanın URL'sini belirtir.

formenctype özelliği, form verilerini sunucuya gönderirken kullanılacak kodlama türünü belirtir.

formmethod özelliği, form verilerini sunucuya gönderirken kullanılacak HTTP yöntemini belirtir.

formnovalidate özelliği, butona tıklandığında form verilerinin doğrulanmaması gerektiğini belirtir.

formtarget özelliği, formu gönderdikten sonra yanıtın nerede görüntüleneceğini belirtir.

disabled özelliği, (bakınız (üst) disabled paragrafı).

❮caption❯ tag "başlık" etiketi More info
Definition:

Caption\ Başlık etiketi HTML tabloları için başlık, resim yazısı ve tablo içeriği veya amacını açıklayan bir üst yazı metni sağlayan HTML ögesidir, bu ögenin amacı özellikle tablo tek başına bir anlam ifade etmediğinde kullanıcının bunu anlamasına yardımcı olmaktır. Her tablo için yalnızca bir kez kullanılabilir ve <caption> etiketi, <table> etiketinin hemen ardında yeralır.

Açılış ve kapanış <caption> etiketi arasına yerleştirilen bir metin tablo başlık metni olarak görüntülenir. <caption> etiketi <table> etiketi içinde olmasına rağmen 'caption' yani başlık metni tablonun dışında ve genellikle de tablonun üstünde yer alır, ancak ihtiyaç halinde tablonun alt kısmında da alt başlık veya altyazı olarak görüntülenebilir, bunun için CSS'de; <caption style="caption-side:bottom"> Bu bir alt başlık metnidir. </caption> şeklinde bir kod dizimi oluşturmak gereklidir.

Sample Outputs:
Classic Caption
Caption classic title
This is an example of a classic caption
Column.1 Column.2
Column.1 _Row.1 Column.2 _Row.1
Column.1 _Row.2 Column.2 _Row.2

Caption TOP
Caption Top title
Table Caption top
This example; caption-side is a table with a "top".
Column.1 Column.2
Column.1 _Row.1 Column.2 _Row.1
Column.1 _Row.2 Column.2 _Row.2

Caption BOTTOM
Caption Bottom title
Table Caption bottom
This example; caption-side is a table with a "bottom".
Column.1 Column.2
Column.1 _Row.1 Column.2 _Row.1
Column.1 _Row.2 Column.2 _Row.2

❮cellspacing❯ tag "hücre aralığı" etiketi More info
Definition:

Cellspacing\ Hücre aralığı etiketi, tablonun komşu hücreleri arasındaki boşluğu, hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlamakta kullanıldı. Kullanımdan kaldırıldı. Bazı tarayıcılar hala destekliyor olsa da ilgili web standartlarından kaldırılmış olabilir, kaldırılma sürecinde olabilir veya yalnızca uyumluluk amacıyla tutuluyor olabilir. Bu özellik herhangi bir zamanda çalışmayı bırakabileceğinden kullanılması önerilmiyor.

❮center❯ tag "merkez" etiketi More info
Definition:

Center\ Merkez etiketi; blok düzeyinde bir öğedir, bu özelliği diğer blok düzeyinde ve satır içi öğeleri de kapsar <center> etiketi içindeki resim, metin, grafik, tablo vb. ögeler blok olarak merkeze hizalanır. HTML'nin bu özelliği <div> öğesine veya tek bir <p> öğesine uygulanabilen CSS text-align özelliği lehine kullanımdan kaldırılmıştır.

Bazı tarayıcılar hala destekliyor olsa da ilgili web standartlarından kaldırılmış olabilir, kaldırılma sürecinde olabilir veya yalnızca uyumluluk amacıyla tutuluyor olabilir. Bu özellik herhangi bir zamanda çalışmayı bırakabileceğinden kullanılması önerilmiyor. Bunun yerine önerilen CSS style özelliği ile oluşturulan örnekler ve geniş bilgi için bakınız: Align tag (Hizalama etiketi)


❮checkbox❯ tag "onay kutusu" etiketi More info
Definition:

Checkbox\ Onay kutusu etiketi, formlara kare onay kutuları eklemek için kullanılır. Checkbox onay kutuları, input etiketinin type özelliğiyle oluşturulan kullanıcıların verilen seçenekler arasından bir veya daha fazla maddeyi seçmesine olanak tanıyan bir form öğesidir.

HTML checkbox etiketinin davranışını yönetmekte kullanılan özellikleri:
• name (isim) niteliği öğenin adını belirtir,
• value (değer) niteliği öğenin değerini veya metnini ayarlamak için kullanılır,
• type (tip veya tür) niteliği ögeyi bir onay kutusu, metin alanı, radyo butonu veya basit bir buton olarak formlara yerleştirmek için kullanılır.
• checked (işaretli veya seçili) özelliği, sayfa yüklenirken öğeyi önceden işaretleyip kullanıcıya seçilmiş yani varsayılan olarak işaretli bir kutu veya radio buton şeklinde ulaştırmak için kullanılan bir Boolean (mantıksal önermeler) özelliğidir.
Checked özelliği, Type niteliğinin "type checkbox" veya "type radio” olarak ayarlandığı "input" elemanlarıyla birlikte kullanılabilir. Başka bir ifadeyle Checked özelliği <input type="checkbox"> veya <input type="radio"> olarak kullanılabilir.

Sample Output:
Choose the fabrics you like:






…
Example for selected box and radio button attributes






❮cite❯ tag "alıntı" etiketi More info
Definition:

cite tag\ alıntı etiketi, bir eserin başlığını tanımlamakta kullanılır bu, bir eserden kısa blok alıntı ile birlikte eserin başlığı olabilir, bu başlık genellikle eserin kaynağına bir bağlantıyı içerir.
Türkçe karşılığı alıntı olan "Citation" kelimesinden kısaltılmış olan <cite> tag HTML 4.01'de bir alıntıyı tanımlarken, HTML 5'de bir eserin başlığını tanımlar.
<cite>….</cite> etiketleri arasındaki metinler genellikle italik gösterilir.
Alt örnekte iplik tiplerini içeren sayfanın başlığı <cite> etiketleri içine alınmış, aynı zamanda bu sayfaya link verilmiştir.

Sample Output:

TEXTİLE
Tekstil esas olarak işlenmiş veya kesilmiş bir kumaş parçasına atıfta bulunan bir terim olsa da; Giyim, Çanta, Sepet, Ev tekstil ürünleri, Halılar, döşemeli Mobilyalar, stor Perdeler, Havlular, masa Örtüleri, Yataklar ve diğer düz yüzeylerde. Filtreleme gibi Endüstriyel ve Bilimsel işlemlerde, Bayraklar, sırt Çantaları, Çadırlar, Ağlar, Mendiller, temizlik Bezleri, Balonlar, Uçurtmalar, Yelkenler ve Paraşütler gibi ulaşım araçları, ayrıca Fiberglas ve endüstriyel Jeotekstiller gibi kompozit malzemelerde güçlendirme sağlamak için kullanılan malzemelerde de kullanılan tekstil terimi, Dikiş, Kapitone ve Nakış gibi birçok geleneksel el sanatında kullanılmaktadır. Özetle TEKSTİL her çeşit ve yapıda elyafın, her çeşit ve yapıda "İplik tiplerinin" doğrudan ya da dolaylı olarak kullanıldığı tüm ürün ve öğeleri kapsayan genel bir terim olarak kullanılmaktadır.


Padding (1- top, 2- right, 3- bottom, 4- left)

❮code❯ tag "kod" etiketi More info
Definition:

<code> tag\ kod etiketi, bir web sayfasının oluşturulması sırasında bilgisayar kaynak kodunun görüntülenmesine ihtiyaç duyulduğunda kullanılan, bilgisayar kod parçacığının çıktısını temsil eden özel bir metin türüdür. <code> etiketi sabit boşluk ve boyuta sahip özel bir yazı stili ile görüntülenir.

<code> etiketi tek başına yalnızca bir kod satırını temsil eder, <code> etiketleri <pre> etiketleri içine yerleştildiğinde birden fazla kod satırı işaretlenecektir.

Kod parçacıkları programlama projelerinde kullanabilecek bir kod bloğudur. Kod parçacıkları, geliştiricilerin kodu yeniden kullanmalarına izin vererek yazılım oluşturmak için gereken süreyi azaltmak açısından kullanışlıdır.

Özetle web sayfasında kod parçacıklarını görüntülemek için, <code> etiketinin yazı stilinden, <pre> etiketinin ise önceden planlanan içeriği, html de planlandığı şekliyle görüntüleme özelliğinden yararlanılır.

HTML belgelerinde <pre> (tag) herhangi bir içeriğin veya metnin önceden biçimlendirilmesi anlamına gelir, bu nedenle metninizi tam olarak görünmesini istediğiniz şekilde, istediğiniz boşluklarla ve satır sonlarıyla yazın yani ön biçimlendirmemizi yapın, <pre> etiketi kodunuzu yazıldığı şekilde görüntüleyecektir.
Bakınız: <pre> tag


Sample Outputs :

<code> etiketi ile kod parçalarının varsayılan görüntüsü

<html> <body> …!… </body> </html> sola ok

<code> etiketinin varsayılan olarak sunduğu yazı tipi (üst tablo), gerektiğinde CSS ile stillendirilebilir (Alt tablo).

<code> etiketinin kod parçalarına CSS ile style uygulanmış görüntüsü

<html> <body> ..!.. </body> </html> sola ok


Kod parçalarının sadece <code> etiketiyle yerleşim biçimi

<html> <head> <title> … </title> </head> <body> … <strong> … </strong> … <blockquote> … </blockquote> … </body> </html>

üst ve alt örneklerin kaynak kodu sayfasındaki kod dizilimleri aynı olmasına rağmen <code> etiketi kod parçacıklarını varsayılan olarak satır boyunca ard arda sıralamaktadır, (üst tablo)

<code> etiketleri <pre> ….. </pre> etiketleri arasında kullanıldığında kod parçacıklarını kodlama sayfasına yazıldığı gibi gösterecektir, (Alt tablo).

bu tablo dış kap (</pre> etiketi, iç kap <code> etiketleri ve içinde kod parçaları ile oluşmuştur.

 
<pre>
<code>
<html>
<head> 
<title> … </title>
</head>
<body> …
<strong> … </strong> 
…
<blockquote> … </blockquote> 
…
</body> 
</html>
<code>
<pre>

❮col❯ tag "Sütun" etiketi More info
Definition:

Col (Column)\ Sütun etiketi, <colgroup> etiketi içindeki her sütuna bir style özelliği uygulamak için kullanılan bir html öğedir. Col etiketi bir veya daha fazla sütun grubuna aynı anda style uygulayabilen <colgroup> (sütun grubu) etiketinin içindedir, <col> ve <colgroup> ise <table> etiketi içindedir.

• colgroup ögeler için bir kapsayıcı tanımlar.
• col tabloda bir veya daha fazla sütunu tanımlar.
• span öğenin temsil ettiği sütun sayısını belirtir, olması gereken minimum değer 1'dir.

Sample Output:
Type Price kg. Weight kg. Total price
Apple $3 5 15$
Orange $2 5 10$
Banana $2.8 8.5 23.8$
Grand total - 18.5 48.8$

Not: <col> (sütun) etiketi niteliklerinin çoğu artık HTML 5.0 tarafından desteklenmediğinden CSS alternatifi daha akılcı olacaktır.

❮colspan❯ attribute "sütun sayısı" özelliği More info
Definition:

Html <colspan> özelliği <table> etiketinin <th> ve <td> ögelerinde <table> planı gereği hücre düzenlemesi gerektiğinde hücre birleştirme eyleminin birleştirilmek istenen sütun sayısını belirlemek için kullanılan bir html ögesidir. <table> etiketinin <th> ve <td> ögelerinin kapsadığı hücre aralığını genişletmek gerektiğinde yatay olarak aynı hizadaki farklı sütunlara ait komşu hücrelerden bir veya daha fazlasını birleştirmede <colspan> özelliğine verilecek rakamsal değer belirleci olacaktır, bu değer 1 ila 1000 arası pozitif sayıları içermelidir.
Örneğin
<td colspan="2"> •• </td> bu kod dizimi farklı iki sütuna ait iki komşu hücreyi birleştirip tek hücre haline getirecektir.
<td colspan="5"> ••••• </td> bu kod dizimi ise beş farklı sütuna ait beş komşu hücreyi birleştirip tek hücre haline getirecektir.

Sample Output:
1 2 3 4 5 6
(colspan-2)sola ok 3 4 5 6
1(colspan-4)sola ok 6
1 2 (colspan-3)sola ok 6

❮dl❯ tag "açıklama listesi" etiketi More info
Definition:

<dl> etiketi <dt> ve <dd> ögelerliyle birlikte sözlük benzeri bir açıklama listesi oluşturmakta kullanılan bir html ögesidir.

Burada
<dl> (Description list) Açıklama listesi'ni
<dt> (Data term) Veri terimi'ni
<dd> (Data description) Veri açıklaması'nı ifade etmektedir.
<dl> Açıklama listesi (kabını) oluşturur
<dt> Açıklama listesi liste ögesi
<dd> Açıklama metni (kabı) oluşturur.

<dl> Etiketi, bir veya daha fazla <dt> ve <dd> için bir kap oluşturur.

<dl> etiketi, HTML4.1'de tanım listesini temsil ederken HTML5'te tanımlama listesini temsil eder. Alt örneklerde terimler; tanım veya diğer bir ifadeyle tanımlanan içeriklerdir, açıklamalar ise tanımlama veya diğer bir ifadeyle tanımlayan içeriklerdir.

Tek terim ve tek açıklama:
Pamuk   (Cotton)

Pamuk, Malvaceae ailesindeki Gossypium bitkilerinin tohumlarının etrafında bir koza veya koruyucu kılıfta büyüyen yumuşak, kabarık bir elyaftır. Elyaf neredeyse saf selülozdur.

Çoklu terim - Tek açıklama:
Viscose
Rayon
Modal
Tencel
Cupro

Üstte bazıları ticari marka olan tekstil materyallerinin (elyaf veya iplik) ortak yapıları Selüloz'dur (Cellulose) ve selüloz esaslı yapay (suni) lifler grubuna dahildir. Selüloz esaslı lifler, ağaç ve bitki türlerinden elde edilen selüloz hamurunun farklı kimyasallarla Dejenere edildikten sonra rejenere edilmesi sonucu farklı özellikler kazandırılmış suni veya sentetik'te denilen yapay liflerdir.
diğer elyaf grupları ise Hayvansal, Bitkisel ve Mineral olmak üzere Doğal lifler’dir.

Tek terim - Çoklu açıklama:
Tekstil   (Textile)

• Tekstil, doğal veya yapay ham liflerle veya bu liflerin bükülmüş uzunluklara eğrilmesiyle üretilen bir iplik veya iplik demetini, dokuma, örme, tığ işi, düğümleme, düğümlü dantel, keçeleme, yapıştırma gibi yöntemlerle birbirine geçirilmek suretiyle oluşturulan esnek malzemelere verilen genel ad'dır.

• Tekstil, halı ve Jeotekstiller dahil olmak üzere, Giysi ve Döşemelik gibi birbirine geçen elyaf veya ipliklerden yapılmış herhangi bir malzemedir.

• Tekstil, esas olarak işlenmiş veya kesilmiş bir kumaş parçasına atıfta bulunan bir terim olsa da; günümüzde her çeşit ve yapıda elyafın, ipliğin kumaşın doğrudan ya da dolaylı olarak kullanıldığı tüm ürün ve öğeleri kapsayan genel bir terim olarak kullanılmaktadır.

❮del❯ tag "sil" etiketi More info
Definition:

HTML <del> (delete\ sil) etiketi, bir belgeden silinen ancak belgede yapılan değişikliklerin geçmişini göstermek için tutulan metni işaretlemek için kullanılır. Tarayıcılar genellikle <del> etiketi içinde bulunan metni tıpkı <s> etiketi veya kullanımdan kaldırılan <strike> etiketi gibi üstü çizili metin olarak işler, ancak bu CSS ile değiştirilebilir. <del> etiketi <body> etiketinin içinde olmalıdır.

<del> etiketi genel olarak bir belgede yapılan değişiklikleri izlemek ve belgeden kaldırılanları vurgulamak için kullanılır. Örneğin bir yapılacaklar veya bakılacaklar listesinde kontrol edilenleri <del> etiketi içine alıp üzeri çizili hale getirilmesi kontrol edilmeyi bekleyen ögeleri ön plana çıkaracaktır.

Alt örnekte 300 makine kapasitesi ile çalışan bir dokuma işletmesinde günlük üretim ve randımanın işlendiği takip çizelgesinden bir haftalık bir kesit verilmiştir.

örnek üretim takip çizelgesi:

  • 01 Nisan 2024 Pazartesi:
    71.850 M - 95,8% R ✅
  • 02 Nisan 2024 Salı:
    71.175 M - 94,9% R ❌ of-standard
  • 03 Nisan 2024 Çarşamba:
    72.825 M - 97,1% R ✅
  • 04 Nisan 2024 Perşembe:
    71.250 M - 95,0% R ✅
  • 05 Nisan 2024 Cuma:
    işleyen periyot *️⃣
  • 06 Nisan 2024 Cumartesi:
    Sıradaki periyot ▶️
  • 07 Nisan 2024 pazar:
    Sonraki periyot ⏩️

❮dfn❯ tag "tanım" etiketi More info
Definition:

<dfn>\ tanım etiketi, Türkçe karşılığı "tanım" olan "Definition" kelimesinden kısaltılmıştır. <dfn> etiketi, bir terimin tanımlayıcı örneğini işaret eder.
<dfn> etiketinin bazı kullanım biçimleri aşağıda listelenmiştir;
• <dfn> etiketi, bir terimin anlamını açıklamak için kullanılır.
• <dfn> etiketi, bir tanım ifadesi veya cümlesi bağlamında tanımlanan terimi belirtmek için kullanılır.
• <dfn> etiketi bir terim içeriyorsa, tarayıcı bitişik metni kelimenin tanımı olarak yorumlar.
• <dfn> etiketi bir başlık niteliği içeriyorsa, başlık niteliğinin değeri tanım terimi olarak alınır, başlık özelliği, tanımlanmakta olan terim olmalıdır.
• <dfn> etiketinin başlık niteliği yoksa ve öğenin içeriği metinse, bu durumda metin, tanımlanan terimi temsil eder.
• <dfn> etiketi <abbr> veya başka bir versiyonu ile bir kısaltma öğesi içeriyorsa kısaltma, tanımlanan terim olarak tanımlanır.

Html'de <dfn>… </dfn> etiketi arasına yerleştirilen tanım ögesi (terim veya metin) genellikle italik ve altı çizili olarak gösterilir.

Örnek kullanımlar
Kısaltma etiketiyle kullanımı

Aşağıdaki metinde "Nm" kısaltması ele alınmıştır, burada kısaltma işlemi <abbr> ögesiyle yapılmıştır bu kısaltma aynı zamanda tanımlanan terimdir.

"Number metric" Nm System International (SI) birim sisteminde iplik numaralandırma tekniklerinden biridir, sistem indirect numaralandırmalar grubundandır.
* * * Bir terimi tanımlamak için kullanımı
dfn demo

Aşağıdaki örnekte başlık niteliği vardır ancak <dfn> etiketiyle bir bağı yoktur, burada <dfn> ile tanımlanan terim Number metric'dir.

Number metric, System International (SI) birim sisteminde kullanılan iplikte indirect numaralandırma sistemidir, "Nm" kısaltmasıyla temsil edilir.

* * * yarn number Başlık (tittle) etiketiyle kullanımı ve Referans noktasına bağlantı verme

Aşağıdaki örnekte başlık niteliği olarak <title> yarn number </title> kullanılmıştır, <dfn>'nin bu özelliğinde bu terim tanımlanmakta olan terimi işaret eder.

İplik numaraları iki ana sistem olan "Direct ve Indirect numaralandırma yöntemleriyle tespit edilir. İpliklerin kimliği niteliğinde olan İplik numarası bilinmiyor ise tespiti için o ipliğin iki özelliğinden faydalanılır, Ağırlık ve Uzunluk, bu iki değer arasındaki ilişki o ipliğin numarasını ifade eder, yani ipliğin incelik veya kalınlık derecesini gösterir. Daha fazlası için iplik numaralandırma sistemleri sayfasını ziyaret ediniz.

❮dir❯ tag "dizin" etiketi More info
Definition:

<dir> \ dizin etiketi, Türkçe karşılığı dizin olan "directory" kelimesinin ilk harfleri ile temsil edilen HTML <dir> etiketi dosyalar ve klasörlerden oluşan bir dizin için kap oluşturmakta kullanılmıştır. <dir> etiketi artık HTML4 ve HTML5'te desteklenmediğinden <dir> etiketi yerine <ul> veya CSS kullanılmalıdır.

<dir> etiketi dizini buna benzer.
<html>
<body>
<dir>
<li> list item1 </li>
<li> list item2 </li>
<li> list item3 </li>
</dir>
</body>
</html>

❮div❯ tag "bölüm" etiketi More info
Definition:

<div>\ Bölüm etiketi, Türkçede kısım, bölüm, bölünmüş alan gibi anlamları olan division kelimesinin ilk harfleri ile temsil edilen <div> etiketi HTML'nin blok etiketler kategorisindendir. Diğer HTML öğelerini gruplara bölmek veya bölümlere ayırmak, bir grup içeriği tanımlamak veya sınıflandırmak için kullanılır, div kapları CSS ile şekillendirebilir.

Yalın bir <div> etiketi hiçbir şeyi temsil etmez, içerik veya düzen üzerinde hiçbir etkisi yoktur.

***
Basic div container:

Basic\ Temel div etiketleri blok etiketlerdir, bir genişlik (width) değeri tanımlanmadı ise satırın tamamını kaplar ve

Basic div cotainer
sonraki metin veya nesneler bir sonraki satırdan devam eder. Örnekteki temel div kabı (basic div container) için kod dizimi aşağıdaki gibidir. 
<div style="background:#ddd;border:4px solid #ff0000;"> .!.!. </div>

Temel div etiketine 100%'den daha küçük bir genişlik (width) değeri tanımlandığında ise div kabı genişliği, tanımlanan genişlik değeri kadar olsa da satırın tamamını bloke eder.
Satırın div kabından arta kalan kısmı görünürde boştur ancak bloke edilmiştir, özetle temel bir div kabına bir genişlik değeri verilmiş olsa da

60% genişlik ile div kabı
sonraki metin ve nesneler yine bir sonraki satırdan devam eder.

***
inline div container:

Bir div kabına <display:Inline;> özelliği tanımlandığında genişlik ve yükseklik değeri verilemez, zira inline niteliği metin ve nesnelerin satır boyunca yan yana seri dizilmesini hedefler. Bu nedenle inline div kaplarının genişlik değeri; div kabı içindeki metin veya nesnelerin kapladığı alan kadardır ve div kabından sonraki metin yada nesneler aynı satırdan devam eder.

Sample code: 
<div style="display:inline;background:#ddd; border:4px solid #ff0000;"> .!.!. </div>
• Example 1:
div (short text)
  ve sonraki metin veya nesneler aynı satırdan devam ediyor..
• Example 2:
div container (long text) . . .
  ve sonraki metin veya nesneler aynı satırdan devam ediyor.
• Example 3:   (multi div container series)
• Text
• Long text
• Very long text
  div kaplarından soraki Metin veya nesneler aynı satırdan devam eder.

***
Inline-block div container:

Bir div kabına <display:inline-block> özelliği tanımlandığında kap içindeki metin ve nesneler hem inline gibi satırda yan yana gelir hem de bu nesnelere block nesneler gibi yükseklik ve genişlik değeri verilebilir.


Div container 1 and 2
div container-1: short text, short text, short text, short text.
div container-2: Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text.
<div style="width:48%;height:200px; display:inline-block; border:4px ridge #ff0000;background:#ddd;" > .!.!. <div>

Üst iki div kabının da yükseklik değeri aynı (200px). Bu yükseklik değeri 1. Kap için yeterli olurken 2. kaptaki uzun metin için yetersiz kalmış ve metnin bir kısmı kabın dışına taşımıştır. Bu problemi aşmak için aşağıdaki yükseklik ayar yöntemlerden bir tanesi tercih edilebilir.
• 100% yöntemi - (container-3)
• Automatic yöntemi - (container-4)
• Pixel yöntemi - (container-5)
• Overflow yöntemi - (container-6)


100% ve Auto yöntemi, bu iki özellik div kabı içindeki metin veya nesnelerin yüksekliğine duyarlı bir şekilde içerik yüksekliği azaldıkça kısalan, çoğaldıkça uzayan bir div kabı oluşturur.


Div container 3 and 4
div container-3:
100% system
short text, short text, short text, short text.
div container-4:
automatic system
Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text.
<div style="width:48%;height:auto; display:inline-block; border:4px ridge #ff0000;background:#ddd;" > .!.!. <div>

pixel yöntemi, bu özellik ile kap içindeki metnin veya nesnenin yüksekliğine uygun bir "px" değeri atanır. Bu örnek için height değeri 300px olarak tanımlanmıştır (container-5).

Overflow yöntemi, bu yöntem sabit bir div kabı içinde yüzdürülebilen bir içerik oluşturur. Bu örnekte (container 6) div kabı yüksekliği 150px olarak atanmıştır dolayısıyla div kabındaki mevcut içeriğin 150 piksellik bir yüksekliğe tekabül eden kısmı görüntülenecektir, içeriğin gizli kısımları kap içinde kaydırılarak görüntülenebilir.

Div container 5 and 6
div container-5
"pixel system"
short text, short text, short text, short text.
div container-6:
overflow system
Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text. Long text.
<div style="width:48%;height:150px; display:inline-block; border:4px ridge #ff0000;background:#ddd;" > .!.!. <div>

❮em❯ tag "vurgu" etiketi More info
Definition:

<em>\ vurgu etiketi, Türkçe karşılığı vurgu olan "emphasis" kelimesinin ilk iki harfi ile temsil edilen HTML etiketi vurgu yapılması istenen metni içeriğin geri kalanından ayırmak için kullanılan okuyucunun dikkatini vurgu yapılan metne çekmek için kullanılır ve metnin normal bir cümleye göre biraz uzatılmış ve daha vurgulu bir ses tonuyla söylenmesi gerektiğini önerir. Tarayıcılar <em> etiketi içinde bulunan metni italik olarak görüntüler, bu davranış CSS ile değiştirilebilir.

Sample Output:
Şirket, kurum ve kuruluşların başarı sırları yöneticilerinin liderlik vasıflarında gizlidir. Bu vasıflardan bazıları eğitimle ilgiliyken, bazıları da kişinin kabiliyet, güven, özveri ve kazanımları ile ilgilidir, en önemli kazanım ise rol modelinden aldığı teknik ve idari sistem, planlama yöntem ve uygulamalardır bu anlamda "iyi yöneticiler iyi yöneticilerin kadrosundan yetişir" çünkü yöneticiler (liderler) aynı zamanda bir rol modelidir zira genellikle diğer çalışanlar tarafından gözlem altındadırlar.

❮fieldset❯ tag "alan kümesi" etiketi More info
Definition:

<fieldset> \ alan kümesi etiketi, uzun formlarda farklı türdeki alanları gruplandırmak için kullanılır. İki farklı türü iki farklı alan kümesi olarak ayarlanmak istendiğinde her iki alan kümesi de <fieldset> ile başlayıp </fieldset> ile bitmelidir.

<legend> öğesi grupları adlandırmak için kullanılır.
<label> ögesi ise grup içinde toplanan her elemana bir başlık eklemekte kullanılır.

Aşağıdaki form tablosu fieldset özelliğinin form içinde kullanılmasına bir örnek olarak verilmiştir.

Fieldset/Form Combination
Member Registration Form

Register   (Kayıt ol)


User information     fieldset- 1  







Single Married Other
Contact information     fieldset- 2  




Secure login settings     fieldset- 3  








❮font❯ tag "yazı tipi" etiketi More info
Definition:

<font>\ yazı tipi etiketi, etiketin içine alınan metne stil tanımlamak için kullanılmıştır. Bu etiket temel olarak üç özelliği ile çalışmıştır.
<font="size"> (boyut),
<font="face"> (yazı türü (arial, Times New Roman vb.)) ve
<font="color"> (renk).

⚠ <font> etiketi kullanımdan kaldırılmış bir HTML öğesidir. Bunun yerine CSS kullanılması önerilir.

CSS Yazı tipi özellikleri: font-style özelliği, yazı tipinin stilini ayarlar. normal | italic | oblique (eğik) | initial (ilk harf) | inherit (miras)
font-family özelliği, seçilen öğe için bir (örn:Arial) veya daha fazla font ailesi adının (örn: Verdana, Arial, Helvetica, sans-serif; ) ve/veya genel aile adının önceliklendirilmiş bir listesini belirtir.
font-size özelliği, yazı tipinin boyutunu ayarlar.
font-weight özelliği, yazı tipinin kalın mı yoksa normal mi olması gerektiğini tanımlar.
text-transform özelliği, metnin büyük/küçük harf kullanımını kontrol eder.
text-decoration özelliği, metne eklenen dekorasyonu belirtir ve metin-dekorasyon-satırı, metin-dekorasyon-rengi, metin-dekorasyon-stil için bir kısayol özelliğidir.
color özelliği, metin içeriğinin ve metin süslemelerinin rengini açıklar.
background-color özelliği, bir öğenin arka plan rengini ayarlar.
text-indent metin girintisi özelliği, bir metin bloğundaki ilk satırın girintisini belirtir.
text-overflow özelliği, metin taşmalarında taşan içeriğin kullanıcıya nasıl bildirilmesi gerektiğini belirtir.
white-space özelliği, bir öğenin içindeki beyaz boşluğun nasıl işleneceğini belirtir.
word-break kelime sonu özelliği, satırların nerede kesilmesi gerektiğini belirtir.
text-shadow özelliği, metne gölge ekler.
text-align-last özelliği, metnin son satırının hizalamasını ayarlar.
line-height özelliği, bir satırın yüksekliğini belirtir.
letter-spacing özelliği, bir metindeki harfler/karakterler arasındaki boşlukları tanımlar.
word-spacing özelliği, kelimeler arasındaki boşluğu ayarlar.

❮form❯ tag "form" etiketi More info
Definition:

<form> etiketi, web sayfalarına kullanıcı girişi için HTML formları eklemekte kullanılır. Formlar, kullanıcıdan istenen verilerin kullanıcı tarafından doldurulması ve sunucuya göndermesi için önceden hazırlanmış dijital matbu evraklardır.

Web Formları:

Fiziksel veya dijital formlar bilgi toplamanın etkili bir yoludur. Fiziksel bir formu, basılı bir fiziksel belgeyi doldurmanız ve kişisel bilgilerinizi vermeniz gereken birçok durum vardır. Örneğin, yeni bir işe başvuru yapmak, sağlık kontrolü talepleri, emlak kiralama, bankacılık işlemleri v.b. durumlar bir form doldurup ilgili birime teslimini gerektiren işlemlerdir.

Tıpkı fiziksel formlar gibi, çevrimiçi dijital web formları da web teknolojilerinin bir kombinasyonunu kullanarak kullanıcılardan ve ziyaretçilerden girdi, bilgi ve önemli verileri almanın ve toplamanın bir yoludur.

Bir web formu, kullanıcıların bilgilerini doldurmaları için boşluklar içererek fiziksel bir formu taklit eder.

Web formları, kullanıcı girdilerini toplamak için çeşitli araçlar veya form kontrolleri kullanır.

From parametreleri
  • form: Form girişine hazır dijital tablo oluşturur.
  • action: Kullanıcı gönder butonuna tıkladığında formdaki verilerin sunucudaki hangi sayfaya gideceğini belirtir, örneğin "post" sayfası.
    <form action="post.php" target="_self" method="get">
    action="" özelliği tanımlanmaz ise kullanıcı formunu gönderildiğinde aynı sayfada kalacaktır.
  • enctype: Formlar için bir kodlama türü belirler.
  • method: Tarayıcıya form verilerini bir web sunucusuna nasıl göndereceğini bildirir. Form verilerini göndermenin iki temel özelliğinden biri kullanılır (method="get" ve method="post"
  • onReset: Sıfırla butonu tıklandığında bir komut dosyası çalıştırır.
  • onSubmit: Gönder butonu tıklatıldığında bir komut dosyası çalıştırır.
  • target: Formun yanıtının görüntüleneceği tarayıcı içeriğini belirtir.
    target="_self"
    target="_blank
    target="_parent"
    target="_top"
    target="_frame"     özelliklerinden birini alır.

Aşağıdaki form tablosu kullanıcıların bir web platformuna dahil olabilmesi için doldurmaları gereken dijital üye kayıt formuna bir örnektir

Member Registration Form
Register   (Kayıt ol)
User information







Single Married Other
Contact information




Secure login settings







❮h❯ tag "HTML başlık" etiketi More info
Definition:

<h> \ başlık etiketi, Türkçe karşılığı 'Başlık' olan 'heading' kelimesinin ilk harfi olan h ile temsil edilmektedir.

<h> etiketi, web sayfasında görüntülenmek istenen başlık veya alt başlıkları düzenlemekte kullanılır. Başlık önemine göre 1 ila 6 arasında bir değer alır.

<h1>......</h1> etiket değerleri arasına yerleştirilen metin ana başlıktır ve tarayıcıda en üst seviyede metin boyutu ve kalınlıkta görüntülenir.
<h6>......</h6> etiket değerleri arasına yerleştirilen metin alt başlıktır ve sistemin en küçük yazı stilidir, tarayıcıda en düşük seviyede metin boyutu ve kalınlıkta görüntülenir.

1 ila 6 değerleri arasındaki diğer başlık metinleri aldıkları sayısal değerlerin karşılığı olan boyut ve kalınlıkta görüntülenirler, <h1> en büyük - <h6> en küçük metin boyutunu verecektir.

Heading elements <h> tag examples <h1>: Ana başlık

<h1> ⇩ </h1>

• MAIN HEADING:

<h2>: İlk alt başlık

<h2> ⇩ </h2>

• FIRST SUBHEADING:

<h3>: İkinci alt başlık

<h3> ⇩ </h3>

• SECOND SUBHEADING:

<h4>: Üçüncü alt başlık

<h4> ⇩ </h4>

• THIRT SUBHEADING:

<h5>: Dördüncü alt başlık
<h5> ⇩ </h5>
• FOURTH SUBHEADING:
<h6>: Beşinci alt başlık
<h6> ⇩ </h6>
• FIFTH SUBHEADING:

❮head❯ tag "kafa" etiketi More info
Definition:

<head>\ kafa etiketi, bir HTML sayfasındaki tüm başlık öğeleri için bir kaptır.
HTML <head> etiketi,
belgenin başlığının <title>,
stillerinin <style>,
komut dosyalarının <script>,
meta öğelerinin yerleştirildiği ve
metadata verilerin tutulduğu bir kaptır.

HTML belgeleri anatomideki gibi bir <head> kafa ve bir <body> gövdeden oluşur, benzer şekilde HTML'de de kafa gövdenin üzerinde yer alır, yine benzer şekilde bir kişinin kafasının içinde neler döndüğünü, neler tasarladığını göremediğimiz gibi HTML'de de <head> öğesinin içindekileri sayfada göremeyiz.

HTML head etiketi içinde yer alması muhtemel ögeler;

title, style, type, link, script, noscript, src, defer, async, crossorigin, integrity, nonce ve
meta'lar
meta'lara bir kaç örnek meta charset, meta author, meta description, meta keywords, meta viewport şeklinde listelenebilir.
<head> etiketi içinde yer alacak etiketlerden bazılarının işlevleri aşağıdaki gibidir.

• <title> ~ HTML belgesindeki içeriğin başlığını tanımlar.

• <style> ~ HTML belgesine bir stil uygulamak için kullanılır.

• <base> ~ Bir HTML belgesindeki tüm bağlantılar için varsayılan bir URL ve varsayılan bir hedef belirtir.

• <link> ~ Bir HTML belgesi ile dış kaynak arasındaki ilişkiyi tanımlar. Harici bir CSS dosyasına bağlantı vermekte kullanılır.

• <meta> ~ Bir HTML belgesiyle ilgili meta verileri tanımlar, anahtar kelimeleri, belgenin yazarını, bir karakter kümesini, sayfa açıklamasını, ve görünüm ayarları düzenini sağlamak için kullanılan etiketlerdir. Bir belgenin karakter kodlamasını ayarlamakta kullanıllan bu etiketler UTF-8 alanı içindeki emoji v.b tüm karakterlerin doğru şekilde işlenmesini sağlar.

• <meta name> ~ <meta name="viewport" content="width=device-width">
Bir görünüm ayarlama öğesidir, sayfanın görünüm genişliğinde oluşturulmasını sağlayarak mobil tarayıcıların sayfaları görünüm alanından daha geniş oluşturmasını ve ardından bunları küçültmesini önler.

• <script> ~ Aynı sayfaya istemci tarafı JavaScript uygulamak veya src özelliği aracılığıyla mevcut sayfaya harici bir JavaScript dosyası eklemek için kullanılır.

• <noscript> ~ Komut dosyasını desteklemeyen bir tarayıcıya sahip kullanıcılara görüntülenecek alternatif içeriği tanımlar.

Ön planında <head> # </head> olan bir HTML Sayfa planı. 
• <html lang="en"> 
 <HEAD> 
• <meta charset="UTF-8"> 
• <meta name="viewport"content="width=device-width,initial-scale=1">
• <title> Sayfa başlığı </title> 
• <base href="https://example.com/page. html">
• <link rel="stylesheet"href="styles.css"> 
• <style type="text/css">
width: ___px;
height: ___px;
border: ___px solid blue;
</style>
• <script src="script.js"> </script>
• <script>
function fun() { document.getElementById ("p").style.color="green"; } 
</script> 
• <noscript> 
JS alternatifi
</noscript>
 </HEAD>
• <body>
Sayfa içeriği ………………

………………………….………..
 
………………………………………
</body> 
</html>

❮height❯ attribute "yükseklik" özelliği More info
Definition:

<height>\ yükseklik özelliği, bu özellik HTML öğelerinin yüksekliğini ayarlamakta kullanılır. <height> niteliği uygulanabilir öğeler aşağıda listelenmiştir.

Buna göre <height> niteliği
• <canvas>: Web sayfasına çizilen 2D, 3D grafik şekillere
• < embed>: Dış kaynaktan web sayfana gömülen imaj veya nesnelere
• < iframe>: Web sayfasında çerçeve içinde görüntülenen başka web sayfalarına
• < img>: Resim, emoji, gif v.b görsellere
• < input>>: İnput (giriş) ögelerine
• < object>: pdf ve benzeri objelere ve
• < video>: Videolara yükseklik değerlerini atamak için kullanılan bir ögedir.

❮hr❯ tag "yatay kural" etiketi More info
Definition:

<hr> \ yatay kural etiketi, 'yatay kural' anlamına gelen horizontal rule deyiminden kısaltılmıştır. <hr> Yatay kural etiketi tarayıcı penceresi boyunca yatay çizgiler çizmek için kullanılır. <hr> etiketinin varsayılan stili blok yani tarayıcı penceresi boyunca yatay ve açık gri renkli ince bir çizgidir ancak CSS kullanarak şekillendirmek mümkündür.


Temel <hr> etiketi (Basic <hr> tag): <div style="background:#008080; padding:8px;"> <hr/> </div>

Arka planı renklendirilmiş bir <div> alanı içindeki bu kod dizimi aşağıdaki sonucu verecektir. ⇩


⇧

* * *
CSS ile <hr> etiketi (<hr> tag with CSS): <hr style="border:4px solid #0000ff;"/>

CSS ile desteklenen bu kod dizimi aşağıdaki sonucu verecektir. ⇩


⇧

* * *

<hr> etiketi ile oluşturulan yatay çizgilerin uzunluğu kalınlığı ve rengi CSS ile kontrol edilebilir. Aşağıdaki örnek bu kontrolleri içeren bir çalışmadır.

<hr style="width:60%; border: 9px solid #ff0000;"/>

⇧

❮HTML❯ tag "HTML kök öge" etiketi More info
Definition:

<html> etiketi, bir HTML belgesinin kök öğesidir ve diğer tüm öğeler bu öğenin soyundan gelmelidir.
<html> etiketi, hariç tüm HTML ögelerini kapsar, dolayısıyla tüm web içeriği ve yapısı için ana çerçevedir.
<html> etiketi, Türkçe karşılığı "Hiper Metin İşaretleme Dili" olan Hyper Text Markup Language kelimelerinin ilk harfleri olan HTML ile temsil edilir ve web sayfaları oluşturmada standart biçimlendirme dilidir. Bir web sayfasının yapısını açıklayan HTML bir dizi öğeden oluşur, bu öğeler tarayıcıya içeriğin nasıl görüntüleneceğini söyler.

Basit bir HTML Sayfasının muhtemel kod dizimi
<html lang="tr">
<head>
<meta charset="utf-8">
<title> Sayfa başlığı </title>
</head>
<body>

Bu alan HTML sayfasının gövdesidir, bu alan başlık metinleri, metin paragrafları, görseller, videolar, ses dosyaları ve benzeri multi medya ögeleri, listeler, form ögeleri vesaire bir HTML belgesi sayfasında görülmesi istenen tüm ögeleri kapsar.

</body>
</html>
<footer> Belgenin alt bilgi metni </footer>
html demo page Basit bir HTML Sayfa örneği
konu başlığı

DOĞAL LİFLER

Paragraf -1

Kapok: Kapok lifi, bombacaseae ailesinin ceiba (kapok) ağacının tohumlarını örten ipeksi lifleridir. Kapok lifleri doğal selülozik liflerden biridir.

Read more/less

Kapok lifleri içi boş bir gövdeye ve kapalı bir kuyruğa sahiptir bu özelliği tercih edilen bir yapı olsa da düşük hacim ağırlığı (özgül yoğunluk 0.29g/cm3), lif boylarının kısa ve düşük mukavemete sahip olması nedeniyle modern eğirme makinelerinde ekonomik olarak ipliğe eğrilemezler.
Kapok lifleri, düşük özgül ağırlığı nedeniyle konvansiyonel olarak özellikle can simidi, yatak ve döşemeliklerde dolgu olarak, ses ve ısı yalıtımında kullanılmaktadır.

Paragraf -2

Sisal: Sisal, (Agave sisalana), Agavaceae familyasından yaprak lifleri için yetiştirilen Meksika orijinli bir bitki. Bitki genellikle diğer mahsuller için uygun olmayan sıcak iklim ve kurak bölgelerde yetiştirilir.

Read more/less

Sisal ekimden 2 yıl sonra hasat edilebilir ve verimli ömrü 12 yıla kadar çıkabilir. Yapraklar yaklaşık yüzde 90 nem içermesine rağmen katıdır ve etli hamuru çok sıkıdır. Yaprak içine uzunlamasına gömülü olan lifler, temizleme işlemi sırasında zarar görme riskini önlemek için kesimden hemen sonra yapraklardan çıkarılmalıdır. Elyaf çıkarma işlemi, yaprak hamuru içinden genellikle mekanik bir düzenek üzerinde elle sıyırma veya kazımayla gerçekleştirilir.

Geleneksel olarak sicim, halat ve iplik yapımında kullanılan lifler iplik halinde halı, hasır ve çeşitli el sanatlarında kullanılır. Elyafın en iyi kullanımı parlatma bezindedir çünkü sisal çeliği parlatacak kadar güçlü ve onu çizmeyecek kadar yumuşaktır.


by wovenstory ✍️ N.Yıldırım

İ 2024 WovenStory

HTML belgesindeki konumlarına göre gruplandırılmış öge listesi:
Belge kök ögesi:

<html>

Meta veri ögeleri:

<base>, <head>, <link>, <meta>, <style>, <title>.

içerik kök ögesi:

<body>

İçerik ögeleri:

<address>, <article>, <aside>, <footer>, <header>, <h1-h6>, <hgroup>, <main>, <nav>, <section>, <search>.

Metin içerik ögeleri:

<blockquote>, <dd>, <div>, <dl>, <dt>, <figcaption>, <figure>, <hr>, <li>, <menü>, <ol>, <p>, <pre>, <ul>.

Satır içi metin ögeleri:

<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <cite>, <code>, <data>, <dfn>, <em>, <i>, <kbd>, <mark>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>, <time> , <u>, <var>, <wbr>.

Resim video ve ses ögeleri:

<area>, <audio>, <img>, <map>, <track>, <video>.

Gömülü ögeler:

<embed>, <iframe>, <object>, <picture>, <portal>, <source>.

SVG ve Math ögeleri:

<svg>, <math>.

Komut dosyası ögeleri:

<canvas>, <noscript>, <script>.

Düzenlemelerde sınırı belirleme ögeleri:

<del>, <ins>.

Tablo içeriği ögeleri:

<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>.

Form ögeleri:

<datalist>, <fieldset>, <form>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

Etkileşimli öğeler:

<details>, <dialog>, <summary>.

Web Bileşenleri:

<slot>, <template>.

Kullanımdan kaldırılmış öğeler:

<acronym>, <big>, <center>, <content>, <dir>, <font>, <frame>, <frameset>, <image>, <marquee>, <menuitem>, <nobr>, <noembed>, <noframes>, <param>, <plaintext>, <rb>, <rtc>, <shadow>, <strike>, <tt>, <xmp>.

❮i❯ tag "italik" etiketi More info
Definition:

HTML <i>etiketi, metnin bir bölümünü veya teknik bir terimi veya özlü bir sözü ana metinden farklı bir biçimle göstermek etmek için kullanılır.

<i>etiketi sağa yatık yazı stilini temsil eden italic kelimesinin ilk harfi ile temsil edilir, dolayısıyla <i>etiketleri içindeki içerik genellikle tarayıcıda italik yazı tipinde görüntülenir.

<i>etiketi içerdiği kelime veya cümleye herhangi bir mantıksal anlam yüklemez, genel içeriğin bir bölümüne vurgu yapmak veya mantıksal anlam yüklemek için <em> etiketi kullanılmalıdır, her iki etiketin tarayıcılardaki yazı stili sonuçları benzerdir.

Bu örnekte Türkiye cumhuriyetinin kurucusu ve ilk cumhurbaşkanı Gazi Mustafa Kemal ATATÜRK'e ait özlü sözleri ana metinden farklı göstermek için <i> etiketi içine alıp italik olarak görüntülenmesi sağlanmıştır. * "Benim sözlerimden birinin bilimle ters düştüğünü görürseniz bilimi tercih edin". *"Hayatta en hakiki mürşit ilimdir."
M. Kemal ATATÜRK

❮iframe❯ tag "satır içi çerçeve" etiketi More info
Definition:

iframe etiketi, satır içi çerçeve anlamına gelen "inline frame" kelimelerinin kısaltmasıdır. iframe example <iframe> etiketi geçerli HTML belgesine aynı kaynaktan veya başka bir kaynaktan bir içeriği veya medyayı gömmek suretiyle belgede yüzen bir pencere görüntülemek için kullanılır, bu bir html belgesi, harita, resim, video yada ses dosyası olabilir.

iframe:
Yüzen pencerel oluşturur.

iframe name:
Bir iframe adını belirtir.

iframe sandbox:
Iframe'e güvenlik ve kullanılabilirlik kısıtlamaları getirir.

iframe src:
iframe'de görüntülenecek belgenin URL'sini belirtir.

iframe width:
iframe genişliğini belirtir.

HTML iframe Tag Maps Generator

❮img❯ tag "resim" etiketi More info
Definition:

Image kelimesinin kısaltması olan IMG etiketi resim ve benzeri bir görseli ifade eder. HTML IMG etiketi, bir web sayfasındaki bir resmi görüntüler, IMG etiketi resim kaynağını ve görüntüleme niteliklerini içerir.

HTML IMG Görüntü Nitelikleri

• img src: Bir görselin kaynak yolunu belirtir. Tarayıcılar görüntüyü kaynak yolu olmadan bulamaz ve görüntüleyemez. Kaynak yolu, mutlak (dış kaynaklı) veya göreli (iç kaynaklı) bir URL olabilir.

Image on Another Server

• img align:Hizalama özelliği, görselleri hizalamak için şu ögelerden biri ile kullanılır, left | right | middle | top | bottom. <img> ögeleri satır içi (inline) ögelerdir block ögeler gibi sayfaya yeni bir satır eklemezler, yani metin ve diğer öğeler IMG ögesinden sonra aynı satırdan devam ederler, IMG ögesinin satırdaki konumuna göre önünde veya arkasında kalan satır boşluklarında onun etrafına sarılırlar. Sayfa planı dahilinde align özelliği ile görseller istenilen hizaya taşınabilir.

<img align="left">spin gif görsel sola yanaşık
<img align="center">spin gif görsel ortaya hizalanmış
<img align="right">spin gif görsel sağa yanaşık

Yukarıda görseller IMG align özelliği ile 3 farklı konumda hizalanmıştır ancak IMG'nin align özelliği HTML5'te desteklenmiyor, bunun yerine CSS kullanılması daha akılcı olacaktır.

CSS'de görseli dikey olarak ortaya, yukarıya veya aşağıya hizalamak için CSS'nin dikey hizala özelliği kullanılır.
Görseli sola veya sağa hizalamak için ise CSS'nin float özelliği kullanılır.

Image and Text combinations with CSS VERTICAL POSITION _ (dikey pozisyon)
• vertical-align: text-top;
spin gif top Üste hizalanmış metin.
Burada hizalama noktası görselin üst çizgisidir.
• vertical-align: text-bottom;
spin gif bottom Alta hizalanmış metin.
Burada hizalama noktası görselin alt çizgisidir.
• vertical-align: middle;
spin gif middle Dikey ortaya hizalanmış metin.
Burada hizalama noktası görselin dikey ortasıdır.
HORİZONTAL POSITION _ (yatay pozisyon)
• float: left;
spin gif float left Sola hizalanmış görsel, float özelliği görselin satır içi öge özelliğini devredışı bıraktığı için görselin hizasındaki satırlar sayfadaki diğer satırlar ile aynı yüksekliktedir, bu nedenle görsel hizasında birden fazla satır bulunabilir, buradaki satır sayı görselin yüksekliği ile orantılıdır.
• float right
spin gif float right Sağa hizalanmış görsel. Üst, sola hizalanmış görsel konusundaki açıklama bu konu için de geçerlidir.

• img alt: Alternative kelimesinden kısaltılan img alt özelliği görselin herhangi bir nedenle web sayfasında görüntülenememesi durumunda görsel için alternatif bir metin belirtir.

• img title Bu özellik görselin başlığını ayarlamak ve resim hakkında ek bağlam sağlamak için kullanılır. title özelliği, fare imleci resmin üzerine getirildiğinde resim hakkındaki bilgileri araç ipucu olarak görüntüleyen bir ögedir.

• img crossorigin: Bu özellik başka bir kaynaktan bir resim yüklenirken kullanılan kaynaklar arası kaynak paylaşımına izin veren bir özelliktir. Tarayıcıya, çapraz kaynak paylaşımı (CORS) isteği adı verilen bir şey yapmasını söyler. CORS güvenlik mekanizması, web sunucularının diğer etki alanlarının kaynaklarına erişip erişemeyeceğini kontrol etmesini sağlar. Ve hassas bilgilere yetkisiz istekler yoluyla erişilmesini önler.

• img width: Resmin genişliğini belirtir.

• img height: Resim yüksekliğini belirtir.

• img ismap: Bu nitelik sunucuda depolanan tıklanabilir alanlara sahip bir görüntü haritasını temsil eder. Ismap niteliği, 'a' etiketlerinin içindeki tıklanabilir görsellere benzer, ancak yalnızca tıklanabilir alanlara sahip görüntü haritaları için kullanılır.
<a href="https://wovenstory.tr.gg/"><img src="https://img.webme.com/pic/w/wovenstory/earth_spin. gif" alt="sphere" ismap></a> bu kod dizimi aşağıdaki sonucu gösterir.

sphere

Kullanıcı görsele tıkladığında, tıklamanın yapıldığı konum da istekle birlikte gönderilir. İmleç koordinatlarını URL'nin sonuna ekler. Sunucudaki program veya komut dosyası isteği işler ve belirli bir eylemi gerçekleştirir. Veya kullanıcıyı belirli bir sayfaya götürür.

• img use-map: Bu nitelik tıklanabilir alanlara sahip görüntü haritası olarak da tanımlanan bir görüntüyü temsil eder. Her tıklanabilir alan belirli bir adrese, yani bir web sayfasına veya kaynağa bağlanır. Bu alanların ve adreslerin konumlarına ilişkin bilgiler <map> etiketinde saklanır. Usemap özelliğinin değeri, ilgili haritanın adını gösterir, bu nedenle, usemap özelliği, tarayıcılar içinde işlenen görüntü haritaları oluşturur.
Aşağıdaki görsel bir görüntü haritası olarak düzenlenmiştir, görselin sol bölgesi ve orta bölgesi tıklanabilir alanlardır.
cotton field cotton yarn type

• img longdesc: Resim hakkında daha fazla bilgi bulunan bir URL'yi tanımlar.

• img border: Resmin çerçeve niteliklerini belirlemekte kullanılır.

• img srcset: Bu özellik duyarlı görselleri görüntülemek için kullanılır. Aynı görsele birden fazla boyutta bağlantılar içerir. Ve her görüntünün boyutu genişliğe veya yoğunluğa göre belirlenir. Bu, tarayıcının ekran boyutuna ve çözünürlüğüne göre setten en uygun görseli seçmesine yardımcı olur.

• img loading: Görsel yükleme tercihi, bir web sayfası açıldığında tarayıcıya görsellerin hemen yüklenmesi veya yükleme için belirli koşulların yerine getirilmesi gerektiğini belirtir.

❮input❯ tag "formlara veri girişi" etiketi More info
Definition:

input\ giriş etiketi, <input="type"> niteliği vasıtasıyla <form> ögelerinin içine yerleştirilen, kullanıcıların çeşitli türde bilgileri girebilmesi için farklı giriş alanları yaratan ögelerdir.

<input> etiketi, kullanıcıların çeşitli türde bilgileri girebilmesi için farklı giriş alanı tipleri oluşturmak veya giriş kontrolleri oluşturmak için kullanılır. <input> alanının türünü belirlemenin veya giriş kontrolünü oluşturmanın yolu, type niteliğini ayarlamak ve ona bir değer atamaktır, bu nitelik metin alanları, e-posta alanları, şifre alanları, onay kutuları, radyo düğmeleri, açılır menüler, gönderme düğmeleri, kullanıcının bilgisayarından dosya ve resim seçme ve yükleme yeteneği ve çok daha fazlasını oluşturur.

İnput ögeleri yaygın olarak bir web formunda kullanıcı verilerini almak için kullanılır. Aşağıdaki örnekte bir kullanıcı kayıt formu verilmiştir.


Sample registration form
New User Login Yeni kullanıcı girişi
User information







Single Married Other
Contact information






Input etiketi stil nitelikleri listesi
(input tag style attributes list)
button attribute buton özelliği More info
Definition:

Button, tıklanabilir bir buton (düğme) oluşturur, tıklandığında bir olayı başlatır.

<input type="button"id="btn"value="Click me">
Result:

checkbox attribute onay kutusu özelliği More info
Definition:

Checkbox, seçmeli menüler için onay kutucukları yaratır. Etkinleştirmek için onay kutusunun işaretlenmesi gerekir.

<input type=" checkbox" id="CheckBox">
checkboxes

Onay kutuları, kullanıcı bu alanda bir veya birkaç öge seçebilir.



color attribute renk özelliği More info
Definition:

Color, kullanıcının renk seçiciden bir renk seçmesine olanak tanımak ve renk değerini '#rrggbb' formatına dönüştürmekte kullanılan bir arayüz'dür. Bir değer belirtilmezse varsayılan değer: #000000; siyahtır.

Input type color
<input type="color" id="color">
Result:   Renk skalası

Renk seçmek için üst renk skalasına tıklayın.

Seçili Rengin 'RGB' değerini almak için alt butona tıklayın.

date attribute tarih özelliği More info
Definition:

date, bu arayüz formlara tarih giriş alanı yaratır, kullanıcı giriş alanına tıkladığında bir tarih seçmesine olanak sağlar.

Sample Form (Date) <input type="date"id="date">
Result:
Formlara Tarih eklemek için bu alana tıklayın ve çıkan uygulamadan bir tarih seçin.

datetime attribute tarih ve saat özelliği More info
Definition:

Datetime-local, bu arayüz de formlara tarih giriş alanı yaratır ve kullanıcının tarih ile birlikte yerel saat dilimini de seçmesine olanak sağlar. Böylece kullanıcı, formunu tarih ve saat ile kayıt altına almış olacaktır.

Sample Form (Datetime> <input type= "datetime-local"id="dt-local">
Result:
Formlara Tarih ve Saat eklemek için bu alana tıklayın ve çıkan uygulamadan tarih ve saati seçin.

e-mail attribute e-posta özelliği More info
Definition:

e-mail, bu arayüz e-posta adresleri için bir metin alanı oluşturur. Doğrulama gönderildiğinde, giriş verilerinin geçerli bir e-posta adresi olduğunu denetler.

Sample form (email field)

<input type="email" id="email">
Result: e-mail giriş alanı:


file attribute dosya özelliği More info
Definition:

File, formlarda dosya yüklemeleri için dosya seçme butonu ve gözatma alanı oluşturan bir arayüz'dür.

Sample form (file field)
<input type="file" id="file">
Bir dosya seç:


Birden fazla dosya seçilmesi gereken projeler için proğramcı multiple ögesini kullanır.


  Sample form (multiple file) 

  <input type="file" id="file"multiple>

Dosyaları seç:










 









    
        

             hidden attribute 
            gizli özelliği 
            More info 
        

    







 Definition: 

hidden,input etiketinin gizli özelliği, programcılar tarafından gizli bir giriş (input) alanını tanımlamak için kullanılır. Gizli alan, form gönderildiğinde kullanıcılar tarafından görülemeyen veya değiştirilemeyen verileri de içerebilir. Gizli alan yalnızca form gönderilirken güncellenmesi gereken veritabanı kayıtlarını saklar. 

<input type="hidden" id="xfile" value="xhidden"> bu kod dizimi aşağıdaki formu oluşturan kodlardan biri olmasına rağmen kullanıcı bu kodun oluşturduğu giriş (input) alanını göremeyecektir. 
  




 Sample hidden form  

Input 1- Hidden: 


Input 2- F.Name: 

Input 3- L.Name: 

 






 









    
        

             image attribute 
            resim özelliği 
            More info 
        

    







 Definition: 

 Bu arayüz form verilerini sunucuya gönderen bir resim düğmesi oluşturur. Input type image özelliğinin varsayılan değeri metindir ve bir görsel (image) eklemesi yapılmaz ise bu kod dizimi <input type="image"> aşağıda görüleceği gibi Gönder butonu olarak kullanılan bir çıktı oluşturacaktır. 
  


 

Sample image button 









 

 


 
 





 









    
        

            month attribute 
            ay özelliği 
            More info 
        

    







 Definition: 

 Ay ve Yıl seçme skalası oluşturan bir arayüz'dür. Bu format Ayları isimleriyle Yılları rakamlarıyla sunar. 

<input type="month"id="month"> 

 Result: 



 









    
        

             number attribute 
            sayı özelliği 
            More info 
        

    







 Definition: 

 Bu arayüz HTML formlarına sayısal giriş alanı oluşturmakta kullanılır.

Sayısal giriş alanına girişte aşağıdaki kurallar tek tek, bir kısmı veya hepsi birden uygulanabilir. 

max : izin verilen en yüksek değeri belirtir.

min : izin verilen en düşük değeri belirtir.

step : izin verilen sayı aralığını ayarlar.

value : alan için varsayılan bir değer ayarlar. 




 SAMPLE FORM   (Rules)

 Bu örnekte 4 kural için 4 ayrı giriş (input) alanı gösterilmiştir. 


R1-No range: Sınırsız sayı girişine izin verir.

Result: 




R2-Range: 1 ila 100 arasında bir sayı girişine izin verir. 
 
Result:




R3-Value: Proğramcının atadığı varsayılan değer, en çok kullanılabileceği tahmin edilen bir sayıdır ve kullanıcının bu değeri silip kendi değerini girmesine izin verir.

Result:




R4-Step: Proğramcının atadığı bu değer kullanıcının gireceği sayının kat sayısını gösterir. Örn. bu değer 2 ise 2'nin, 5 ise 5'in, 15 ise 15'in katları şeklinde giriş yapılabilir. Ayrıca Girilecek değer izin verilen min. ve max. değerler arasında olmalıdır. 

Result:











 SAMPLE FORM   (All Rules)

 Bu örnekte input number özelliğinin 4 kuralı (min, max, step ve value) birlikte kullanılmıştır. All Rules sample code: <input type="number"id="AllRules"min="1" max="100" value="50" step="0.5" /> 

Result: 








 Ayrıca bazı formlarda giriş alanı yerine alt örnekteki gibi kaydırma çubuğu veya yukarı-aşağı artırıp azaltma  düğmeleri kullanılabilir.


 Bu özelliği desteklemeyen tarayıcılarda kaydırma çubuğu scrollbar yerine normal giriş alanı olarak gösterilir. 





 SAMPLE FORM   (Scroll bar)

<input id="intNumber" type="range" min="1" max="20" value="10"> bu kod dizimi 1 ve 20 arasından bir sayı seçilebilecek bir kaydırma çubuğu oluşturacaktır, açılışta seçili (varsayılan) değer 10'dur. 
















 









    
        

              password  attribute 
            şifre özelliği 
            More info 
        

    







 Definition: 

 Bu arayüz şifreler/parolalar için bir giriş alanı oluşturur.
Girilen değerler güvenli bir şekilde işlenir, maskelenir ve kopyalanmaya karşı kısıtlanır.



  
    Password focus 

 
  


 SAMPLE FORM   (Password)
 




 






  
   

  





 









    
        

             radio attribute 
            radyo düğmeleri özelliği 
            More info 
        

    







 Definition: 

Bu özellik formlar için radyo düğmeleri şeklinde seçme ögeleri oluşturur. Bu ögeler genellikle seçmek için tıklandığında içi dolan bir çemberdir. Adını istasyon arama ve ses düzeyi ayarları yuvarlak düğmelerle yapılan eski model manuel radyolardan almıştır. 


 Type="radio" özelliği hepsi aynı name değerine sahip bir dizi radyo düğmesini ifade eder. Kullanıcı bu düğmelerden yalnızca bir tanesini seçebilir, önceden seçilmiş veya varsayılan olarak seçilmiş bir düğme varsa yeni bir seçim yaıldığında bu düğme dolar ve önceden seçili düğme otomatik olarak boşalır.




 SAMPLE FORM  (Simple/Yalın) 


Select fiber type:

 Vegetable fiber 

 Animal fiber 

 Mineral fiber 

 Synthetic fiber 






 Bu örnek kullanıcının radyo düğmelerinden bir tanesini seçebileceği yalın, klasik bir formdur. <input type="radio" name="selectfiber" value="hayvansal"> Animal fiber  Bu örnekte radyo düğmelerinin yanındaki metinler tıklamalara yanıt vermez, tıklanabilir olan sadece radyo düğmeleridir. 








 SAMPLE FORM  (Labeling/Etiketlenmiş) 


Select fiber type:



 

 

 




 


 Bu örnekte radyo düğmeleri "label" etiketine sarılmıştır, <label><input type="radio" name="selectfiber"value="bitkisel"required> Vegetable fiber </label> 
 bu özellik radyo düğmelerinin yanısıra her radyo düğmesinin yanındaki metin ögelerini de tıklanabilir yapmıştır.








 SAMPLE FORM  (Selected/Seçili) 


Select fiber type:



 

 

 






 Bu örnekte "label" özelliğinin yanısıra radyo düğmelerinden bir tanesi "checked" özelliği ile varsayılan olarak işaretlenmiştir, <label&bt<input type="radio"name="selectfiber"value="hayvansal"checked> Animal fiber </label> bu düğme açılışta  seçili olarak görüntülenecektir. Kullanıcı başka bir düğmeyi seçmek ister ve seçerse seçilen düğmenin içi dolarken varsayılan düğmenin içi otomatik olarak boşalacaktır. 







 









    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="range">  






 












    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="reset">  






 












    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="search"> 






 














    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="submit"> 






 














    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="tel">  






 













    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="text">  






 














    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="time"> 






 














    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="url"> 






 














    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 

  
<input type="week"> 






 













    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 



Düğme: Düğme genellikle bir basma düğmesidir, …// etkinleştirmek için basılır.
onay kutusu: Etkinleştirmek için onay kutusunun işaretlenmesi gerekir.
renk: Seçtiğimiz rengi seçmek için kullanılan arayüz.
tarih: Tarih seçmek için kullanılan arayüz.
E-posta: E-posta adreslerini kabul etmek için kullanılan arayüz.
Dosya: Dosyaları yüklemek için kullanılan arayüz.
Resim: Bir resmin girilmesi için kullanılan arayüz.
Ay: Yılları ve ayları girmek için kullanılan arayüz. *** Formatı “YYYY-AA”dır.
Sayı: Arayüz kullanıcının bir sayı girmesine izin verir.
Şifre: Arayüz bir şifre alanı tanımlar (karakterler güvenlik amacıyla maskelenmiştir).
Radyo: Bir dizi seçeneğin girildiği radyo düğmeleri koleksiyonu).
Aralık: Varsayılan aralık 0 ila 100 olan kaydırmalı kontrol arayüzü.
Sıfırla: Formu varsayılan değerlere sıfırlamak için kullanılan arayüz.
Arama: Bir arama dizesi girmek için arayüz.
Gönder: Tüm form değerlerini bir form işleyicisine göndermek için arayüz.
Metin: Tek satırlık metin alanına giriş yapmak için arayüz.





 












    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 




 

Sample Output: 









 










    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 




 

Sample Output: 









 










    
        

              ❮ xxx ❯ tag
            " xxx" etiketi 
            More info 
        

    







 Definition: 




 

Sample Output: 









 




















  

    
 








   

    
        

H T M L    tag
 F U N C T I O N 

         
       
            
        

             input 
            Formlarda input ögeleri oluşturur. 

        

            input accesskey: 
            Atanan input ögesi için bir klavye kısayolu tanımlar.

        

            input autocomplete:
            Tarayıcının, girdileri benzer alanlara giren girdilere göre otomatik olarak tamamlamaya çalışıp çalışmayacağını belirtir. 

        

            input autofocus:
           Giriş alanının, sayfa yüklendiğinde hemen odaklanılacağını belirtir.

        

            input border:
            Giriş ögesi için bir kenarlık belirtmek. 

        

            input checked:
   Bir onay kutusu veya radyo düğmesinin form girişinine varsayılan olarak atanmasını tanımlar. 
 bu örnekte pizza seçilmiş ögedir, pizzanın yanında verilebilecek içecek siparişi seçilebilir.





 


 Pizza 


 


 Fruity drink 


 


Coke





 

        

            input disabled:
             Disabled, disabled atanan ögeyi devre dışı (tıklananaz) yapar, formlarda gerekli alan veya alanlar doldurulduğunda ögeyi aktif hale getirmek için javascript kullanılır.
Aksi halde süresiz devre dışı kalır. 
 

 
  Disable Button Based on User Input Example


  

    
    
    

    
    
    

    
  
 


 

        

            input formaction:
 formaction, bir form gönderildiğinde form verilerinin nereye gönderileceğini belirtir. Formaction kullanılan formlar 2 gönder submit butonu ile çalışır. 

1. buton: klasik gönder butonu olarak çalışır, 2. buton: formaction özniteliği ile  başka bir sayfa veya başka bir URL'nin ilgili sayfasına gönderir, 2. butunun formaction özniteliği action özniteliğini devredışı bırakır. 

Sadece type: submit ve type: image ögelerinde kullanılabilir.




  Email:
  
  
  
  
  




        

            input formmethod:
 Form verisi sunucuya gönderildiğinde kullanılacak HTTP yöntemini (GET veya POST) belirtir. Sadece type: submit ve type: image ögelerinde kullanılabilir.

        

            input formtarget:
            Form gönderme sonrasında sunucudan yanıtın açılacak gözatma bağlamını belirtir. Sadece type: submit ve type: image ögelerinde kullanılabilir.

        

            input height:
            Bir image girişinin yüksekliğini belirtir.

        

            input language:
  Girdi tarafından tetiklenen olaylar için kullanılan komut dosyası dilini tanımlar.

        

            input list:
            Giriş alanıyla ilgili otomatik tamamlama önerilerinin bir listesini sağlayan datalist ögesinin kimliğini belirtir.

        

            input max:
            Sayı ve tarih girdi alanına maksimum bir değer belirtir.

        

            input maxlength:
            Metin girdi alanına girilebilecek maksimum karakter sayısını belirtir. 

        

            input min:
            Sayı ve tarih girdi alanına minimum bir değer belirtir.

        

            input multiple:
            Kullanıcının bir dosya yükleme veya e-posta girişi içine birden fazla değer girmesine izin verir.

        

            input name:
            Bir giriş ögesinin adını belirtir. Her bir input ögesinin adı ve değeri, form gönderilirken HTTP isteğine dahil edilir.

        

            input pattern:
            Girilen değerin geçerli olacağı düzenli ifadeyi belirtir.

        

            input placeholder:
            Metin tabanlı girdide yer tutucu metni tanımlar.





  Email:
  
  
  
  





        

            input readonly:
            Kullanıcının girdi değerini düzenlemesine izin vermez.

        

            input required:
            Giriş alanının gerekli olduğunu belirtir. form gönderimini izinsiz kılar ve gerekli alan boşsa kullanıcıyı uyarır.

        

            input size:
             metin girdileri için karakter sayısı belirtir. değer verilmezse varsayılan max. 1024 karakterdir.

        

            input src:
             Bir image girişinin kaynak URL'sini tanımlar.  

        

            input step:
             Sayı temelli bir girdi içindeki geçerli değerler arasındaki aralığı belirtir.

        

            input checkbox:
 Çok seçmeli menüler için seçme (işaretleme) kutucukları yaratır.

        

            input image:
             Gönder butonuna bir resim  (image) koyar.

        

            input radio:
             Tek seçmeli menüler için radio düğmesi şeklinde seçme (işaretleme) kutusu yaratır.  

        

            input reset:
             Silbaştan (reset) butonu yaratır. 

        

            input submit:
             Gönder  (Submit) butonu yaratır.

        

           input type:
            Girdi türünü tanımlar. 

        

            input text:
             Bir satırda max. 1024 karakterlik text girişi yaratır. Karakter sayısı SIZE parametresinin nitelenmesiyle belirlenebilir. 

        

            input value:
             Bir giriş alanı için başlangıç ​​değerini veya varsayılan seçimi tanımlar.
        

        

            <ins>..
             Eklenmiş metine  Vurgu yapmak  - yılda bir ay  <ins> 26 işgünü  </ins> ücretli  izin
        

        

            <isindex action=””>
             Geçerli belge yerine, aranacak bir URL'yi belirtir.
        

        

            <isindex prompt=””>
             Belge arama formu için bir etiket veya istem metni belirtir.
        

        

            <kbd>
             Klavye metni belirtir - Metin kutusuna  <kbd> TL </kbd>
        

        

            <label for=””>
             İlişkili form alanı öğesinin kimliğini belirtir.
        

        

            <label>..
             Form öğeleri için etiket belirtir  <label for="kimlik Bilgileri">  Adınız: <input type="text">  </label>
        

        

            <legend>
             Form kutusu için başlık oluşturur  <fieldset>  <legend> Kredi Kartı Bilgileri </legend>   Kart no: <input type="text"> </fieldset>
        

        

            <li>..
             Liste öğesi belirtir <li>  Liste öğesi
        

        

            <li> # # </li>
             Numaralı ya da numarasız listedeki maddeleri belirler.
 Read more/less  Numaralı listede maddelere sırayla numara verir. Numarasız listelere isteğe göre işaret (disk, çember vb) koyar.

            		
        

        

            <li type=””>
             Tek bir liste öğesinin madde işareti veya numaralandırma stilini belirtir.
        

        

            <li value=””>
             Numaralandırılmış bir liste içindeki bir liste öğesinin sayaç değerini belirtir.
        

        

            <link>..
             Sayfa ile ilgili harici dosyalara bağlantı verir <link rel="stylesheet" type="text/css" href="stiller.css">
        

        

            <link media=””>
             Tarayıcıya bir kaynak türü için tasarlanmış cihaz türünü bildirir.
        

        

            <link rel=””>
             İki bağlı doküman arasındaki ilişkiyi belirtir.
        

        

            <link title=””>
             Kullanıcıların kendi aralarında seçim yapabilecekleri farklı bağlı kaynaklara bir ad atar.
        

        

           <link type=””>
             Bağlı kaynağın ortam türünü (MIME türü) açıklar.
        

        

            <listing>
            Metinleri yazıldığı şekliyle görüntüler  <listing> <br> etiketi kullanmadan alt satıra geçtik </listing>
        

        

            <map>
             Resim haritası oluşturur  <map name="harita"> # # </map>
        

        

       <map name=””>
             Bir resim haritasına bir ad atar.
        

        

            <maxlength>
            “text” ve “password” elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Ön tanımlı değeri sınırsızdır.
        

        

            <menu>
             Liste oluşturur menu> <li>  Liste öğesi </menu>
        

        

            <meta>..
             Dosya bilgisi tanımlama - HTTP başlık bilgileri içerir  <meta http-equiv="content-type" content="text/html" charset="windows-1254">
        

        

            <meta content=””>
             Meta öğesinin değerlerini tanımlar.
        

        

            <meta http-equiv=””>
             Belge başlığı bilgilerini tanımlar.
        

        

            <meta name=””>
             Meta-  öğesinin contents özniteliğindeki değer için bir bağlam sağlar.
        

        

            <method>
             Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir.
        

        

            <name>
            Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
        

        

            <noframes> # # < /noframes>
            Çerçeve etiketini tanımayan eski tarayıcılar için alternatif kod bölümü ⬨<noframes> Browser'ınızı güncelleyin! </noframes>
        

        

            <noscript>
             Script çalıştırma özelliği kapalı tarayıcılar için alternatif kod bölümü <noscript>  scriptleri kaçırıyorsunuz!  </script>
        

        

            <object>
             Applet, video dosyası gibi nesneleri eklemekte kullanılır  <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="ayarla"> <param name="BorderStyle" value="1"> </object>  

        

            <ol start=””>
             Sıralı bir listede başlangıç ​​numarasını tanımlar.
        

        

            <ol type=””>
             Sırasız bir listenin her bir öğesinde kullanılması gereken liste işaretçisinin türünü belirtir.
        

        

            <ol>
             Numaralandırılmış liste ekleme.
        

        

            <ol>… < /ol>
             Sıralı liste oluşturur <ol> <li>  Liste öğesi </ol>
        

        

           <optgroup>
             Seçim grubu.
        

        

            <option>
             Formlar için kullanılabilecek liste kutusu seçenekleri oluşturur <select> <option>  Beni seç </select>
        

        

            <option selected>
             Varsayılan seçimi bir açılır listede tanımlar.
        

        

            <option value=””>
             Bir form seçeneği öğesi seçildiğinde sunucuya gönderilen verileri tanımlar.
        

        

            <p>
             Paragraf.
        

        

            <p>… < /p>
             Paragraf oluşturur  <p>Bu bir paragraf  </p>
        

        

            <p align=?>
             Paragrafı sola, ortaya ya da sağa yanaşık yapar.
        

        

            <p clear=””>
             Bir paragrafın, üst öğedeki kardeş öğelerin yanında olması yerine kardeş öğelerinin altında görünmesi için zorlandı.
        

        

            <p hidden>...... </p>
             Paragrafı gizler - <p hidden> Bu paragraftaki yazı gizlidir. Ekranda gözükmez. </p>
        

        

            <param>..
            Parametre bildirme, <object> veya <applet> etiketi ile yerleştirilen nesnenin parametrelerini belirtir <object> <param name="Min" value="0"> param name="Max" value="10"> </object>  

        

            <param name=””>
            Parametre adını belirtir.
        

        

            <param value=””>
             Parametre değerini belirtir.
        

        

            <password>
             Formumuza parola yazılabilecek alan eklemek için kullanılır.
        

        

            <plaintext>
            Metni yazıldığı şekliyle görüntüler -plaintext- Tarayıcıda görülemeyen etiketleri head,br,html,table,style vb. olduğu şekliyle tarayıcıda gösterir
        

        

            <pre>
             Formatlı yazı ekleme.
        

        

            <pre>… </pre> 
            Önceden biçimlenmiş metinleri (preformatted text) olduğu gibi gösterir.
        

        

            <q>
            Küçük alıntılar için.
        

        

            <radio>
            Form listelerinde Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır.
        

        

            <reset>
            Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.
        

        

            <rowspan>
            Aynı sütundaki hücreleri birleştirmek için kullanılır.
        

        

            <s>
            Metnin üzerini çizer - <s>  Kahramanmaraş </s>
        

        

            <samp>
            Bilgisayar yazı tipi kullanma.
        

        

            <script>
            Script tanımlama.
        

        

            <script>
            Script kodu veya kaynağını belirtir  <script language="Javascript">… </script>
        

        

            <script defer>
            Script 'in  ertelenmesi elemanı, bir betik yüklemesine izin verir, ancak betiğin icrasını sayfaya kadar duraklatır .
        

        

            <script language=””>
            Script  dil özniteliği, kullanımdaki betik dili tanımlamanın bir yolu olarak tasarlanmıştır. 
        

        

            <script src=””>
            Harici bir komut dosyasının URL'sini belirtir.
        

        

            <script type=””>
            Komut dosyasının ortam türünü belirtir.
        

        

            <select>
            Seçim kutusu tanımlama.
        

        

            <select>
            Formlar için liste kutusu oluşturur - <select> <option>  Beni seç </select>
        

        

            <select disabled>
            Açılır listeyi devre dışı bırakır.
        

        

            <select multiple name="NAME" size=?> </select>
            Kayan çubuklu menu yaratır. (size) nitelemesi, kaydırmadan kaç seçenek görüneceğini belirler.
        

        

           <select multiple>
            Kullanıcının listedeki birden fazla seçeneği seçmesine izin verir
        

        

<select name="NAME">… </select>
 Çekme menüsü (pulldown menu) yaratır.
        

        

            <select name=””>
            Seçim Öğelerini Adlandırma:    SELECT  seçeneğinin NAME  özelliği, seçim alanınızı JavaScript ile kolayca kullanabileceğiniz anlamına gelir. 
        

        

            <select onChange=””>
            Seçim değiştirildiğinde bir olay tetikler.
        

        

            <select onFocus=””>
            Seçili bir öğe odağı aldığında bir olay tetikler.
        

        

            <select size=””>
            Seçilen öğenin boyutunu belirtir.
        

        

            <select tabindex=””>
            Sekme tuşuna basıldığında seçim sırasını tanımlar.
        

        

            <size>
            “text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
        

        

            <small>
            Küçük yazma.
        

        

            <small>
            Metni 1 ölçü küçültür <small> Küçültülmüş metin </small>
        

        

            <span>
            Bir alan tanımlaması.
        

        

            <span>
            Bölüm oluşturur <span> Bu bir bölüm </span>
        

        

            <src>
            "image" elemanında resim dosyasını belirtmek için kullanılır.
        

        

            <strong>
            Vurgu yapmak.
        

        

            <strong>… </strong>
            Metni belirgin yazar -  Enflasyon: <strong> #  </strong>
        

        

            <style>
            Stil belirleme.
        

        

            <style>
            stil grubu oluşturur 
 

 		
        

        

            <style media=””>
            Bir style içerisindeki style uygulanacak aygıtı veya ortamı tanımlar. CSS style çeşitli cihazlar ve medya formatları için optimize edilmesine izin verir.

        

            <style type=””>
            Bir style öğesinde bulunan ortam türünü tanımlar. Bununla birlikte, desteklenen tek değer text / css'dir, bu nedenle özellik gerekmez.

        

            <sub>
            Normalden aşağı  yazı oluşturur  - H <sub> 2 </sub> O
        

        

            <submit>
            Form içeriğini sunucuya yollar.
        

        

            <sup>
            Nomalden yukarı yazı oluşturur - 40 <sup>o </sup>
        

        

            <table>
            Tabloya başlamak.
        

        

            <table>… </table>
            Tablo oluşturur
        

        

            <table border=#>
            Hücrelerin kenar kalınlıklarını belirler.
        

        

            <table cellpadding=#>
            Hücre kenarı ile hücre içine yazılan metin arasındaki açıklığı belirler.
        

        

            <table cellspacing=#>
            Hücreler arası açıklığı belirler.
        

        

            <table width=..px or ..%>
            Tablonun genişliğini belirler. Pixel ya da ekran genişliğinin yüzde oranı cinsinden belirtilebilir.
        

        

            <target="_blank"
            Bağlantı yeni bir pencerede açılır.
        

        

            <target="_parent"
             Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
        

        

            <target="_self"
            Bağlantı aynı pencere içerisinde açılır.
        

        

            <target="_top"
            Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
        

        

            <target="çerçeve adı"
            Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.
        

        

            <tbody>
            Tablo gövde (body) bölümünü oluşturur <tbody>…</tbody>
        

        

            <td align=””>
            Tek bir tablo veri hücresinin içeriğinin hizalamasını belirtmek için kullanılır
        

        

            <td background=””>
            Td - öğesinin arka plan resmi olarak kullanılacak bir resim dosyasının URL'sini belirtir.
        

        

            <td bgcolor=””>
           Bir tablodaki tek bir hücrenin arka plan rengini ayarlar.
        

        

            <td bordercolor=””>
            Bir hücre etrafındaki tüm kenarlık rengini ayarlar.
        

        

            <td colspan="3">
             Colspan değeri kadar hücreyi Satır yönünde (yatay) birleştirir 
        

        

            <td nowrap>
            Bir hücredeki metnin satırlara ayrılmasını önler.
        

        

            <td rowspan="2">
            Rowspan degeri kadar hücreyi Sütun yönünde (düşey) birleştirir.
        

        

            <td width=””>
            Bir tablo veri hücresinin genişliğini varsayılan genişliği geçersiz kılacak bir değere ayarlamak için kullanılır.
        

        

            <td>
            Tablo hücresi oluşturur
        

        

            <text>
            Formlarda kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir. <input type="text" size="20" maxlength="30" /> 

        

            <text-align = text-ident">
            Yazının soldan ne kadar boşlukla  başlayacağını belirler. 5px, 10px gibi.
        

        

            <text-align ="… " >
            Yazının konumunu belirler  (left) - (center) - (right) - ( line-height) - ( text-ident)
        

        

            <text-align =" line-height">
             Yazının  satırdan yüksekliğini belirler. 3px, 5px gibi
        

        

            <text-align ="center" >
            Yazı  ortaya
        

        

            <text-align ="left" >
             Yazı  sola
        

        

            <text-align ="right" >
             Yazı  sağa
        

        

            <text-align ="vertical" >
            Yazı  dikey
        

        

            <text-decoration = line-through>
            Yazının üzerinin çizili olmasını sağlar. 
        

        

            <text-decoration = underline>  
            Yazının altının çizili olmasını sağlar.
        

        

            <text-decoration =none> 
            Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
        

        

     <text-decoration =overline>   
Yazının üstünün çizili olmasını sağlar. 
        

        

            <text-decoration >
            Yazının şekliyle ilgilidir. Bu etiketin 4 tane parametresi vardır. 

1. underline: Yazının altının çizili olmasını sağlar.

2. overline: Yazının üstünün çizili olmasını sağlar.

3. line-through: Yazının üzerinin çizili olmasını sağlar.

4. none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar.

        

<text-transform = " lowercase">
Yazının tümünü küçük harf yapar. 
        

        

            <text-transform = "capitalize">
             Yazıyı istenilen şekilde bırakır.
        

        

            <text-transform ="uppercase">
             Yazının tümünü büyük harf yapar.
        

        

            <text-transform=>
            Yazının harfleriyle ilgilidir. Bu etiketin üç tane parametresi vardır. 

1. lowercase: Yazının tümünü küçük harf yapar.

2. uppercase: Yazının tümünü büyük harf yapar.

3. capitalize: Yazıyı istenilen şekilde bırakır. 

        

            <textarea>…
            Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. <textarea cols="30" rows="5"> </textarea>
        

        

            <textarea cols=””>
            Bir - textarea -  öğesinin görünür genişliğini, ortalama karakter genişliklerinde belirtir. Belirtilmediği takdirde, varsayılan olarak 20 olur.
        

        

            <textarea disabled>
            Metnin bir  -textarea-  öğesine girilmesini devre dışı bırakır.  

        

            <textarea name="NAME" cols=40 rows=8> … </textarea>
            INPUT ile yaratılan metin alanı 1024 karakterle sınırlıdır. Onun yetmeyeceği yerde bir metin alanı (TEXTAREA) yaratılabilir. Textarea sınırsız giriş sağlar. Ancak ekrandaki yeri ve boyutları ROWS ve COLUMNS parametrelerinin nitelenmesiyle (değer verilmesiyle) belirlenebilir. 
        

        

            <textarea name=””>
            Bir -textarea- öğesine bir name özniteliği ekler ve adı, metin alanına eklenen metinle ilişkilendirir.
        

        

            <textarea onChange=””>
            Bir onchange olayı oluştuğunda JavaScript komut dosyasını çalıştıran bir  -textarea-  öğesine bir olay dinleyicisi ekler.
        

        

            <textarea onKeyPress=””>
            OnKeyPress  olayı  oluştuğunda JavaScript komut dosyalarını çalıştıran bir  -textarea-  öğesine bir olay dinleyicisi ekler.
        

        

            <textarea tabindex=”””>
            Bir -textarea-  öğesinin sekme sırasındaki konumunu ayarlar.
        

        

            <textarea wrap=””>
            Bir -textarea- bir form gönderimine dahil edildiğinde gönderilen metnin tamamlanıp tamamlanmayacağını belirtir.
        

        

            <tfoot>
            Tablo ayak (foot) bölümünü oluşturur <tfoot>… </tfoot>
        

        

            <th>
            Tablo sütun başlığı oluşturur
        

        

            <th>… </th>
            Tabloda sütunlara başlık yaratır. (Metni ortalar ve koyu yazar.)
        

        

            <thead>
            Tablo baş (head) bölümünü oluşturur <thead>… </thead>
        

        

            <title>
            HTML Dosyası başlığı.
        

        

            <title> … </title>
             Kaynak dökümana ad verir.
        

        

            <tr align=?> . . or . .  <td align=?>
            Hücre içindeki metni yatay doğrultuda sola, ortaya ya da sağa yanaşık yazar.
        

        

            <tr background=””>
            Tablo satırının arka plan görüntüsü olarak kullanılacak dosyanın URL'sini tanımlar.
        

        

            <tr bgcolor=””>
            Bir HTML tablosundaki tek bir tablo satırı için arka plan rengini ayarlar.
        

        

            <tr bordercolor=””>
            Tablo satırının tüm iç kenarlıklarının kenarlık rengini ayarlar.
        

        

           <tr valign=?> . . or … <td valign=?>
            Hücre içindeki metni düşey doğrultuda alt, orta ya da üste yanaşık yazar.
        

        

            <tr>
            Tablo satırı oluşturur
        

        

            < tr> … </tr>
            Tablonun bir satırını yaratır.
        

        

            <tt>
            Metinleri daktilo harfleri ile yazar <tt>bu daktilo yazısı </tt>
        

        

            <type>
            Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır.
        

        

            <u>    --    (underline)
             Metinleri altıçizili yazar (underline)
        

        

            <ul>
            Sırasız liste oluşturur (unordered list)
        

        

            <ul type=””>
            Liste türlerini belirtmek için
        

        

            <width>
            Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.  

        

            <xmp>
            Metni yazıldığı şekliyle görüntüler -xmp- Sunucuda görülemeyen etiketleri head,br,html,table,style vb. olduğu şekliyle sunucuda gösterir
        

        

            <position>
            style kullanımlarında  div ile oluşturulmuş bölümler veya resim gibi öğelerin sayfadaki yerini  belirlemek için kullanılır. 
 Read more/less  position : static - Olağan konumlandırma 

            position: relative  - Göreceli konumlandırma

            position: absolute - Mutlak konumlandırma

            position : fixed - Sabitlenmiş konumlandırma

            position : sticky - Yapışık konumlandırma 

            <... style="width:30%;background-color:#f8f8ff; position : fixed;"...>  .

        

        

             display özelliği  
  display 

• inline, 

• block, 

• inline-block ve 

• none özellikleri ; 

Html sayfalarında her nesne sol üst köşeden başlayarak birbiri ardına  yan yana eklenir, ancak 

(span), (a), (i)  gibi nesneler yan yana dizilirken  

 (div), (p), (ul), (li) gibi nesneler  alt alta dizilir.

Yan yana gelen nesnelere inline etiket, 

alt alta gelen etiketlere ise block etiketler denir.

Inline etiketlere (width,height). genişlik ve yükseklik verilemez.

div etiketleri block etiket olduğundan bir genişlik verilmez ise satırı olduğu gibi kaplar ve bir sonraki nesne bir sonraki satırdan devam eder.


 display:inline-block  Verildiğinde, display:inline-block olan bir nesne hem inline gibi satırda yan yana gelir hem de bu nesnelere block nesneler gibi yükseklik ve genişlik değerleri verilebilir.
 

display:none; özelliği bir class içine alındığında, class değeri verilen her nesne görünmez hale gelir.

            		
        




            border-width:
            Hücre ve tabloların kenarlık kalınlığını ayarlamak için kullanılır.

        

            border style:
             Table, th, td, div, p, span vb. araçlarda 'style' etiketiyle ile oluşturulacak (border) kenarlık stilini belirler. 





 dotted  
 dashed  
 solid 



 double  
 groove  
 ridge  

 

 inset  
 outset  
 hidden  



 none  
 empty  
 empty 



    


         






   



 End of Page   


   ✍️   ✍️   






 by Nihat Yıldırım 


 W O V E N S T O R Y 







  Prev ⇦    ↑  HTML tags  ↑   ⇨  Next   











                

                
                
            
            

            
        

        
        
    

  






 
 
  


   


  
    
   

 


 


   

 



  ©   2021-- 2023 wovenstory 


 
    Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

    
Ücretsiz kaydol