Html etiketleri

İşlem

COMMENT tag / Yorum etiketi

❇ Yorum etiketi, HTML kodlarına notlar veya ek a�ıklamalar ekler.

Read More/Less

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, aynı zamanda yorum etiketi HTML'deki herhangi bir şeyin amacını tanımlamak i�in de kullanılır. Alt �rnek kodun �ıktısında g�r�leceği gibi yorumlar web tarayıcısı tarafından g�sterilmez.

Sample code and output looks like this

Sample code

<!DOCTYPE html>
<html>
<head> <!-- Document title --> 
<title> <!-- Content title --></title>
</head>
<body> <!-- Document body -->
Bu kod �rneğinde HTML belgesinin <strong>head, title</strong> ve <strong>body</strong> �ğelerine yorumlar (a�ıklamalar) eklendiği g�r�lmektedir ancak bu kod diziminin �ıktısında yorumlar g�r�nmeyecektir zira yorum etiketlerinin arasına yerleştirilenleri tarayıcılar g�stermez.
</body>
</html>

�st �rnek kodun tamamı bir html kod işleme sayfasına eklendiğinde ekran g�r�nt�s� aşağıdaki gibi olacaktır.

Sample Output

Bu kod �rneğinde HTML dbelgesinin head, title ve body �ğelerine yorumlar (a�ıklamalar) eklendiği g�r�lmektedir ancak bu kod diziminin �ıktısında yorumlar g�r�nmeyecektir zira yorum etiketlerinin  arasına yerleştirilenleri tarayıcılar g�stermez. Bu kutudaki metin yukarıdaki s�zdiziminin body/body etiketleri arasında yer alan metindir.

form g�nderisini paylaştı	form g�nderisini paylaştı
form g�nderisini paylaştı	form g�nderisini paylaştı

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DOCTYPE_tag / Dok�man tipi

❇ Dok�man tipi etiketi (!DOCTYPE), tarayıcıya sayfanın hangi HTML s�r�m�nde yazıldığını bildirir.

Read More/Less

Dok�man tipi etiketi (!DOCTYPE), bir HTML belgesinin başlangı� etiketidir.
T�m HTML belgeleri bir <!DOCTYPE> bildirimiyle başlamalıdır, <!DOCTYPE html> bunun bir �rneğidir.
Dok�man tipi etiketi, Document ve Type kelimelerinin kısaltması olan "DOCTYPE" ile temsil edilen bir HTML �ğesidir.
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 vardır, belge t�rleri i�in bakınız; (wikipedia.org/wiki/Document type declaration)
Alt �rnekteki "<!DOCTYPE html>" belgesi artık HTML5'de standartlaştırılmış olan dok�man tipi'ne sahip temel bir HTML5 belgesidir.

Sample code and output looks like this.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Document title </title>
</head>
<body>
Bir HTML belgesinde 'body' etiketleri i�inde yer alan bu alan HTML belgesinin g�vdesi  ⭐ yani i�erik alanıdır. ⭐ Bu alandaki �geler tarayıcıda g�r�necek olanlardır. 
</body> 
</html>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

URL / Web adresi

❇ 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.

Read More/Less

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'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.

Web adresi olarak bilinen bir URL, 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.
URL Protokolleri
Web kaynakları ve
E-posta adresleri (mailto) olarak iki başlıkta kullanılır.

Web kaynakları i�in URL protokolleri;

HTTP (Hyper Text Transfer Protocol) K�pr� Metni Aktarım Protokol�, bu şifrelenmemiş ortak web sayfalarını işaret eder.
HTTPS (Hyper Text Transfer Protocol Secure) bu şifrelenmiş g�venli web sayfalarını işaret eder. 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 protokol.

TELNET Protokol�; Uzak bilgisayarlara erişim ama�lı bir oturum i�in kullanılan protokol.

�oğu URL protokol�n�n ardından sırasıyla iki nokta �st �ste ' : ' ve iki eğik �izgi ' // ' gelir, �rneğin 'https://wovenstory.tr.gg' gibi, 'mailto' ifadesinin ardından ise yalnızca iki nokta �st �ste ' : ' gelir, �rneğin 'mailto:info@example.com' gibi.
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�reli bir URL ile "https ve www" kısmı olmadan sadece alan adı (DOMAIN) veya bağlantı yolu (PATH) ile belirtilir, alt �rnek kod ve �ıktısı bunun bir �rneğidir.

Sample code and output looks like this.

Sample code

<a href="iplik-tipleri.htm"target="_blank">Go to yarn type page</a>

�st kod �rneği aşağıdaki sonucu verecektir.

Output

Go to yarn type page Arrow left

�rnek bağlantının URL'sinde wovenstory web sitesinin iplik tipleri sayfasına; www, https ve alan adı olmadan g�reli bir bağlantı tanımlanmıştır, bağlantı tıklandığında ilgili sitenin "iplik tipleri" sayfası a�ılacaktır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

ANCHOR_tag / Bağlantı etiketi

❇ HTML'de 'a' ile temsil edilen bağlantı etiketi (ANCHOR) bir sayfayı diğerine bağlayan bir k�pr�y� tanımlar.

Read More/Less

