diff options
Diffstat (limited to 'files/tr/web')
44 files changed, 1569 insertions, 2207 deletions
diff --git a/files/tr/web/api/tuval_arabirimi/index.html b/files/tr/web/api/canvas_api/index.html index f6a9a2f8d7..f6a9a2f8d7 100644 --- a/files/tr/web/api/tuval_arabirimi/index.html +++ b/files/tr/web/api/canvas_api/index.html diff --git a/files/tr/web/css/sınıf_seçicileri/index.html b/files/tr/web/css/class_selectors/index.html index d735ceed7c..d735ceed7c 100644 --- a/files/tr/web/css/sınıf_seçicileri/index.html +++ b/files/tr/web/css/class_selectors/index.html diff --git a/files/tr/web/css/box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 38245c8af4..38245c8af4 100644 --- a/files/tr/web/css/box_model/index.html +++ b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html diff --git a/files/tr/web/guide/css/sayaçlar/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html index d31a159a27..d31a159a27 100644 --- a/files/tr/web/guide/css/sayaçlar/index.html +++ b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html diff --git a/files/tr/web/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a7f89d5c85 --- /dev/null +++ b/files/tr/web/css/css_selectors/index.html @@ -0,0 +1,232 @@ +--- +title: CSS seçiciler +slug: Öğren/CSS/CSS_yapi_taslari/Selectors +tags: + - Başlangıç + - CSS + - Nitelik + - Sozde + - id + - oğrenin + - seçiciler + - sınıf +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> + </tr> + </tbody> +</table> + +<h2 id="Seçici_nedir">Seçici nedir?</h2> + +<p>Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin <em>konusu</em> olarak anılır.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici <code>h1</code> veya sınıf seçici <code>.special</code> gibi.</p> + +<p>CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler spesifikasyonunda</a> tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.</p> + +<h2 id="Seçici_listeleri">Seçici listeleri</h2> + +<p>Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi, bir <em>seçici listesinde</em> birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan <code>h1</code> eleman seçicim ve <code>.special</code> sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> + +<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> şekillendirmesi hala uygulanacaktır.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de <code>h1</code> elemanı biçimlendirilmez</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Seçici_türleri">Seçici türleri</h2> + +<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..</p> + +<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> + +<p>Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <code><h1></code>:</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>Ayrıca bir sınıfı hedefleyen seçicileri de içerir <code>class</code>:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>veya bir kimlik <code>id</code>:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Nitelik_seçiciler">Nitelik seçiciler</h3> + +<p>Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Sözde_sınıflar_ve_sözde_elemanlar">Sözde sınıflar ve sözde elemanlar</h3> + +<p>Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin <code>:hover</code> sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin <code>::first-line</code> her zaman bir elemanın içindeki ilk metin satırını seçer (<code><p></code> şağıdaki durumda, sanki ilk satırın etrafı <code><span></code> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Birleştiriciler">Birleştiriciler</h3> + +<p>Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <code><article></code> eleman etiketi (<code>></code>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> + +<p>Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> makalesine devam ederek yolculuğunuza başlayabilirsiniz.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Seçicilerin_referans_tablosu">Seçicilerin referans tablosu</h2> + +<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Örnek</th> + <th scope="col">CSS makaleleri</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/tr/docs/Web/CSS/Type_selectors">Tür seçici</a></td> + <td><code>h1 { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> + <td><code>* { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Class_selectors">Sınıf seçici</a></td> + <td><code>.box { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf seçici</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> + <td><code>#unique { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçici</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçici</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Pseudo-elements">Sözde elelman seçici</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde eleman</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Descendant_combinator">Torun birleştiricisi</a></td> + <td><code>article p</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Child_combinator">Çocuk birleştiricisi</a></td> + <td><code>article > p</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştiricisi</a></td> + <td><code>h1 + p</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> + </tr> + <tr> + <td><a href="/tr/docs/Web/CSS/General_sibling_combinator">Genel kardeş birleştiricisi</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> + </tr> + </tbody> +</table> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> +</ol> diff --git a/files/tr/web/css/marjin/index.html b/files/tr/web/css/margin/index.html index 356c738f48..356c738f48 100644 --- a/files/tr/web/css/marjin/index.html +++ b/files/tr/web/css/margin/index.html diff --git a/files/tr/web/css/tip_secicileri/index.html b/files/tr/web/css/type_selectors/index.html index f24f899681..f24f899681 100644 --- a/files/tr/web/css/tip_secicileri/index.html +++ b/files/tr/web/css/type_selectors/index.html diff --git a/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index 3e3d882bdf..0000000000 --- a/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Cascading and inheritance -slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -tags: - - Başlarken - - CSS - - Kılavuz - - Rehber - - Web - - Yeni başlayanlar için -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}<span class="seoSummary">This is the fourth section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial; it outlines how stylesheets interact in a cascade, and how elements inherit style from their parents. You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.</span></p> - -<h2 class="clearLeft" id="Basamaklama(Cascading)_ve_kalıtım(Inheritance)">Basamaklama(Cascading) ve kalıtım(Inheritance)</h2> - -<p>Bir elementin son stili kompleks bir şekilde birbiriyle etkileşen bir çok yerde belirtilebilir. Bu kompleks etkileşim CSS'e güçlü bir yapı sağlar fakat; bir çok yerde bulunan stiller bazen karışabilir, hata ayıklamayı zorlaştırabilir. Bu duruma engel olmak için CSS'in öncelik sırası vardır. Bu öncelik kurallarını tarayıcı sıra ile uygular ve elementin stilini verir.</p> - -<p>Basamaklama ile gelen stillerin üç ana kaynağı vardır :</p> - -<ul> - <li>Tarayıcının markup dili için geçerli default stili.</li> - <li>Okuyucunun belirlediği stiller.</li> - <li>Belgenin yazarı tarafından belirtilen stiller. Bu stiller üç yerde bulunabilir; - <ul> - <li>Harici bir dosyada (örneğin: .../styles/style.css) ; bu kurs öncelikle bu yöntem üzerinde durmaktadır.</li> - <li>Belgenin başlangıcında (markup dilinde bu yöntem için en uygun yer <head> elementi içidir.) Bu yöntem sadece uygulanan belge için kullanılabilir.</li> - <li>Elementin içinde (markup dilinde elementlerin başlama tag'lerinin içine o elementin stili eklenebilir.); bu yöntem bakım ve test için kullanılabilir.</li> - </ul> - </li> -</ul> - -<p>Okuyucunun belirlediği stil, tarayıcıda default bulunan stili değiştirebilir. Ardından belgenin yaratıcısının stili biraz daha değişiklik yapar. Bu kursta, siz belgenin yazarısınız. Sadece belgenin yazarının stilleri üzerinde çalışacağız.</p> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<p>Bu kurstaki belgeleri okuyorken, stillerin bir kısmı, tarayıcınızın HTML için belirlediğini default stillerden gelir.</p> - -<p>Bir kısmı, sizin tarafınızdan düzenlenmiş tarayıcı stil ayarlarından gelir. Firefox'ta, ayarlar Tercihler kısmından veya tarayıcı dosyaları içinde bulunan <code>userContent.css </code>stil dosyasından düzenlenebilir.</p> - -<p>Stillerin çoğu kısmı ise, server'da bulunan stil belgesinden gelmektedir.</p> -</div> - -<p>Örnek belgenizi tarayıcınızda açtığınızda, {{ HTMLElement("strong") }} elementleri kalın görünecektir. Bu tarayıcınızın HTML için belirttiği stilden gelir.</p> - -<p>{{ HTMLElement("strong") }} elementleri kırmızıdır. Bu stil sizin belirttiğiniz stildir.</p> - -<p>Ayrıca {{ HTMLElement("strong") }} elementleri {{HTMLElement("p") }} elementinin stillerini devralırlar. Aynı şekilde {{ HTMLElement("p") }} elementi de {{ HTMLElement("body") }} elementinin stillerinin varisidir.</p> - -<p>Yazarın stilleri önceliğe sahiptir, ardından okuyucunun stilleri ve sonra tarayıcının defaul stilleri gelir.</p> - -<p>Kalıtsal stillemede, en ufak elementin stili ( mesela {{ HTMLElement("strong") }} elementi ) ebeveyni olan elementin stillerinden daha önceliklidir.</p> - -<p>Stilin uygulama sadece önceliğe bağlı değildir. Yani en ufak elementin önceliği en fazla olduğunda sadece onun stili uygulanmaz. Bir sonraki sayfada daha ayrıntılı açıklanacaktır.</p> - -<div class="tuto_details"> -<p><strong>Detay</strong></p> - -<p>CSS, <code>!important</code> kelimesi yardımıyla okuyucuya stillerinde yazardan üstünlük sağlayabilir.</p> - -<p>Bunun belgenin yazarı için anlamı, belgeyi okuyucunun nasıl gördüğünün kesin olarak bilinemeyeceğidir.</p> - -<p>Eğer basamaklama ve kalıtım ile ilgili daha fazla detay öğenmek istiyorsanız, CSS Spesifikasyonu'ndaki <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> belgesine göz atın.</p> -</div> - -<h2 id="Çalışma_Kalıtımın_kullanımı">Çalışma: Kalıtımın kullanımı</h2> - -<ol> - <li>Editörünüzde örnek CSS dosyanızı açın.</li> - <li>Aşağıdaki satırı kopyalayın ve yapıştırın. Orada zaten bulunan satırın altına veya üstüne yapıştırmanızın hiç bir önemi yoktur. Fakat, en üste eklemek biraz daha mantıklıdır, çünkü {{ HTMLElement("p") }} elementi {{ HTMLElement("strong") }} elementinin ebeveynidir, üstüdür: - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Tarayıcınızı yenileyin ve örnek belgenizdeki değişikliği görün. <code>text-decoration: underline</code> değeri paragraftaki tüm harfleri, baş harfler dahil, etkileyecektir.{{ HTMLElement("strong") }} elementleri, altçizgi stilini miras olarak, ebeveyni olan {{ HTMLElement("p") }} elementinden almıştır. Fakat {{ HTMLElement("strong") }} elementi kırmızı olarak belirtilmişti. Kırmızı onun kendi stilidir; bu yüzden kırmızı, ebeveyni olan {{ HTMLElement("p") }}'nin renk stili maviden önceliklidir.</li> -</ol> - -<h2 id="Before" name="Before">Öncesi</h2> - -<h3 id="HTML_içeriği">HTML içeriği</h3> - -<pre class="brush: html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h3 id="CSS_içeriği">CSS içeriği</h3> - -<pre class="brush: css">strong {color:red} -</pre> - -<p>{{ EmbedLiveSample('Before') }}</p> - -<h2 id="After" name="After">Sonrası</h2> - -<h3 id="HTML_içeriği_2">HTML içeriği</h3> - -<pre class="brush: html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p></pre> - -<h3 id="CSS_içeriği_2">CSS içeriği</h3> - -<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline} -strong {color:red}</pre> - -<p>{{ EmbedLiveSample('After') }}</p> - -<p> </p> - -<div class="tuto_example"> -<div class="tuto_type">Ödev</div> -Şablonunuzu sadece kırmızı harflerin altıçizili olması için değiştirin: - -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Ödevin çözümünü gör.</a></div> - -<p> </p> - -<h2 id="Bir_sonraki">Bir sonraki?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Şablonunuzda <p> ve <strong> tag'leri için stil belirlerken direk olarak belgenizde bulunan tag isimlerine stiller atadık. Bir sonraki bölümde, stilleri daha <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seçici yollar</a> ile nasıl belirtebileceğinizi öğreneceksiniz.</p> diff --git a/files/tr/web/guide/css/getting_started/css_nedir/index.html b/files/tr/web/guide/css/getting_started/css_nedir/index.html deleted file mode 100644 index 680ab90b30..0000000000 --- a/files/tr/web/guide/css/getting_started/css_nedir/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CSS nedir? -slug: Web/Guide/CSS/Getting_started/css_nedir -tags: - - Başlangıç - - Başlarken - - CSS - - Yeni başlayanlar için - - kitapçık - - Örnek -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<div>Css {{CSSTutorialTOC}}</div> - -<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p> - -<h2 class="clearLeft" id="Bilgi_CSS_nedir">Bilgi: CSS nedir</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), belgelerin kullanıcılara nasıl sunulacağını özelleştiren bir dildir.</p> - -<p><em>Belge</em>, bir imleme(<em>markup) </em>dili kullanılarak yapılandırılmış bilgi yığınıdır.</p> - -<p>Belgenin kullanıcıya sunuluşu, ziyaretçileriniz için kullanışlı bir biçime çevrilmesi demektir. Tarayıcılar, Firefox, Chrome ya da Internet Explorer gibi, belgelerin görsel olarak sunulması için tasarlanmıştır, örneğin, bilgisayar ekranında, yansıtımda(projektör) ya da yazıcıda.</p> - -<div class="tuto_example"> -<p><strong>Örnekler</strong></p> - -<ul> - <li>Bir web sayfası okuduğunuz bir belge gibidir. Web sayfasında gördüğünüz bilgiler, genellikle bir imleme<em> </em>dili olan HTML(Hyper Text Markup Language) ile yapılandırılmıştır.</li> - <li>Bir uygulamadaki etkileşimli pencereler de aslında bir tür belgelerdir. Bu tür pencereler bir imleme diliyle (ör: XUL gibi) yapılandırılmış olabilir. Bunu bazı Mozilla uygulamalarında bulabilirsiniz. </li> -</ul> -</div> - -<p>Bu eğiticide, kutular daha fazla ayrıntıyı kapsar, yukarıda gördüğünüz daha ayrıntılı bilgi sunan kutu gibi. Onları gördüğünüzde okuyun, bağlantıları edin izleyin daha sonra okumak için atlayın.</p> - -<div class="tuto_details"> -<div class="tuto_type"><strong>Daha fazla ayrıntı</strong></div> - -<p>Bir belge, dosya ile aynı değildir. Bir belgeyi ancak bir dosyanın içerisinde saklayabilirsiniz.</p> - -<p>Şu an okuduğunuz belge bir dosyadadır. Tarayıcınız bu sayfayı çağırdığında, sunucu veritabanını sorgular ve sayfanın bölümlerini dosyalardan toplayarak belgeyi hazırlar. Aynı biçimde, bu öğreticide dosyaların içerisinde saklanan belgelerle çalışacaksınız.</p> - -<p>Bu sitenin diğer sayfalarında imleme<em> </em>dilleri hakkında bilgi bulabilirsiniz;</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> - <td>web sayfaları için</td> - </tr> - <tr> - <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> - <td>belgeleri genel olarak yapılandırma için</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> - <td>Çizgeler için</td> - </tr> - <tr> - <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> - <td>Mozilla'da kullanıcı arayüzleri için</td> - </tr> - </tbody> -</table> - -<p>Bu eğiticinin ikinci bölümünde bu imleme<em> </em>dillerini göreceksiniz.</p> -</div> - -<div class="tuto_details"><strong>Daha fazla ayrıntı</strong> - -<p>Resmi CSS terimler dizgesinde, belgenin kullanıcıya sunulduğu bir program, kullanıcı aracısı (User Agent-UA) olarak isimlendirilir. Bir tarayıcı, bir çeşit kullanıcı aracısıdır. CSS yalnızca tarayıcılar için veya görünüm sunumu için değildir fakat bu eğiticinin birinci bölümünde, yalnızca tarayıcı için olan CSS ile çalışacaksınız.</p> - -<p>CSS'e ilişkin resmi terimleri için, World Wide Web Consortium (W3C) dan sağlanan CSS şartnamelerinin <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">deyişlerine</a> göz atın.W3C web için açık standartları hazırlayan uluslararası bir topluluktur.</p> -</div> - -<h2 id="Çalışma_Bir_belge_yaratmak">Çalışma: Bir belge yaratmak</h2> - -<ol> - <li>Bilgisayarınızda bir dizin oluşturun ve alıştırmalarınızı düzenleyin.</li> - <li>Yazı düzenleyicinizi açın.</li> - <li>Aşağıda gördüğünüz HTML kodlarını kopyalayıp yapıştırın. <code>belge1.html </code>adı ile kaydedin. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>örnek belge</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html></pre> - - <p>{{ LiveSampleLink('Action_Creating_a_document', 'Yukarıdaki Örneği Görüntüle') }}</p> - </li> - <li>Tarayıcınızda kaydettiğiniz belgeyi açın. - <p>Tarayıcıda, aşağıdaki gibi ilk harfleri kalın olan yazıyı göreceksiniz;</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>Eğer yukarıdakinin aynısını göremiyorsanız, bu tarayıcı ayarlarından kaynaklıdır. Yazı yüzleri, renkler ve boşluklar farklı olabilir. Bu gibi farklılıklar önemli değildir.</p> - </li> -</ol> - -<h2 id="Bir_sonraki_adım">Bir sonraki adım?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Belgenizde henüz CSS kullanmadınız. <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">Bir sonraki bölüm</a>'de, belgenizde CSS kullanacaksınız.</p> diff --git a/files/tr/web/guide/css/getting_started/how_css_works/index.html b/files/tr/web/guide/css/getting_started/how_css_works/index.html deleted file mode 100644 index 8fbddac78d..0000000000 --- a/files/tr/web/guide/css/getting_started/how_css_works/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: How CSS works -slug: Web/Guide/CSS/Getting_started/How_CSS_works -tags: - - Başlarken - - CSS - - Kılavuz - - Web - - Yeni başlayan - - Yeni başlayanlar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }}<span class="seoSummary">This third section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explains how CSS works in your browser and the purpose of the Document Object Model (DOM). You'll also learn how to analyze your sample document.</span></p> - -<h2 class="clearLeft" id="Bilgi_CSS_nasıl_çalışır">Bilgi: CSS nasıl çalışır</h2> - -<p>Bir tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ve stil bilgileri birleşir. Bu, iki adımda gerçekleşir:</p> - -<ol> - <li>Tarayıcı markup (HTML gibi) dilini ve <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model) içerisindeki CSS'i dönüştürür. DOM bilgisayar hafızasındaki belgeyi temsil eder. Belge içeriği ile stili kombine olur.</li> - <li>Tarayıcı DOM içeriğini gösterir<em>.</em></li> -</ol> - -<p>Bir markup dili belge yapısını oluşturmak için elementleri kullanır. Elementler < > arasında belirtilir. Bir çok elementin başlama ve bitiş etiketi vardır. Başlama etiketi için, işaretlerin arasına <elementinadı>, bitiş için </elementinadı> şeklinde kullanılır.Şu şekildedir;</p> - -<p><<em>elementinismi></em></p> - -<p>Bu elementte kullanacağınız içerik bu ikisi arasında yer almalıdır.</p> - -<p><em></elementinismi></em></p> - -<p>Depending on the markup language, some elements have only a start tag, or a single tag where the '<code>/</code>' comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.</p> - -<p>DOM ağaçsı bir yapıya sahiptir. Markup dili içerisindeki her element, öznitelik ve text, bu ağaçsı yapı içerisinde bir düğüm noktasıdır. Düğümler diğer DOM düğümleri ile ilişki içindedir. Düğümler arasına kalıtsallığa benzeyen bir durum vardır. Kimi element üsttedir (parent), kimi element ise alttadır (sibling). Bir aile ağacı gibi düşünülebilir.</p> - -<p>DOM'u anlamak size CSS'te kolaylık sağlar, çünkü DOM, CSS'inizin ve belge içeriğinizin birleştiği yerdedir.</p> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<div class="tuto_type"> </div> -Örnek belgenizde, Başlama <p> ve onun bitişi </p> kullanılmak üzerei bir alan (container) yaratır: - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<p> </p> - -<p>{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> - -<p>DOM'da, aşağıda, P'ye karşılık gelen düğüm bir ebeveyndir. Onun çocukları ise STRONG düğümleri ve text düğümleridir.STRONG düğümü ise, örnekte gördüğünüz kırmızı harflerin ebeveynidir. Kırmızı harfler kardeştir.Aşağıda bu yapı gösterilmiştir;</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Çalışma_DOM'u_incelemek">Çalışma: DOM'u incelemek</h2> - -<h3 id="DOM_denetçisi">DOM denetçisi</h3> - -<p>DOM'u incelemek için, özel bir yazılıma ihtiyacınız var. Mozilla'nın <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) eklentisini kullanabilirsiniz. Eklenti ufak bir kurulum gerektirir. Aşağıda detaylıdır;</p> - -<ol> - <li>Örnek belgenizi Mozilla tarayıcısını kullanarak açın.</li> - <li>Tarayıcınızın menü kısmından, <strong>Araçlar > DOM Denetçisi</strong>, ya da <strong>Araçlar > Web Geliştirme > DOM Denetçisi</strong>. - <div class="tuto_details"> - <div class="tuto_type">Daha fazla detay</div> - - <p>Mozilla'nızda DOMi yoksa <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">eklentiler sitesinden yükleyin</a> ve bu öğreticiye geri dönün.</p> - - <p>DOMi yüklemek istemiyorsanız veya Mozilla'dan farklı bir tarayıcı kullanıyorsanız..............</p> - </div> - </li> - <li>In DOMi, expand your document's nodes by clicking on their arrows. - <p><strong>Note: </strong> Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.</p> - - <p>Part of the result might look like this, depending on which nodes you have expanded:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>When you select any node, you can use DOMi's right-hand pane to find out more about it. For example, when you select a text node, DOMi shows you the text in the right-hand pane.</p> - - <p>When you select an element node, DOMi analyzes it and provides a huge amount of information in its right-hand pane. Style information is just part of the information it provides.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Challenge</div> - -<p>In DOMi, click on a <small>STRONG</small> node.</p> - -<p>Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h3 id="Using_Web_X-Ray_Goggles">Using Web X-Ray Goggles</h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>shows less information than DOM Inspector, but is simpler to install and use.</p> - -<ol> - <li>Go to the home page for <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li>Drag the bookmarklet link in that page to your browser toolbar.</li> - <li>Open your sample HTML document.</li> - <li>Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.</li> - <li>Move your mouse pointer around over your document to see the elements in the document.</li> -</ol> - -<h2 id="Sonra">Sonra?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p> diff --git a/files/tr/web/guide/css/getting_started/index.html b/files/tr/web/guide/css/getting_started/index.html deleted file mode 100644 index a299f6cb69..0000000000 --- a/files/tr/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: CSS'e başlarken -slug: Web/Guide/CSS/Getting_started -tags: - - CSS - - 'CSS:Başlarken' - - Kitap - - Kılavuz - - Rehber - - Temel CSS Eğitimi - - Web - - Yeni başlayan - - Yeni başlayanlar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -<p><span class="seoSummary">Bu eğitimde <a href="/tr/docs/Web/Guide/CSS">Cascading Style Sheets</a> (CSS) 'in söz dizimi ve dilin ana özellikleri ile tanışacaksınız. CSS kullanılarak, tıpkı bir web sayfası gibi, bir belgenin görünümü değiştirilebilir. Bu eğitici size kendi bilgisayarınızda deneyebileceğiniz ve CSS'in günümüz tarayıcılarındaki özellik ve etkilerini görebileceğiniz örnekler sunacaktır.</span></p> - -<p>Bu eğitici CSS'e yeni başlayanlar için bir kılavuz niteliğindedir. Eğer daha fazla deneyiminiz varsa, CSS <a href="/tr/docs/Web/Guide/CSS">anasayfasında </a>daha kapsamlı kaynaklar mevcuttur.</p> - -<nav class="fancyTOC"><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS Nedir?</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">CSS'in Kullanım Amaçları</a><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS Çalışma Mantığı</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Basamaklama ve Kalıtım</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Seçiciler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Kod Okunulabilirliği</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Yazı Biçemleri</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Renkler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">İçerik</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Dizelgeler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Kutular</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Belge Kalıbı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tablo Yapısı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Ortam</a></nav> - -<h2 id="Başlarken_neler_gerekli">Başlarken neler gerekli?</h2> - -<ul> - <li>Bir yazı düzenleyici</li> - <li>Günümüz tarayıcılarından biri</li> - <li>Düzenleyici ve tarayıcının kullanımı için birazcık deneyim</li> -</ul> - -<p>Alıştırmalar öğrenmenize yardımcı olmak içindir ancak bütünüyle bir gereksinim değil. Öğrenmek için yalnızca okuyabilir ve görsellere bakabilirsiniz.</p> - -<h2 id="Eğitici_nasıl_kullanılır">Eğitici nasıl kullanılır</h2> - -<p>Bu eğiticiyi kullanmak için, sayfaları <strong>dikkatlice</strong> ve <strong>sırasıyla</strong> okuyun. Eğer bir sayfayı atlarsanız, sonraki sayfaları anlamanız zorlaşabilir.</p> - -<h3 id="Bölüm_I_CSS'in_Temelleri">Bölüm I: CSS'in Temelleri</h3> - -<p>CSS'in nasıl çalıştığını kavrayabilmek için <em>bilgi </em>bölümünü kullanın. CSS'i kendi bilgisayarınızda kullanmayı denemek için <em>çalışma </em>bölümünü deneyin.</p> - -<p>Anladığınızı sınamak için, her sayfanın sonundaki alıştırmayı yapın. Alıştırmaların çözümleri, alıştırmanın altındaki bağlantıdadır, gerek gördükçe bakabilirsiniz.</p> - -<h3 id="Bölüm_II_CSS'in_Kapsamı">Bölüm II: CSS'in Kapsamı</h3> - -<p>Eğiticinin ikinci bölümü, CSS'in diğer web bileşenleriyle ve Mozilla teknolojileriyle olan kapsamını gösterir. Örnekler sağlar.</p> - -<ol> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG çizgeleri</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML veri</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bağlamaları</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL kullanıcı arayüzleri</a></li> -</ol> diff --git a/files/tr/web/guide/css/getting_started/why_use_css/index.html b/files/tr/web/guide/css/getting_started/why_use_css/index.html deleted file mode 100644 index fa1429e2f9..0000000000 --- a/files/tr/web/guide/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Neden CSS Kullanılır -slug: Web/Guide/CSS/Getting_started/Why_use_CSS -tags: - - CSS - - 'CSS:Başlarken' - - Kılavuz - - Web - - Yeni başlayan - - Yeni başlayanlar - - Örnek -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> - -<p>{{ previousPage("/tr/docs/Web/Guide/CSS/Getting_Started/CSS_Nedir", "CSS Nedir?") }}<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Başlangıç</a> yönergesindeki bu bölüm CSS ve HTML belgeleri arasındaki ilişkiyi anlatır. İlk bölümde yarattığınız belgeye biçim eklemeyi, alıştırmayla öğreneceksiniz.</span></p> - -<h2 class="clearLeft" id="Bilgi_Neden_CSS_kullanılır">Bilgi: Neden CSS kullanılır?</h2> - -<p>Belgenizin tasarım, yerleşim ve görünüm ile ilgili çeşitlerini içeren biçim öğelerini, farklı ekran boyutlarında ve farklı aygıtlarda tanımlamak için CSS kullanılır. CSS kodlarınızı<code> <head></code> içerisine gömebilirsiniz (gömülü iç CSS) veya biçimlerinizi tanımlayan bir biçim sayfasını farklı bir dizine ekleyip çağırabilirsiniz (dış CSS). Farklı bir belgede bulunan biçim kurallarını belgenize eklemek için, <code><head></code> ögesi içerisine bağlantı vermeniz gerekir.</p> - -<p>Dış biçim sayfalasının bir çok üstünlüğü vardır. Biçim sayfalarınızı HTML içeriğinizden farklı bir belgede saklamak:</p> - -<ul> - <li>Tekrarlanan kodların önlenmesine yardım eder.</li> - <li>Kolay onarım yapılmasını sağlar.</li> - <li>Tek bir yerden bütün biçimlerinizi denetlemenizi sağlar.</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Örnek</div> - -<p>h2 ögesi için oluşturduğunuz biçim kuralı ile, tanımladığınız bütün h2 ögerlerini tek bir yerden denetleyebilirsiniz.</p> - -<p>Kullanıcı bir ağ sayfasını görüntülediğinde, sayfanın içeriğiyle birllikte tanımlanmış biçim kuralları yüklenir.</p> - -<p>Kullanıcı bir ağ sayfasını yazdırdığında, tanımladığınız özel biçim kuralları ile sayfanın okunabilirliğini artırabilirsiniz.</p> -</div> - -<p>CSS ve HTML nasıl birlikte çalışır? Genel olarak, HTML'yi belgenizin içeriğini belirlemek için kullanırsınız, biçim kuralları için CSS vardır. Bu öğreticiden sonra, bu düzenlemelerin nasıl yapıldığını göreceksiniz.</p> - -<div class="tuto_details"> -<div class="tuto_type">Daha fazla ayrıntı</div> - -<p>HTML gibi bir imleme dili biçim tanımlamak için bir kaç yol sağlar.</p> - -<p>Örneğin, HTML içerisinde <code><b></code> ögesini, yazıyı kalınlaştırmak için kullanabilirsiniz ve ardalan rengini <code><body></code> ögesi içerisinde tanımlayabilirsiniz.</p> - -<p>CSS ile bu özellikleri kullanamazsınız fakat bunlara gerek de kalmaz. Kullanmanız gereken bütün kodları tek bir yerde kullanabilirsiniz.</p> -</div> - -<h2 id="Çalışma_Bir_kalıp_hazırlamak">Çalışma: Bir kalıp hazırlamak</h2> - -<ol> - <li>Birinci bölümde eklediğiniz <code>belge1.html</code> ile aynı dizine bir belge daha ekleyin.</li> - <li>Eklediğiniz belgeyi <code>bicim1.css</code> olarak adlandırın. Bu sizin biçim belgeniz olacak.</li> - <li>CSS belgesi içerisine aşağıdaki satırı ekleyip kaydedin:</li> - <li> - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="Biçim_belgesi_ile_bağlantılamak">Biçim belgesi ile bağlantılamak</h3> - -<ol> - <li>Biçim belgeniz ile HTML'inizi ilişkilendirmek için, HTML belgesini düzenleyin. Aşağıdaki işaretli satırı ekleyin: - <pre class="brush: html; highlight:[6];"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>örnek belge</title> - <link rel="stylesheet" href="bicim1.css"> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li>Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır: - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">Alıştırma</div> - -<p>CSS bazı renkler için rengin ingilizcesine izin verir.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Alıştırmanın yanıtını görün.</a></div> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "CSS Nasıl Çalışır.")}} Artık bir HTML belgesine bağlı bir biçim belgeniz var.</p> - -<p>Şimdi tarayıcınızın, sayfayı oluştururken bunları nasıl birleştirdiğini <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">öğrenebilirsiniz</a>.</p> diff --git a/files/tr/web/guide/çizgeler/index.html b/files/tr/web/guide/graphics/index.html index c72c02d2b5..c72c02d2b5 100644 --- a/files/tr/web/guide/çizgeler/index.html +++ b/files/tr/web/guide/graphics/index.html diff --git a/files/tr/web/html/html5/index.html b/files/tr/web/guide/html/html5/index.html index d4ab791219..d4ab791219 100644 --- a/files/tr/web/html/html5/index.html +++ b/files/tr/web/guide/html/html5/index.html diff --git a/files/tr/web/html-alani/index.html b/files/tr/web/html-alani/index.html deleted file mode 100644 index 06153ac1c1..0000000000 --- a/files/tr/web/html-alani/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'HTML: Hypertext Markup Language' -slug: Web/HTML-Alani -tags: - - HTML - - HTML5 - - Web ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong>HTML</strong><span class="tlid-translation translation" lang="tr"><span title=""> (HyperText Markup Language), Web’in en temel yapı taşıdır.</span> <span title="">Web içeriğinin anlamını ve yapısını tanımlar.</span> <span title="">HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (<a href="/tr/docs/Web/CSS">CSS</a>) veya işlevselliğini / davranışını (<a href="/tr/docs/Web/JavaScript">JavaScript</a>) tanımlamak için kullanılır.</span></span></span></p> - -<p>"HyperText" (köprü metni, üst metin, hiper metin olarak da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.</p> - -<p>HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.</p> - -<p>HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.</p> - -<p>Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <code><title></code> etiketi <code><Title></code>, <code><TITLE></code> veya başka bir şekilde yazılabilir.</p> - -<p>Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.</p> - -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML'e Giriş</span> - - <p>Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Temelleri</a> makalemizi mutlaka okuyun.</p> - </li> - <li><span>HTML Dersleri</span> - <p>HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, <a href="/en-US/docs/Learn/HTML">HTML Öğrenme Alanı</a>'nı inceleyin..</p> - </li> - <li><span>HTML Öğelerinin Açıklamaları</span> - <p><a href="/en-US/docs/Web/HTML/Reference">Genişletilmiş HTML örnekleri </a>bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" id="Temel_Düzey_Dersleri">Temel Düzey Dersleri</h2> - -<p><a href="/en-US/docs/Learn/HTML">HTML Ögrenme Alanımız</a> HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> - <dd>Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve gömme (embed etme) İşlemleri</a></dt> - <dd>Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> - <dd>Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML formları</a></dt> - <dd>Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Howto">Yaygın HTML problemlerinin çözümleri</a></dt> - <dd>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</dd> -</dl> - -<h2 id="İleri_Düzey_Konular">İleri Düzey Konular</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS olarak etkinleştirilmiş resim</a></dt> - <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS </a><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">ayarları özellikleri</a></dt> - <dd class="landingPageList">{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir <code>crossorigin</code> özelliği (<code>crossOrigin</code> özelliği) bulunur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML'de Focus yönetimi</a></dt> - <dd><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM özelliği ve <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" ile içeriği önceden yükleme</a></dt> - <dd class="landingPageList">{{htmlelement("link")}} elementinin <code>preload</code> değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="HTML_öğeleri">HTML öğeleri</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML öğeleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli sayıda <strong>özellik (attribute)</strong> tarafından özelleştirilebilen <strong>elementlerden (HTML elementi)</strong> oluşur. HTML belgeleri birbirine <a href="/en-US/docs/Web/HTML/Link_types">linkler</a> ile bağlanır.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML elementleri</a></dt> - <dd class="landingPageList">Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML özellikleri (attribute)</a></dt> - <dd class="landingPageList">HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global özellikler (attributes)</a></dt> - <dd class="landingPageList">Global özellikler <em>standart olmayan elementler dahil</em> tüm HTML elementlerini belirler.<em> </em>Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elementler</a> ve <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elementler</a></dt> - <dd class="landingPageList">HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link tipleri</a></dt> - <dd class="landingPageList">HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio ve video elementleri tarafından desteklenen media formatları</a></dt> - <dd class="landingPageList">{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">HTML içeriğinin çeşitleri</a></dt> - <dd class="landingPageList">HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.</dd> - <dt class="landingPageList"></dt> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mod(garip mod) and standard mod</a></dt> - <dd class="landingPageList">Quirk mod and standard mod hakkında tarihi bilgiler.</dd> -</dl> - -<h2 class="landingPageList" id="İlgili_Konular">İlgili Konular</h2> - -<dl> - <dt><a href="/en-US/docs/Web/HTML/Applying_color">HTML elementlerini CSS kullanarak renklendirmek</a></dt> - <dd>Bu makale HTML içeriklerine CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.</dd> -</dl> -</div> -</div> -<span class="alllinks"><a href="/en-US/docs/tag/HTML">Tümünü Görüntüle...</a></span></section> diff --git a/files/tr/web/html/element/aside/index.html b/files/tr/web/html/element/aside/index.html new file mode 100644 index 0000000000..234d56a434 --- /dev/null +++ b/files/tr/web/html/element/aside/index.html @@ -0,0 +1,154 @@ +--- +title: <aside> +slug: HTML/Element/aside +tags: + - HTML Elementleri + - aside + - aside elementi +translation_of: Web/HTML/Element/aside +--- +<p><strong>HTML <code><aside></code> elementi </strong>bir belgenin ana içeriğiyle yüzeysel bir bağ taşıyan bölümünü temsil eder.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">İçerik kategorileri</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Akış içeriği</a>, bölümlenmiş içerik, belirlenmiş içerik.</td> + </tr> + <tr> + <th scope="row">Kullanılabilir içerik</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Akış içeriği</a>.</td> + </tr> + <tr> + <th scope="row">Etiket İhmalleri</th> + <td>Hiçbiri.</td> + </tr> + <tr> + <th scope="row">Kullanılabilir Üst Elementler</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Akış içeriği</a>ni kabul eden herhangi bir element. Ancak <aside> elementi, {{HTMLElement("address")}} elementinin alt elementi olarak kullanılamaz.</td> + </tr> + <tr> + <th scope="row">Kullanılabilir ARIA</th> + <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM arayüzü</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Öznitelikler">Öznitelikler</h2> + +<p>Bu element yalnızca <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">evrensel öznitelikler</a>i içerir.</p> + +<h2 id="Kullanım_Notları">Kullanım Notları</h2> + +<ul> + <li><code><aside></code> elementini parantez içine alınmış metinler için kullanmayınız. Çünkü bu tip metinler ana akış içerisinde sayılmaktadır.</li> +</ul> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: html"><article> + <p> + Disney yapımı olan <em>Küçük Deniz Kızı</em> filmi ilk kez 1989'da vizyona girdi. + </p> + <aside> + <p> + Film ilk çıkışında 87 milyon dolar hasılat yapmayı başardı. + </p> + </aside> + <p> + Film hakkında daha fazla bilgi için... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Özellik</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p>{{Uyumluluk Tablosu}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</td> + <td>2.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>Bölümle ilişkili diğer elementler: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Bir HTML5 belgesinin bölümleri ve anahatları</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/tr/web/html/element/head/index.html b/files/tr/web/html/element/head/index.html new file mode 100644 index 0000000000..b1eb81ac0d --- /dev/null +++ b/files/tr/web/html/element/head/index.html @@ -0,0 +1,138 @@ +--- +title: '<head>: The Document Metadata (Header) element' +slug: HTML/Element/head +tags: + - Element + - HTML + - HTML üst veri içeriği + - HTML üst verisi + - Referans + - Web +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><head></code> elementi</strong>, <a href="/en-US/docs/Web/HTML/Element/title">başlık</a>, <a href="/en-US/docs/Web/HTML/Element/script">betikler </a>ve <a href="/en-US/docs/Web/HTML/Element/style">biçem sayfaları</a> gibi, bir belge hakkında makine tarafından okunabilen bilgiler ({{glossary("metadata")}}) içerir.</span></p> + +<div class="blockIndicator note"> +<p><strong>Not:</strong> <code><head></code> elementi, bir insan tarafından okunması beklenen bilgilerden ziyade, genellikle bir makine tarafından işlenmesi öngörülen bilgiler içerir. Başlık ya da yazar bilgisi gibi insanlar tarafından okunması beklenen bilgiler için {{HTMLElement("header")}} elementine bakınız.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">İçerik kategorileri</a></th> + <td>Yok</td> + </tr> + <tr> + <th scope="row">İzin verilen içerik</th> + <td> + <p>Eğer belge, {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} belgesiyse, veya başlık bilgisi üst bir protokolden geliyorsa (örn. HTML e-postalarındaki konu satırı), sıfır veya daha fazla <span class="seoSummary">{{glossary("metadata", "üst veri")}}</span>.</p> + + <p>Aksi takdirde, en az bir tanesi {{HTMLElement("title")}} elementi olacak şekilde bir veya daha fazla <span class="seoSummary">{{glossary("metadata", "üst veri")}}</span>.</p> + </td> + </tr> + <tr> + <th scope="row">Atlanabilir etiketler</th> + <td> + <p><code><head></code> elementinin içindeki ilk öğe de bir elementse, başlangıç etiketi atlanabilir.</p> + + <p><code><head></code> elementinin ardından gelen ilk öğe boşluk veya yorum değilse, bitiş etiketi atlanabilir.</p> + </td> + </tr> + <tr> + <th scope="row">Kullanılabilir üst elementler</th> + <td> + <p>İlk alt elementi olacak şekilde {{HTMLElement("html")}} elementi.</p> + </td> + </tr> + <tr> + <th scope="row">Dolaylı ARIA rolü</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Bulunmamaktadır.</a></td> + </tr> + <tr> + <th scope="row">İzin verilen ARIA rolleri</th> + <td>İzin verilen <code>role</code> bulunmamaktadır.</td> + </tr> + <tr> + <th scope="row">DOM arayüzü</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Öznitelikler">Öznitelikler</h2> + +<p>Bu element <a href="/en-US/docs/Web/HTML/Global_attributes">evrensel öznitelikler</a> içerir.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>{{Glossary("whitespace", "Boşluk")}}la ayrılmış şekilde bir veya birden fazla üst veri profilinin {{glossary("URI")}}'si.</dd> +</dl> + +<h2 id="Örnek">Örnek</h2> + +<pre class="brush: html notranslate"><!doctype html> +<html> + <head> + <title>Belge başlığı</title> + </head> +</html> +</pre> + +<h2 id="Notlar">Notlar</h2> + +<p>HTML5 uyumlu tarayıcılar, <code><head></code> elementinin etiketleri atlanmışsa, söz konusu elementi otomatik olarak oluşturmaktadır. Çok eski tarayıcılarda bu özelliğin garantisi yoktur.</p> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Son anlık görüntüden beri değişiklik olmadı.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <code>profile</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li> <code><head></code>'in içinde kullanılabilecek etiketler: + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/tr/web/html/element/hgroup/index.html b/files/tr/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..c6321bf52e --- /dev/null +++ b/files/tr/web/html/element/hgroup/index.html @@ -0,0 +1,135 @@ +--- +title: <hgroup> +slug: HTML/Element/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hgroup></code> elementi,</strong> belgenin bir bölümü için çok düzeyli bir başlığı temsil eder. Bu gruplar bir dizi <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> elementleri içerir.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a dir="ltr" href="/en-US/docs/HTML/Content_categories">İçerik Kategorileri</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Akış içeriği</a>, başlık içeriği, somut içerik.</td> + </tr> + <tr> + <th scope="row">İzin verilen içerik</th> + <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">Etiket Eksikliği</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">İzin verilen ebeveynler</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Akış içeriğini</a> kabul eden herhangi bir öğe.</td> + </tr> + <tr> + <th scope="row">İzin verilen ARIA rolleri</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM arayüzü</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes_Öznitelikler">Attributes (Öznitelikler)</h2> + +<p>Bu öğe yalnızca <a href="/en-US/docs/HTML/Global_attributes">genel öznitelikleri</a> içerir.</p> + +<h2 id="Kullanım_notları">Kullanım notları</h2> + +<div class="note"> +<p><code><hgroup></code> elementi HTML5 (W3C) şartnamesinden kaldırıldı, ama bu element hala HTML'in WHATWG versiyonunda mevcut. Çoğu tarayıcıda kısmen uygulanmaktadır, bu yüzden tamamen kaldırılması pek olası değildir.<br> + Bununla birlikte, <code><hgroup></code> öğesinin temel amacının, <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML şartnamesinde tanımlanan anahat algoritması</a> tarafından başlıkların nasıl görüntüleneceğini etkilemesi, ancak <strong>HTML anahat algoritması herhangi bir tarayıcıda uygulanmadığı göz önüne alındığında</strong>, <code><hgroup></code> semantiği (anlamsalı) pratikte yalnızca teorik olarak geçerlidir.<br> + Bu nedenle HTML5 (W3C) şartnamesi, <code><hgroup></code>kullanmadan; <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">alt başlıkların, altyazıların, alternatif başlıkların ve sloganların</a> nasıl işaretleneceği konusunda tavsiyelerde bulunur.</p> +</div> + +<p><code><hgroup></code> öğesi, belgenin bir bölümü için; birincil başlığının, çok düzeyli bir başlık oluşturmak için, alt başlıklar veya alternatif başlıklar gibi ikincil başlıklarla gruplandırılmasına izin verir.</p> + +<p>Başka bir deyişle, <code><hgroup></code> öğesi, ikincil <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> alt öğelerinin, <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> öğelerinin normalin aksine herhangi bir <code><hgroup></code> alt öğesi değilse, anahatta kendi ayrı bölümlerini oluşturmasını engeller.</p> + +<p>Yani, <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML şartnamesinde tanımlanan HTML anahat algoritması</a> tarafından üretilen soyut anahatta, tüm <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> kümesiyle birlikte, bir bütün olarak tek bir mantıksal <code><hgroup></code> başlığı oluşturur ve özet anahattaki tek mantıksal başlığı oluşturmak için anahat içine bir çok düzeyli birim olarak girer.</p> + +<p>Böyle bir taslağın herhangi bir (soyut olmayan) işlenmiş görünümünü üretmek için, oluşturma aracının tasarımında <code><hgroup></code> başlıklarının çok düzeyli doğalarını iletecek şekilde nasıl işleneceği konusunda bir seçim yapılmalıdır. İşlenmiş bir <code><hgroup></code> anahat gösteriminin çeşitli yolları vardır. Örneğin:</p> + +<ul> + <li>Bir <code><hgroup></code>, iki nokta üst üste karakteri ve boşluk ile (“<code>: </code>”) veya birincil başlıktan sonra ve ilk ikincil başlıktan önce (ve diğer ikincil başlıklardan önce aynı veya benzer noktalama işaretleriyle) işlenen bir anahatta gösterilebilir.</li> + <li>Bir <code><hgroup></code>, birincil başlık ve ardından ikincil başlık(lar) etrafında parantezler ile işlenmiş bir anahatta gösterilebilir.<br> + </li> +</ul> + +<p>Aşağıdaki HTML belgesini düşünün:</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>HTML Standard</title> +<body> + <hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> + </hgroup> + <p>Some intro to the document.</p> + <h2>Table of contents</h2> + <ol id=toc>...</ol> + <h2>First section</h2> + <p>Some intro to the first section.</p> +</body></pre> + +<p>Bu belge için işlenmiş bir anahat aşağıdaki gibi görünebilir:<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> + +<p>Yani, işlenen anahat birincil başlık; HTML, ve ardından iki nokta üst üste ve boşluk. Ve ardından ikincil başlık, <em>Living Standard — Last Updated 12 August 2016</em> gösterebilir.</p> + +<p>Veya, bu belge için işlenen anahat bunun yerine aşağıdaki gibi görünebilir:<br> + <br> + <img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> + +<p>Yani, işlenen anahat birincil başlığı, HTML'yi ve ardından parantez içinde gösterilen ikincil Başlığı gösterebilir: <em>(Living Standard — Last Updated 12 August 2016)</em>.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: html"><hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> +</hgroup> +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Özellik</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + + + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li>Diğer bölümle ilgili öğeler: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Bir HTML5 belgesinin bölümleri ve ana hatları.</a></li> +</ul> diff --git a/files/tr/web/html/element/index.html b/files/tr/web/html/element/index.html new file mode 100644 index 0000000000..a4d8097b65 --- /dev/null +++ b/files/tr/web/html/element/index.html @@ -0,0 +1,241 @@ +--- +title: HTML Elements +slug: HTML/Element +tags: + - HTML + - 'HTML:Element Reference' + - NeedsTranslation + - TopicStub +translation_of: Web/HTML/Element +--- +<p>Bu HTML başvurusu, HTML5'te veya daha önceki bir şartnamede tanımlanan tüm <strong>HTML öğelerini</strong> listeler. Küçük ve büyük ayraçları içine alındığında bu bir etiketi oluşturur: <code><etiketadı></code>. Etiketler, HTML belgelerinin nasıl oluşturulması gerektiğini ve bir <a href="/tr/docs//HTML">HTML</a> belgesinin hangi bölümüne hangi içeriğin yerleştirileceğini belirten öğelerdir.</p> + +<p>Bu sayfada tüm standart <a href="/tr/docs/HTML/HTML5">HTML5</a> etiketlerinin yanısıra, tarayıcıların destekleyebileceği standart olmayanların yanı sıra daha eski ve kullanımdan kaldırılmış olanlar da listelenmektedir. Diğer standart öğeler HTML5'te de geçerli olmasına rağmen, HTML5'te tanıtılan öğelere genellikle yeni HTML5 öğeleri denir.</p> + +<p>Bir HTML belgesinde, bir öğe bir <em>başlangıç etiketi</em> tarafından tanımlanır. Etiket başka içerikler içeriyorsa, etiketin adının önünde bir eğik çizgi: <code></etiketadı></code> ile biten bir <em>kapanış etiketi</em> ile biter. Bazı etiketlerin kapatılması gerekmez resim etiketleri gibi . HTML belgeleri, bu öğelerin bir hiyerarşik yapısını içerir. Her birinin yaptığı şeyi temsil etmek için adı verilmektedir. Örneğin, <code><title></code> etiketi belgenin başlığını temsil eder. Altta HTML Elemanları alfabetik listesi bulunmaktadır.</p> + +<p><a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> Sembolü, etiketin HTML5 ile eklendiğini gösterir. Burada listelenen diğer etiketlerin HTML5 belirtimi tarafından değiştirilmiş veya genişletilmiş olabileceğini unutmayın. Solgun renkli etiketler standart dışı, eskidir veya kullanımdan kaldırılmıştır; yeni Web sitelerinde kullanılmamalı ve aşamalı olarak mevcut web sitelerinden kaldırılmalıdır.</p> + +<p> </p> + +<div class="index widgeted"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> + <li class="html5">{{ HTMLElement("command") }}</li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li>{{ HTMLElement("del") }}</li> + <li>{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{ HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5">{{ HTMLElement("hgroup") }}</li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li>{{ HTMLElement("keygen") }}</li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li>{{ HTMLElement("nobr") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li>{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> + +<p> </p> diff --git a/files/tr/web/html/element/li/index.html b/files/tr/web/html/element/li/index.html new file mode 100644 index 0000000000..bb52486b1e --- /dev/null +++ b/files/tr/web/html/element/li/index.html @@ -0,0 +1,205 @@ +--- +title: <li> +slug: HTML/Element/li +translation_of: Web/HTML/Element/li +--- +<p>{{HTMLRef}}</p> + +<p>The <strong>HTML <code><li></code> elementi</strong>, liste nesnesİ için kullanılır. Bir alt element içermelidir: bir sıralı liste ({{HTMLElement("ol")}}), bir sırasız liste ({{HTMLElement("ul")}}) veya bir menü ({{HTMLElement("menu")}}). Menülerde ve sırasız listelerde, listenen ögeler bir In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The <span title="syntax-end-tag">end tag</span> can be omitted if the list item is immediately followed by another {{HTMLElement("li")}} element, or if there is no more content in its parent element.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>An {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, or {{HTMLElement("menu")}} element. Though not a conforming usage, the obsolete {{HTMLElement("dir")}} can also be a parent.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + <tr> + <th scope="row">Element type</th> + <td>Block</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>This integer attribute indicates the current ordinal value of the list item as defined by the {{HTMLElement("ol")}} element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The <strong>value</strong> attribute has no meaning for unordered lists ({{HTMLElement("ul")}}) or for menus ({{HTMLElement("menu")}}). + <div class="note"><strong>Note</strong>: This attribute was deprecated in HTML4, but reintroduced in HTML5.</div> + + <div class="note"> + <p><strong>Note:</strong> Prior to {{Gecko("9.0")}}, negative values were incorrectly converted to 0. Starting in {{Gecko("9.0")}} all integer values are correctly parsed.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>This character attribute indicates the numbering type: + <ul> + <li><code>a</code>: lowercase letters</li> + <li><code>A</code>: uppercase letters</li> + <li><code>i</code>: lowercase Roman numerals</li> + <li><code>I</code>: uppercase Roman numerals</li> + <li><code>1</code>: numbers</li> + </ul> + This type overrides the one used by its parent {{HTMLElement("ol")}} element, if any. + + <div class="note"><strong>Usage note:</strong> This attribute has been deprecated: use the CSS {{cssxref("list-style-type")}} property instead.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>The above HTML will output:</p> + +<ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> + +<pre class="brush: html"><ol type="I"> + <li value="3">third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> +</pre> + +<p>The above HTML will output:</p> + +<ol start="3" style="list-style-type: upper-roman;"> + <li>third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul></pre> + +<ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> + +<p>For more detailed examples, see the <a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a> and <a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a> pages.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>type</code> attribute has been deprecated.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, and the obsolete {{HTMLElement("dir")}};</li> + <li>CSS properties that may be specially useful to style the <code><li></code> element: + <ul> + <li>the {{cssxref("list-style")}} property, to choose the way the ordinal is displayed,</li> + <li><a href="/Web/Guide/CSS/Counters">CSS counters</a>, to handle complex nested lists,</li> + <li>the {{cssxref("margin")}} property, to control the indent of the list item.</li> + </ul> + </li> +</ul> + +<div> </div> diff --git a/files/tr/web/html/element/link/index.html b/files/tr/web/html/element/link/index.html new file mode 100644 index 0000000000..3c6a750c49 --- /dev/null +++ b/files/tr/web/html/element/link/index.html @@ -0,0 +1,402 @@ +--- +title: '<link>: Dış Kaynak Bağlantısı öğesi' +slug: HTML/Element/link +tags: + - Bağlantı + - Eleman + - HTML + - HTML belgesi meta verileri + - Referans + - Web + - Web Performansı + - meta veri +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML Dış Kaynak Bağlantısı öğesi (<code><link></code>)</strong> geçerli belge ile harici kaynak arasındaki ilişkileri belirtir. Bu eleman en çok {{Glossary ("CSS", "stylesheets")}} bağlantısına kullanılır, ancak site simgeleri (hem "favicon" stil ikonları hem de ana ekran için simgeler ve mobil cihazlardaki uygulamalar) oluşturmak için de kullanılır.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/interactive-examples"> https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</div> + +<p>Harici bir stil sayfasını bağlamak için, {{HTMLElement ("head")}} içine şu şekilde bir <code><link></code> öğesi ekleyin:</p> + +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> + +<p>Bu basit örnek, <code>href</code> özniteliği ve <code>stylesheet</code> değerine sahip bir <code>rel</code> özniteliğindeki stil sayfasının yolunu sağlar. <code>rel</code> "ilişki" anlamına gelir ve büyük olasılıkla <code><link></code> öğesinin temel özelliklerinden biridir - değer, bağlandığı öğenin bağlantıyla nasıl belge içeren ilişkilendirildiğini gösterir. <a href="/en-US/docs/Web/HTML/Link_types">Bağlantı türleri</a> referansımızdan göreceğiniz gibi, birçok farklı ilişki türü vardır.</p> + +<p>Karşılaştığınız başka yaygın türler de var. Örneğin, sitenin favicon'una bir bağlantı:</p> + +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> + +<p>Çeşitli mobil platformlarda kullanım için özel simge türlerini belirtmek için kullanılan, örneğin <code> rel </code> değerleri olan başka bir simge vardır;</p> + +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p><code>sizes</code> niteliği simge boyutunu belirtirken, <code> type </code> bağlanan kaynağın MIME türünü içerir. Bunlar, tarayıcının mevcut en uygun ikonu seçmesine izin vermek için faydalı ipuçları sunar.</p> + +<p>Ayrıca bir <code> media </code> özniteliği içinde bir ortam türü veya sorgu da sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>Bazı ilginç yeni performans ve güvenlik özellikleri de <code><link&gt</code> öğesine eklendi. Bu örneği ele alalım:</p> + +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p><code>rel</code> ve <code>preload</code> değeri, tarayıcının bu kaynağı önceden yüklemesi gerektiğini belirtir (bkz. <a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" içeriği önceden yükleme</a>) ile daha fazla ayrıntı için), <code>as</code> niteliği, getirilen belirli bir içerik sınıfını gösterir. <code>crossorigin</code> niteliği, kaynağın bir {{Glossary("CORS")}} isteği ile alınıp alınmayacağını belirtir.</p> + +<p>Diğer kullanım notları:</p> + +<ul> + <li>Bir <code><link></code> öğesi, <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">bağlantı türü </a> olup olmadığına bağlı olarak, {{HTMLElement("head")}} veya {{HTMLElement("body")}} <strong>body-ok</strong> olan öğesinde oluşabilir. Örneğin, <code>stylesheet</code> bağlantı türü body-ok'dur ve bu nedenle gövdede <code><link rel="stylesheet"></code> izin verilir. Ancak, bu izlenecek iyi bir uygulama değildir; <code><link></code> öğelerinizi gövde içeriğinizden ayırmak, bunları <code><head></code> içine yerleştirmek daha mantıklı olur.</li> + <li>Bir siteye favicon oluşturmak için <code><link></code> kullanırken siteniz güvenliğini artırmak için bir İçerik Güvenliği Politikası (CSP) kullanıyorsa, politika favicon'a uygulanır. Yüklenmeyen favicon ile ilgili sorunlarla karşılaşırsanız, {{HTTPHeader("Content-Security-Policy")}} başlığının <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> yönergesi</a> buna erişimi engellemiyor.</li> + <li>HTML ve XHTML özellikleri, <code><link></code> öğesi için olay işleyicilerini tanımlar, ancak bunların nasıl kullanılacağı açık değildir.</li> + <li>XHTML 1.0 altında, <code><link></code> gibi boş öğeler sonda eğik çizgi gerektirir: <code><link /></code>.</li> + <li>WebTV, <code>rel</code> için <code>next</code> değerinin bir sonraki sayfada bir belge dizisinde önyüklenmesini destekler.</li> +</ul> + +<h2 id="Öznitelikler">Öznitelikler</h2> + +<p>Bu öğe <a href="/en-US/docs/Web/HTML/Global_attributes">genel özellikleri</a> içerir.</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>Bu özellik yalnızca <code><link></code> öğesinde <code> rel="preload"</code> veya <code>rel="prefetch"</code> ayarlanmışsa kullanılır. <code><link></code> tarafından yüklenen içeriğin türünü belirtir, istek eşleştirme, doğru <a href="/en-US/docs/Web/HTTP/CSP">içerik güvenlik politikasının uygulanması</a> ve doğru {{HTTPHeader("Kabul et")}} ayarlarının yapılması için gerekli olan istek başlığı. Ayrıca, <code>rel="preload"</code> bunu istek önceliklendirme için bir sinyal olarak kullanır. Aşağıdaki tabloda, bu özellik için geçerli değerler ve bunların uygulandıkları öğeler veya kaynaklar listelenmiştir.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Değeri</th> + <th scope="col">Şunlara Uygulanır</th> + </tr> + </thead> + <tbody> + <tr> + <td>audio</td> + <td><code><audio></code> elementler</td> + </tr> + <tr> + <td>document</td> + <td><code><iframe></code> ve <code><frame></code> elements</td> + </tr> + <tr> + <td>embed</td> + <td><code><embed></code> elementler</td> + </tr> + <tr> + <td>fetch</td> + <td> + <p>fetch, XHR</p> + + <div class="blockIndicator note"> + <p>Bu değer, crossorigin niteliğini içermek için <code><link></code> değerini de gerektirir.</p> + </div> + </td> + </tr> + <tr> + <td>font</td> + <td>CSS @font-face</td> + </tr> + <tr> + <td>image</td> + <td><code><img></code> ve <code><picture></code> srcset veya görüntü kümesi özniteliklerine sahip öğeler, SVG <code><image></code> öğelerini, CSS <code>*-image</code> kurallar</td> + </tr> + <tr> + <td>object</td> + <td><code><object></code> elemanlar</td> + </tr> + <tr> + <td>script</td> + <td><code><script></code> elemanlar, Çalışan <code>importScripts</code></td> + </tr> + <tr> + <td>style</td> + <td><code><link rel=stylesheet></code> elemanlar, CSS <code>@import</code></td> + </tr> + <tr> + <td>track</td> + <td><code><track></code> elemanlar</td> + </tr> + <tr> + <td>video</td> + <td><code><video></code> elemanlar</td> + </tr> + <tr> + <td>worker</td> + <td>Worker, SharedWorker</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>Bu numaralandırılmış öznitelik, kaynak alınırken {{Glossary("CORS")}} kullanılması gerektiğini gösterir. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS etkin görüntüler</a>, <em>lekelenmeden</em> {{HTMLElement("canvas")}} öğesinde yeniden kullanılabilir. İzin verilen değerler: + <dl> + <dt><code>anonymous</code></dt> + <dd>Çapraz kökenli bir istek (yani, {{HTTPHeader("Origin")}} HTTP başlığına sahip) yapılır, ancak hiçbir kimlik bilgisi gönderilmez (yani, çerez, X.509 sertifikası veya HTTP Temel kimlik doğrulaması) gönderilmez. Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Origin")}} HTTP başlığını ayarlayarak) kaynak etiketlenecek ve kullanımı kısıtlanacaktır.</dd> + <dt><code>use-credentials</code></dt> + <dd>Gönderilen bir kimlik bilgileriyle birlikte (örneğin, bir çerez, sertifika ve/veya HTTP Temel kimlik doğrulaması gerçekleştirilir) bir çapraz orijinallik isteği (ör. <code>taimted</code> HTTP başlığına sahip) Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Credentials")}} HTTP başlığı), kaynak <em>etiketlenir</em> ve kullanımı kısıtlanır.</dd> + </dl> + Öznitelik yoksa, kaynak {{Glossary("CORS")}} isteği olmadan (yani, <code>Origin</code> HTTP üstbilgisini göndermeden) tatsız kullanımını engeller. Geçersiz ise, numaralandırılmış <strong>anonim</strong> anahtar kelimesi kullanılmış gibi kullanılır. Ek bilgi için <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS ayarları niteliklerine</a> bakın.</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd> + <p>Yalnızca <code>rel="stylesheet"</code> için <code>disabled</code> Boolean özelliği, açıklanan stil sayfasının belgeye yüklenip yüklenmemesi gerektiğini belirtir. HTML yüklendiğinde <code>disabled</code> belirtilirse, sayfa yüklenirken stil sayfası yüklenmez. Bunun yerine, <code> disabled </code> özelliği <code>false</code> olarak değiştirildiyse veya kaldırılırsa, stil sayfası isteğe bağlı olarak yüklenir.</p> + + <p>Ancak, stil sayfası yüklendikten sonra, <code>disabled</code> özelliğinin değerinde yapılan değişikliklerin artık {{domxref("StyleSheet.disabled")}} özelliğinin değeriyle hiçbir ilişkisi yoktur. Bunun yerine bu özelliğin değerini değiştirmek, belgeye uygulanan stil sayfası formunu etkinleştirir ve devre dışı bırakır.</p> + + <p>Bu, <code>StyleSheet</code>'in <code>disabled</code> özelliğinden farklıdır; <code>true</code> olarak değiştirmek, stil sayfasını belgenin {{domxref("document.styleSheets")}} listesinden kaldırır ve <code>false</code> konumuna geri döndüğünde stil sayfasını otomatik olarak yeniden yüklemez.</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Bu özellik, bağlı kaynağın {{Glossary("URL")}} belirtir. Bir URL mutlak veya göreceli olabilir.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Bu özellik, bağlı kaynağın dilini gösterir. Tamamen tavsiye niteliğindedir. İzin verilen değerler <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> tarafından belirlenir. Bu özelliği yalnızca {{HTMLAttrxRef("href", "a")}} özelliği varsa kullanın.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>Kaynağın göreceli önemini gösterir. Öncelikli ipuçları, değerler kullanılarak verilir:</dd> + <dd> + <p><strong><code>auto</code></strong>: Indicates <strong>no preference</strong>. Tarayıcı, kaynağın önceliğine karar vermek için kendi sezgisel bilgilerini kullanabilir.</p> + + <p><strong><code>high</code></strong>: Tarayıcıya kaynağın <strong> yüksek </strong> öncelikli olduğunu gösterir.</p> + + <p><strong><code>low</code></strong>: Tarayıcıya, kaynağın <strong> düşük </strong> öncelikli olduğunu gösterir.</p> + + <div class="blockIndicator note"> + <p><strong>Not:</strong> <code>importance</code> özelliği, yalnızca <code>rel="preload"</code> veya <code><link></code> öğesi için kullanılabilir <code>rel="prefetch"</code> var.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Tarayıcıya getirmesini söylediğiniz kaynağın (dosya) temel 64 kodlu şifreleme karması satır içi meta verilerini içerir. Tarayıcı, alınan kaynağın beklenmedik bir şekilde işleme alınmadığını doğrulamak için bunu kullanabilir. <a href="/en-US/docs/Web/Security/Subresource_Integrity">Alt Kaynak Bütünlüğü</a>'ne bakın.</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>Bu özellik, bağlı kaynağın uygulanacağı medyayı belirtir. Değeri bir medya türü <a href="/en-US/docs/Web/CSS/Media_queries">medya sorgusu</a> olmalı. Bu özellik temel olarak harici stil sayfalarına bağlanırken kullanışlıdır - kullanıcı aracısının üzerinde çalıştığı cihaz için en iyi uyarlanmış olanı seçmesini sağlar. + <div class="blockIndicator note"> + <p><strong>Notlar:</strong></p> + + <ul> + <li>HTML 4'te bu, yalnızca boşluklarla ayrılmış basit bir medya açıklaması hazır bilgileri listesi olabilir; yani, <a href="/en-US/docs/Web/CSS/@media"> medya türleri ve grupları</a>, <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> gibi bu özellik için değer olarak tanımlandığı ve izin verildiği yerlerde. HTML5 bunu, HTML 4'ün izin verilen değerlerinin yerini alan herhangi bir <a href="/en-US/docs/Web/CSS/Media Queries">medya sorgusu</a> türüne genişletmiştir.</li> + <li><a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Medya Sorguları</a>'nı desteklemeyen tarayıcılar mutlaka yeterli bağlantıyı tanımayacaktır; HTML 4'te tanımlanan kısıtlı ortam sorgusu kümesi olan geri dönüş bağlantılarını ayarlamayı unutmayın.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>Kaynağı alırken hangi yönlendiricinin kullanılacağını belirten bir dize: + <ul> + <li><code>no-referrer</code> {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir.</li> + <li><code>no-referrer-when-downgrade</code> TLS (HTTPS) olmadan bir başlangıç noktasına giderken {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir. Başka türlü bir politika belirtilmemişse, bu bir kullanıcı aracısının varsayılan davranışıdır.</li> + <li><code>origin</code> Yönlendiricinin, kabaca şema, ana bilgisayar ve bağlantı noktası olan sayfanın orijini olacağı anlamına gelir.</li> + <li><code>origin-when-cross-origin</code> diğer kaynaklara navigasyonun şema, ev sahibi ve liman ile sınırlı olacağı, aynı kaynaktaki navigasyonun yönlendirenin yolunu içereceği anlamına gelir.</li> + <li><code>unsafe-url</code> yönlendirenin orijini ve yolu içereceği anlamına gelir (ancak bölüm, parola veya kullanıcı adı değil). Bu durum güvensizdir, çünkü TLS korumalı kaynaklardan güvensiz kökenlere kökeni ve yolu sızdırabilir.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>Bu özellik, bağlı belgenin geçerli belgeyle ilişkisini adlandırır. Özelliğin, <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerlerinin</a> boşlukla ayrılmış bir listesi olması gerekir.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>Bu özellik, kaynakta bulunan görsel medya için simgelerin boyutlarını tanımlar. Yalnızca {{HTMLAttrxRef("rel", "link")}} bir <code>icon</code> değeri veya Apple'ın <code>apple-touch-icon</code> gibi standart olmayan bir tür içeriyorsa mevcut olmalıdır. Aşağıdaki değerlere sahip olabilir: + <ul> + <li><code>any</code>, yani, simge, <code>image/svg+xml</code> gibi bir vektör formatında olduğu gibi herhangi bir boyuta ölçeklenebilir.</li> + <li>her biri <code> <em><piksel cinsinden genişlik></em>x<em><piksel cinsinden yükseklik></em></code> veya <code><biçiminde bir beyaz boşlukla ayrılmış boyut listesi <em><piksel cinsinden="" genişlik=""></piksel></em>X<em><piksel cinsinden yükseklik></em></code>. Bu boyutların her biri kaynakta bulunmalıdır.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Not:</strong> Çoğu simge formatı yalnızca bir simge saklayabilir; bu nedenle çoğu zaman {{HTMLAttrxRef("sizes")}} özelliği yalnızca bir giriş içerir. MS’in ICO formatı Apple’ın ICNS’sinin yaptığı gibi. ICO daha her yerde bulunur, bu nedenle eğer tarayıcılar arası destek kaygılıysa (özellikle eski IE sürümleri için) bu biçimi kullanmalısınız.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd><code>title</code> niteliğinin <code><link></code> öğesinde özel bir semantiği vardır. Bir <code><link rel="stylesheet"></code> üzerinde kullanıldığında, bir <a href="/en-US/docs/Web/CSS/Alternative_style_sheets"> tercih edilen veya alternatif bir stil sayfasını</a> tanımlar. Yanlış kullanılması, <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">stil sayfasının yok sayılmasına neden olabilir</a>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Bu özellik, bağlantılı içeriğin türünü tanımlamak için kullanılır. Özelliğin değeri, <strong>metin/html</strong>, <strong>metin/css</strong> vb. gibi bir MIME türü olmalıdır. Bu özelliğin yaygın kullanımı, başvurulan stil sayfasının türünü tanımlamaktır (örneğin, <strong>metin/css</strong> gibi), ancak CSS’nin web’de kullanılan tek stil sayfası dili olduğu göz önüne alındığında, yalnızca <code>type</code> niteliğini atlayın, ancak aslında şu anda pratik önerilir. Tarayıcının yalnızca desteklediği dosya türlerini indirdiğinden emin olmak için <code>rel="preload"</code> bağlantı türlerinde de kullanılır.</dd> +</dl> + +<h3 id="Standart_olmayan_özellikler">Standart olmayan özellikler</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>Bu özelliğin değeri, bir nesnede gerçekleştirilebilecek işlevler hakkında bilgi sağlar. Değerler genellikle kullanıldığında HTTP protokolü tarafından verilir, ancak (<strong>başlık</strong> özniteliği ile benzer nedenlerle) bağlantıya önceden danışma bilgilerini eklemek yararlı olabilir. Örneğin, tarayıcı belirtilen yöntemlerin bir işlevi olarak bir bağlantının farklı bir oluşturulmasını seçebilir; aranabilir bir şey farklı bir simge alabilir veya bir dış link mevcut siteden ayrıldığının bir göstergesi olabilir. Bu özellik iyi tanımlanmamıştır ve tanımlayıcı tarayıcı Internet Explorer 4 tarafından bile desteklenmemektedir.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>Bu özellik, bir sonraki gezinme işleminde gerekli olabilecek bir kaynağı ve kullanıcı aracısının onu alması gerektiğini tanımlar. Bu, ileride kaynak istendiğinde kullanıcı aracısının daha hızlı yanıt vermesini sağlar.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Tanımlanmış bağlantı ilişkisine sahip olan veya herhangi bir bağlantılı kaynağın oluşturulmasını gösterecek olan çerçeve veya pencere adını tanımlar.</dd> +</dl> + +<h3 id="Eski_özellikler">Eski özellikler</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>Bu özellik, bağlı kaynağın karakter kodlamasını tanımlar. Değer, {{rfc(2045)}}'de tanımlandığı gibi karakter kümelerinin boşluk ve/veya virgülle ayrılmış bir listesidir. Varsayılan değer şudur: <code>iso-8859-1</code>. + <div class="note"><strong>Kullanım notu:</strong> Bu eski özellik ile aynı efekti üretmek için, bağlı kaynak üzerinde {{HTTPHeader("Content-Type")}} HTTP başlığını kullanın.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>Bu özelliğin değeri, geçerli belgenin, {{HTMLAttrxRef("href", "link")}} özelliği ile tanımlandığı şekilde bağlantılı belgeyle ilişkisini gösterir. Böylece özellik, <code>rel</code> niteliğinin değeriyle karşılaştırıldığında ters ilişkiyi tanımlar. Özniteliğin <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerleri</a>, {{HTMLAttrxRef("rel", "link")}} için olası değerlere benzer.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Not:</strong> Bu özellik, WHATWG HTML yaşam standardı tarafından (MDN'nin kanonik davrandığı şartnamesi olan) geçersiz. Ancak, W3C şartnamesinde <code>rev</code>'in <em>değil</em> olduğuna dikkat edin. Bununla birlikte, belirsizlik göz önüne alındığında, <code>rev</code>'e güvenmek akıllıca değildir.</p> + + <p>Bunun yerine, {{HTMLAttrxRef("rel", "link")}} özelliğini, karşıt <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değeriyle</a> kullanmalısınız. Örneğin, <code>made</code> için ters bağlantı oluşturmak için <code>author</code>'u belirtin. Ayrıca, bu özellik "revizyon" anlamına gelmez ve birçok site bu şekilde kötüye kullanmasına rağmen, sürüm numarasıyla kullanılmamalıdır.</p> + </div> + </dd> +</dl> + +<h2 id="CSS_ile_stil_oluşturma">CSS ile stil oluşturma</h2> + +<p><code><link></code> elemanın bir web belgesinde görsel bir varlığı yoktur, bu nedenle endişelenilmesi gereken herhangi bir tasarım düşüncesi yoktur.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Stil_sayfası_dahil_etme">Stil sayfası dahil etme</h3> + +<p>Sayfaya stil sayfası eklemek için aşağıdaki söz dizimini kullanın:</p> + +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Alternatif_stil_sayfaları_sağlama">Alternatif stil sayfaları sağlama</h3> + +<p>Ayrıca <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternatif stil sayfalarında</a> belirtebilirsiniz.</p> + +<p>Kullanıcı, Görünüm ve Sayfa Stili menüsünden seçerek hangi stil sayfasını kullanacağını seçebilir. Bu, kullanıcıların bir sayfanın birden çok sürümünü görmelerine olanak sağlar.</p> + +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Varsayılan Stil"> +<link href="fancy.css" rel="alternate stylesheet" title="Fantezi"> +<link href="basic.css" rel="alternate stylesheet" title="Temel"> +</pre> + +<h3 id="Farklı_kullanım_içerikleri_için_simgeler_sağlama">Farklı kullanım içerikleri için simgeler sağlama</h3> + +<p>Aynı sayfada birkaç farklı simgeye bağlantılar ekleyebilirsiniz ve tarayıcı ipucu olarak <code>rel</code> ve <code>sizes</code> değerlerini kullanarak kendi bağlamında hangisinin en iyi sonucu vereceğini seçer.</p> + +<pre class="brush: html no-line-numbers"><!-- yüksek çözünürlüklü Retina ekranlı üçüncü nesil iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- yüksek çözünürlüklü Retina ekranlı iPhone: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- birinci ve ikinci nesil iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- Retina olmayan iPhone, iPod Touch ve Android 2.1+ cihazlar: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Kaynakları_ortam_sorgularıyla_koşullu_olarak_yükleme">Kaynakları ortam sorgularıyla koşullu olarak yükleme</h3> + +<p>Bir <code>media</code> niteliği içinde bir ortam türü veya sorgu sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p> + +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="Stil_sayfası_yükleme_etkinlikleri">Stil sayfası yükleme etkinlikleri</h3> + +<p>Bir stil sayfasının ne zaman yüklendiğini, üzerine ateşlemek için bir <code> load </code> olayını izleyerek belirleyebilirsiniz; Benzer şekilde, bir stil sayfası işlenirken bir <code>error</code> olayını izleyerek bir hata olup olmadığını tespit edebilirsiniz:</p> + +<pre class="brush: html"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // İlginç bir şey yapın; sayfa yüklendi +} + +myStylesheet.onerror = function() { + console.log("Stil sayfası yüklenirken bir hata oluştu!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Not:</strong> <code>load</code> olayı, stil sayfası ve içe aktarılan içeriğinin tümü yüklenip ayrıştırıldığında ve stillerin içeriğe uygulanmaya başlamasından hemen önce başlatılır.</p> +</div> + +<h3 id="Önceden_yükleme_örnekleri">Önceden yükleme örnekleri</h3> + +<p><a href="/en-US/docs/Web/HTML/Preloading_content">İçeriği <code>rel="preload"</code></a> ile önyükleme, bir dizi <code> &ltlink rel="preload"></code> örneği bulabilirsiniz.</p> + +<h2 id="Teknik_özet">Teknik özet</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">İçerik kategorileri</a></th> + <td>Meta veri içeriği. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">akış içeriği</a> ve <a href="/en-US/docs/Web/HTML/Content_category#Phrasing_content">phrasing içeriği</a>.</td> + </tr> + <tr> + <th>İzin verilen içerik</th> + <td>Yok, bir {{Glossary("boş eleman")}}.</td> + </tr> + <tr> + <th>Etiket ihmali</th> + <td>Boş bir öğe olduğundan, başlangıç etiketi bulunmalı ve bitiş etiketi bulunmamalıdır</td> + </tr> + <tr> + <th>İzin verilen ebeveynler</th> + <td>Meta veri öğelerini kabul eden herhangi bir öğe. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">içerik ifadesi</a>.</td> + </tr> + <tr> + <th scope="row">İzin verilen ARIA rolleri</th> + <td>Hiçbiri</td> + </tr> + <tr> + <th>DOM arayüzü</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Şartnames">Şartnames</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Şartname</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Defines <code><link rel="preload"></code>, ve <code>as</code> atıf.</td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td><code>integrity</code> atıf eklendi.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>En son anlık görüntüden değişiklik yok</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td><code>crossorigin</code> ve <code>sizes</code> özellikleri eklendi; Herhangi bir medya sorgusuna <code>media</code> genişletilmiş değerleri; <code> rel </code> için birçok yeni değer ekledi.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td><code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> ve <code>prerender</code> eklendi.</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- veri </a> ve bize çekme isteği gönderin.</div> + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP başlık</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove'un <script> ve <link> düğümü olayı uyumluluk tablosu</a></li> +</ul> diff --git a/files/tr/web/http/metotlar/index.html b/files/tr/web/http/methods/index.html index 1f4cacaa80..1f4cacaa80 100644 --- a/files/tr/web/http/metotlar/index.html +++ b/files/tr/web/http/methods/index.html diff --git a/files/tr/web/http/oturum/index.html b/files/tr/web/http/session/index.html index e7f0d4606e..e7f0d4606e 100644 --- a/files/tr/web/http/oturum/index.html +++ b/files/tr/web/http/session/index.html diff --git a/files/tr/web/javascript/veri_yapısı/index.html b/files/tr/web/javascript/data_structures/index.html index 693d18233a..693d18233a 100644 --- a/files/tr/web/javascript/veri_yapısı/index.html +++ b/files/tr/web/javascript/data_structures/index.html diff --git a/files/tr/web/javascript/guide/ifadeler/index.html b/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html index dcf6d13466..dcf6d13466 100644 --- a/files/tr/web/javascript/guide/ifadeler/index.html +++ b/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html diff --git a/files/tr/web/javascript/guide/fonksiyonlar/index.html b/files/tr/web/javascript/guide/functions/index.html index e688bd5dcb..e688bd5dcb 100644 --- a/files/tr/web/javascript/guide/fonksiyonlar/index.html +++ b/files/tr/web/javascript/guide/functions/index.html diff --git a/files/tr/web/javascript/guide/nesneler_ile_çalışmak/index.html b/files/tr/web/javascript/guide/working_with_objects/index.html index 0782b4db6c..0782b4db6c 100644 --- a/files/tr/web/javascript/guide/nesneler_ile_çalışmak/index.html +++ b/files/tr/web/javascript/guide/working_with_objects/index.html diff --git a/files/tr/web/javascript/reference/global_objects/array/prototype/index.html b/files/tr/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 19ffe3c80f..0000000000 --- a/files/tr/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef("Global_Objects", "Array")}}</div> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p>The <strong><code>Array.prototype</code></strong> property represents the prototype for the {{jsxref("Global_Objects/Array", "Array")}} constructor.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Description</h2> - -<p>{{jsxref("Global_Objects/Array", "Array")}} instances inherit from <code>Array.prototype</code>. As with all constructors, you can change the constructor's prototype object to make changes to all {{jsxref("Global_Objects/Array", "Array")}} instances.</p> - -<p>Little known fact: <code>Array.prototype</code> itself is an {{jsxref("Global_Objects/Array", "Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true -</pre> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Specifies the function that creates an object's prototype.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Reflects the number of elements in an array.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Mutator methods</h3> - -<p>These methods modify the array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>Copies a sequence of array elements within the array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>Fills all the elements of an array from a start index to an end index with a static value.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Removes the last element from an array and returns that element.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Adds one or more elements to the end of an array and returns the new length of the array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Removes the first element from an array and returns that element.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Sorts the elements of an array in place and returns the array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Adds and/or removes elements from an array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Adds one or more elements to the front of an array and returns the new length of the array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Accessor methods</h3> - -<p>These methods do not modify the array and return some representation of the array.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Returns a new array comprised of this array joined with other array(s) and/or value(s).</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Determines whether an array contains a certain element, returning <code>true</code> or <code>false</code> as appropriate.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Joins all elements of an array into a string.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Extracts a section of an array and returns a new array.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3> - -<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Calls a function for each element in the array.</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Returns true if every element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3> - -<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("Global_Objects/String", "String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{jsxref("Global_Objects/Array", "Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index dcb92f48b3..0000000000 --- a/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p>Boolean.prototype özelliği {{jsxref ("Boolean")}} yapıcı methodunun prototipini temsil eder.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> - -<p class="hidden">Bu etkileşimli örnek için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projeye katkıda bulunmak istiyorsanız lütfen https://github.com/mdn/interactive-examples'ları kopyalayıp bize pull request gönderin.</p> - -<h2 id="sect1"> </h2> - -<p>{{jsxref("Boolean")}} instances inherit from <code>Boolean.prototype</code>. You can use the constructor's prototype object to add properties or methods to all {{jsxref("Boolean")}} instances.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Bir örneğin prototipini oluşturan fonksiyonu döndürür. Bu varsayılan olarak {{jsxref ("Boolean")}} işlevidir.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>{{Jsxref ("Boolean")}} nesnesinin kaynağını içeren bir dize döndürür; eşdeğer bir nesne oluşturmak için bu dizeyi kullanabilirsiniz. {{Jsxref ("Object.prototype.toSource ()")}} methodunu geçersiz kılar.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Nesnenin değerine bağlı olarak <code>"true"</code> ya da <code>"false"</code> dizesini döndürür. {{Jsxref ("Object.prototype.toString ()")}} methodunu geçersiz kılar.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>{{Jsxref ("Boolean")}} nesnesinin temel değerini döndürür. {{Jsxref ("Object.prototype.valueOf ()")}} methodunu geçersiz kılar.</dd> -</dl> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellikler</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım. JavaScript 1.0'da uygulanmaktadır.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize pull request gönderin.</div> - -<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> -</div> diff --git a/files/tr/web/javascript/reference/global_objects/map/prototype/index.html b/files/tr/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index 1124f3602e..0000000000 --- a/files/tr/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> özelliği {{jsxref("Map")}} kurucusunun prototipini temsil eder.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Tanım">Tanım</h2> - -<p>{{jsxref("Map")}} örnekleri {{jsxref("Map.prototype")}}'den miras alınır. Tüm <code>Map</code> örneklerine özellikler veya yöntemler eklemek için yapıcının prototip nesnesini kullanabilirsiniz.</p> - -<h2 id="Özellikleri">Özellikleri</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Bir örneğin prototipini oluşturan işlevi döndürür. Bu, varsayılan olarak {{jsxref("Map")}} işlevidir.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd><code>Map</code> nesnesindeki anahtar / değer çiftlerinin sayısını döndürür.</dd> -</dl> - -<h2 id="Yöntemler">Yöntemler</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Tüm anahtar / değer çiftlerini <code>Map</code> objesinden siler.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd><code>Map</code> nesnesindeki bir öge varsa ve kaldırılmışsa <code>true</code> öge yoksa <code>false</code> döndürür. <code>Map.prototype.has(key)</code> daha sonra <code>false</code> döndürür.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her öge için <strong><code>[anahtar, değer] </code></strong>dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd><code>Map</code> nesnesindeki her anahtar - değer çifti için ekleme sırasına göre callbackFn ögesini bir kez çağırır. thisArg parametresi forEach için sağlanmışsa, her geri çağırma için bu değer olarak kullanılacaktır.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd><code>key</code> ile ilişkilendirilmiş değeri veya hiçbir şey yoksa <code>undefined</code> değerini döndürür.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd><code>Map</code> nesnesindeki bir değerin <code>key</code> ile ilişkili olup olmadığını belirten bir boolean döndürür.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd><code>Map</code> nesnesindeki her bir ögenin<strong> anahtarlarını</strong> ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd><code>Map</code>nesnesindeki <code>key</code> değerini ayarlar. <code>Map</code> nesnesini döndürür.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd><code>Map</code> nesnesindeki her bir ögenin <strong>değerlerini </strong>ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her bir öge için<strong><code>[anahtar, değer]</code></strong> dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> -</dl> - -<h2 id="Şartlar">Şartlar</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Şart</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> - <p>İlk tanım</p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini ziyaret etin ve bize bir istek gönderin.</div> - -<p>{{Compat("javascript.builtins.Map.prototype")}}</p> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/tr/web/javascript/reference/operatörler/function_star_/index.html b/files/tr/web/javascript/reference/operators/function_star_/index.html index 193e00f205..193e00f205 100644 --- a/files/tr/web/javascript/reference/operatörler/function_star_/index.html +++ b/files/tr/web/javascript/reference/operators/function_star_/index.html diff --git a/files/tr/web/javascript/reference/operatörler/index.html b/files/tr/web/javascript/reference/operators/index.html index f42305b092..f42305b092 100644 --- a/files/tr/web/javascript/reference/operatörler/index.html +++ b/files/tr/web/javascript/reference/operators/index.html diff --git a/files/tr/web/javascript/reference/operatörler/instanceof/index.html b/files/tr/web/javascript/reference/operators/instanceof/index.html index 3434ea34b9..3434ea34b9 100644 --- a/files/tr/web/javascript/reference/operatörler/instanceof/index.html +++ b/files/tr/web/javascript/reference/operators/instanceof/index.html diff --git a/files/tr/web/javascript/reference/operatörler/super/index.html b/files/tr/web/javascript/reference/operators/super/index.html index 3dd3f62ebf..3dd3f62ebf 100644 --- a/files/tr/web/javascript/reference/operatörler/super/index.html +++ b/files/tr/web/javascript/reference/operators/super/index.html diff --git a/files/tr/web/javascript/reference/operatörler/this/index.html b/files/tr/web/javascript/reference/operators/this/index.html index 674e577187..674e577187 100644 --- a/files/tr/web/javascript/reference/operatörler/this/index.html +++ b/files/tr/web/javascript/reference/operators/this/index.html diff --git a/files/tr/web/javascript/reference/operatörler/typeof/index.html b/files/tr/web/javascript/reference/operators/typeof/index.html index deccfd8925..deccfd8925 100644 --- a/files/tr/web/javascript/reference/operatörler/typeof/index.html +++ b/files/tr/web/javascript/reference/operators/typeof/index.html diff --git a/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html b/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html deleted file mode 100644 index 04d337601d..0000000000 --- a/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Arithmetic operators -slug: Web/JavaScript/Reference/Operatörler/Arithmetic_Operators -tags: - - Aritmetik Operatörler - - JavaScript -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Aritmetik operatörler</strong> sayısal değerleri (değişmez değerler veya değişkenler) kendi değişkeni olarak alır ve tek bir sayısal değer döndürür. Standart aritmetik operatörler toplama (+), çıkarma (-), çıkarma (*), ve bölme (/).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> - - - -<h2 id="Addition" name="Addition">Toplama (+)</h2> - -<p>Toplama işleci, sayısal değişkenlerin veya dize birleşiminin toplamını üretir.</p> - -<h3 id="Syntax">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x + y -</pre> - -<h3 id="Examples">Examples</h3> - -<pre class="brush: js">// Number + Number -> Toplama -1 + 2 // 3 - -// Boolean + Number -> Toplama -true + 1 // 2 - -// Boolean + Boolean -> Toplama -false + false // 0 - -// Number + String -> Birleşim -5 + 'foo' // "5foo" - -// String + Boolean -> Birleşim -'foo' + false // "foofalse" - -// String + String -> Birleşim -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Subtraction" name="Subtraction">Çıkarma (-)</h2> - -<p>Çıkarma işleci (operator), iki değişkeni çıkarır ve farklarını üretir.</p> - -<h3 id="Söz_Dizimi">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x - y -</pre> - -<h3 id="Örnekler">Örnekler</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN(Sayı Değil)</pre> - -<h2 id="Division" name="Division">Bölme (/)</h2> - -<p>Bölme operatörü, sol değişkenin bölüm olduğu ve sağ değişkenin bölen olduğu işlenenlerin bölümünü üretir.</p> - -<h3 id="Söz_Dizimi_2">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x / y -</pre> - -<h3 id="Örnekler_2">Örnekler</h3> - -<pre class="brush: js">1 / 2 // 0.5 döndürür -1 / 2 // Java''da 0 döndürür -// (her iki sayı da açıkça kayan nokta sayısıdır) - -1.0 / 2.0 // JavaScript ve Java 0.5 döndürür - -2.0 / 0 // JavaScript sonsuz döndürür -2.0 / 0.0 // Sonsuzu da döndürür -2.0 / -0.0 // JavaScript eksi sonsuz da döndürür</pre> - -<h2 id="Multiplication" name="Multiplication">Çarpma (*)</h2> - -<p>Çarpma operatörü değişkenlerin ürününü üretir.</p> - -<h3 id="Söz_Dizimi_3">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x * y -</pre> - -<h3 id="Örnekler_3">Örnekler</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN(Sayı Değil1) -Infinity * Infinity // Sonsuz -'foo' * 2 // NaN -</pre> - -<h2 id="Remainder" name="Remainder">Kalan (%)</h2> - -<p>Kalan operatörü, bir değişken ikinci bir değişken tarafından bölündüğünde kalan döndürür. Her zaman bölüm işareti alır.</p> - -<h3 id="Söz_Dizimi_4">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> var1 % var2 -</pre> - -<h3 id="Örnekler_4">Örnekler</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5 -</pre> - -<h2 id="Exponentiation" name="Exponentiation">Üs (**)</h2> - -<p>The exponentiation operator returns the result of raising first operand to the power second operand. That is, <code>var1</code><sup><code>var2</code></sup>, in the preceding statement, where <code>var1</code> and <code>var2</code> are variables. Exponentiation operator is right associative. <code>a ** b ** c</code> is equal to <code>a ** (b ** c)</code>.</p> - -<h3 id="Syntax_2">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> var1 ** var2 -</pre> - -<h3 id="Notes">Notes</h3> - -<p>In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> - -<pre class="brush: js">-2 ** 2; -// 4 in Bash, -4 in other languages. -// This is invalid in JavaScript, as the operation is ambiguous. - - --(2 ** 2); -// -4 in JavaScript and the author's intention is unambiguous. -</pre> - -<h3 id="Examples_2">Examples</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 -</pre> - -<p>To invert the sign of the result of an exponentiation expression:</p> - -<pre class="brush: js">-(2 ** 2) // -4 -</pre> - -<p>To force the base of an exponentiation expression to be a negative number:</p> - -<pre class="brush: js">(-2) ** 2 // 4 -</pre> - -<div class="note"> -<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> -</div> - -<h2 id="Increment" name="Increment">Artırma (++)</h2> - -<p>Artış operatörü işlenenini artırır (bir ekler) ve bir değer döndürür.</p> - -<ul> - <li>İlk önce değişken adı kullanılırsa, değişkenden sonra operatörle (örneğin, x++) kullanılırsa artmadan önce değeri artırır ve döndürür.</li> - <li>Ön ek kullanılırsa, değişkenden önce operatörle (örneğin, ++x), daha sonra artırıldıktan sonra değeri artıtrır ve döndürür.</li> -</ul> - -<h3 id="Söz_Dizimi_5">Söz Dizimi</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x++ yada ++x -</pre> - -<h3 id="Örnekler_5">Örnekler</h3> - -<pre class="brush: js">// Postfix -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefix -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Decrement" name="Decrement">Azaltma (--)</h2> - -<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> - -<ul> - <li>If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.</li> - <li>If used prefix, with operator before operand (for example, --x), then it decrements and returns the value after decrementing.</li> -</ul> - -<h3 id="Syntax_3">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> x-- or --x -</pre> - -<h3 id="Examples_3">Examples</h3> - -<pre class="brush: js">// Postfix -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefix -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Unary_negation" name="Unary_negation">Unary negation (-)</h2> - -<p>The unary negation operator precedes its operand and negates it.</p> - -<h3 id="Syntax_4">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> -x -</pre> - -<h3 id="Examples_4">Examples</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// Unary negation operator can convert non-numbers into a number -var x = "4"; -y = -x; // y = -4 -</pre> - -<h2 id="Unary_plus_2"><a name="Unary_plus">Unary plus</a> (+)</h2> - -<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> - -<h3 id="Syntax_5">Syntax</h3> - -<pre class="syntaxbox"><strong>Operator:</strong> +x -</pre> - -<h3 id="Examples_5">Examples</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/operatörler/bitwise_operators/index.html b/files/tr/web/javascript/reference/operatörler/bitwise_operators/index.html deleted file mode 100644 index 410107226b..0000000000 --- a/files/tr/web/javascript/reference/operatörler/bitwise_operators/index.html +++ /dev/null @@ -1,565 +0,0 @@ ---- -title: Bitwise operators -slug: Web/JavaScript/Reference/Operatörler/Bitwise_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Bitsel işleçler</strong> işlediği elemanlara ondalık, onaltılık veya <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">sayılar</a></code> yerine 32 bit diziler(sıfır ve birler) olarak davranır. Örneğin, onluk bir sayı olan 9, ikilik sistemde 1001 ile gösterilir. Bitsel işleçler, işlemin iki tarafınada ikili değerleriyle işlem yapar ancak JavaScript standartı olan sayısal değerleri döner.</p> - -<p>Aşağıdaki tablo JavaScript'in bitsel işleçlerini özetler:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operator</th> - <th>Usage</th> - <th>Description</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND</a></td> - <td><code>a & b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitleri 1 ise, en az bir tanesi 0 ise 0 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR</a></td> - <td><code>a | b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden en az biri 1 ise 1 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden ancak bir tanesi 1 ise, 1 döndürür.</td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>İşlenenin bitlerini ters çevirir.</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift</a></td> - <td><code>a << b</code></td> - <td><code>a</code> sayısının ikili haline, sağına <code>b</code> (< 32) adet bit 0 ekleyerek sola doğru kaydırır.</td> - </tr> - <tr> - <td><a href="#Right_shift">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td><code>a</code> sayısının ikili halini <code>b</code> (< 32) adet bit sağa kaydırır. Pozitif sayılar için b adet 0, negatif sayılar için 1 ekleyerek kaydırır.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> - <td><code>a >>> b</code></td> - <td><code>a</code> sayısının ikili gösterimine <code>b</code> (< 32) bit sağa kaydırır, <code>a</code> sayısının pozitif negatif olmasına bakmadan sayının soluna <code>b</code> adet 0 ekler.</td> - </tr> - </tbody> -</table> - -<h2 id="İşaretli_32-bit_integer_sayılar">İşaretli 32-bit integer sayılar</h2> - -<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format. Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, a.k.a. ones' complement of the number) plus one. For example, the following encodes the integer 314:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>The following encodes <code>~314</code>, i.e. the ones' complement of <code>-314</code>:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>-314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> - -<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable through a 32bit signed number.</p> - -<h2 id="Bitwise_logical_operators">Bitwise logical operators</h2> - -<p>Conceptually, the bitwise logical operators work as follows:</p> - -<ul> - <li>The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer: - <pre>Before: 11100110111110100000000000000110000000000001 -After: 10100000000000000110000000000001</pre> - </li> - <li>Each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.</li> - <li>The operator is applied to each pair of bits, and the result is constructed bitwise.</li> -</ul> - -<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> - -<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.</p> - -<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> - -<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Bitwise ORing any number x with 0 yields x. Bitwise ORing any number x with -1 yields -1.</p> - -<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> - -<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.</p> - -<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> - -<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.</p> - -<p>Example with indexOf:</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// this is alternative way of typing if (-1*str.indexOf('a') <= 0) -if (~str.indexOf(searchFor)) { - // searchFor is in the string -} else { - // searchFor is not in the string -} - -// here are the values returned by (~str.indexOf(searchFor)) -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="Bitwise_shift_operators">Bitwise shift operators</h2> - -<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> - -<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> - -<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> - -<p>For example, <code>9 << 2</code> yields 36:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> - -<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> - -<p>For example, <code>9 >> 2</code> yields 2:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> - -<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> - -<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> - -<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> - -<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> - -<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> - -<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> - -<p>Suppose there are 4 flags:</p> - -<ul> - <li>flag A: we have an ant problem</li> - <li>flag B: we own a bat</li> - <li>flag C: we own a cat</li> - <li>flag D: we own a duck</li> -</ul> - -<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>This value indicates:</p> - -<ul> - <li>flag A is true (we have an ant problem);</li> - <li>flag B is false (we don't own a bat);</li> - <li>flag C is true (we own a cat);</li> - <li>flag D is false (we don't own a duck);</li> -</ul> - -<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> - -<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, -// and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finally, the flags can all be flipped with the NOT operator:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Conversion_snippets">Conversion snippets</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = '1011'; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> - -<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> - -<pre class="brush: js">function createMask() { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> - -<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> - -<pre class="brush: js">function arrayFromMask(nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError('arrayFromMask - out of range'); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert('[' + array1.join(', ') + ']'); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>You can test both algorithms at the same time…</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> - -<pre class="brush: js">function createBinaryString(nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> -</ul> diff --git a/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html b/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html deleted file mode 100644 index 8a1e2ea56f..0000000000 --- a/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html +++ /dev/null @@ -1,312 +0,0 @@ ---- -title: Mantıksal Operatörler -slug: Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler -tags: - - Değil - - JavaScript - - Mantıksal Operatörler - - Operator - - Referans - - ve - - ya da -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Mantıksal operatörler genellikle {{jsxref("Boolean")}} (mantıksal) değerleri ile kullanılır. Kullanıldıklarında, bir boolean değer döndürürler. Ancak, <code>&&</code> ve <code>||</code> operatörleri aslında belirtilmiş olan operandlardan birinin değerini döndürür, bu sebeple eğer bu operatörler Boolean olmayan değerler ile kullanılırsa, Boolean olmayan değerler üretebilirler.</p> - -<h2 id="Açıklama">Açıklama</h2> - -<p>Mantıksal operatörler aşağıdaki tabloda açıklanıyor:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operatör</th> - <th>Kullanım</th> - <th>Açıklama</th> - </tr> - <tr> - <td>Mantıksal VE (<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Eğer <code>expr1</code> false değerine dönüştürülebilirse, <code>expr1</code> döndürülür. Aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>&&</code> her iki operand <code>true</code> ise <code>true</code> ; aksi halde, <code>false</code> döndürür.</td> - </tr> - <tr> - <td>Mantıksal YA DA (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>Eğer <code>expr1</code> true değerine dönüştürülebilirse, expr1 döndürülür, aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>||</code> her iki operanddan herhangi biri <code>true</code> ise <code>true</code> döndürür.</td> - </tr> - <tr> - <td>Mantıksal DEĞİL (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>Eğer operandın değeri <code>true</code> is false döndürür, aksi alde <code>true</code> döndürür.</td> - </tr> - </tbody> -</table> - -<p>Eğer bir değer <code>true</code> değerine dönüştürülebiliyorsa, ona {{Glossary("truthy")}} ismi verilir. Eğer bir değer <code>false</code> değerine dönüştürülebiliyorsa, ona {{Glossary("falsy")}} denir.</p> - -<p><code><a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy">False</a></code> değerine dönüştürülebilen ifadelere örnekler:</p> - -<ul> - <li><code>null</code>;</li> - <li><code>NaN;</code></li> - <li><code>0</code>;</li> - <li>boş string (<code>""</code>); </li> - <li><code>undefined</code>.</li> -</ul> - -<p>&& ve || operatörleri <code>Boolean</code> olmayan değerler ile kullanılabiliyor olmasına rağmen, döndürdükleri değerler her zaman <code>Boolean</code> değerlerine çevirilebildiğinden, halen <code>Boolean</code> operatörleri olarak düşünülebilirler.</p> - -<h3 id="Kısa-devre_değerlendirmeleri">Kısa-devre değerlendirmeleri</h3> - -<p>Mantıksal operatörler soldan sağa çalıştırıldıkları gibi, mümkünse aşağıdaki kurallar kullanılarak "kısa devre" testine tabi tutulurlar:</p> - -<ul> - <li><code>false && (<em>herhangi)</em></code> bir kısa devre, false değerine çevrilir.</li> - <li><code>true || (<em>herhangi)</em></code> bir kısa devre, true değerine çevrilir.</li> -</ul> - -<p>Mantık kuralları bu değerlendirmelerin doğruluğunu garantiler. Yukarıdaki ifadelerin tümünün çalıştırılmayacağına, bu sebeple hepsinin yan etkisinin olmayacağına dikkat edin. Ayrıca yukarıdaki ifadenin <code>(herhangi)</code> kısmının tamamıyla bir mantıksal ifadeye eşit olduğuna dikkat edin. (parantezler ile gösterildiği gibi).</p> - -<p>Örneğin, aşağıdaki iki fonksiyon birbirinin aynısıdır.</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Ancak, aşağıdaki ifadeler operatör önceliğine göre eşit değildir ve sağ el operatörünün tek bir ifade olmasının önemini vurgular (gerekirse parantezler ile gruplanır).</p> - -<pre class="brush: js">false && true || true // returns true -false && (true || true) // returns false</pre> - -<h3 id="Mantıksal_VE_()"><a name="Logical_AND">Mantıksal VE (<code>&&</code>)</a></h3> - -<p>Aşağıdaki kod && (mantıksal VE) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">a1 = true && true // t && t returns true -a2 = true && false // t && f returns false -a3 = false && true // f && t returns false -a4 = false && (3 == 4) // f && f returns false -a5 = "Cat" && "Dog" // t && t returns "Dog" -a6 = false && "Cat" // f && t returns false -a7 = "Cat" && false // t && f returns false -a8 = "" && false // returns "" -a9 = false && || // returns false -</pre> - -<h3 id="Mantıksal_YA_DA_()"><a name="Logical_OR">Mantıksal YA DA (<code>||</code>)</a></h3> - -<p>Aşağıdaki kod || (mantıksal YA DA) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">o1 = true || true // t || t returns true -o2 = false || true // f || t returns true -o3 = true || false // t || f returns true -o4 = false || (3 == 4) // f || f returns false -o5 = "Cat" || "Dog" // t || t returns "Cat" -o6 = false || "Cat" // f || t returns "Cat" -o7 = "Cat" || false // t || f returns "Cat" -o8 = "" || false // returns false -o9 = false || "" // returns "" -</pre> - -<h3 id="Mantıksal_DEĞİL_(!)"><a name="Logical_NOT">Mantıksal DEĞİL (<code>!</code>)</a></h3> - -<p>Aşağıdaki kod ! (mantıksal DEĞİL) operatörüyle ilgili örnekleri gösterir.</p> - -<pre class="brush: js">n1 = !true // !t returns false -n2 = !false // !f returns true -n3 = !"Cat" // !t returns false -</pre> - -<h3 id="Dönüşüm_kuralları">Dönüşüm kuralları</h3> - -<h4 id="VE_operatörünü_YA_DA_operatörüne_dönüştürmek">VE operatörünü YA DA operatörüne dönüştürmek</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="YA_DA_operatörünü_VE_operatörüne_çevirmek">YA DA operatörünü VE operatörüne çevirmek</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="DEĞİL_operatörleri_arasında_dönüşüm_yapmak">DEĞİL operatörleri arasında dönüşüm yapmak</h4> - -<p>Booleanları içeren aşağıdaki ifade:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>her zaman şuna eşittir: </p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="İç_içe_geçmiş_parantezleri_kaldırmak">İç içe geçmiş parantezleri kaldırmak</h3> - -<p>Mantıksal operatörlerin soldan sağa değerlendirilmesi durumunda, kompleks bir ifadeden parantezleri bazı kuralları takip ederek kaldırmak mümkündür.</p> - -<h4 id="İç_içe_geçmiş_VE_operatörünü_kaldırmak">İç içe geçmiş VE operatörünü kaldırmak</h4> - -<p>Aşağıda, Boolean içeren bu bileşik işlem:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="İç_içe_geçmiş_YA_DA_operatörünü_kaldırmak">İç içe geçmiş YA DA operatörünü kaldırmak</h4> - -<p>Aşağıda, Boolean içeren bu bileşik ifade:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>her zaman şuna eşittir:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>İlk tanım.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Mantıksal VE (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td> - <p>Mantıksal YA DA (<code>||</code>)</p> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Mantıksal DEĞİL (<code>!</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Android üzerinde Chrome</th> - <th>Firefox Mobil (Gecko)</th> - <th>IE Mobil</th> - <th>Opera Mobil</th> - <th>Safari Mobil</th> - </tr> - <tr> - <td>Logical AND (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Logical OR (<code>||</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Logical NOT (<code>!</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakın">Ayrıca bakın</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/tr/web/bildiri/index.html b/files/tr/web/manifest/index.html index 3bc751b238..3bc751b238 100644 --- a/files/tr/web/bildiri/index.html +++ b/files/tr/web/manifest/index.html diff --git a/files/tr/web/güvenlik/index.html b/files/tr/web/security/index.html index 1543d6a3db..1543d6a3db 100644 --- a/files/tr/web/güvenlik/index.html +++ b/files/tr/web/security/index.html diff --git a/files/tr/web/security/mixed_content/index.html b/files/tr/web/security/mixed_content/index.html new file mode 100644 index 0000000000..2576d1c4bf --- /dev/null +++ b/files/tr/web/security/mixed_content/index.html @@ -0,0 +1,44 @@ +--- +title: Mixed Content +slug: Security/MixedContent +translation_of: Web/Security/Mixed_content +--- +<p>When a user visits a page served over HTTPS, their connection with the web server is encrypted with SSL and hence safeguarded from sniffers and man-in-the-middle attacks.</p> +<p>If the HTTPS page includes content retrieved through regular, cleartext HTTP, then the connection is only partially encrypted: the unencrypted content is accessible to sniffers and can be modified by man-in-the-middle attackers, and therefore the connection is not safeguarded anymore. When a webpage exhibits this behavior, it is called a <em>mixed content</em> page.</p> +<h2 id="Web_Console">Web Console</h2> +<p>Starting in Firefox 16, the Web Console displays a mixed content warning message when a page on your website has this issue. The mixed content resource that was loaded via HTTP will show up in red, along with the text "mixed content" which will link to this page.</p> +<p><a class="internal" href="/files/3794/mixed_content_webconsole.jpg"><img alt="Screen shot of the web console displaying a mixed content warning." src="/files/3794/mixed_content_webconsole.jpg" style="width: 700px; border-width: 1px; border-style: solid; height: 116px;"></a></p> +<p>To fix this error, requests to HTTP content should be removed and replaced with content served over HTTPS. Some common examples of mixed content include JavaScript files, stylesheets, images, videos, and other media.</p> +<p>Starting in Firefox 23, mixed active content is blocked by default (and mixed display content can be blocked by setting a preference). To make it easier for web developers to find mixed content errors, all blocked mixed content requests are logged to the Security pane of the Web Console.</p> +<p><a href="/files/5261/blocked-mixed-content-errors.png"><img alt="A screenshot of blocked mixed content errors in the Security Pane of the Web Console" src="https://mdn.mozillademos.org/files/5261/blocked-mixed-content-errors.png" style="width: 725px; height: 107px;"></a></p> +<h2 id="Types_of_Mixed_Content">Types of Mixed Content</h2> +<p>There are two categories for mixed content: <strong>Mixed Passive/Display Content</strong> and <strong>Mixed Active Content</strong>. The difference lies in the threat level of the worst case scenario if content is rewritten as part of a Man-In-The-Middle attack. In the case of passive content, the threat is low (webpage appears broken or with misleading content). In the case of active content, the threat can lead to phishing, sensitive data disclosure, redirection to malicious sites, etc.</p> +<h3 id="Mixed_passivedisplay_content">Mixed passive/display content</h3> +<p>Mixed Passive/Display Content is content served over HTTP that is included in an HTTPS webpage, but that cannot alter other portions of the webpage. For example, an attacker could replace an image served over HTTP with an inappropriate image or message to the user. The attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website. If the attacker observes HTTP requests to certain images, he could determine which webpage the user is visiting.</p> +<h4 id="Passive_content_list">Passive content list</h4> +<p>This section lists all types of HTTP requests which are considered passive content:</p> +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/audio" title="/en-US/docs/Web/HTML/Element/audio"><audio></a> (<code>src</code> attribute)</li> + <li><a href="/en-US/docs/Web/HTML/Element/Img" title="/en-US/docs/Web/HTML/Element/Img"><img></a> (<code>src</code> attribute)</li> + <li><a href="/en-US/docs/Web/HTML/Element/video" title="/en-US/docs/Web/HTML/Element/Img"><video></a> (<code>src</code> attribute)</li> + <li><a href="/en-US/docs/Web/HTML/Element/object" title="/en-US/docs/Web/HTML/Element/object"><object></a> subresources (when an <object> performs HTTP requests)</li> +</ul> +<h3 id="Mixed_active_content">Mixed active content</h3> +<p>Mixed Active Content is content that has access to all or parts of the Document Object Model of the HTTPS page. This type of mixed content can alter the behavior of the HTTPS page and potentially steal sensitive data from the user. Hence, in addition to the risks described for Mixed Display Content above, Mixed Active Content is vulnerable to a few other attack vectors.</p> +<p>In the Mixed Active Content case, a man-in-the-middle attacker can intercept the request for the HTTP content. The attacker can also rewrite the response to include malicious JavaScript code. Malicious active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the browser or its plugins, for example).</p> +<p>The risk involved with mixed content does depend on the type of website the user is visiting and how sensitive the data exposed to that site may be. The webpage may have public data visible to the world or private data visible only when authenticated. If the webpage is public and has no sensitive data about the user, using Mixed Active Content still provides the attacker with the opportunity to redirect the user to other HTTP pages and steal HTTP cookies from those sites.</p> +<h4 id="Active_content_list">Active content list</h4> +<p>This section lists some types of HTTP requests which are considered active content:</p> +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/script" title="/en-US/docs/Web/HTML/Element/script"><script></a> (<code>src</code> attribute)</li> + <li><a href="/en-US/docs/Web/HTML/Element/link" title="/en-US/docs/Web/HTML/Element/link"><link></a> (<code>href</code> attribute) (this includes CSS stylesheets)</li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> object requests</li> + <li><a href="/en-US/docs/Web/HTML/Element/iframe" title="/en-US/docs/Web/HTML/Element/iframe"><iframe></a> (<code>src</code> attributes)</li> + <li>All cases in CSS where a <a href="http://www.w3.org/TR/css3-values/#urls" title="http://www.w3.org/TR/css3-values/#urls">url</a> value is used (<a href="/en-US/docs/Web/CSS/@font-face" title="/en-US/docs/Web/CSS/@font-face">@font-face</a>, <a href="/en-US/docs/Web/CSS/cursor" title="/en-US/docs/Web/CSS/cursor">cursor</a>, <a href="/en-US/docs/Web/CSS/background-image" title="/en-US/docs/Web/CSS/background-image">background-image</a>, etc.)</li> + <li><a href="/en-US/docs/Web/HTML/Element/object" title="/en-US/docs/Web/HTML/Element/object"><object></a> (<code>data</code> attribute)</li> +</ul> +<h2 id="See_also">See also</h2> +<div class="warning"> + <p><a href="/en-US/docs/Security/MixedContent/fix_website_with_mixed_content">How to fix a website with blocked mixed content</a></p> +</div> +<p> </p> diff --git a/files/tr/web/güvenlik/transport_layer_security/index.html b/files/tr/web/security/transport_layer_security/index.html index 5ba269b7cc..5ba269b7cc 100644 --- a/files/tr/web/güvenlik/transport_layer_security/index.html +++ b/files/tr/web/security/transport_layer_security/index.html diff --git a/files/tr/web/security/weak_signature_algorithm/index.html b/files/tr/web/security/weak_signature_algorithm/index.html new file mode 100644 index 0000000000..c80645ff36 --- /dev/null +++ b/files/tr/web/security/weak_signature_algorithm/index.html @@ -0,0 +1,18 @@ +--- +title: Zayıf İmza Algoritması +slug: Security/Zatıf_İmza_Algoritması +tags: + - Kılavuz Güvenlik Algoritmalar +translation_of: Web/Security/Weak_Signature_Algorithm +--- +<h3 id="İmza_Algoritması_Neden_Önemli">İmza Algoritması Neden Önemli</h3> + +<p>Sertifika imzalamada kullanılan imza algoritmaları sertifikaların güvenliğinin kritik bir elemanıdır. İmza algoritmalarındak zayıflıklar saldırganları sahte sertifikalar üretmelerine yol açabilir. Yeni atak türlerini bulunması ve teknolojideki gelişmeler imzalara karşı yapılan saldırılarda başarılı olmayı daha fazla mümkün hale getirmiştir. Bu sebeplerden eski algoritmaların kullanımından vazgeçilmekte ve nihayetinde destek kaldırılmaktadır.</p> + +<h3 id="SHA-1">SHA-1</h3> + +<p>SHA-1 tabanlı imzalar sertifikalarda, bu yazı zamanında, yaygın olarak kullanılmaktadır. Ancak, SHA-1 eskimekte olan bir algoritmadır ve kullanımından vazgeçilmelidir. Sertifika yenileme zamanları geldiğinde daha güçlü bir imza algoritmasının kullanıldığındna emin olunmalıdır. Bu konu hakkında daha detaylı bilgiyi <a href="https://blog.mozilla.org/security/2014/09/23/phasing-out-certificates-with-sha-1-based-signature-algorithms/">Mozilla Security Blog post</a> gönderisinde okuyabilirsiniz. (İngilizce olabilir)</p> + +<h3 id="MD5">MD5</h3> + +<p>MD5 tabanlı imzalara destek 2012 yılı başlarında kaldırılmıştır.</p> |