<a> bağlatı etiketi (ANCHOR) farklı �zellikler y�klenerek farklı noktalara bağlantılar oluşturmakta kullanılır, �rneğin [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ı oluşturulabilir.

Metin bağlantıları oluşturulduğunda <a> …… </a> etiketleri arasına yerleştirilen metin anchor yani �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.
�apa veya Bağlantı olarak adlandırılan anchor etiketi HTML'de anchor kelimesinin ilk harfi olan <a> ile temsil edilir.

Anchor/ <a> bağlantı etiketinin alacağı �zellikler ve işlevleri aşağıdaki 11 başlık altında, her bağlantı �zelliği bir konu başlığı olarak ayrı b�l�mler halinde listelenmiştir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A HREF_attribute / Referans �zelliği

❇ Bağlanılacak web belgesinin bağlantı yolunu (referansını) belirtir.

Read More/Less

HTML'de <a> etiketi 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ı �gesinin 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 �ğesidir.

Bağlantı elemanlarının başlangı� etiketi <a> bitiş etiketi ise </a>'dir.

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 wovenstory.tr.gg sitesinin web adresi href �zelliğinde referans olarak verilmiştir ve "Go to Woven Story website" metni bir k�pr� g�revi g�recek ve tıklandığında kullanıcıyı wovenstory web sitesine g�t�recektir.

Sample code and output looks like this.

Sample code

 <a href="//wovenstory.tr.gg"target="_blank"> Go to Woven Story website </a>

�st kod �rneği aşağıdaki sonucu verecektir.

Output
Go to Woven Story website

Bağlantı tıklandığında Woven Story ana sayfası a�ılacaktır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A HREFLANG_attribute / Dil kodu �zelliği

❇ Dil kodu �zelliği (A HREFLANG), bir web sayfasının dilini ve hedeflenen b�lgesini belirten bir HTML �zelliğidir.

Read More/Less

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, �rneğin bir web sayfasını birden fazla dilde yazılıp yayınlıyorsa, yayınlanan t�m dil kodlarını alt �rnekteki gibi sayfanın head kısmına eklenebilir, head kısmına birden fazla dil kodu eklemenin bir sakıncası yoktur, hatta birde varsayılan dil (x-default) eklenmelidir.

Sample code looks like this.

<!DOCTYPE html>
<html lang="en">
<head>
<title> organic textile </title>
<link rel="alternate" hreflang="x-default" href="https://example.com/Organic textile/" />
<link rel="alternate" hreflang="en" href="https://example.com/Organic textile/" />
<link rel="alternate" hreflang="de" href="https://example.com/Bio-textil/" />
<link rel="alternate" hreflang="fr" href="https://example.com/Textile biologique/" />
</head>
<body>
Organic textiles are a part of organic farming and each stage of production is carried out by a mechanism supervised by authorized certifiers.
</body>
</html>

HTML a hreflang �zelliği aşağıdaki 3 HTML etiketi ile kullanılabilir.
1- <a> etiketi
2- <link> etiketi
3- <area> alan etiketi (Resim haritalarında tıklanabilir alanlar)
1- <a> HTML <a> etiketi, web sayfasına bağlantılar kullanarak dış kaynak eklemek i�in kullanılır.
2- <link> HTML <link> etiketi ge�erli belge ile harici bir kaynak arasındaki ilişkiyi belirtir.
3- <area> HTML <area> etiketi, resim haritalarının tıklanabilir alanlarını veya k�pr� metinleriyle bağlantı verilen etkin alanları belirtir..

Alt �rnekte a etiketi ile harici bir web sayfası referans g�sterilmiş, link etiketi ile ise harici kaynaklara referans olunmuştur.

Sample code and output looks like this.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
<title> Example hreflang attr</title>
<link rel="alternate" hreflang="en" href="https://wovenstory.tr.gg"/>
</head>
<body>
  <p>Bu sayfanın head kısmında (link rel ="!!") ile a hreflang �zelliği <strong>HTML 'Link' etiketiyle </strong>, 
 body kısmınada ise (a hreflang="en") ile a hreflang �zelliği <strong>HTML 'a' etiketiyle </strong> kullanılmıştır. </p>
<p>Bu �rnekteki bağlantı kullanıcıyı wovenstory ana sayfasına g�t�recektir.</p>
<a hreflang="tr"href="https://wovenstory.tr.gg/">  Click here! </a>
</body>
</html>

�st kod dizimi aşağıdaki sonucu verecektir.

Output Example hreflang attr

Bu sayfanın head kısmında (link rel ="!!") ile a hreflang �zelliği HTML 'Link' etiketiyle , body kısmınada ise (a hreflang="en") ile a hreflang �zelliği HTML 'a' etiketiyle kullanılmıştır.

Bu �rnekteki bağlantı kullanıcıyı wovenstory ana sayfasına g�t�recektir.

Click here!

Bağlantılı kaynağın dilini belirten <hreflang> dil kodu �zelliğinin bağlantılar i�in klasik kullanımı aşağıda dil kodu Ingilizce olarak �rneklenmiştir.

Sample code and output looks like this.

Sample code

<a hreflang="en"href="https://wovenstory. tr.gg"target="_blank"> Go to Woven Story website </a>

�st kod �rneği aşağıdaki sonucu verecektir.

Output

Go to Woven Story website sola ok

A Hreflang hakkında geniş bilgi i�in bakınız ahrefs.com

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A DOWNLOAD_attribute / İndirme �zelliği

❇ <a> etiketinin indirme �zelliği (A DOWNLOAD) bağlantılı kaynağı tarayıcıda g�r�nt�lenmek yerine indirilmesinin ama�landığını belirten bir dizedir.

Read More/Less

İndirme �zelliği (DOWNLOAD) i�in �rnek kodlar ve �ıktıları aşağıdaki gibidir.

Sample code and output looks like this.

A Download file - Sample code:

<a href="/Dokuma.htm"download= https://wovenstory.tr.gg/Dokuma.htm"> Download weaving file </a>

�st kod �rneği aşağıdaki sonucu verecektir.

A Download file - Output:

Download weaving file sola ok

Bağlantı tıklandığında Wovenstory.tr.gg/Dokuma" sayfasını indirmeye �alışacaktır.

A Download image - Sample code:

<a href="/img.webme.com/pic/w/wovenstory/home.png"download> <img src="https:// img.webme.com/pic/w/wovenstory/home.png"alt="logo"> </a>

�st kod �rneği aşağıdaki sonucu verecektir.

A Download image - Output:

sola ok
G�rselin �zerine tıklandığında g�r�nt�y� indirmeye �alışacaktır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A TARGET_attribute / Hedef �zelliği

❇ a etiketinin hedef �zelliği (A TARGET) tarayıcıya bağlantıyı nerede a�acağını s�yler; �rneğin aynı sekmede, yeni bir sekmede, yeni bir pencere veya �er�evede vb.

Read More/Less

Bir bağlantıya target �zelliği eklendiğinde aşağıdaki target değerlerden sadece bir tanesini ekleyip bağlantının nerede a�ılacağı tanımlanmalıdır.
Target �zelliğinin (hedef) değerleri:

• target="_blank": Bağlantıyı yeni bir web sayfası sekmesi olarak a�ar.

• target="_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.

• target="_top": Bağlantının, aynı web sayfası i�inde en �stten itibaren a�ar.

• target="_parent": İframe'in dışında (aynı web sayfasında olduğu gibi) bir bağlantı a�ar.

• target="framename": Bağlantının adlandırılmış bir �er�evede a�ılmasını sağlar.

Aşağıdaki �rnek kod ve �ıktısı target �zelliğinin blank değerine bir �rnektir.

Sample code and output looks like this.

Sample code

<a href="https://wovenstory.tr.gg/Cevirim-Araclari.htm"target="_blank"> Go to Conversion tools </a>

�st �rnek kod dizimi aşağıdaki sonucu verecektir.

Output:

Go to Conversion tools sola ok

Bağlantı tıklandığında Cevirim ara�ları sayfası yeni bir sekmede a�ılacaktır.

Not: ⚠️ HTML'de adlandırılmış �er�eveleri hedeflemek, �er�evelerin ve �er�eve k�melerinin kullanımı, CSS ve JavaScript kullanan modern web tasarım teknikleri lehine kullanımdan kaldırıldığından artık HTML5 tarafından desteklenmemektedir.
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A REL_attribute / G�reli bağlantı �zelliği

❇ G�reli bağlantı �zelliği (A REL), 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.

Read More/Less

Hassas i�erikler dahil her bağlantı i�in <a rel="noopener"> veya <a rel="noreferrer"> bağlantı nitelikleri kullanılabilir.

Sample code looks like this.

Sample Code

Noopener: <a rel="noopener"href="https://wovenstory.tr.gg/"> WovenStory website - (Noopener anchor) </a> 
Noreffer: <a href="https://wovenstory.tr.gg/"rel="noneferrer"> WovenStory website - (Noreferrer anchor)</a>

�st �rnek kod dizimi aşağıdaki sonucu verecektir.

Sample Output (noopener)
WovenStory website - (Noopener anchor) sola ok

Sample Output (noreferrer)
WovenStory website - (Noreferrer anchor) sola ok

Web sayfalarında �ğeler arasındaki ilişkileri tanımlamak i�in kullanılabilecek "rel" �zelliğinin alabileceği değerlerden bazıları aşağıda listelenmiştir:

• A REL noopener ve
A REL noreferrer (Y�nlendireni gizleme ve y�nlendirene erişimi engelleme �zellikleri); Bir bağlantıyı a�ar ve herhangi bir web sitesinin y�nlendiren URL'si gibi belirli verilere erişmesini engeller ve 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. �rneğin bir 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 Related (İlgili); Web sitensindeki iki sayfanın ilişkili olduğunu veya aynı konunun par�ası olduğunu belirtir.

• A REL 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..

• A REL canonical (Kanon- Genel kural); �evrimi�i olarak birden fazla s�r�m� varsa hangi sayfanın ana sayfa olarak değerlendirilmesi gerektiğini belirtir.

• A REL help (Yardım); Bağlantılı sayfanın gerekli yardım belgelerini i�erdiğini belirtir.

• A REL appendix (İlave- Ek); Tarayıcıların, bağlantılı sayfanın ana sayfanın bir eki olduğunu bilmesini sağlar.

• A REL contents (İ�indekiler); Bağlantılı sayfanın bir i�indekiler tablosu i�erdiğini belirtir.

• A REL copyright (Telif hakkı); Tarayıcılara, bağlantılı sayfanın telif hakkı bilgileri i�erdiğini bildirir.

• A REL index (Fihrist - Dizin); Tarayıcılara, bağlantılı sayfanın ana sayfa i�in bir dizin olduğunu s�yler.

• A REL license (Lisans); Bağlantılı sayfanın web sitesindeki i�eriğin lisanslanmasıyla ilgili bilgiler i�erdiğini belirtir.

• A REL shortcut (Kısayol); Bağlantılı sayfanın ana sayfa i�in bir kısayol olduğunu belirtir.

• A REL prefetch (�nceden getir); Erişildiğinde daha hızlı y�klenmesi i�in tarayıcılara bağlantılı sayfayı �nceden getirmesini s�yler.

• A REL prev (�nceki); Bağlantılı sayfanın bir serideki �nceki sayfa olduğunu belirtir.

A REL next (Sonraki); Tarayıcılara bağlantılı sayfanın bir serideki sonraki sayfa olduğunu s�yler.

• A REL nofollow (Takibe kapalı); Bağlantılı sayfanın arama motoru tarayıcıları tarafından takip edilmemesi gerektiğini belirtir.

⛔ End of this topic. by WovenStory ✍️ N.Yıldırım.

A ID_attribute / Bağlantı kimliği �zelliği

❇ Bağlantı kimliği �zelliği (A ID), HTML �ğelerine benzersiz bir kimlik vermek �zere eklenen bir HTML �zelliğidir.

Read More/Less

HTML bağlantı kimlikleri b�y�k/k��k harfe duyarlıdır, �rneğin [Cotton] ile [cotton] aynı kimlik değildir. (Bağlantılarda her zaman k��k harfler tercih edilmelidir.)
HTML bağlantı kimliği yazarken boşluk kullanılamaz, eğer iki kimlik kullanmak istenirse bu kimlik [cotton yarn] yerine bir kısa �izgiyle (-) ayrılmış olarak [cotton-yarn] şeklinde olmalıdır, s�zc�kleri ayırmak i�in başka �zel karakterler kullanılmamalı ve bir sonraki s�zc�k asla b�y�k harflele yazılmamalıdır.
HTML'de a etiketinin bir �zelliği olarak kullanılan id, T�rk�e karşılığı 'KİMLİK' olan identity kelimesinin ilk iki harfinden oluşan bir kısaltmadır.

Sayfa i�i bağlantılarda 'ID' kullanımı:

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 �zellik sayfa başı, sayfa sonu, sayfa i�indeki konu başlıkları gibi sayfanın herhangi bir noktasına tanımlanabilir.

Sayfa i�i bağlantılarda bağlantı oluşturmak iki aşamalı bir eylemdir. 1- Hedef bağlantıya ID tanımlamak. 2- Hedefleyen bağlantıya ID tanımlamak.

1- Hedef bağlantıya ID tanımlamak;
Bu eylemde sayfa i�inde hedef se�ilen bir noktaya id �zelliği yani bir kimlik adı tanımlanır. Bu �zellik <div>, <p>, <a>, <span>, <h1> benzeri etiketlerle;
<div id="(For example) cite-tag"> </div>,
<span id="(For example) top"> </span> şeklinde kullanılabilir. Bu başlığa tanımlanan benzersiz kimlik adı aynı zamanda buraya bağlanmayı hedefleyen bağlantının da kimlik adı olacaktır.

2- Hedefleyen bağlantıya ID tanımlamak;

Bu �zellik;
• bağlantıyı temsil eden a etiketinin,
• bağlanmak istenen belgenin referansını yani bağlantı yolunu temsil eden href �zelliğinin
• bağlanmak istenen hedef b�l�me tanımlanan id �zelliğinin ve
• bu kimliğin �n�ne kimlikleri kategorik olarak ayırmayı temsil eden, heşteg (HASTAG) # işaretinin birleşiminden oluşturulan bir kombinasyon olarak kullanılır.

�rnek olarak bu sayfanın "Cite Tag" ile ilgili konusuna bağlantı vermek i�in "Cite Tag" konu başlığına gidip - <div id=" cite-tag"> </div> şeklinde bir "id" �zelliği ekleyip bağlanmak istenen b�l�m� belirledik.

Buraya da <a href="#cite-tag"> Go to Cite tag </a> şeklinde bir 'id' �zelliği ekleyip buradan bağlanmak istenen b�l�me bir bağlantı (�apa) oluşturduk. Bu işlem Go to Cite tag sola ok �apa metnini oluşturdu, �apa metni tıklandığında kullanıcı bu sayfadaki "Cite Tag" konu başlığına gidecektir.
Benzer şekilde bu konunun başlığına <span id="top"> </span> şeklinde bir hedef bağlantı ekleyip, buraya da<a href="#top"> go to top</a> şeklinde bir hedefleyen bağlantı tanımlandığında go to top sola ok �apa metnini oluşturacaktır. �apa metni tıklandığında kullanıcı bu konunun başlığına gidecektir.

Farklı sayfalara bağlantılar i�in
"id" kullanımı:

Sayfa i�i bağlantılarda kullanılan y�ntemler bu uygulama i�in de ge�erlidir, ancak burada bağlanmak istenen aynı sitenin başka bir sayfasındaki b�l�m veya konu başlığıdır.

�rnek olarak; bu sitenin iplik tipleri sayfasında Penye (Combed) işlemi konusuna bağlantı vermek i�in, ilgili sayfanın ilgili konu başlığına <div id="combedprocess"> - </div> şeklinde bir 'id' �zelliği ekleyip bağlanmak istenen sayfayı ve konu başlığını belirledik.

Buraya da <a href="iplik-tipleri.htm#combedprocess"> Go to Combed process </a> şeklinde bir 'id' �zelliği ekleyip buradan bağlanmak istenen sayfanın ilgili konu başlığına bir bağlantı oluşturduk. Bu işlem Go to Combed process sola ok bağlantısını oluşturdu, bağlantı tıklandığında kullanıcı bu sitenin "iplik-tipleri" sayfasında Penye (Combed) işlemi konu başlığına gidecektir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A MAILTO_attribute / E-Posta bağlantısı �zelliği

❇ E-posta bağlantısı �zelliği (MAILTO), kullanıcıyı �nceden tanımlanmış bir alıcı adresine sahip varsayılan posta istemcisine y�nlendiren HTML k�pr� t�r�d�r.

Read More/Less

HTML'de bir mailto bağlantısı oluşturmak i�in, "a" etiketini "href" �zelliğiyle birlikte kullanıp devamında mailto bağlantısı �zelliği yani "mailto protokol�" eklenir.

�rnek olarak
<a href="mailto:info@example.com"> Click to send email </a> şeklinde bir kod dizimi aşağıdaki varsayılan e posta bağlantısını yaratacaktır.

Click to send email sola ok

Bağlantı tıklandığında belirlenen adrese e-posta 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.

⛔ End of this topic. by WovenStory ✍️ N.Yıldırım.

A PHONE_attribute / Telefon bağlantısı �zelliği

❇ Telefon bağlatıları bir dizi rakamdan oluşan tıklanabilir bağlantılardır. Telefon �zellikli cihazlarda telefon bağlantıları tıklandığında bağlantıda verilmiş numarayı aramak i�in kullanılır.

Read More/Less

Telefon bağlantıları, telefon �zellikli cihazlarda bir numarayı aramak i�in dokunulan bağlantılardır. Bazı cihazlar telefon numarası benzeri rakam dizilerini telefon numarası olarak algılar ve �zerine tıklandığında numarayı aramaya �alışır. Bazı cihazlar telefon numaralarını tanıyabilir ve bağlantıyı otomatik olarak sağlayabilir.

Telefon bağlantısı �zelliğinde, sırasıyla telefon protokol� ve telefon numarası yer alır.
Bir telefon bağlantısının kod dizisi şuna benzer;
<a href="tel:8501234567"> 850 123 45 67 </a> bu kodlar aşağıdaki bağlantıyı oluşturacaktır.
850 123 45 67 sola ok bağlantı tıklandığında, bu �zelliğe sahip cihazlar numarayı arayacaktır.

�lke kodu eklemek

�lke kodu eklemek i�in mevcut telefon numarasının �n�ne '+' işareti ve ardından ' �lke kodu ' eklenmesi yeterlidir.
<a href="tel:+908501234567"> +90 850 123 45 67</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 850 123 45 67 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.
•••

�lkelerin telefon kodları i�in bakınız; Telefon kodları sola ok

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

A TITLE_attribute / Bağlantı başlığı �zelliği

❇ Bağlantı başlığı �zelliği (A TITLE), 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 i�in kullanılan bir �zelliktir.

Read More/Less

Bağlantı başlığı �zelliği (A TITLE), bir metnin i�inde ge�en 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.

Bağlantı başlığı (A TITLE) �zelliğinde imle� 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.
Aşağıda iki farklı y�ntem kullanılarak iki ayrı bağlantı başlığı �rneği verilmiştir.

Sample code 1

<html>
<head> 
<style>
a.fiber { 
border-bottom:1px dashed;
text-decoration:none ;
} 
a.fiber:hover { 
cursor:help;
position:relative;
} 
a.fiber span { 
display:none;
} 
a.fiber:hover span { 
border:#c0c0c0 3px solid;
padding:5px 10px 5px 12px;
display:block;
z-index:100;
background:#f0f0f0;
left:0px;
margin:0px;
width:300px;
position:relative;
top:10px;
text-decoration:none;
}
</style> 
</head>
<body>
<p> Bu �rnekte konu tekstilde elyaf yapıları olarak belirlenmiş ve elyaf yapılarını inceleyen 
tekstil lifleri sayfasına kullanıcıya ara� ipucu olarak g�r�necek olan bağlantı başlığı 
<a title="tekstil lifleri"href="tekstil-lifleri.htm"class="fiber"target="_blank"><b>Tekstil lifleri</b>
<span> 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. 
</span> </a> olarak tanımlanmıştır. 
<b>'span'</b> ile oluşan �n izleme kutusuna ise "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." şeklinde bir �n bilgi eklenmiştir. </p>
</body>
<html>

�st �rnek kodun tamamı bir kod işleme sayfasına eklendiğinde aşağıdaki sonucu verecektir.

Sample 1 Output

Bu �rnekte konu tekstilde elyaf yapıları olarak belirlenmiş ve elyaf yapılarını inceleyen tekstil lifleri sayfasına kullanıcıya ara� ipucu olarak g�r�necek olan bağlantı başlığı Tekstil lifleri 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. olarak tanımlanmıştır. 'span' ile oluşan �n izleme kutusuna ise "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." şeklinde bir �n bilgi eklenmiştir.

imle� bağlantı başlığı �zerine geldiğinde �n izleme a�ılacak, tıklandığında ise tekstil lifleri sayfası a�ılacaktır.

Sample code 2

<html> 
<head> 
<style> 
[data-title]:hover:after { 
opacity:1; 
transition:all 0.2s ease 0.9s; 
 visibility:visible; 
} 
[data-title]:after { 
content:attr(data-title); 
position:fixed; 
width:80%; 
height:auto; 
left:23px; 
padding:8px; 
margin:10px; 
color:#222; 
border-radius:5px; 
box-shadow:0px 0px 15px #222; 
background-image:-webkit-linear-gradient( top, #f8f8f8, #cccccc); 
background-image:-moz-linear-gradient( top, #f8f8f8, #cccccc); 
background-image:-ms-linear-gradient( top, #f8f8f8, #cccccc); 
background-image:-o-linear-gradient( top, #f8f8f8, #cccccc);  
visibility:hidden;
} 
</style>
</head>
<body>
<p> Bu �rnekte konu tekstilde iplik yapıları olarak belirlenmiş ve 
iplik yapılarını inceleyen iplik tipleri sayfasına kullanıcıya ara� ipucu olarak 
g�r�necek olan bağlantı başlığı <a href="iplik-tipleri.htm"data-title="İplik tipleri, genel olarak eğirme tekniklerine g�re adlandırılıp, 
elyaf cinslerine g�re sınıflandırılır."target="_blank"> 
<b>iplik tipleri</b> </a> olarak tanımlanmıştır. <b>'data-title'</b> ile oluşan �n izleme kutusuna ise "İplik tipleri, genel olarak 
eğirme tekniklerine g�re adlandırılıp, elyaf cinslerine g�re sınıflandırılır" şeklinde bir �n bilgi eklenmiştir. </p>
</body>
</html>

�st �rnek kodun tamamı bir kod işleme sayfasına eklendiğinde aşağıdaki sonucu verecektir.

Sample 2 Output How to Change the Style of Anchor Tag Title Attribute?

Bu �rnekte konu tekstilde iplik yapıları olarak belirlenmiş ve iplik yapılarını inceleyen iplik tipleri sayfasına kullanıcıya ara� ipucu olarak g�r�necek olan bağlantı başlığı iplik tipleri olarak tanımlanmıştır. 'data-title' ile oluşan �n izleme kutusuna ise "İplik tipleri, genel olarak eğirme tekniklerine g�re adlandırılıp, elyaf cinslerine g�re sınıflandırılır" şeklinde bir �n bilgi eklenmiştir.

imle� bağlantı başlığı �zerine geldiğinde �n izleme a�ılacak, tıklandığında ise iplik tipleri sayfası a�ılacaktır.

Bu �rnekte GeeksforGeeks kaynağından data-title niteliği ve CSS �zelliği ile hileli bir ara� ipucu (false-tool-tip) oluşturulmuştur.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

ABBR_tag / Kısaltma etiketi

❇ Kısaltma etiketi (ABBR), bir web sayfasının metni i�indeki bir kısaltmayı tanımlamak i�in kullanılır.

Read More/Less

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> Kısaltma etiketi, T�rk�e karşılığı kısaltma olan 'abbreviation' kelimesinden kısaltılıp HTML'de <abbr> ile temsil edilen bir html �ğesidir.

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ğinin kullanılması tavsiye edilir.

ABBR i�in �rnek kod ve �ıktısı aşağıda verilmiştir.

Sample code looks like this.

Sample code (abbr)

<html>
<head>
<style> 
abbr { color:#0000ff;}        
abbr:hover { color:#912707;}
abbr:hover::after { content: attr(title);
display:block;
position:absolute; 
background-color:#ddd; 
color:#800000; 
padding:5px; 
border-radius:3px; 
box-shadow:0 5px 8px #222; 
}
</style>
</head>
<body>
<p> Amerika Birleşik Devletleri'nde organik pamuk �reticilerinin pamuk tarlalarında 
<abbr title=" National Organic Program (ABD_ Ulusal organik programı)"> NOP</abbr> kurallarını uygulaması zorunludur. 
Bu kurum, organik mahsullerin haşere kontrol�, yetiştirilmesi, g�brelenmesi ve işlenmesi i�in 
izin verilen uygulamaları belirler. NOP ayrıca �iftliklerin ve işletmelerin ulusal organik standartlarını 
karşıladığını onaylamak i�in ���nc� taraf kuruluşları akredite eder. 
Bu sertifikacılar ve <abbr title="U.S. DEPARTMENT OF AGRICULTURE / (ABD Tarım bakanlığı)">USDA</abbr>, standartları uygulamak, 
�reticiler i�in eşit bir rekabet ortamı sağlamak ve t�keticilerin USDA Organik M�hr�'n�n b�t�nl�ğ�ne olan g�venini korumak i�in birlikte �alışır. </p>
</body>
</html>

�st kod �rneğinde de g�r�leceği gibi konu i�indeki 'NOP' ve USDA kısaltmalarına, kısaltmaların a�ıklamaları y�klenmiştir, konu metni i�indeki NOP ve USDA kısaltmalarına tıklandığında a�ıklamaları g�r�lebilir, konu i�inde abbr etiketi ile alakası olmayan akredite kelimesinin anlamı ise �zerine tıklandığında sıradan bir a�ılır pencerede g�r�lecektir.

Sample output looks like this. Sample Output (abbr)
Amerika Birleşik Devletleri'nde organik pamuk �reticilerinin pamuk tarlalarında NOP kurallarını uygulaması zorunludur. ABD Tarım bakanlığı b�nyesinde faaliyet g�steren bu kurum, organik mahsullerin haşere kontrol�, yetiştirilmesi, g�brelenmesi ve işlenmesi i�in izin verilen uygulamaları belirler.
NOP ayrıca �iftliklerin ve işletmelerin ulusal organik standartlarını karşıladığını onaylamak i�in ��nc� taraf kuruluşları

akredite

eder.

Akredite

Fransızca Accreditation'dan dilimize akreditasyon olarak giren terimin T�rk�ede tam karşılığı Denklik'tir. Basit tarifi ise; Yetkili bir makamının vereceği denklik belgesi (akreditasyon) ile bazı kamu hizmetlerini �stlenen �zel kurum ve kuruluşlara verilen denklik sertifikası.

by wovenstory ✍️ Nihat YILDIRIM

Bu sertifikacılar USDA ile birlikte, standartları uygulamak, �reticiler i�in eşit bir rekabet ortamı sağlamak ve t�keticilerin USDA Organik M�hr�'n�n b�t�nl�ğ�ne olan g�venini korumak i�in �alışır.
Kaynak;ams.usda.gov

<abbr>source codes taken from GeeksforGeeks.org

⛔ End of this topic. by WovenStory ✍️ N.Yıldırım.

ACRONYM_tag / Kısaltma etiketi

❇ Kısaltma etiketi(ACRONYM), tıpkı "abbr" etiketi gibi bir html sayfasının metni i�inde bir kısaltma tanımlamak i�in kullanılır.

Read More/Less

Kısaltma anlamına gelen ve HTML'de acronym olarak temsil edilen etiket genellikle baş harflerden oluşan bir s�zc�k �retmek i�in kullanılmıştır. Uzman tavsiyeleri bunun yerine <abbr> etiketinin kullanılması y�n�ndedir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

ADDRESS_tag / Adres etiketi

❇ Adres (ADDRESS) etiketi, site sahibi veya makale yazarı hakkında iletişim bilgisi sağlamak i�in kullanılır.

Read More/Less

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.

Alt �rnekte <footer> etiketi i�inde olan bir adres �rneği verilmiştir.

Sample code looks like this.

<html>
<head>
<title> Address tag  </title>
<style> 
.addressfooter { 
width:100%; 
height:auto; 
background:#aaa; 
padding: 6px 5px 0px 15px; 
}
</style>
</head>
<body>
<p> page content </p>
<p> paragraph <br>
………………… <br>
……………. </p>

<p> paragraph <br>
………,……………. <br>
……………….. </p>
<p> paragraph <br>
…………….,,,,,,.,,,., <br>
……………….. </p>
 </p> end of this page </p>
</p> this is footer </p>
<footer class="addressfooter">
<address>
<strong>Subject writer:</strong> <br> WovenStory author team <br>
<strong> Contact us at: </strong> <br>
<srong>e mail: </strong> <a href="mailto:info@wovenstory.com"> Contact Author team</a> <br>
<strong> Address: </strong> <br> 
25. Cadde No:101. Izmir/Turkey
</address>
</footer>
</body>
</html>

yukarıdaki kodlar aşağıdaki sonucu verecektir

Sample Output looks like this.

Address tag

page content

paragraph
…………………
…………….

paragraph
………,…………….
………………..

paragraph
…………….,,,,,,.,,,.,
………………..

end of this page

this is footer

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

ALIGN_tag / Hizalama etiketi

❇ Hizalama etiketi (ALIGN), �gelerin html kapları ve formlar üzerinde nasıl konumlanacağını belirtmek için kullanılan bir html �ğesidir.

Read More/Less

Hizalama etiketi CSS style �zelliği ile kullanılan bir html �ğesidir.

Hizalama etiketi, T�rk�e karşılığı hizalama olan "alignment" kelimesinin ilk harfleri olan align ile temsil edilen bir HTML �ğesidir.

Hizalama etiketinin left, center ve right değerleri kap i�indeki metni desteklemek i�in kullanılan g�rseller, işaretler ve şekillerin herhangi bir değer y�klenmemiş olanlarına bir kap i�indeki metinle aynı etkiyi g�sterirler, yani bu �geler bulundukları kap i�in tanımlanan değere uygun olarak kap i�indeki metinle birlikte sağa, ortaya veya sola yanaşık pozisyon alırlar.

Hizalama (ALIGN) etiketi ile uygulanan hizalamalar iki ana başlık altında toplanır;
1_Horizontal align (YATAY HİZALAMA) ve
2_Vertical align (DİKEY HİZALAMA)

HORIZONTAL ALIGN - (YATAY HİZALAMA)

Yatay pozisyonda hizalanacak �geler kap i�inde bir konum alması i�in
• left (Sol kenara yanaşık)
• center (Yatay ortalanmış)
• right (Sağ kenara yanaşık) değerlerinden birinin tanımlanması gerekir. Tanımlanan hizalama değerleri kap i�indeki t�m �geleri kapsar.
Yatay hizalamanın varsayılan değeri (left) sol kenara yanaşık pozisyondur.

(Horizontal) LEFT Alignment Sol kenara yanaşık hizalama
Sample code:

<div style="text-align:left;"> kap i�eriği !..</div>

Bu kod dizimi bir div kabı yaratacak ve kap i�inde yer alan metin ve diğer �ğeleri sol kenara yanaşık olarak hizalayacaktır.
Sample Output:

Sola yanaşık hizalama (Left alignment):

Angora y�n� (Angora wool)
Tekstil literat�r�ne "Angora wool" veya
"Angora" olarak girmiş olan tavşan y�n�,
Ankara tavşanlarının (Angora rabbit)
ipeksi y�nlerine atıfta bulunan bir terimdir.
Angora, adının
tarihsel olarak

Angora olarak bilinen
g�n�m�z T�rkiyesinin başkenti Ankara'dan kaynaklandığı ve Ankara tavşanlarının 1723'te Fransa'ya getirildiği sonrasında da d�nyaya yayıldığı bilinmektedir.

(Horizontal) CENTER Alignment Yatay ortaya hizalama
Sample code:

<div style="text-align:center;"> kap i�eriği !..</div>

Bu kod dizimi bir div kabı yaratacak ve kap i�inde yer alan metin ve diğer �ğeleri yatay ortaya hizalayacaktır.
Sample Output:

Yatay ortaya hizalama (Center alignment):

(Horizontal) Right Alignment Sağ kenara yanaşık hizalama
Sample code:

<div style="text-align:right;"> kap i�eriği !..</div>

Bu kod dizimi bir div kabı yaratacak ve kap i�inde yer alan metin ve diğer �ğeleri sağ kenara yanaşık olarak hizalayacaktır.
Sample Output:

Sağa yanaşık hizalama (Right alignment):

VERTICAL ALIGN - (DİKEY HİZALAMA)

Vertical-align / Dikey hizalama �zelliği, satır i�i ve satır i�i-blok �gelerinin bulundukları blok i�indeki dikey konumlandırmasını etkiler.

Dikey hizalama �zelliği t�m �ğeler i�in tam dikey hizalamayı kontrol etmez; bunun yerine �ğenin konumunu ana �ğesinin veya bitişik �ğelerin taban �izgisine g�re ayarlar.

Dikey hizalama �zelliği, �zellikle resim ve metin gibi satır i�i ve satır i�i blok �ğelerini hizalamak i�in kullanışlıdır.

Bir metni veya bir �geyi dikey olarak hizalamak, onu dikey (y) ekseni boyunca bir kapsayıcı kap veya blok i�inde konumlandırmak i�in kullanılır.

Vertical align CSS �zelliği, satır i�i, satır i�i blok veya tablo h�cre kutusunun dikey hizalamasını ayarlar.

Dikey hizalama �zelliği yalnızca satır i�i, satır i�i blok ve tablo <table> h�creleri i�in ge�erlidir, bu �zellik blok d�zeyindeki �geleri dikey olarak hizalamaya uygun değildir.

Vertical-align �zelliği iki bağlamda kullanılabilir.

1. Values for inline elements - (Satır i�i �geler i�in değerler)_ Satır i�i d�zeydeki bir �genin kutusunu, bulunduğu satır �er�evesinin i�ine dikey olarak hizalamak. �rneğin, bir g�rseli bir metin satırına dikey olarak konumlandırmak.

2. Values for table cells - (Tablo h�creleri i�in değerler)_ Bir tablo <table> i�indeki h�crenin, g�rselin ve metnin i�eriğini dikey olarak hizalamak.

Values for inline elements - (Satır i�i �ğeler i�in değerler) 4 ana başlık ve alt başlıkları ile kullanır.

Parent-relative values - (Ebeveyne bağıl değerler)

Line-relative values - (�izgiye bağıl değerler)

Length-relative values - (Uzunluğa bağıl değerler)

Percentage-relative values - (Y�zde(%)’ye bağıl değerler)

Parent-relative values - (Ebeveyne bağıl değerler)

Ebeveyne bağıl değerler �geyi ebeveyn �gesine g�re dikey olarak hizalamak i�in aşağıda listelenen 4 alt başlık altında kullanılır.
[1- Baseline] [2- Top] [3- Middle] [4- Bottom]

1- BASELINE - (temel / temel �izgi):
Bir �genin taban �izgisini ebeveyn �genin taban �izgisiyle hizalar.

BASALINE
logo

text aligned to image baseline. Bu kaptaki metnin dikey hizalama değeri vertical-align:text-baseline; olarak tanımlandı bu �zellik metni ebeveyn �ge olan g�rselin logo

taban �izgisine hizalayacaktır, ancak bu hizalama noktası bazı tarayıcılarda farklılık g�sterebilir. html'de bazı �gelerin (�rn; <textarea>) taban �izgisi HTML spesifikasyonu tarafından belirtilmemiştir; bu nedenle baseline �zelliğinin davranışları tarayıcılar arasında farklılık g�sterebilir.

2- TEXT-TOP - (�st metin)
Bir �ğenin �st kısmını ebeveyn �genin yazı tipinin �st kısmıyla hizalar.

TEXT-TOP
logo

text alignment to top of image. Bu kaptaki metnin dikey hizalama değeri vertical-align:text-top; olarak tanımlandı bu �zellik metnin �st �izgisini ebeveyn �ge olan g�rselin logo

�st �izgisine hizalayacaktır.

TEXT-MIDDLE - (Dikey ortaya hizalı)
Bir �ğenin ortasını, taban �izgisi ile ebeveyn �genin (x) y�ksekliğinin yarısı ile hizalar.

TEXT-MIDDLE
logo

text alignment in the middle of the image. Bu kaptaki metnin dikey hizalama değeri vertical-align:text-middle; olarak tanımlandı, bu �zellik metni ebeveyn �ge olan g�rselin logo

dikey orta kısmına hizalayacaktır.

TEXT-BOTTOM - (alt metin)
Bir �genin alt kısmını ebeveyn �genin yazı tipinin alt kısmıyla hizalar.

TEXT-BOTTOM
logo

text alignment in the bottom of the image. Bu kaptaki metnin dikey hizalama değeri vertical-align:text-bottom; olarak tanımlandı, bu �zellik metnin taban �izgisini ebeveyn �ge olan g�rselin logo

taban �izgisine hizalayacaktır.

�st �rneklerde ebeveyne bağıl değerlerin herbiri ayrı kaplarda g�sterilmiştir

alt �rnekte ise aynı kap i�inde farklı paragraflarlara farklı ebeveyne bağıl değerler tanımlandı, bu da aynı kap i�inde farklı paragraflarlarda farklı dikey konumlarda metinler oluşturdu.

Mixed Vertical Alignment

Paragraph-1 [TEXT-TOP]
logo sola ok text alignment to top of image. Bu paragrafa tanımlanan "vertical-align:text-top;" değeri �geyi ebeveyn �gesinin �st kısmına hizalayacaktır.

Paragraph- 2 [TEXT-MIDDLE]
logo sola ok text alignment in the middle of the image. Bu paragrafa tanımlanan "vertical-align:text-middle;" değeri �geyi ebeveyn �gesinin dikey orta kısmına hizalayacaktır.

Paragraph- 3 [TEXT-BOTTOM]
logo sola ok text alignment in the bottom of the image. Bu paragrafa tanımlanan "vertical-align:text-bottom;" değeri �geyi ebeveyn �gesinin alt kısmına hizalayacaktır.

Line-Relative Values - �izgiye bağıl değerler

Dikey hizalamanın - Satır i�i �geler kategorisinin - �izgiye bağıl değerlerinin aşağıdaki �zellikleri �ğeyi satır y�ksekliğinin tamamına g�re dikey olarak hizalar.
Alt �rneklerde ebeveyn �ge metin, hizalanan �ge g�rseldir.

TOP - (tepe / �st �izgi)

vertical-align:top; değeri bir �genin �st kısmını ve alt �gelerini satırın �st �izgisine hizalar.

This flag Turkey flag is alignment to the top.

MIDDLE - (dikey orta)

vertical-align:middle; değeri bir �genin ortasını taban �izgisi ile ebeveyn �genin (x) y�ksekliğinin yarısı ile hizalar.Simge boyutundaki g�r�nt�leri 'ortaya' ayarlamak dikey hizalamanın en yaygın kullanımıdır. Bu �zellik en iyi sonucu tablo h�cre değeri olarak kullanıldığında verir.

This flag Turkey flag is alignment to the middle.

BOTTOM - (taban / taban �izgisi)

vertical-align:bottom; değeri bir �genin alt kısmını ve alt �gelerini satırın taban �izgisine hizalar. Taban �izgisi olmayan �geler i�in, bunun yerine alt kenar boşluğu kullanılır.

This flag Turkey flag is alignment to the bottom.

SUB (subscript) ~ (alt simge)

vertical-align:sub; değeri bir �genin taban �izgisini ebeveyn �genin alt simge taban �izgisine hizalar.

This flag Turkey flag is aligned to the sub.

SUPER (superscript) ~ (�st simge)

vertical-align:sup; değeri bir �genin taban �izgisini ebeveyn �genin �st simge taban �izgisine hizalar.

This flag Turkey flag is aligned to the super.

Length Relative Values - (Uzunluğa bağlı değerler)

Dikey hizalamanın - Satır i�i �geler kategorisinin - Uzunluğa bağlı değerleri bir �genin taban �izgisini ebeveyn �genin taban �izgisinin �st�nde veya altında, tanımlanan piksel değerinin uzunluğu kadar mesafede hizalar. Bu �zellik negatif (-) değerlere izin verir.
Bu �zelliğin aşağıdaki �rneklerinde ebeveyn �ge metin, hizalanan �ge g�rseldir.

Length 12px ~ Uzunluk 12px (piksel)

vertical-align:12px; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin�st�nde bir mesafeye hizalar, bu mesafe tanımlanan piksel değeri ile doğru orantılıdır.

This flag Turkey flag length value 12px(pixel)

Length 8px ~ Uzunluk 8px (piksel)

vertical-align:8px; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin �st�nde bir mesafeye hizalar, bu mesafe tanımlanan piksel değeri ile doğru orantılıdır.

This flag Turkey flag lengthvalue 8px(pixel)

Length -20px ~ Uzunluk (-) eksi 20px (piksel)

vertical-align:-20px; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisininaltında bir mesafeye hizalar, bu mesafe tanımlanan piksel değeri ile doğru orantılıdır.

This flag Turkey flag length value -20px(pixel)

Length -24px ~ Uzunluk (-) eksi 24px (piksel)

vertical-align:-24px; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin altında bir mesafeye hizalar, bu mesafe tanımlanan piksel değeri ile doğru orantılıdır.

This flag Turkey flag length value -24px(pixel)

Percentage Relative Values - y�zde(%)'ye bağıl değerler

Dikey hizalamanın - Satır i�i �geler kategorisinin - Y�zde(%)'ye bağıl değerleri, y�zde değeri y�kseklik �izgisi �zelliğinin bir y�zdesi olacak şekilde bir �genin taban �izgisini ebeveyn �genin taban �izgisinin �st�nde veya altında, tanımlanan y�zde değerinin oluşturacağı uzunluk kadar bir mesafeye hizalar, bu mesafe tanımlanan y�zde değeri ile doğru orantılıdır. Bu �zellik negatif (-) değerlere izin verir.

Percentage value 40% ~ y�zde değeri 40%

Bu �rnekte vertical-align:40%; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin �st�nde bir mesafeye hizalar, bu mesafe bu �rnek i�in y�kseklik �izgisinin y�zde 40'ı kadar olacaktır.

This flag Turkey flag percentage value 40% .

Percentage value 60% ~ y�zde değeri 60%

Bu �rnekte vertical-align:60%; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin �st�nde bir mesafeye hizalar, bu mesafe bu �rnek i�in y�kseklik �izgisinin y�zde 60'ı kadar olacaktır.

This flag Turkey flag percentage value 60% .

Percentage value -40% ~ y�zde değeri -90%

Bu �rnekte vertical-align:-90%; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin altında bir mesafeye hizalar, bu mesafe bu �rnek i�in y�kseklik �izgisinin eksi (-) y�zde 90'ı kadar olacaktır.

This flag Turkey flag percentage value -90%.

Percentage value -112% ~ y�zde değeri -112%

Bu �rnekte vertical-align:-112%; değeri hizalanacak �gelerin taban �izgisini ebeveyn �genin taban �izgisinin altında bir mesafeye hizalar, bu mesafe bu �rnek i�in y�kseklik �izgisinin eksi (-) y�zde 112'i kadar olacaktır.

This flag Turkey flag percentage value -112%.

Values for Table Cells ~ Tablo h�creleri i�in değerler
Tablo h�creleri i�in değerler, bir tablo <table> h�cresi i�indeki �geleri tablo s�tunlarıda dikey olarak hizalar. Alt �rnek tablonun ilk 4 s�tunu <td class="value?"> başlığı altında tanımlanan baseline- top- middle ve bottom"h�cre değerleri ile hizalandı, 5. H�creye ise varsayılan h�cre değeri tanımlandı. 5. H�cre sadece h�crelerin hizalama etkisini g�rebilecek kadar uzun olduğundan emin olmak i�in kullanıldı.
Vertical alignment in table cells ~ Tablo h�crelerinde dikey hizalama
Baseline	Top	Middle	Bottom	Default
Baseline	top	middle	bottom	Test S � t u n u

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

AREA_tag/ Alan etiketi

❇ Alan etiketi (AREA tag) 'image map' olarak tanımlanan g�r�nt� haritalarında bir bağlantıyla ilişkilendirilen tıklanabilir alanları tanımlar.

Read More/Less

Alan etiketi aşağıdaki parametre değerleri ile �alışır.
* Alt (Alternative): G�r�nt� haritalarında tıklanabilir bir alan i�in alternatif metin belirtir.
* Coords (Coordinate's): G�r�nt� haritalarında 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: G�r�nt� haritasının bir alanının başka bir kaynağa bağlanmadığını belirtir.
* Shape: G�r�nt� haritalarında tıklanabilir alanın şeklini tanımlar. rect, circle, poly ve default değerlerinden birini alır.
* 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) değerleri
• 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. kod diziminde koordinatlar sırasıyla dikd�rtgenin sol �st ve sağ alt k�şelerini g�steren 0,0 ve 280,56'dir.
• Circle (Daire): 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 IMAGE MAP(Resim haritası)
viscose yarn

Bu resim haritası �rneğinde �zerine viscose iplik sarılmış bobinlerin w350, h150 boyutunda bir g�r�nt�s� vardır, g�r�nt� �zerinde <map>
<area shape="circle"coords="75,75,75"> ve
<area shape="circle" coords="275,80,145">
</map> koordinatları ile iki tane dairesel tıklanabilir alan oluşturuldu.
Resim haritasının solundaki iplik bobininin �zerine tıklandığında iplik tipleri sayfası a�ılacaktır.
Resim haritasın sağındaki iplik bobininin �zerine tıklandığında ise, tekstil lifleri sayfası a�ılacaktır.

Sample ZOOM IMAGE MAP

Bu �rnekte g�r�nt�n�n i�ine dikd�rtgene sahip bir alan (area) yerleştirildi. İmle� g�r�nmeyen dikd�rtgenin �zerine geldiğinde, dokunmatik cihazlarda ise �zerine tıklandığında g�r�nt� yakınlaşacak, imle� dikd�rtgenin dışına �ıkardığında veya dokunmatik cihazlarda boş bir alana tıklandığında g�r�nt� normal bi�imine geri d�necektir.

⛔ End of this topic. by WovenStory ✍️ N.Yıldırım.

ARTICLE_tag / Makale etiketi

❇ Makale etiketi (ARTICLE), bağımsız kendi anlamı olan, web sayfasının geri kalanından kolayca ayırt edilebilen makale, blog sayfası, forum metni, haber ve yorum gibi bir i�eriği tanımlamak i�in kullanılan HTML5 �gesidir.

Read More/Less

Makale etiketi (ARTICLE), herhangi bir sosyal g�nderiyi, dergi makalesini, blogları, ilgili i�eriklerin listesini, herhangi bir bağımsız i�eriği yerleştirmek i�in kullanılabilir. <article> tag, HTML5'te yeni bir �zelliktir, �zellikle ekran okuyucular i�in erişilebilirliği artıran bir b�l�mleme �ğesidir, <article> tag <style> a�ısından <div> ve <section>'a benzer, anlamsal a�ıdan ise bu �gelerden farklıdır ve <class> ve <id> gibi genel nitelikleri destekler. Etiketin temel s�zdizimi başlıkları, paragrafları, resimleri vb. kapsar. Konu İ�eriği; a�ıklama, yazar adı, tarih, fiyat benzeri bilgiler i�erdiği durumlarda Makale etiketi (ARTICLE) kullanmak yararlı olacaktır. Aynı şekilde paylaşım ama�lı i�erikler ve blog yazıları da bu etiketele sarılmalıdır.

<article> tag ACRYLIC FIBERS

Akrilik elyaflar, y�n hissi veren hafif, yumuşak ve sıcak yapısından dolayı kaşmir başta olmak �zere y�nleri, bazen de pamuğu taklit etmek i�in kullanılır. Akrilik lifler en az 85% akrilonitril monomer i�eren polimerden (polyacrylonitrile) yapılan sentetik liflerdir. Bir filament olarak �retilir, daha sonra y�n kıllarına benzer kısa elyaf uzunlukları halinde kesilir ve iplik haline getirilir. 1941'de DuPont ilk akrilik elyafları yarattı ve Orlon adı altında ticari marka haline getirdi. Akrilik elyaf genellikle kazaklar, şapkalar ve eşofmanlarda, �izme ve eldivenlerde, d�şemelik kumaşlarda ve halılarda astar olarak kullanılır. Akrilik ayrıca sahte k�rk yapmak ve bir�ok farklı �rg� elbise yapmak i�in kullanılabilir. Ayrıca, Akrilik, �rg� �ren veya tığ işi yapan zanaatkarlar i�in el yapımı iş g�c� kaynağıdır. Akrilik, sentetik bir elyaf olduğu i�in giysi g�velerinin larvaları onu sindiremezler, ancak y�nle karıştırılan akrilik lifler g�velenebilirler. Akrilik makinede yıkanabilir, genellikle hipoalerjeniktir, solmaya karşı diren�li oluşu s�rekli yıkama gerektiren bebek giysileri gibi belirli �r�nlerde kullanışlı olmasını sağlar. Ancak doğal lif'li muadillerine g�re �ok daha yanıcıdır, bu nedenle bebekler ve �ocuklar i�in �r�nler yaparken dikkatli olunmalıdır.

Article date: Dec 30,2024 at 20:30
Written by: by WovenStory ✍️ N.Yıldırım.
visit here: Wovenstory website

⛔ End of this topic. by WovenStory ✍️ N.Yıldırım.

ASIDE_tag / Kenar notu etiketi

❇ Kenar notu etiketi (ASIDE tag), HTML sayfalarında birincil i�erik dışında ek bilgiler g�r�nt�ler.

Read More/Less

Kenar not'u etiketi i�indeki i�erik, birincil i�eriğin bir par�ası değildir, ancak yine de onunla ilişkilidir. Kenar notu birincil i�eriğin bağlamsal akışını bozmamak i�in kullanılan bir y�ntemdir.

Sample code looks like this.

<html>
<body>
<main> Main Content (Ana i�erik)… 
<aside> Aside Note Content (Kenara not i�eriği) </aside >
</main>
</body>
</html>

Sample Output looks like this.

Ana i�erik - (Main Content)
Dimi �rg� (Twill pattern) dokumacılıkta kullanılan 3 temel �rg� şeklinden birinin teknik adıdır. Dokumada kumaşın bir y�zeyinde diyagonal nerv�r �ubukları oluşturan 2/1Dimi ve 3/1Dimi �rg� gibi klasik dimi �rg�l� dokumaların yanısıra; 2/2Dimi, 3/2Dimi, 4/2Dimi ve benzeri dimi �rg� varyasyonlarıyla kumaşın her iki y�zeyinde de nerv�r �ubukları oluşturacak dokumalar yapılabilir. Dimi �rg� tekniği ile dokunan kumaşlar halk arasında gabardin dokuma veya gabardin kumaş olarak telaffuz edilse de twill veya T�rk�e ismiyle 'Dimi' bir kumaş adı değildir sadece bir �rg� şeklinin teknik adına atıfta bulunan bir terimdir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

AUDIO_tag / Ses etiketi

❇ Ses etiketi, (AUDIO) ses dosyalarının bir web sayfasına g�m�lmesine izin vermek i�in eklenen HTML5 �ğelerinden biridir.

Read More/Less

Audio tag aşağıdaki nitelikleri alır.

Audio kontrol parametreleri:

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

<audio controls autoplay> <source src="sample.ogg"type="audio/ogg"><source src="sample.mp3" type="audio/mpeg"></audio>

• Controls: Kontrol paneli, bu �zellik kullanıcının ses seviyesi, arama, duraklatma ve devam ettirme gibi ses oynatmayı kontrol etmesine olanak tanır.

<audio controls><source src="sample.ogg"type="audio/ogg"><source src="sample.mp3" type="audio/mpeg"></audio>

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

<audio controls loop><source src="sample.ogg"type="audio/ogg"><source src="sample.mp3" type="audio/mpeg"></audio>

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

<audio controls muted><source src="sample.ogg"type="audio/ogg"><source src="sample.mp3" type="audio/mpeg"></audio>

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

<audio controls autoplay> <source src="https://wovenstory.tr.gg/media.ogg" type="audio/ogg"> <source src="https://wovenstory.tr.gg/media.mp3"type="audio/mpeg"></audio>

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

a) Auto: Sistem a�ıldığında kullanıcı sistemi kullanmıyorsa bile t�m ses dosyasının indirilebileceğini belirtir.

<audio src="sample.mp3" preload="auto"> </audio>

b) None: Sesin �nceden y�klenmemesi gerektiğini belirtir.

<audio src="sample.mp3" preload="none"> </audio>

c) Metadata: Yalnızca ses meta verilerinin alındığını belirtir.

<audio src="sample.mp3" preload="metadata"> </audio>

Preload değeri boş bırakıldığında "auto" varsayılan değerdir, bu tarayıcılar arasında farklılık g�sterebilir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

B _tag / Kalın etiketi

❇ Kalın etiketi [b], kalın anlamına da gelen bold kelimesinin ilk harfi olan [b] ile temsil edilen bir HTML �gesidir.

Read More/Less

Kalın etiketi herhangi bir �zel �nem taşımadan metnin bir b�l�m�n� kalın yapmak i�in kullanılır. Kalın 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.

Aşağıdaki makale �rneğinin dikkate değer b�l�mlerine <b> kalın etiketiyle vurgu yapılmıştır.

PAMUK (COTTON):

Başta tekstil �r�nleri olmak �zere geniş bir yelpazede kullanım alanı olan 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 eser miktarlarda mumlar, yağlar, pektinler ve su i�erir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BASE_tag / Baz etiketi

❇ Baz etiketi, baz, temel, k�k gibi anlamlar taşıyan HTML base tag bir HTML belgesindeki t�m g�reli URL'ler i�in temel URL'yi tanımlar.

Read More/Less

Baz etiketi (BASE), geliştiricinin belgede g�r�nen ilgili URL'leri ��z�mlemek i�in kullanılacak varsayılan bir URL belirlemesine olanak tanır.
Baz etiketi (BASE), HTML belgesinin head kısmına yerleştirilmeli ve belgede sadece bir kez kullanılmalıdır.  HTML Baz (base) etiketi href ve target nitelikleri ile kullanılır.
href �zelliği belgenin temel URL'sini belirtir. Belgedeki t�m g�reli URL'ler bu temel URL'ye g�re ��z�mlenecektir. 
target �zelliği bağlantılı belgelerin nerede g�r�nt�leneceğini (�rn. ge�erli pencerede, yeni bir pencerede veya sekmede vb.) tanımlamak i�in kullanılır. Bu �zellik, belgedeki t�m g�reli bağlantılar i�in varsayılan hedefi belirtir.

Sample code and output looks like this.

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>

This is a relative link;
• �evirim ara�ları

This is a relative link;
• İplik Numaralandırma sistemleri

This is a relative link;
• Tekstil lifleri

Yukarıdaki kod �rneğinde ge�erli belgenin head kısmına base etiketi ile tanımlanan
<base href="https://wovenstory.tr.gg"> bağlantısı ge�erli belgeye temel URL olarak tanımlanmış, hedef �zelliği ise "<target="_blank">" olarak tanımlanmıştır, �rnek kodun body kısmına yerleştirilen 3 bağlantı da www ve https başlıkları olmadan yerleştirilen g�reli bağlantılardır. Bu 3 farklı bağlantı da www ve https başlıkları olmayan g�reli bağlantılardır.

Base etiketinin baz etkisi bu sayfadaki t�m konulardaki bağlantıları etkileyeceği i�in, base etiketinin �rnek �ıktısı kullanılmadı, �rnek kod i�inde g�sterilen g�reli bağlantıların �ıktıları da base etiketi olmadan sadece g�reli bağlantılar olarak kullanıldı.

Not: ⚠️ Base etiketinin 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.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BDO_tag / Metin y�n� etiketi

❇ Metin y�n� etiketi (BDO), bir metnin soldan sağa veya sağdan sola yazılabilmesine olanak sağlayan bir html �gesidir. Genellikle 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.

Read More/Less

<bdo> etiketi HTML'de "Bi-Directional Override" c�mlesindeki kelimelerin baş harflerinden oluşan bdo ile temsil edilen bir �gedir.

T�rk�e’ye "�ift y�nl� ge�ersiz kılma" olarak �evrilebilen "Bi-directional override" html'de temsil edildiği şekliyle <bdo> ge�erli metin y�n�n� ge�ersiz kılmak i�in kullanılır. Arap�a, Aramice, Fars�a, İbranice, 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> etiketi <dir> �zelliğini kullanır ve <ltr> veya <rtl> değerlerinden birini alır.
Burada:
bdo: (Bi-Directional Override) �ift y�n etiketini.
dir: (direction) direksiyon yani y�n �zelliğini.
ltr: (left to right). Y�n değerinin Soldan Sağa doğru olduğunu.
rtl: (right to left). Y�n değerinin Sağdan Sola doğru olduğunu belirten g�stergelerdir.

�rneğin;
metin y�n� Soldan Sağa ise -
<bdo dir="ltr"> Bu Soldan ⇨ Sağa yazılmış bir metindir.</bdo> bu kod dizimi ve i�indeki metin kopyalanıp HTML sayfalarına yapıştırıldığında aşağıdaki sonucu verecektir.

Bu Soldan ⇨ Sağa yazılmış bir metindir.

Metin y�n� Sağdan Sola ise -
<bdo dir="rtl"> Bu Sağdan ⇦ Sola Yazılmış bir Metindir.</bdo> bu kod dizimi ve i�indeki metin kopyalanıp HTML sayfalarına yapıştırıldığında aşağıdaki sonucu verecektir.

Bu Sağdan ⇦ Sola Yazılmış bir Metindir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BLOCKQUOTE_tag / Blok alıntı etiketi

❇ Blok alıntı (blockquote) etiketi, başka bir kaynaktan alıntılanan bir b�l�m� tanımlamak i�in kullanılır. <blockquote etiketi blok d�zeyinde bir �ğedir, yeni bir satırda başlar ve mevcut t�m genişliği kaplar.

Read More/Less

<blockquote> etiketi uzun ve blok d�zeyindeki alıntılar i�indir, kısa, satır i�i alıntılar i�in <q> etiketi kullanılmalıdır. Blockquote etiketi alıntılanan i�eriği ana i�erikten ayırmak i�in genellikle girintili bir blok olarak g�r�nt�ler.
Sample code looks like this.

 <blockquote cite="https://wovenstory.tr.gg/Tekstil-Terbiyesi.htm">
<p> quote text 
Alıntı metni </p>
</blockquote>

Sample output looks like this.

Merserize

Merserizasyon, yalnızca pamuk elyafına �zg� bir işlem olup pamuklu iplik, dokuma ya da �rme kumaşlara kalıcı bir parlaklık kazandıran boyar madde alma �zelliğini artıran, �r�ne mukavemet kazandıran ve �r�n�n boyutsal stabilizitesini sağlayan bir �n terbiye işlemidir.

Merzerizasyon, pamuklu iplik ve kumaşların gergin bir şekilde d�ş�k ısıda (15-18 ⁰C), derişik NaOH ��zeltisi i�erisinden ge�irilerek yapılan işlemdir. Tekstil terbiyesi

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BODY_tag / G�vde etiketi

❇ G�vde veya v�cut anlamına gelen <body> bir web sayfasının g�vdesini oluşturmakta kullanılan HTML etiketidir.

Read More/Less

�rnek bir html g�vde �rneği şuna benzer.

<!DOCTYPE html&g
<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,
bu alan bir html sayfasında g�r�lmesi istenen, Metin, Makale,
karakter, obje, ikon,
image, video ve benzeri t�m �geleri kapsar
</body>
</html>

Daha �nce HTML body etiketi web sayfaları i�in hem i�erik hem de style ayarları i�in kullanılıyordu, ancak şimdi HTML Yalnızca i�erik i�in kullanılmaktadır. HTML Style niteliği ise CSS lehine kullanımdan kaldırılmıştır.
Eski html s�r�mlerinde kullanılan bazı body style değerleri aşağıdaki gibidir.
• 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.

⚠️ Yukarıdaki body parametreleri HTML niteliğidir ve HTML5 tarafından desteklenmediği i�in artık kullanılmamalı. Tarayıcılar t�m bu standart dışı kodları �alıştırsa bile, bazı eski web siteleri veya uygulamalar hala bu kodları kullanıyor olabilir ancak bu s�rd�r�lebilir değildir, web sitelerine stil eklemek i�in CSS kullanılmalıdır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BR_tag / Satır sonu etiketi

❇ Satır sonu etiketi <br> HTML'de Satır sonu anlamına gelen 'line break' c�mlesindeki bir doğrusal hattı kırmak veya kesmek anlamındaki break kelimesinin ilk iki harfi olan <br> ile temsil edilen bir html �gesidir. ✂

Read More/Less

<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.

✂
✂

Bu sayfanın ✂ işaretli noktalarında <br> etiketi kullanılmıştır.

✂
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

BUTTON_tag / Buton etiketi

❇ Buton etiketi (BUTTON), tıklanabilir bir d�ğmeyi temsil eder. Etkinleştirildiğinde, bir form g�nderme, bir iletişim kutusu a�ma veya girilmiş verilerin sıfırlayıp (reset) yeni veri girişine hazırlamak gibi bir eylem ger�ekleştirir.

Read More/Less

Her buton i�in mutlaka <type> niteliği kullanılmalıdır, bu �zellik tarayıcıların buton t�r�n� ��z�mlemesi i�in gereklidir.
Butonlar <button>…</button> a�ılış ve kapanış �geleri ile �alışır. <button> �gelerine; metin, <i>, <b>, <strong>, <br>, <img> vb. eklentiler yapılabilir. Bu �zellik <input> etiketiyle oluşturulan butonlarda m�mk�n değildir.
Butonlar varsayılan olarak genellikle gri zeminli tıklanabilir alanlar olarak sunulur ancak bu g�r�n�m CSS ile değiştirilebilir, �rneğin aşağıdaki buton/form kombinasyonu i�in verilen form �rneğindeki Submit (G�nder) ve Reset (Sıfırla) butonları CCS ile şekillendirilmiştir.

BUTON TİPLERİ:
Button: <button type="button"> Click me </button> Standart buton oluşturur. Bu, varsayılan değerdir.
Submit: <button type="submit"> Submit </button> G�nder butonu oluşturur, tıklandığında form i�eriğini g�nderir.  
Reset: <button type="reset"> Reset </button> Sıfırlama butonu oluşturur, tıklandığında yazılmış form verilerini sıfırlayıp yeni veri girişleri i�in hazır hale getirir. 

BUTON NİTELİKLERİ :
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, 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.

Sample HTML Form
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CANVAS_tag / Tuval etiketi

❇ Tuval etiketi (CANVAS), bir web sayfasında dinamik olarak şekiller, resimler ve diğer g�rseller �izmek i�in kullanılır. Canvas �ğesi, JavaScript kullanarak oluşturulacak g�rseller i�in bir kapsayıcıdır; kendi başına hi�bir anlam taşımaz.

Read More/Less

Tuvallerde JavaScript kullanmak geliştiriciye bir �izim y�zeyi sağlar, b�ylece ger�ek zamanlı olarak grafiklerle �alışabilir ve oluşturabilir. Canvas etiketi �ok y�nl�l�k �zelliği nedeniyle bir web sayfasında oyunlar, animasyonlar ve veri g�rselleştirmeleri gibi dinamik grafiksel i�erikler i�in kullanılan bir �zeliktir.
Canvas'ta yollar (path), kutular, daireler, metinler �izmek ve resim eklemek i�in �eşitli y�ntemler vardır, bunlar; Canvas koordinatları i�in sol �st k�şenin standart (0,0) olduğu bir koordinat sistemi kullanır, bu sistemde x ekseni soldan sağa doğru artar, y ekseni ise yukarıdan aşağıya doğru artar.
getContext bağlam oluşturma y�ntemi, bir işleme bağlam elde etmek i�in kullanılır, bu y�ntemin "2d" grafikler i�in kullanılan 2d bağlamı (getContext("2d")) en yaygın olanıdır.
Dikd�rtgenler i�infillRect(), yaylar/daireler i�in arc(), metin �izimleri i�in fillText() gibi �izim y�ntemleri.
fillStyle �zelliği ile dolgu rengini, strokeStyle �zelliği ile şekillerin dış hatlarının rengini ayarlamakta kullanılan Style ve renklendirme y�ntemleri.
Karmaşık şekiller �izmek i�in kullanılan yollar, �zel şekiller ve ana hatlar oluşturmak i�in bir iyi bir yardımcıdır. yolları tanımlamakta kullanılan y�ntemler; beginPath(), moveTo(), lineTo(), arc() ve closePath() gibi y�ntemlerdir.
Tuvali farklı aralıklarla tekrar tekrar yeniden �izerek basit animasyonlar oluşturmak i�in kullanılan requestAnimationFrame() işlevi ile animasyon y�ntemi ve drawImage() metodu kullanılarak tuval �zerine resim �izme y�ntemi gibi y�ntemlerdir,
�zetle, tuval etiketi web sitelerinde dinamik grafikler ve g�rselleştirmeler i�in g��l� ve uyarlanabilir bir temel sunar. JavaScript ile geliştiricilerin �ok �eşitli şekiller, rotalar, metinler ve resimler oluşturmasını ve değiştirmesini sağlar. Bir işleme bağlamı elde etmek, koordinatlarla uğraşmak, �izim y�ntemleriyle şekiller oluşturmak, renklerle stil vermek ve daha karmaşık grafikler i�in yollar kullanmak tuval �gesinin geliştiricilere sunduğu fikirlerden bazılarıdır.
Canvas Rectangle

Sample Code (Canvas Rectangle) Sample Output (Canvas Rectangle)

Canvas Line

Sample Code (Canvas Line)

<canvas id="canvasLine1" width="200" height="100" style="border:1px solid #000;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasLine1");
      var ctx = c.getContext("2d");
      ctx.moveTo(0,0);
      ctx.lineTo(200,100);
      ctx.strokeStyle='#ff0000';
      ctx.stroke();
    </script>
<canvas id="canvasLine2" width="200" height="100" style="border:1px solid #000;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasLine2");
      var ctx = c.getContext("2d");
      ctx.moveTo(30,0);
      ctx.lineTo(200,200);
      ctx.strokeStyle='#000';
      ctx.stroke();
    </script>
 <canvas id="canvasLine3" width="200" height="100" style="border:1px solid #000;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasLine3");
      var ctx = c.getContext("2d");
      ctx.moveTo(50,100);
      ctx.lineTo(300,10);
      ctx.strokeStyle='#0000ff';
      ctx.stroke();
    </script>

Sample Output (Canvas Line)

Canvas Circle

Sample Code (Canvas Circle)
Sample Output (Canvas Circle)

Canvas Text

Samle Code (Canvas Text)
Samle Output (Canvas Text)

Canvas Gradient & Animation

Samle Code (Canvas Gradient & Animation)

<canvas id="CanvasGradie" width="350" height="150"></canvas> 
<script>
var canvas = document.getElementById("CanvasGradie");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");         
var gradient = ctx.createLinearGradient(10, 90, 200, 90);
gradient.addColorStop(0, 'black');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 150);             
}
</script>
<canvas id="canvasAnimation" style='background-color:#ffff00; color:#ff0000;' width='200px' height='150px'/>
<script type='text/javascript'>
    function draw(radius) {
        var canvas = document.getElementById('canvasAnimation');
        var context = canvas.getContext('2d');
        var x = 90,
            y =50;
        var start_angle = 1.5 * Math.PI; 
        var end_angle = 1.5 * Math.PI;
        var increase_end_angle = 0;
        setInterval(function () {
            context.save();
            context.clearRect(0, 0, 200, 200);
            context.beginPath();
            increase_end_angle = increase_end_angle + 11 / 200;
            dynamic_end_angle = end_angle + increase_end_angle;
            context.arc(x, y, radius, start_angle, dynamic_end_angle, false);
            context.stroke();
            context.restore();
            if (dynamic_end_angle > 5.9 * Math.PI) {
                increase_end_angle = 4;
                draw(radius + 5);
            }
        }, 3);
    }
    draw(12);
</script>

Samle Output (Canvas Gradient & Animation)

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CAPTION_tag / Başlık etiketi

❇ Başlık etiketi (CAPTION) 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.

Read More/Less

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 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 dip not olarak g�r�nt�lenebilir, bunun i�in CSS'de; <caption style="caption-side:bottom"> Dipnot metni </caption> şeklinde bir kod dizimi oluşturmak gereklidir.

2019 yılınada d�nya pamuk �retiminde ilk sıralarda yer alan 8 �lkeyi g�steren aşağıdaki tabloların ilkinde tablonun başlığındaki (According to 2019 data, the top 8 countries in cotton production) şeklindeki metin </caption> etiketleri i�ine alınarak caption tablo başlığı �zelliği tanımlanmıştır.
İkinci tabloda ise tabloyu yayınlayan kurululuşun adı ve �nvanı caption etiketi ile kaynak alt bilgisi olarak tanımlanmıştır.

Sample Output Caption top

According to 2019 data, the top 8 countries in cotton production
Country	year / ton	Country	year / ton
1- Chinese	23.504.576	5- Pakistan	4.494.645
2- India	18.550.000	6- Uzbekistan	2.694.408
3- USA	12.955.868	7- Turkey	2.200.000
4- Brazil	6.893.340	8- Australia	1.627.062

Source: UN Food & Agriculture Organization.
Sample Output Caption bottom
According to 2019 data, the top 8 countries in cotton production

Source: UN Food & Agriculture Organization
Country	year / ton	Country	year / ton
1- Chinese	23.504.576	5- Pakistan	4.494.645
2- India	18.550.000	6- Uzbekistan	2.694.408
3- USA	12.955.868	7- Turkey	2.200.000
4- Brazil	6.893.340	8- Australia	1.627.062

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CELLSPACING_tag / H�cre aralığı etiketi

❇ H�cre aralığı etiketi (CELLSPACING), 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ılıyordu.

Read More/Less

Bu �zellik kllullanı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ı �nerilmemektedir. ⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CENTER_tag / Merkez etiketi

❇ Merkez etiketi (CENTER), 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.

Read More/Less

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
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CHECKBOX_tag / Onay kutusu etiketi

❇ Onay kutusu (CHECKBOX) etiketi, formlara onay kutuları eklemek i�in kullanılır. Checkbox onay kutuları, input etiketinin type niteliği ile oluşturulan kullanıcıların verilen se�enekler arasından bir veya daha fazla maddeyi se�mesine olanak tanıyan bir form �ğesidir.

Read More/Less

HTML checkbox etiketinin davranışını y�netmekte kullanılan �zellikleri:
 • Type (tip/t�r) niteliği:
�geyi formlara bir onay kutusu, metin alanı, radyo butonu veya basit bir buton se�eneklerinden birini se�ip yerleştirmek i�in kullanılır.
 • Name (ad) niteliği:
�genin adını belirtmek i�in kullanılır,
 • Value (değer) niteliği:
�genin değerini veya metnini ayarlamak i�in kullanılır,
• Checked (işaretli/se�ili) niteliğ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 ayarlanan "input" elemanlarıyla birlikte kullanılabilir.

Checkboxes look like this Checkboxes - (Onay kutuları)

Checkted Checkbox- (Se�ili onay kutusu)

<input type="checkbox"name="namex"value="valuex2"checked>

Regular checkbox Checked checkbox

Radio Checkboxes - (Radyo onay kutuları)

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CITE_tag / Alıntı etiketi

❇ Alıntı etiketi (CITE), 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. 

Read More/Less

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, bu eser kitap, deneme, makale, sinema ve tiyatro eseri, şiir, şarkı, resim, m�zik, web sitesi veya web sayfası, blog yazısı veya yorumdur. <cite>….</cite> etiketleri arasındaki metinler genellikle italik g�sterilir.
Aşağıdaki �rnek makalenin bir paragrafı bir web sayfasından alıntı yapılmış ve alıntı yapılan sayfasının başlığı makalenin alıntı yapılan paragrafında eser başlığı olarak verilmiştir. 

Sample Output:

Tekstilin tanımı:

Textile deyimi, Latince Dokuma anlamına gelen "Textilis"'ten gelmektedir, dokuma ise iplik haline getirilmiş her t�rl� tekstil malzemesinden �eşitli dokuma teknikleriyle belirli bir en, boy, sıklık ve ağırlıkta tekstil y�zeyi oluşturma eyleminin adıdır. https://wovenstory.tr.gg/Dokuma.htm 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 malzemeler i�in 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, 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.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

CODE_tag / Kod etiketi

❇ Kod etiketi (CODE), 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.

Read More/Less

Kod etiketi sabit boşluk ve boyuta sahip �zel bir yazı stili ile g�r�nt�lenir. Kod etiketi tek başına yalnızca bir kod satırını temsil eder. Kod etiketleri <pre> .!. </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 kaynak kodlarının g�r�nmesinin istendiği şekilde, istendiği boşluklarla ve satır sonlarıyla yazıldığında, yani �n bi�imlendirme yapıldığında pre etiketi kaynak kodlarını �n bi�imlendirilmiş şekliyle g�r�nt�leyecektir.  Bakınız: pre tag

Kaynak kodların <code> etiketi ile g�r�n�m�.

<html> <body>…!… </body> </html>

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

<code> etiketlerinin CSS ile g�r�n�m�

Kod par�alarının <code> etiketiyle kaynak sayfası g�r�n�m�

<html> <head> <title> sample title </title> <style>

.form  {
            width:100%;
            background-color: #fff;
            font-size:28px;
            color:#000; 
           font-family: arial, sans-serif;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
      .form fieldset {
            border: 1px solid black;
            padding: 10px;
            margin: 0;
        }
      .form legend {
            font-size:34px;
            font-weight: normal ;
            margin-bottom: 10px;
        }
      .form label {
            display: block;
            margin-bottom: 5px;
            font-weight:bold;
        }

</style> </head> <body> SAYFA BAŞLIĞI Sayfa i�eriği
…
</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> etiketleri arasında kullanıldığında kod par�acıklarını kodlama sayfasına yazıldığı gibi g�sterecektir, (Alt tablo).

<code> etiketlerinin <pre> etiketleri arasına alınmış şeklinin kaynak sayfası g�r�n�m�

<html> 
<head> 
<title> sample titlle </title> 
<style>
.form  {
            width:100%;
            background-color: #fff;
            font-size:28px;
            color:#000; 
           font-family: arial, sans-serif;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
      .form fieldset {
            border: 1px solid black;
            padding: 10px;
            margin: 0;
        }
      .form legend {
            font-size:34px;
            font-weight: normal ;
            margin-bottom: 10px;
        }
      .form label {
            display: block;
            margin-bottom: 5px;
            font-weight:bold;
        }

</style> 
</head> 
<body>
 SAYFA BAŞLIĞI  
Sayfa i�eriği 

… 


</body> 
</html>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

COL_tag / S�tun etiketi

❇ S�tun etiketi (COL), <colgroup> etiketi i�indeki s�tunların t�m h�crelerine ortak bir style �zelliği uygulamak i�in kullanılan bir html �ğedir.

Read More/Less

Col (Column) etiketi bir veya daha fazla s�tun grubuna aynı anda style uygulayabilen <colgroup> etiketinin i�indedir, <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.
<col> etiketi, tablo (table) s�tunlarındaki h�crelere tek tek uygulama yapmak yerine o s�tundaki t�m h�creler i�in ortak stil kurallarının uygulanması gerektiğinde kullanışlıdır.

Sample code:

<table>
    <colgroup>  
        <col span="2" style="background-color: #7fffd4">
        <col span="1" style="background-color: #98f5ff">  
        <col span="1" style="background-color: #98f5ee">
   </colgroup>
   <tr>  
        <th> Symbol</th>  
        <th> Fiber name</th>  
        <th> Source</th> 
        <th> Category</th> </tr>  
    <tr> 
        <td> CO </td>
        <td> Cotton </td>  
        <td> Natural</td>  
        <td> Wegetable</td> </tr>
    <tr>  
        <td> WO </td>  
        <td> Wool</td>  
        <td> Natural</td>  
        <td> Animal</td>  </tr> 
    <tr>
        <td> AS </td> 
        <td> Asbestos</td>  
        <td> Natural</td>
        <td> Mineral</td> </tr>
    <tr>  
        <td> PA </td>
        <td> Polyamide</td>  
        <td> Synthetic</td>  
        <td> Chemical</td>  
    </tr>
</table>

Sample Output:

Symbol	Fiber name	Source	Category
CO	Cotton	Natural	Wegetable
WO	Wool	Natural	Animal
AS	Asbestos	Natural	Mineral
PA	Polyamide	Synthetic	Chemical

⚠️ Not: S�tun etiketi (COL) niteliklerinin �oğu artık HTML 5.0 tarafından desteklenmediğinden CSS alternatifi daha akılcı olacaktır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

COLSPAN_attr. / H�cre birleştirme �zelliği

❇ 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.

Read More/Less

Table etiketinin 'th' ve 'td' �gelerinin kapsadığı h�cre aralığını genişletmek gerektiğinde yatay olarak aynı satırda 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> şeklinde bir kod dizimi farklı iki s�tuna ait iki komşu h�creyi birleştirip tek h�cre haline getirecektir.  benzer şekilde  <td colspan="5"> •••• </td> şeklinde bir kod dizimi farklı beş s�tuna ait beş komşu h�creyi birleştirip tek h�cre haline getirecektir.

<table class="tabcolspan">
<tr>
<td> Cell 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> <td> Cell 4 </td> </tr>
<tr>
<td> Cell 1 </td> <td colspan="3"style="background:#eee;"> Cell 2+3+4 </td> </tr>
<tr>
<td> Cell 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> <td> Cell 4 </td> </tr>
</table>

Sample Output:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2+3+4
Cell 1	Cell 2	Cell 3	Cell 4

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DATA_tag / Veri etiketi

❇ Veri etiketi (DATA) web sayfasına yazılan i�eriğin sunucu ve bilgisayar tarafından anlaşılmasını sağlama ihtiyacının olduğu yerlerde kullan, makinelerin verileri yorumlamasını kolaylaştırmak ve bir i�erik par�asını makine tarafından okunabilir bir �eviriyle bağlamak i�in kullanılan bir html �gesidir.

Read More/Less

Web sitesindeki betikler (JavaScript veya diğer veri işlemciler) tarafından işlenebilen standartlaştırılmış bir s�r�m olan <data> etiketi HTML5'te tanıtılan yeni bir �ğedir. Data etiketi, hem insan tarafından anlaşılabilen hem de makine (bilgisayar) tarafından okunabilen dilde yazılmış i�erik sağladığı i�in bir �evirmen gibi �alışan html �gedir.

Value �zniteliği �ğenin i�eriğinin makine tarafından okunabilir �evirisini belirtir. Data etiketinin i�inde value niteliğini kullanmak zorunludur zira value niteliği olmayan i�eriğin makine tarafından okunması m�mk�n değildir. Value (değer) niteliği, bir �ğenin i�eriğini makine tarafından okunabilir bir bi�imde, yani (0'lar ve 1'ler) şeklinde sayısal veriler olarak temsil eder.

<data value="100320">Angora</data> �rneğinde; Data value tırnakları (") i�indeki sayılar bir �r�n veya hizmet listesinin bilgisayar (ana makine) ve işlemciler tarafından okunması i�in tanımlanan değerlerdir, kullanıcılar tarafından g�r�lemeyecek olan bu değerler aynı zamanda yayınlanan �r�n veya hizmetlerin sicil numarası, parti numarası, kod numarası, fiyatı gibi bilgileri i�eren sayısal kimliği olarak tanımlanabilir.
Data etiketleri arasındaki paragraf alanında yer alanlar ise sunucular tarafından kullanıcılara g�sterilecek olan �r�n veya hizmet adlarıdır.
�st �rneğin s�z dizimi ve �ıktısı şuna benzer ;

S�z dizimi

<data value="100320">  Angora  </data>
 
<data value="100321">  Mohair (Tiftik)  </data>
 
<data value="100322"> Wordted (Kamgarn)  </data>

�ıktı
Wool types

Angora
Mohair (Tiftik)
Worsted (Kamgarn)

HTML data-* �znitelikleri
HTML data-* �znitelikleri, �zel verileri doğrudan HTML �ğelerinde depolamaya olanak tanıyan ve HTML ile JavaScript arasında bilgi ge�işini kolaylaştıran, sunucu tarafı m�dahalesi veya AJAX �ağrıları gerektirmeden web uygulamalarındaki etkileşimi iyileştiren bir y�ntemdir.

Alt �rnekte data-wool-origin niteliği ile bazı y�n tiplerinin orijinleri (k�ken) <li> �gelerine depolanmıştır, buraya depolanan bilgilere listedeki �r�n adına tıklamak suretiyle ulaşılabilir, bu ulaşılabilirlik JavaScript aracılığıyla olacaktır.

Wool types
Click on the wool name to know Product origin :

Angora
Mohair (tiftik)
Worsted (Kamgarn)

S�z dizimi

<html>
<head>
    <script>
        function showDetails(wool) {
            let woolorigin=
               wool.dataset.woolOrigin;
            alert(
                wool.textContent +
                "// Product Origin: " +
               woolorigin +
                "."
            );
        }
   </script>
</head>
<body>
    <p> Wool types </p>
<p> Click on the wool name to know Product origin : </p> 
  <ul>
<li onclick="showDetails(this)" data-wool-origin="Angora rabbit wool"> Angora </li>
<li onclick="showDetails(this)" data-wool-origin="Angora goat hair"> Mohair (tiftik) </li>
<li onclick="showDetails(this)" data-wool-origin="Long-staple combed wool"> Worsted (Kamgarn) </li>
    </ul>
</body>
</html>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DATALIST_tag / Veri listesi etiketi

❇Veri listesi etiketi (DATALIST), kullanıcının se�ebileceği �nceden tanımlanmış bir dizi se�enek (option) i�in bir kapsayıcıdır.

Read More/Less

Veri listesi kullanıcıya bir se�enekler listesi sağlayan aynı zamanda kendi değerlerini girmesine izin veren bir �zelliğe sahiptir. Bu anlamda veri listesinde sunulan se�enekler mutlak se�enekler olmayıp �nerilen se�eneklerdir. Kullanıcıya otomatik girdi �nerileri sağlayan <datalist> etiketi HTML5 ile tanıtılan bir �zelliktir. Datalist etiketi genellikle input etiketi ve value �zniteliği ile birlikte kullanılır.

Samle code:

<html>
<head>
<style>
#car-brand input  { 
width:50%;
height:70px;
font-size:36px;
}
#car-brand input[type="submit"] {
            border-radius: 14px;
            font-size:36px;
        }
#car-brand input[type="submit"]:hover {
        background:#00fa9a;       
        }
.cb {
height:auto;
background-color:#1e90ff;
color:#fff;
width: 100%;
padding:20px;
}
</style>
</head>
<body>
<div class="cb">
<form id="car-brand"action="#"method="get">
<label> Select your car brand</label> 
<p> <input list="Cbrand" name="car brand"required>
<datalist id="Cbrand">
<option value="Kia">
<option value="Honda">
<option value="Toyota">
<option value="Volkswagen">
<option value="Ford"> 
</datalist> </p>
<label> Select your car color</label>
<p> <input list="car-color"name="car color"required>
<datalist id="car-color"> 
<option value="White"> 
<option value="Black">
<option value="Oranj">
<option value="Red">
<option value="Gray">
</datalist> </p>
<label>Enter your car age</label>
<p> <input type="number"min="0" max="20" step="1"placeholder="0"required /> </p>
<input type="submit"value="Submit">
</form> </div>
</body>
</html>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DL_tag / A�ıklama listesi etiketi

❇ A�ıklama listesi etiketi (DL), <dt> ve <dd> �gelerliyle birlikte s�zl�k benzeri bir a�ıklama listesi oluşturmakta kullanılan bir html �gesidir.

Read More/Less

Burada;
  <dl> (Description list) A�ıklama listesi'ni,
<dt> (Data term) Veri terimi'ni,
 <dd> (Data description) Veri a�ıklaması'nı ifade etmektedir.
Buna g�re;
 <dl> A�ıklama listelerinin (kabını) oluşturur,
<dt> A�ıklama listelerine liste �geleri ekler,
<dd> A�ıklama metninlerinin (kabını) 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.
Aşağıdaki �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.
A�ıklama listeleri, bir terim ve o termi a�ıklayan bir metin, veya birden �ok terim ve bu terimlerin ortak �zelliklerini a�ıklayan bir metin veya bir terim ve birden �ok a�ıklama metni i�eren listeler şeklinde olabilir.

Sample code:

<dl>
<dt> 1. Tanım / (Tanımlanan) </dt>
<dd> 1. Tanımlama / (Tanımlayan) A�ıklama</dd>
<dt> 2. Tanım / (Tanımlanan) </dt>
<dd> 2. Tanımlama / (Tanımlayan) A�ıklama</dd>
<dt> 3. Tanım / (Tanımlanan) </dt>
<dd> 3. Tanımlama / (Tanımlayan) A�ıklama</dd>
<dt> 4. Tanım / (Tanımlanan) </dt>
<dd> 4. Tanımlama / (Tanımlayan) A�ıklama</dd>
</dl>

Sample Output:

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. Pamuk, bitki kaynaklı doğal lifler grubundandır.
Viscose, Rayon, Modal, Tencel, Cupro: Bu listede bazıları ticari marka olan tekstil materyallerinin ortak yapıları Sel�loz'dur (Cellulose) ve sel�loz esaslı yapay 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ış doğal kaynaklı yapay liflerdir. 
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.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DEL_tag / Sil etiketi

❇ Sil etiketi (DEL)-(delete) 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.

Read More/Less

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.

Sample code:

<html>
<body>
Yapılacaklar
<ul>
<li><del> 1.İşlem…</del></li>
<li><del> 2.İşlem…</del></li>
<li> 3.İşlem…</li>
<li> 4.İşlem…</li>
<li><del> 5.İşlem…</li>
<li> 6.İşlem…</li>
</ul>
</body>
</html>

Sample Output:

Yapılacaklar

~~1. İşlem…~~
~~2. İşlem…~~
3. İşlem…
4. İşlem…
~~5. İşlem…~~
6. İşlem…

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DETAILS_tag / Ayrıntılar etiketi

❇ Ayrıntılar etiketi (DETAILS), kullanıcının istediği zaman g�r�nt�leyebileceği veya gizleyebileceği web sayfasındaki ek ayrıntıları belirtmek i�in kullanılan bir HTML5 �zelliğidir.

Read More/Less

Details etiketi kullanıcıların ilgi alanlarına g�re genişletip daraltabilecekleri b�l�mler oluşturmak i�in geliştiricilerin g�stermek veya gizlemek istediği i�erik i�in bir kaptır. Details etiketi i�erik b�l�m�n�n �zetini ve başlığını i�eren bir �zet <summary> etiketi ile kullanılır. Teknik olarak kullanımı zorunlu olmayan summary etiketi kullanılmadığında details etiketi kendi başlığını oluşturacaktır bu durumda birbirinin aynı olan bir�ok başlık oluşturacağından sayfa d�zeni ve kullanıcı deneyimini iyileştirmek i�in kullanılması iyi bir tercih olacaktır. Geliştiriciler Details etiketinin bir web sayfasında nasıl davranacağını ve g�r�neceğini y�netmek i�in; "details open" ve "toggle event" �zelliklerini kullanır.

Details open:Ayrıntılar a�ık
Open �zniteliği sayfa y�klendiğinde ayrıntılar i�eriğini varsayılan olarak a�ık olarak g�r�nt�ler, ancak kullanıcının kapatmasına izin verir.
Sample output and code looks like this.

Default Open

Details etiketinin a�ık (open) �zniteliği sayesinde bu i�erik varsayılan olarak g�r�n�r durumdadır.

<details open>
<summary>  Default Open  </summary> 
<p>  details content </p> 
</details>

Ontoggle �zelliği; geliştiriciler gerekli hallerde herhangi bir konunun detaylarını bir kap (details) i�ine gizler, sayfa y�klendiğinde varsayılan olarak kapalı olan gizlenmiş ayrıntıların i�eriğini kullanıcıların g�rebilmesi i�in tıklanabilir bir başlık (summary) ile kullanıcıların isteğe bağlı a�ma ve kapatmasına izin verir.
Basic usage temel kullanım

Ayrıntıları g�rmek veya gizlemek i�in alt başlığa tıklayın

Click to expand

Bu kullanıcının tıkladığında g�rebileceği gizli bir i�eriktir.

<details>  
<summary> Genişletmek i�in tıklayın  </summary>
<p> Bu kullanıcının tıkladığında g�rebileceği gizli bir i�eriktir. </p>
</details>

Nested Details i� i�e kullanım

Ayrıntıları g�rmek veya gizlemek i�in alt başlıklara tıklayın

Parent Details

This is the parent details content.

Nested Details

This content is inside a nested details tag.

<details> 
 <summary> Ana ayrıntılar </summary>
 <p> Bu ana ayrıntılar i�eriğidir. </p>
 <details> 
 <summary> İ� i�e ayrıntılar </summary> 
 <p> Bu i� i�e ge�miş bir ayrıntılar etiketinin i�indeki i�eriktir. </p>
 </details> 
 </details>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DFN_tag / Tanım etiketi

❇ Tanım etiketi (DFN), bir terimin tanımlayıcı �rneğini işaret eder.

Read More/Less

T�rk�e karşılığı tanım olan Definition kelimesinin kısaltması olan <dfn> etiketinin kullanımlarından bazıları 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:
Bir terimi tanımlamak:
Aşağıdaki �rnekte 'Number metric' <dfn> ile tanımlanan terim olarak işaret edilmektedir.

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

Kısaltma etiketiyle kullanımı
Aşağıdaki metinde <abbr> etiketi i�inde "Nm" kısaltması kullanılmıştır, kısaltma tıklandığında veya imle� �zerine geldiğinde kısaltmanın a�ıklaması g�r�nt�lenecektir. burada kısaltma aynı zamanda tanımlanan terimdir.

Tekstilde genellikle numaralandırma sisteminin kısaltması ile sembolize edilen, ipliklerin kalınlık veya incelik derecelerini ifade etmekte kullanılan iplik numarası sembollerinden Nm System International (SI) birim sisteminde iplik numaralandırma tekniklerinden biridir, sistem indirect numaralandırmalar grubundandır.

Başlık (tittle) etiketiyle kullanımı:
<dfn> Başlık niteliği s�zdizimi şuna benzer

 <dfn title="title name">TITLE NAME</dfn>

Burada başlık niteliği tanımlanan terimi işaret eder.

Tekstilde iplik numaralandırma:
Tekstilde İ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. Geniş bilgi i�in iplik numaralandırma sistemleri Sayfasını ziyaret ediniz.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DIALOG_tag / İletişim etiketi

❇ İletişim etiketi (DIALOG), Kullanıcının etkileşime girdiği ve belirli eylemleri ger�ekleştirdiği yerel bir iletişim kutusu oluşturmak i�in kullanılan bir HTML5 �zelliğidir.

Read More/Less

HTML <dialog> �ğesi, modal dialog veya non-modal dialog y�ntemleri ile oluşturulan uyarıcı, denetleyici, alt pencere, a�ılır mesajlar (pop-up) gibi kapatılabilir kutular oluşturmakta kullanılır.
Form �ğeleri [method="dialog"] niteliğiyle belirtilirse, bir iletişim kutusu i�inde birleştirilebilirler. B�yle bir form sağlanırsa, iletişim kutusu returnValue niteliğiyle kapatılır.

Dialog etiketinin open niteliği kullanıldığında iletişim kutusu sayfa y�klendiğinde zaten a�ıktır. İletişim kutusu, kutu i�indeki form �gesine tanımlanan <form method="dialog"> �zelliği sayesinde form i�inde oluşturulan "Close" butonu tıklanarak kapatılabilir. Bu durumda, formu kapatmak i�in JavaScript gerekli değildir.
Dialog open kutuları kapatıldığında sayfadaki yeri g�r�nmezdir, kapatılan mesaj tekrar g�r�nt�lenemez, bu ancak sayfanın yeniden y�klenmesi ile m�mk�nd�r. bkz. Dialog Open

Dialog Open

<dialog open>
<p> this is an open dialog box. </p> 
<form method="dialog">
<button>Close dialog</button>
</form>
</dialog>

Note: Dialog �gesinin open niteliği HTML5 tarafından desteklenmediğinden open niteliği yerine dialog kutularını g�stermek i�in .show() veya .showModal() y�ntemlerinin kullanılması �nerilir.

Modal bir iletişim kutusunu g�r�nt�lemek i�in .showModal() y�ntemi, Modal olmayan bir iletişim kutusunu g�r�nt�lemek i�in ise .show() y�ntemi kullanılır. Dialog �gelerini bu y�ntemlerle g�r�nt�lemek ve gizlemek JavaScript kullanılmasını gerektirir.

• show y�ntemiyle g�sterilecek modal olmayan (non-modal) bir iletişim penceresi a�ıldığında, kullanıcı sayfadaki diğer �ğelerle etkileşime girebilir.

Dialog-01 (Non-modal dialog box)

• showModal y�ntemiyle g�sterilecek modal bir iletişim penceresi a�ıldığında, kullanıcıların yalnızca iletişim kutusuyla etkileşime girmesi istendiğinden, sayfadaki diğer �gelerle etkileşime izin verilmez.

Dialog02 (Modal dialog box)

Form �ğeleri [method="dialog"] niteliğiyle bir iletişim kutusu i�inde birleştirildiğinde, kutu i�indeki formda kullanıcıdan se�enekli listeler veya yanıtlama kutularıyla istenen bilgiler kullanıcı tarafından işlendikten sonra g�nder (Submit) butonları ile form iletim işlemi tamamlanmış olacaktır. Form i�eriği, " X " ve "Confirm " butonlarından herhangi birisi ile g�nderilebilir, burada bilinmesi gereken, " X " butonu form g�nderisini doğrulamadan g�nderirken "Confirm" butonunun form g�nderisini doğrulama ile g�nderdiğidir. Reset butonu ise form i�eriğine işlenenleri temizlemek i�indir.
<form method="dialog"> niteliği ile oluşturulan iletişim kutusunun belirgin �zelliği geri d�n�ş (returnValue) değerini, iletişim kutusunu g�ster butonunun altında g�r�nt�lemesidir.

Dialog03 (Form methot dialog box)

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DIR_tag / Dizin etiketi

❇ Dizin etiketi (DIR), dosyalar ve klas�rlerden oluşan bir dizin i�in kap oluşturmakta kullanılmıştır.

Read More/Less

<dir> etiketi, HTML'de T�rk�e karşılığı dizin olan directory kelimesinin ilk harfleri ile temsil edilmiştir.

<dir> etiketi s�zdizimi (syntax) şuna benzer.


<html>
<body>
<dir>
<li> list item1 </li>
<li> list item2 </li>
<li> list item3 </li>
</dir>
</body>
</html>

Sample Output:

List items

list item1

list item2

list item3

⚠️ Not: <dir> etiketi artık HTML4 ve HTML5'te desteklenmemektedir, bunun yerine <ul> veya CSS kullanmak daha işlevsel olacaktır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

DIV_tag / B�l�m etiketi

❇ B�l�m etiketi (DIV), 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,

Read More/Less

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. 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 (Temel div kabı):
Temel (basic) div etiketleri blok etiketlerdir, bir genişlik (width) değeri tanımlanmadığı durumda satırın tamamını kaplar ve sonraki metin veya nesneler

Temel div kabı (Basic div container)

bir sonraki satırdan devam eder.
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 100% değerinin altında bir genişlik değeri verilmiş olsa da sonraki metin ve nesneler yine

60% genişlik tanımlanmış div kabı.

bir sonraki satırdan devam eder.

INLINE Div Container (Satır i�i div kabı):
Bir div kabına display:inline; �zelliği tanımlandığında genişlik ve y�kseklik değeri verilemez, zira inline niteliği kelimelerin ve nesnelerin satır �izgisi boyunca yan yana sıralamayı hedefler, inline �zelliği tanımlanan div kapları da bu sıralamaya dahil olur ve satır i�indeki sıralamada yerini alır.
Aşağıdaki �rneklerde satır i�i div kapları kap i�indeki metin uzunlukları ile doğru orantılı olan boyutları ile satır �izgisi �zerinde sıralamadaki yerlerini alacaktır.
Kısa metin i�eren div kabı
�rnek div kabı

Short text div conteiner

�n�ndeki ve arkasındaki kelimeler arasında satır �izgisinde sıralamadaki yerini alır.
Uzun metin i�eren div kabı
Bu div kabı

This is long text div conteiner

�n�ndeki ve arkasındaki kelimeler arasında satır �izgisinde sıralamadaki yerini alır.
�ok uzun metin i�eren div kabı
Bu div kabı

This is very long text div conteiner This is very long text div conteiner This is very long text div conteiner

�n�ndeki ve arkasındaki kelimeler arasında satır �izgisinde sıralamadaki yerini alır.

INLINE-BLOCK Div Container (Satır i�i blok div kabı):
Bir div kabına display:inline-block; niteliği tanımlandığında hem inline gibi satır i�indeki metin ve nesneler ile yan yana gelir hem de block nesneler gibi y�kseklik ve genişlik değeri verilebilir. display:inline-block; niteliği tanımlanan div kaplarında kap y�ksekliğini ayarlamak i�in aşağıdaki y�kseklik değerlerinden biri kullanılabilir.
• Boş değer; kap y�ksekliği i�in hi�bir değer tanımlanmadığı durumlarda varsayılan olarak automatic veya 100% değerleri gibi davranır. Code:

<div style="width:45%;height: ; display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height: ~ ;

• Auto değeri; kap y�ksekliği taban sınırını kap i�eriğine g�re otomatik ayarlar.
Code:

<div style="width:45%;height:auto;display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height:auto;

• 100% değeri; ilgili kabın 100%'�n� kullanmayı hedefler, kap y�ksekliği taban sınırını genellikle otomatik değer gibi kap i�eriğinin bittiği noktaya �eker.
Code:

<div style="width:45%;height:100%;display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height:100%;

• Overflow değeri, bu değer sabit bir div kabı i�inde y�zd�r�lebilen bir i�erik oluşturur. Bir div kabı i�eriğinin div kabına tanımlanan kap y�ksekliğine 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.
Code:

<div style="width:45%;height:60px;overflow:scroll;display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height:60px; overflow:scroll;

• Pixel (px) değeri; bu se�enekte kap i�indeki metnin veya nesnenin y�ksekliğine uygun bir "px" değeri tanımlanmalıdır.
Code:

<div style="width:45%;height:260px;display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height:260px;
Bir div kabında height:_px; değeri gereğinden fazla tanımlandığında o kabın tabanında tanımlanan fazlalık değerin kaplayacağı kadar bir alan boş kalacaktır (�st kap)…
veya gereğinden az bir height:_px; değeri tanımlandığında kap i�eriğinin bir kısmı kabın taban �izgisinden dışarıya taşacaktır. (Alt kap)…
Code:

<div style="width:45%;height:90px;display:inline-block; border:1px solid #8b008b;background:#eee;">…</div>

Output:

 Carbon Fiber is a polymer and is sometimes known as graphite fiber. It is a very strong material that is also very light. Carbon fiber is five times stronger than steel and twice as stiff. Although carbon fiber is stronger and harder than steel, it is lighter than steel;

height:90px;

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

EM_tag / Vurgu etiketi

❇ Vurgu etiketi (EM), 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.

Read More/Less

T�rk�e karşılığı vurgu olan 'emphasis' kelimesinin ilk iki harfi ile temsil edilen vurgu etiketi vurgu yapılan metnin normal bir c�mleye g�re biraz uzatılmış ve daha vurgulu bir ses tonuyla s�ylenmesi gerektiğini �nerir. Tarayıcılar vurgu (em) etiketi i�inde bulunan metni italik olarak g�r�nt�ler, bu davranış CSS ile değiştirilebilir.

Sample Output:

Başarılı y�neticiler, başarılı y�neticilerin kadrosundan yetişir, zira her y�netici aynı zamanda bir rol modelidir ve genellikle diğer �alışanlar tarafından g�zlem altındadırlar, bu doğrultuda; 'İyi y�neticiler, iyi y�neticilerin yanında yetişir' deyimi yazılı olmayan bir kuraldır.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

EMBED_tag / G�mme etiketi

❇ G�mme etiketi (EMBED), harici kaynaklardan Resim, Video, Flash animations, Java Applets (Java uygulamaları) ve PDF dosyalarını bir web sayfasına yerleştirmekte kullanılan bir kaptır.

Read More/Less

G�mme etiketi t�m satırı kaplayan blok bir etikettir, stillendirilebilir, genişlik (width) ve y�kseklik (height) ayarlamalarına piksel cinsinden izin verir, y�zdelik değerler ge�ersizdir. Emmed etiketi kapanış etiketi gerektirmeyen kendi kendini kapatan bir etikettir.
Yeni nesil tarayıcılar embed etiketinin eklenti desteğini ve kullanımını kaldırdı. Bu nedenle <embled> kullanımından ka�ınmak ve bunun yerine aşağıdaki alternatifleri kullanmak daha işlevsel sonu�lar verecektir. • <img> Resimleri g�mmek i�in.
• <iframe> HTML sayfalarını veya PDF belgelerini g�mmek i�in
• <audio> Ses kaynağını g�mmek i�in.
• <video> Video kaynaklarını g�mmek i�in.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

FIELDSET_tag / Alan k�mesi etiketi

❇ Alan k�mesi etiketi (FIELDSET), uzun formlarda farklı t�rdeki alanları gruplandırmak i�in kullanılan bir form �gesidir.

Read More/Less

Aynı form i�inde iki 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. Formlarda kullanılan <legend> �ğesi grupları adlandırmak i�in, <label> �gesi ise grup i�inde toplanan her elemana bir başlık eklemekte kullanılır.
Aşağıdaki �rnek form tablosunda fieldset �zelliği iki farklı t�r i�in iki farklı noktada kullanılmıştır.
Fieldset/Form Combination Sample fieldset Form
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

FIGURE_tag / Fig�r etiketi

❇ Fig�r etiketi (FIGURE), html'de bir belgenin ana akışıyla ilgili olan ancak kendi başına ayakta durabilen m�stakil i�eriği temsil eden bir kaptır. Bir belgede fig�r etiketini kullanmak i�eriğin anlamsal ve bi�imsel a�ıdan esnek bir şekilde d�zenlenmesine yardımcı olacaktır.

Read More/Less

Fig�r etiketi (<figure> tag) HTML5 ile tanıtılan yeni bir �zelliktir, bu etiket belgenin anlamını tamamlayan grafik, diyagram, fotoğraf, video klip, resim, kod listeleri veya bunlara benzer medyalar i�in belge i�inde bağımsız bir b�l�m oluşturularak belgeyi anlamsal bir şekilde d�zenlemek i�in bir ara�tır. Fig�r etiketi i�eriğine isteğe bağlı bir başlık eklemek i�in kullanılan <figcaption> �gesi <figure> etiketlerinin arasına yerleştirilen bir fig�r başlığı etiketidir.
Yalın fig�r �rneği

<figure class="simple-figure">
<img src="//img.webme.com/pic/w/wovenstory/Cotton_field.jpg"alt="Cotton field" />
</figure>
<style>
.simple-figure {
  border:6px #008080 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 310px;
height:auto; 
float:right; 
margin-left:5px;
}
</style>

Ticari olarak yetiştirilen ve t�m� antik �ağda evcilleştirilen 4 pamuk t�r� vardır.
• Gossypium hirsutum: Orta Amerika, Meksika, Karayipler ve G�ney Florida'ya �zg� yayla pamuğu (d�nya �retiminin y�zde 90'ı)
• Gossypium barbadense: Tropikal G�ney Amerika'ya �zg� ekstra uzun elyaf pamuk olarak bilinir (d�nya �retiminin %8'i)
• Gossypium arboreum: Hindistan ve Pakistan'a �zg� ağa� pamuğu (% 2'den az)
• Gossypium herbaceum: G�ney Afrika ve Arap Yarımadasına �zg� Levant pamuğu (%2'den az).
Ayrıca Hibrit (melez) �eşitler de yetiştirilmektedir.

Figcaption başlıklı fig�r �rneği

<figure class="figure-figcaption" >
<img src="//img.webme.com/pic/w/wovenstory/Cotton_field.jpg"alt="Cotton field" />
<figcaption> A cotton field in Turkey - Shooting by Woven Story </figcaption>
</figure>
<style>
.figure-figcaption {
  border:6px #008080 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 310px;
height:auto; 
float:right; 
margin-left:5px;
}
.figure-figcaption figcaption {
  background-color: #008080;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}
 </style>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

FIGCAPTION_tag / Fig�r başlığı etiketi

❇ Fig�r başlığı etiketi (FIGCAPTION), fig�r <figure> etiketi i�inde yayınlanan fotoğraf, video, ses dosyası, resim karikat�r, �izim, diyagram vb. medyalara bir başlık veya a�ıklama sağlamak i�in kullanılan html �gesidir.

Read More/Less

Fig�r başlığı (figcaption) etiketi, genellikle <figure> etiketi i�indeki i�erikten sonra yerleştirilir ancak i�erikten �nce yerleştirilmesine de izin verir. Html de <caption> ve <figcaption> benzer işlemlerdir ancak, Caption tag; tablo <table> �gelerine bir başlık eklemekte kullanılırken, Figcaption tag; fig�r <figure> �gelerine bir başlık eklemek i�in kullanılması gerektiğinden, işlevleri aynı olsa da işlemleri farklıdır.

�rnek-1 : Fig�r başlığı fig�r�n �st�nde

Aramid (Aromatic polyamide) elyaflar:

Aramidler esası modifiye polyamid (nylon) olan malzemelerdir. y�ksek teknoloji uygulamaları ile bir�ok alanda kullanılan para-aramidler, esas olarak DuPont firmasının Kevlar� markası altında ticari bir �r�n�d�r.  Meta-aramidler, ise termal ve kimyasal �zellikleri ile tanınır ve DuPont firmasının Nomex� markası altında ticari bir �r�nd�r. Ağırlıklı olarak teknik tekstiller ve koruyucu giysiler alanlarında kullanılmaktadırlar. Aramid lifleri v�cut zırhı, kurşun ge�irmez yelek, itfaiyeci �niforması, vb. kullanımların yanısıra kompozitlerde, otomotiv end�strisinde, askeri uygulamalarda ve benzeri bir�ok alanda kullanılan �nemli bir hammaddedir.

�rnek-2 : Fig�r başlığı fig�r�n altında

Aramid (Aromatic polyamide) elyaflar:

Sample code: �rnek 1 ve 2

<figure class="figcaption-1">
<figcaption> Aramide fiber </figcaption>
<img src="https://img.webme.com/pic/w/wovenstory/iphone_2022-10-27_11-46-13.jpeg" title="Aramide"alt="" >>
</figure>
<figure class="figcaption-2">
<img src="https://img.webme.com/pic/w/wovenstory/iphone_2022-10-27_11-46-13.jpeg" title="Aramide"alt="">
<figcaption Aramide fiber </figcaption>
</figure>
<style
.figcaption-1, .figcaption-2  {
  border:6px #008080 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 310px;
height:auto; 
float:right; 
margin-left:5px;
}
.figcaption-1 img, .figcaption-2 img {
  max-width:310px;
  max-height: autopx;
}
.figcaption-1 figcaption, .figcaption-2 figcaption {
  background-color: #008080;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}
</style>

�rnek-3 : Fig�r başlığı fig�r�n sağında

Aramid (Aromatic polyamide) elyaflar:

Sample code: �rnek 3

<figure class="figcaption-3">
<img src="https://img.webme.com/pic/w/wovenstory/iphone_2022-10-27_11-46-13.jpeg" title="Aramide"alt="">
<figcaption> Aramide fiber </figcaption>
</figure>
<style>
.figcaption-3 {
position:relative;
border:6px #008080 solid;
  display: flex;
  flex-flow: column;
  padding: 1px;
  max-width: 310px;
height:auto; 
float:right; 
margin-left:5px;
}
.figcaption-3 img {
width:300px;
height:auto;
}
.figcaption-3 figcaption {
 position: absolute; 
right:0;
 writing-mode:vertical-rl;
background-color:#008080;
text-align:center;
color:#fff;
width:12%;
height:200px;
}          
</style>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

FONT_tag / Yazı tipi etiketi

❇ Yazı tipi etiketi (FONT), <font> .. </font> etiketleri i�ine alınan metne stil tanımlamak i�in kullanılmıştır.

Read More/Less

Font etiketi temel olarak �� zelliği ile �alışmıştır .  

<font="size"> (yazı boyutu),

 <font="face"> (yazı t�r� (arial, Times New Roman vb.)) ve  

<font="color"> (yazı rengi).

⚠ Not: Font etiketi kullanımdan kaldırılmış bir HTML �ğesidir. Bunun yerine CSS style nitelikleri kullanılmalıdır.
Yazı tipi niteliklerinin CSS style ile kullanıldığında işlev, pozisyon ve g�r�n�mleri:

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 �zelliği (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 �zelliği (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.

CSS'de beş genel yazı tipi ailesi (Font family) vardır, diğer t�m yazı ailesi adları genel yazı tipi ailelerinden (generic font family) birine aittir. (Alt tablo)

Generic font family	Font family name
Serif	Times New Roman, Georgia, Garamond, Palatino, Times
Sans-serif	Arial, Verdana, Helvetica, Geneva, Tahoma, Lucida Grande, Impact, Trebuchet MS, Arial Black
Monospace	Courier New, Courier, Lucida Console, Monaco
Cursive	Brush Script MT, Lucida Handwriting
Fantasy	Copperplate, Papyrus

Yazı tipi ailesinin (Font family) kullanımı
Yazı tipi ailesi i�in s�z dizimi (kodlar) tanımlanırken Tanımlanan yazı tipi ailesinin tarayıcıda mevcut olmaması ihtimaline karşı her zaman birka� tane yedek yazı tipi ailesi tanımlamak �ok �nemlidir. Bu kural uygulandığında İlk yazı tipi �alışmazsa, tarayıcı sırasıyla �alışan yazı tipini buluncaya kadar yedek yazı tiplerini devreye alacaktır. Tanımlanan yazı tipi listesi her zaman genel bir yazı tipi aile adıyla sonlandırılmalıdır.

�rnek1: font-family: Tahoma, Verdana, sans-serif;
�rnek2: font-family: Lucida Console, Courier New, monospace;

Bu �rneklerde birinci sıradaki yazı tipi kullanıcı tarayıcısının desteklediği bir yazı tipi ise kullanıma alınacaktır, değilse bir sonraki ve bir sonraki olarak tarayıcının desteklediği yazı tipine kadar devam edecektir, son sıradaki yazı tipi aynı zamanda genel bir yazı tipi ailesine aittir

Aşağıdaki yazı tipleri HTML ve CSS i�in en iyi web g�venli olanlarıdır.

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Bir�oğu �cretli olan binlerce yazı tipi ailesinin tamamı t�m bilgisayarlarda desteklenmiyor olabilir, bu nedenle CSS'nin sağladığı geri d�n�ş sisteminden faydalanmak gereklidir. �rneğin bir sayfa kodu i�indeki 'font-family' i�eriğine istenilen yazı tipi ailesi adı tanımlandıktan sonra bu yazı ailesinin bazı tarayıcılarda mevcut olmamaması halinde yerini alacak 2, 3 veya 4 yazı ailesi adı araları virg�l ile ayrılarak peş peşe listelenmelidir, bu liste Serif, Sans-serif, Monospace, Cursive, Fantasy den oluşan beş genel yazı tipi ailesinden bir tanesi ile sonlandırılmalıdır.

Bazı yazı tiplerinin şekil ve g�r�n�mleri.

Yazı tipi	Şekil g�r�n�m�
Genel yazı tipleri
Serif	Woven Story
Sans-serif	Woven Story
Monospace	Woven Story
Cursive	Woven Story
Fantasy	Woven Story
HTML ve CSS i�in en iyi web g�venli yazı tipleri:
Arial	Woven Story
Verdana	Woven Story
Tahoma	Woven Story
Trebuchet MS	Woven Story
Times New Roman	Woven Story
Georgia	Woven Story
Garamond	Woven Story
Courier New	Woven Story
Brush Script MT	Woven Story
Serif ile listelenen yazı tipleri:
Times, Times New Roman, serif	Woven Story
New Century Schoolbook, TeX Gyre Schola, serif	Woven Story
Palatino, URW Palladio L, serif	Woven Story
American Typewriter, serif	Woven Story
Georgia, Garamond, serif	Woven Story
Didot, serif	Woven Story
Sans-serif ile listelenen yazı tipleri:
Arial, Helvetica, sans-serif	Woven Story
Arial Narrow, sans-serif	Woven Story
Optima, sans-serif	Woven Story
Verdana, sans-serif	Woven Story
Trebuchet MS, sans-serif	Woven Story
Gill Sans, sans-serif	Woven Story
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif	Woven Story
Noto Sans, sans-serif	Woven Story
Cursive ile listelenen yazı tipleri:
Comic Sans MS, Comic Sans, cursive	Woven Story
Brush Script MT, Brush Script Std, cursive	Woven Story
Bradley Hand, cursive	Woven Story
Apple Chancery, cursive	Woven Story
URW Chancery L, cursive	Woven Story
Snell Roundhand, cursive	Woven Story
Fantasy ile listelenen yazı tipleri:
Impact, fantasy	Woven Story
Chalkduster, fantasy	Woven Story
Marker Felt, fantasy	Woven Story
Trattatello, fantasy	Woven Story
Stencil Std, fantasy	Woven Story
Blippo, fantasy	Woven Story
Jazz LET, fantasy	Woven Story
Luminari, fantasy	Woven Story
Monospace ile listelenen yazı tipleri:
Courier, monospace	Woven Story
Courier New, monospace	Woven Story
Andale Mono, monospace	Woven Story
FreeMono, monospace	Woven Story
DejaVu Sans Mono, monospace	Woven Story
OCR A Std, monospace	Woven Story

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.ii

FOOTER_tag / Alt bilgi etiketi

❇ Alt bilgi etiketi (FOOTER), html'de bir belge veya b�l�me alt bilgi tanımlamak i�in kullanılan html �gesidir. Alt bilgi etiketi <footer> yazar bilgisi, iletişim bilgisi, telif hakkı bilgisi, site haritası, yukarı d�n�ş bağlantıları, dahili ve harici web sayfalarına bağlantılar gibi bilgileri i�eren bir kaptır.

Read More/Less

Alt bilgi etiketinin <footer> varsayılan konumu web sayfası veya belgelerinin en alt b�l�md�r. Footer etiketi HTML5 ile tanıtılan bir HTML5 �zelliğidir, bu �zellikten �nce <div id="footer">footer i�eriği</div> ve benzeri "id" �zellikleri ile kullanılmaktaydı.

Sample footer container

<footer class="footerTag">
About us
Website: <a href="https://wovenstory.tr.gg/"> wovenstory website </a>
Author: Woven Story team
Published: by Woven Story
Contact us
E mail: <a href="yldrm.nihat@gmail.com"> info wovenstory</a>
Our page suggestion:
<ul>
<li> <a href="wovenstory.tr.gg"> Main page </a> </li>
<li> <a href=" https://wovenstory.tr.gg/iplik-tipleri.htm"> Yarn types </a> </li>
<li> <a href="https://wovenstory.tr.gg/iplik-numaralandirma-sistemleri.htm"> Yarn numbering systems </a>  </li>
<li> <a href="https://wovenstory.tr.gg/Dokuma.htm"> Weaving </a>  </li>
</ul>
� 2018 Wovenstory 
 </footer>  
<style>
        .footerTag {  
        width: 100%;  
        position:absolite;  
        background-color:#dd55dd;
        color:#fff;  
        padding: 18px 1px 6px 18px;  
        }  
</style>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.ii

FORM_tag / Kalıp (bi�im) etiketi

❇ Kalıp etiketi (FORM) 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.

Read More/Less

Fiziksel veya dijital formlar bilgi toplamanın etkili bir yoludur. Belirli bir kalıp �er�evesinde basılmış bir evrak olan fiziksel bir belgenin (form) doldurulması ve kişisel bilgilerin verilmesi 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 gereken 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, bunlardan bazıları aşağıda listelenmiştir.

Form kontrol 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" veya 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, _blank, _parent , _top, _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
HTML Form
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

H_tag / Başlık etiketi

❇ Başlık etiketi (H), 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.

Read More/Less

Başlık etiketi <h>, T�rk�e karşılığı 'başlık' olan 'heading' kelimesinin ilk harfi olan h ile temsil edilen HTML �gesidir.
<h1>...... <h1> etiketi 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> etiketi 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. h1 ila h6 değerleri arasındaki diğer başlık metinleri 'h1' en b�y�k - 'h6' en k��k metin boyutu ile aldıkları sayısal değerler ile ters orantılı şekilde, tanımlanan değerin karşılığı olan boyut ve kalınlıkta g�r�nt�lenecektir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

HEAD_tag / Kafa etiketi

❇ Kafa etiketi (HEAD), HTML sayfalarında t�m başlık �ğeleri i�in bir kaptır.  HTML 'head' etiketi, bir 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.

Read More/Less

HTML belgeleri anatomideki gibi bir kafa (head) ve bir g�vdeden (body) 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 ne d�ş�nd�ğ�, neler tasarladığı g�r�lemediği gibi HTML'de de head �ğesinin i�indekiler de sayfada g�r�nmezler.
HTML head etiketi i�inde yer alabilecek �geler; title, style, type, link, script, noscript, src, defer, async, crossorigin, integrity, nonce ve  meta'lardır.  

<head> etiketi i�inde yer alabilecek �gelerden 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. �rneğin harici bir CSS dosyasına bağlantı vermekte kullanılır.
• <meta>, Bir HTML belgesiyle ilgili meta verileri tanımlar, meta verileri; 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'lara bir ka� �rnek; meta charset, meta author, meta description, meta keywords, meta viewport şeklinde listelenebilir.
• <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.
Aşağıdaki s�zdizimi (syntax) <head> �zelliklerini �n planda g�stermek i�in d�zenlenmiş g�stermelik bir �rnektir. ⚠ HTML’de <head> etiketleri i�ine yerleştirilen �geler sayfada g�sterilmez.

<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:500px;
height: 300px;
border:1px 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 
<p> Paragraf ……………….  </p>
<p> Paragraf …………… </p>
<p> Paragraf …………….……… </p>
<p> Paragraf ………………………………… </p&g
</body>
</html&g

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

HEADER_tag / �st başlık etiketi

❇ �st başlık etiketi(HEADER), bir b�l�m�n veya sayfanın en �st�ndeki başlık, marka, logo, gezinme i�erikleri gibi g�r�n�r başlıkları tanımlamakta kullanılan bir HTML �gesidir.

Read More/Less

Genellikle bir sayfa veya b�l�me g�r�n�r başlık tanımlamakta kullanılan <header> etiketi aynı zamanda Logo, Marka, Site başlığı, Arama �ubuğu, Gezinme men�leri, Sayfa veya b�l�m� tanıtan bir bilgiyi, B�l�m veya sayfadaki makalenin başlığı, yazarı veya bunlara ait kısa bir a�ıklama gibi ama�lar i�in kullanılabilir.

Aşağıda i�inde header etiketi de kullanılan �rnek bir html sayfası g�sterilmiştir.

Page title

(Header section)

Woven Story

(Main section)

The Woven Story website has technical information on textiles and other topics.

Adları birbirine benzer ancak farklı işlevleri olan heading, head ve header etiketlerinin belirgin �zelikleri aşağıdaki gibidir.

<h> (heading): <h> … </h> etiketleri arasına yerleştirilen g�r�n�r bir başlık veya alt başlığın başlık �nemine g�re <h> </h> etiketlerine tanımlanacak 1 ila 6 aralığında bir sayı ile boyutsal yapısını oluşturmakta kullanılır.
<head>: <head>… </head> etiketleri arasına yerleştirilecek meta veriler, betikler (JavaScript), stil sayfaları (style) ve kullanıcılar tarafından doğrudan g�r�lemeyen diğer bilgiler i�in kullanılır.
<header>: <header>… </header> etiketleri arasına yerleştirilecek bir b�l�m�n veya sayfanın en �st�ndeki başlıklar, gezinme men�leri, logo ve markalar gibi g�r�n�r i�erikler i�in kullanılır.

.
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

HEIGHT_attrbute / Y�kseklik �zelliği

❇ Y�kseklik �zelliği (HEIGHT), HTML �ğelerinin y�ksekliğini ayarlamakta kullanılan bir html �zelliğidir.

Read More/Less

<height> niteliği:

<canvas>: Web sayfasına �izilen 2D, 3D grafik ve ş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 ve benzeri g�rsellere
<input>: İnput (giriş) �gelerine
<object>: pdf ve benzeri objelere ve
<video> : Videolara

y�kseklik değerlerini atamak i�in kullanılan bir HTML �zelliğidir.
⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

HR_tag / Yatay �izgi etiketi

❇ Yatay �izgi etiketi (HR), 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 bunu CSS kullanarak şekillendirmek m�mk�nd�r.

Read More/Less

Yatay �izgi etiketi, yatay kural, yatay �izgi, yatay d�z �izgi gibi anlamları olan 'horizontal rule' terimini oluşturan kelimelerin ilk harfleri olan <hr> ile temsil edilen html �gesidir. <hr> kendiliğinden kapanan bir etikettir ve bitiş etiketi gerektirmez.

Yatay �izgi �rnekleri:

Normal (Basic) <hr> �izgisi:
⇩

* * *

CSS ile şekillendirilmiş bir <hr> �izgisi

<hr style="border:4px solid #0000ff;"/>

⇩

* * *

�izgi uzunluğu ve �izgi kalınlığı CSS ile şekillendirilmiş bir <hr> �izgisi

<hr style="width:60%;border:15px solid #0000ff;"/>

⇩

* * * ⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

HTML_tag / K�k element etiketi

❇ <html> etiketi, bir HTML belgesinin k�k elementidir, <html> etiketi, <!DOCTYPE> hari� t�m HTML �gelerini kapsayan web i�eriği ve yapısı i�in ana �er�evedir. HTML, bir web sayfasının yapısını oluşturmak ve tasarlamak i�in kullanılan standart dildir. Web sitesinin i�eriğini d�zenleme, yapısını tanımlama ve farklı �ğeler arasındaki ilişkileri kurmaya olanak tanır. 

Read More/Less

<html> etiketi, T�rk�e karşılığı "K�pr� metni işaretleme dili" olan HyperText 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, web belgelerini oluşturan HTML �geleri konumlarına g�re aşağıda listelenmiştir, bu �ğeler tarayıcıya i�eriğin nasıl g�r�nt�leneceğini s�yler.

HTML ELEMENT LIST T�m HTML etiketleri şekildeki gibi k��kt�r (<) ve b�y�kt�r (>) işaretleriyle oluşturulacak < > parantezin i�ine alınmalıdır. HTML etiketleri �� b�l�mden oluşmalıdır; a�ılış / i�erik ve kapanış (<tag>contents</tag>), bu kuralın ifade ettiği gibi <br> ve <hr> gibi bazı etiketler hari� her HTML etiketi bir kapanış etiketi ile bitirilmelidir.
Belge k�k �gesi:
<HTML>
Meta veri �geleri:
<base>, <head>, <link>, <meta>, <style>, <title>.
İ�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>.
Temel (basic) HTML belgesi �rneği

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document </title>
  <link >
</head>
<body>
Başlık :   <h1> …… </h1> 
Paragraflar :
<p> Paragraph 1 content text, article, image or anything... </p>
<p> Paragraph 2 content text, article, image or anything... </p>
<p> Paragraph 3 content text, article, image or anything… </p> 
Resimler (image) : <img src="//img.webme.com/pic/w/wovenstory/kid_mohair.jpg"/>
Listeler : 
<ul>
<li> First Article… </li>
<li> Second article… </li>
<li> Third Article… </li>
<li> fourth article… </li>
</ul>
formlar :
    <form action="/submit" method="POST">
    <h2>User Information </h2>
    <label for="fname"> First Name </label>
    <input type="text"id="fname"name="fname"placeholder="Enter your first name" required>
     <label for="lname"> Last Name </label>
     <input type="text"id="lname"name="lname"placeholder="Enter your last name" required>
     <input type="submit"value="Submit">
 </form>     
</body>
  </html>

Belgenin <head> etiketleri arasında yer alacak �geler;
<meta>, HTML belgesi hakkında meta bilgisini i�erir.
<title>, Tarayıcı sekmesinde g�r�necek sayfa başlığını tanımlar.
<link>, HTML belgesi ile stil sayfası, favicon (site ikonu-simgesi), i�e aktarma vb. gibi harici kaynaklar arasındaki bağlantıyı tanımlayan bağlantıları işaret eder
Belgenin <body> etiketleri arasında yer alacak �geler;
Body etiketleri arası, 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.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

i - ITALIC_tag / Eğik yazı etiketi

❇ Eğik yazı etiketi ( i ), bir konu i�inde ge�en Teknik terimler, �eviriler, Başka bir dilden deyimsel terimler, İfadeler, Kurgusal karakterlerin d�ş�nceleri gibi bazı terimleri vurgulamadan alternatif bir ses veya ruh haliyle tanımlamak i�in kullanılan bir sunum �gesidir. " i " etiketiyle sunulan terimler genellikle italik yani eğik yazı stilinde g�r�nt�lenir.

Read More/Less

Tarihsel olarak " i " etiketinin isim kaynağı "italic" kelimesidir. HTML'nin �nceki s�r�mlerinde, " i " �ğesi yalnızca metni italik olarak g�r�nt�lemek i�in kullanılan bir html �gesiydi, bu etiket artık tipografik g�r�n�mden ziyade Semantiği tanımlayan bir �gedir. tarayıcılar genellikle " i " �ğesinin i�eriğini italik t�rde g�r�nt�lemeye devam edecektir, ancak tanımı gereği artık bunu yapması gerekmediğinden metni italik t�rde g�r�nt�lemek i�in yazarlar CSS font-style �zelliğini kullanmalıdır.

Artık semantiği �n planına alan <i> etiketinin bazı vurgu etiketleriyle ilişkileri ele alındığında; " i " etiketi anlamsal anlamı g�z �n�nde bulundurmak şartıyla genel italik stil i�in kullanabilir, ama� belirli bir anlamsal �nemi olmayan bir metni vurgulamaksa <i> etiketi kullanılabilir ancak, italik metin belgenin yapısı a�ısından �nem taşıyorsa bunu vurgulamak i�in <em> etiketi kullanılmalıdır, ya da alıntılar i�in <cite> etiketi gibi daha anlamsal etiketler kullanmak daha uygun olacaktır.
Uygun etiketi kullanmak, HTML sayfasında hem g�rsel tutarlılığı hem de anlamlı bir yapıyı sağlar. �rneğin <i> ve <em> etiketlerinin her ikisi de metni italik yapabilirken, temel fark anlamsal anlamlarındadır. <i> etiketi tamamen sunumsaldır ve metnin stilistik nedenlerle italik olması gerektiğini belirtir. <em> etiketi ise g�rsel stilin yanısıra bir d�zeyde anlamsal anlam ekleyerek, eklenen metnin �nemini vurgular. Bu nedenle, metni g�rsel stil dışındaki nedenlerle vurgulama gereği i�in <em> �gesi daha uygun bir se�im olacaktır.
Benzer şekilde;
�nemi, ciddiyeti veya aciliyeti belirtmek i�in <strong>,
Alaka d�zeyini belirtmek i�in <Mark>.
Bir kitap, oyun veya şarkı gibi bir eserin adını işaretlemek i�in <cite>
Bir terimin tanımlayıcı �rneğini işaretlemek i�in <dfn> etiketlerinin kullanılması da uygun se�imlerdir.

Normal metin;
Tarihsel olarak <i> etiketinin isim kaynağı "italic" kelimesidir.

İtalik metin;
Tarihsel olarak <i> etiketinin isim kaynağı "italic" kelimesidir.

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

IFRAME_tag / Satır i�i �er�eve etiketi

❇ Satır i�i �er�eve etiketi(IFRAME), ge�erli HTML belgesinin i�ine harici web sitesi, video, harita, web reklamları gibi başka bir kaynaktan gelen i�eriğin yerleştirilip g�r�nt�lenmesini sağlayacak dikd�rtgen bir alanı tanımlakta kullanılan HTML �gesidir.

Read More/Less

HTML <iframe> etiketi, satır i�i �er�eve anlamına gelen Inline Frame'in kısaltmasıdır ve ge�erli belge veya web sayfasında dikd�rtgen bir alanı tanımlar.

Src:: Src niteliği; URL değeri ile G�m�lecek belgenin adresini belirtir.
Srcdoc:: Srcdoc niteliği; HTML code değeri ile İframe i�inde g�r�nt�lenecek HTML i�eriğini ayarlar, src niteliğini ge�ersiz kılarak, g�m�l� HTML'ye satır i�i erişim sağlar.
Name:: Name niteliği; text değeri ile G�m�l� iframe i�in hedeflenebilir bir ad sağlar.
Width:: Width niteliği; pixel değeri ile iframe genişliğini ayarlar. Varsayılan 300 pikseldir.
Height:: Height niteliği; pixel değeri ile iframe y�ksekliğini ayarlar. Varsayılan 150 pikseldir.
Allowfullscreen:: Allowfullscreen niteliği; true or false değerleri ile İframe'in tam ekran modunu etkinleştirip etkinleştiremeyeceğini belirtir.
Allowpaymentrequest:: Allowpaymentrequest niteliği; true or false değerleri ile �deme Talebi API'sini �ağırmak i�in �apraz kaynaklı bir iframe'e izin verir.
Loading:: Loading niteliği; eager or lazy değerleri ile Tarayıcının iframe �ğesini ne zaman y�kleyeceğini belirler.
Sandbox:: Sandbox niteliği; • allow-forms, • allow-pointer-lock, • allow-popups, • allow-same-origin, • allow-scripts ve • allow-top-navigation değerleri ile G�m�l� i�eriğe uygulanan kısıtlamaları kontrol edip kısıtlamaları uygular.
Allow:: Allow niteliği; Feature policy string değeri ile iframe i�in bir İzin Politikası belirtir.
Referrerpolicy:: Referrerpolicy Niteliği; • no-referrer, • no-referrer-when-downgrade, • origin, • origin-when-cross-origin, • same-origin, • strict-origin-when-cross-origin ve • unsafe-url değerleri ile İframe'i getirmek i�in y�nlendirici bilgilerini kontrol eder.

Harici bir kaynaktan website i�eriğinin ge�erli sayfadaki s�zdizimi ve g�r�nt�s� şuna benzer;

<iframe id="wiki-iframe"src="https://www.wikipedia.org/"width="600px"height="300px"> </iframe>

Harici bir kaynaktan haritalar i�eriğinin ge�erli sayfadaki s�zdizimi ve g�r�nt�s� şuna benzer;

<iframe id="maps-iframe"src=" https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling "width="600px"height="300px"> </iframe>

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

IMG_tag / Resim etiketi

❇ Resim etiketi(IMG), web sayfalarına resim eklemek i�in kullanılan bir HTML �gesidir, Bu işlem resmin kendisini doğrudan belgeye eklenmez, tarayıcı <img> etiketinde belirtilen kaynaktan bir HTML resmi ekler.

Read More/Less

img etiketi HTML’nin satır i�i (inline) etiketlerindendir. <img> etiketi boş bir etikettir, bu da kapanış etiketine ihtiyacı olmadığı anlamına gelir. Hemen hemen t�m tarayıcılar tarafından desteklenen img etiketinin src, alt, height, width, ismap, usemap gibi �eşitli nitelikleri vardır. Ayrıca <a> etiketi i�ine yerleştirilen img etiketi ile bir g�rseli k�pr� metni yani tıklanabilir bir resim haline getirip herhangi bir sayfaya bağlantı verilebilir.

Html'de Resim etiketi, g�r�nt� veya resim gibi anlamları olan "image" kelimesinden kısaltılan <img> ile temsil edilir. img etiketi i�in src ve alt nitelikleri kullanılması zorunlu iki temel �zniteliktir. Burada src kaynak anlamına gelen source kelimesinin, alt ise alternatif metin anlamına gelen alternative text c�mlesinin kısaltmasıdır.

HTML img etiketinin bazı nitelikleri:

Attribute (�znitelik)	Value (Değer)	Description (Tanım)
src	URL	<src> (source) niteliği, g�r�nt�n�n kaynağını tanımlamak i�in kullanılan zorunlu bir niteliktir, g�r�nt�ye giden yolu tanımlar.
srcset	URL-list	<srcset> niteliği tek bir g�r�nt�n�n farklı boyutlardaki kullanıcı cihazlarına uyumu i�in g�rselin birden fazla boyutunu belirtmek i�in kullanılır.
alt	text	<alt> niteliği, yanlış adres, ağ sorunları vesaire gibi herhangi bir nedenle tarayıcının resimi g�steremediği durumlarda resmin <alt> niteliğine yerleştirilen resim i�in "alternatif metin" değeri kullanıcıları resim hakkında bilgilendirmek i�in kullanılan bir niteliktir.
crossorigin	anonymous & use-credentials	<crossorigin> niteliği ��nc� taraf web sitelerinden g�rsellerin i�e aktarılmasına yardımcı olur. Anonymous ve use-credentials g�r�nt�n�n CORS kullanılarak alınması gerekip gerekmediğini belirten değerleridir. anonymous kimlik bilgileri olmadan �apraz k�kenli bir istek yapıldığını ifade eder. use-credentials kimlik bilgileriyle �apraz k�kenli bir istek yapıldığını ifade eder.
width & height	pixels	Genişlik ve y�kseklik nitelikleri, g�r�nt� boyutlarını piksel veya y�zde(%) cinsinden belirlemek i�in kullanılır. Bunun i�in <img> etiketindeki genişlik ve y�kseklik niteliği kullanılabilir olsa da g�r�nt� boyutlarını ayarlamak i�in CSS stil niteliklerinin kullanılması �nerilmektedir.
sizes	sizes	<sizes> niteliği, Bu nitelik srcset niteliğiyle birlikte kullanılır. Tarayıcıya farklı koşullar altında hangi resim boyutunun kullanılacağını s�yler.
ismap	ismap	<ismap> niteliği, sunucu tarafında bir g�r�nt� haritası oluşturur, bir g�r�nt�n�n tıklanabilir alanlara sahip bir resim haritası olup olmadığını kontrol etmek i�in boolean niteliği olarak kullanılır. Boolean, yalnızca true (doğru) veya false (yanlış) değerini temsil edebilen mantıksal bir veri t�r�d�r .
usemap	#mapname	<usemap> niteliği, istemci tarafında bir g�r�nt� haritası oluşturur, g�r�nt�y�, <map> ve <area> etiketleriyle birlikte kullanılan istemci tarafı g�r�nt� haritası olarak tanımlar.
loading	eager or lazy	<loading> niteliği, eager ve lazy değerleri ile tarayıcıya g�r�nt�n�n ne zaman y�kleneceğini s�yler. Loading niteliğine eager değeri tanımlandığında tarayıcıya g�r�nt�y� hemen y�klemesini s�yler. Lazy değeri tanımlandığında ise tarayıcıya belirli koşullar karşılanana kadar g�r�nt� y�klemeyi ertelemesini s�yler.
longdesc	URL	Specifies the long description of the attached image.
referrerpolicy	no-referrer or no-referrer-when-downgrade origin or origin-when-cross-origin or unsafe-url	Specifies the referrer information.

Bir web sayfasına resim eklemenin iki yolu vardır;
a> Bir internet kaynağından resim eklemek i�in, g�rseli i�eren websitesi ve resim dosyasının tam yolunu sağlamak.
b> Mevcut web kaynağından resim eklemek i�in mevcut resim dosyasının konumuna g�re dosya yolunu sağlamak.

T�m tarayıcıla tarafından desteklenen En yaygın g�r�nt� dosyası t�rleri

Kısaltma	Dosya formatı	Dosya Uzantısı
JPEG	Joint Photographic Expert Group image (Ortak Fotoğraf Uzmanları Grubu g�r�nt�s�)	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics (Taşınabilir Ağ Grafikleri.)	.png
GIF	Graphics Interchange Format (Grafik Değişim Bi�imi)	.gif
SVG	Scalable Vector Graphics (�l�eklenebilir Vekt�r Grafikleri)	.svg
APNG	Animated Portable Network Graphics (Animasyonlu Taşınabilir Ağ Grafikleri)	.apng
ICO	Microsoft Icon (Microsoft Simgesi)	.ico, .cur

İmage <img> etiketi g�rselleri �eşitli format ve fonksiyonlarda ekleyebilmek i�in bazı nitelik ve değerleri kullanır. İmg i�in zorunlu nitelikler olan src ve alt nitelikleri başta olmak �zere width, height, srcset, crossorigin,ismap, usemap, loading, referrerpolicy gibi daha bir dizi nitelik ve �zelliği kullanır. .
Basit bir <img> etiketinin s�zdizimi şuna benzer:

<img src="https://example.com/image.jpg"alt="Example image"/>

HTML img etiketinin kullandığı bazı nitelikler:

SRC

Source / <src> niteliği, g�r�nt�ye giden yolu tanımlar. Src niteliği URL değeri vasıtasıyla g�r�nt� kaynağını tanımlamak i�in kullanılan zorunlu bir niteliktir. Bir g�rselin yolunu i�eren <src> niteliğinin URL değeri g�receli veya mutlak olarak kullanılabilir, �rneğin yerel diske depolanmış resimlerden bir tanesini bu sayfaya yerleştirmek i�in https ve www olmadan sadece resmin bulunduğu dosyanın yolunu işleyerek g�receli bir URL ile resim eklenebilir (img_src-1). Harici bir kaynaktan bir resim bu sayfaya yerleştirilmek gerektiğinde mutlak URL yani tam adres işlenmelidir (img_src-2).

img_src-1: _ Relative URL (G�receli URL)

<img src="//img.webme.com/pic/w/wovenstory/angora_rabbit.jpg"/>

img_src-2: _ Absolute URL (Mutlak URL)

<img src =" https://upload.wikimedia.org/wikipedia/commons/6/68/CottonPlant.JPG"/>

ALT

Alternative text / <alt> niteliği, yanlış adres, ağ sorunları vesaire gibi herhangi bir nedenle tarayıcının resimi g�steremediği durumlarda resmin <alt> niteliğine yerleştirilen resim i�in "alternatif metin" değeri kullanıcıları resim hakkında bilgilendirmek i�in kullanılan bir niteliktir.

img_alt (Alternatif metin)

<img src="//img.webme.com/pic/w/wovenstory/angora_rabbit.jpg"alt="Angora Rabbit"/>

Bu �rnekte resim adresi bilerek hatalı işlenmiştir bu nedenle tarayıcı resmi g�steremeyecek ve �stte g�r�ld�ğ� gibi boş bir resim �er�evesi i�inde sadece resmin alternatif metnini g�sterecektir.

SRCSET

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇t Xxx etiketi(XXX),i

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.

XXX_tag / Xxx etiketi

❇ Xxx etiketi(XXX),

Read More/Less

⛔ End of this topic.by WovenStory ✍️ N.Yıldırım.