diff options
Diffstat (limited to 'files/tr/web/guide')
| -rw-r--r-- | files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html | 147 | ||||
| -rw-r--r-- | files/tr/web/guide/css/getting_started/css_nedir/index.html | 118 | ||||
| -rw-r--r-- | files/tr/web/guide/css/getting_started/how_css_works/index.html | 135 | ||||
| -rw-r--r-- | files/tr/web/guide/css/getting_started/index.html | 53 | ||||
| -rw-r--r-- | files/tr/web/guide/css/getting_started/why_use_css/index.html | 113 | ||||
| -rw-r--r-- | files/tr/web/guide/css/sayaçlar/index.html | 102 | ||||
| -rw-r--r-- | files/tr/web/guide/graphics/index.html (renamed from files/tr/web/guide/çizgeler/index.html) | 0 | ||||
| -rw-r--r-- | files/tr/web/guide/html/html5/index.html | 254 |
8 files changed, 254 insertions, 668 deletions
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/css/sayaçlar/index.html b/files/tr/web/guide/css/sayaçlar/index.html deleted file mode 100644 index d31a159a27..0000000000 --- a/files/tr/web/guide/css/sayaçlar/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/Guide/CSS/Sayaçlar -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -<p>{{CSSRef}}</p> -<p><span class="seoSummary">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.</span> CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p> -<p>The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the <code>counter()</code> or <code>counters()</code> function of the <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> property.</p> -<h2 id="Using_counters" name="Using_counters">Sayaçları kullanmak</h2> -<p>To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".</p> -<pre class="brush: css">body { - counter-reset: bolum; /* bolum adlı sayacın değerini 0 olarak ayarla */ -} -h3:before { - counter-increment: bolum; /* bolum adlı sayacı arttır */ - content: "Bölüm" counter(bolum) ": "; /* Sayacı görüntüle */ -} -</pre> -<p>Örnek:</p> -<pre class="brush: html"><h3>Giriş</h3> -<h3>Gövde</h3> -<h3>Sonuç</h3></pre> -<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p> -<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2> -<p>A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the <code>counters()</code> function, a string can be inserted between different levels of nested counters. For example this CSS:</p> -<pre class="brush: css">ol { - counter-reset: section; /* Creates a new instance of the - section counter with each ol - element */ - list-style-type: none; -} -li:before { - counter-increment: section; /* Increments only this instance - of the section counter */ - content: counters(section,".") " "; /* Adds the value of all instances - of the section counter separated - by a ".". */ - /* if you need to support < IE8 then - make sure there is no space after - the ',' -} -</pre> -<p>Combined with the following HTML:</p> -<pre class="brush: html"><ol> - <li>item</li> <!-- 1 --> - <li>item <!-- 2 --> - <ol> - <li>item</li> <!-- 2.1 --> - <li>item</li> <!-- 2.2 --> - <li>item <!-- 2.3 --> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - </ol> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - <li>item</li> <!-- 2.3.3 --> - </ol> - </li> - <li>item</li> <!-- 2.4 --> - </ol> - </li> - <li>item</li> <!-- 3 --> - <li>item</li> <!-- 4 --> -</ol> -<ol> - <li>item</li> <!-- 1 --> - <li>item</li> <!-- 2 --> -</ol></pre> -<p>Yields this result:</p> -<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</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('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> - <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> -</ul> -<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p> -<p> </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/guide/html/html5/index.html b/files/tr/web/guide/html/html5/index.html new file mode 100644 index 0000000000..d4ab791219 --- /dev/null +++ b/files/tr/web/guide/html/html5/index.html @@ -0,0 +1,254 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - HTML + - HTML5 + - html kaynak + - html5 firefox + - html5 kaynak + - html5 komutlar + - html5 mozilla + - html5 nedir + - html5 türkçe + - html5 türkçe açıklama + - web geliştirici +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:</span></p> + +<ul> + <li>Yeni elemanları, özellikleri ve davranışları içeren bir HTML sürümünü,</li> + <li>Çok güçlü ve farklı Web siteleri ve uygulamalarını kapsayan çok büyük bir teknoloji kümesini ki HTML5 olarak kısaltılmış olup HTML5 ve elemanları diye bilinir.</li> +</ul> + +<p>Tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olup; bu referans sayfası, fonksiyonlarına göre çeşitli sınıflara ayrılmış HTML5 teknolojileri hakkında bağlantıları barındırır, bunlar:</p> + +<ul> + <li><em><strong>Semantics (Kurgulama Durumu)</strong></em><strong>:</strong> İçeriğinizi daha iyi tanımlamanıza<strong>,</strong></li> + <li><strong><em>Connectivity (Bağlantı Durumu)</em>:</strong> Sunucuya yeni ve yenilikçi yollarla bağlanmanıza,</li> + <li><strong><em>Offline & Storage (Çevrimdışılık ve Depolama Durumu)</em>:</strong> Web sayfalarının yerel sunucuda veri depolamasına ve çevrimdişı daha verimli kullanılmasına,</li> + <li><em><strong>Multimedia (Çoklumedya)</strong></em><strong>:</strong> Open Web ile 1. sınıf programcılar, video ve ses üretmesine, </li> + <li><em><strong>2D/3D Graphics & Effects (2 ve 3 Boyutlu Grafik ve Efekler)</strong></em><strong>:</strong> <br> + Daha fazla ve çeşitli boyuttaki sunum seçeneklerine, </li> + <li><em><strong>Performance & Integration (Performans ve Entegre Etme)</strong></em><strong>:</strong> Bilgisayar donanımının daha iyi kullanılmasına ve daha büyük hızlara çıkılabilmesine, </li> + <li><em><strong>Device access (Sürücülere Ulaşma)</strong></em><strong>:</strong> Çeşitli giriş ve çıkış sürücülerinin kullanılmasına, </li> + <li><strong><em>S<strong>tyling (Şekillendirme)</strong></em><strong>:</strong></strong> Web tasarımcılarının, daha görkemli temelara hükmetmesine imkan tanır.<br> + </li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="semantik_Kurgulama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">semantik (Kurgulama)</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 Bölüm ve Anahatlar</a></dt> + <dd>HTML5 bölüm ve anahatlarını belirleyen {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} ve {{ HTMLElement("hgroup") }} adlı yeni HTML5 elemanlarına bakış.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Video ve Ses Elemanlarının Kullanılması</a> </dt> + <dd>{{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 Formlar</a></dt> + <dd>API doğrulamayla kısıtlanmış yeni özellikler, {{ HTMLElement("input") }} kullanım tipi (English: {{ htmlattrxref("type", "input") }}) için yeni değerler ve yeni bir {{ HTMLElement("output") }} elemanı için HTML5' de web formlarındaki iyileştirmelere bir bakış.</dd> + <dt>Yeni Kurgu (Semantic) Elemanları</dt> + <dd>Bölümlerin, medya ve form elemanlarının yanında {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} veya {{ HTMLElement("meter") }}, {{HTMLElement("main")}} gibi <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">geçerli HTML5 elemanları</a> içerisine dahil edilen yeni birçok eleman vardır.</dd> + <dt>{{HTMLElement("iframe")}} İyileştirmesi</dt> + <dd>Şimdi {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} ve {{htmlattrxref("srcdoc", "iframe") }} komutlarının kullanılmasıyla artık programcılar güvenlik düzeyi ve bir {{HTMLElement("iframe")}} elementi için umulan iyi renderi oluşturma konusunda emin olabilirler. </dd> + <dt> <a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a> </dt> + <dd>Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">HTML5' e Giriş</a></dt> + <dd>Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 -Compliant Parser</a> (HTML5 - Uyumlu Ayrıştırıcılar) </dt> + <dd>Bir HTML dökümanının DOM (İngilizce: Document Object Model yani Dökümanın Nesnesel Modeli) baytlarını döndüren ayrıştırıcı, şimdi geçersiz HTML ile karşı karşıya kalındığı taktirde bile genişletilmiş ve tam olarak her durumdaki davranışı tanımlayabilmektedir.</dd> +</dl> + +<h2 id="CONNECTİVİTY_BAğlanılabilirlik" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONNECTİVİTY (BAğlanılabilirlik)</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Soketleri</a></dt> + <dd>Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Sunucu - Gönderim Olayları</a></dt> + <dd>Sunucunun yanlızca istemcinin beklentilerine yanıt olarak gönderebileceği klasikleşmiş verilerden ziyade, sunucuya istemci için olayları daha da öteleme imkanı tanır.</dd> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a> (Real-Time Communication) </dt> + <dd>Bu teknoloji, bir eklenti ve bir harici uygulamaya gerek duymaksızın, diğer kişilerle iletişime ve direkt tarayıcı içinde video konferans kontrolüne imkan tanıyan, gerçek zamanlı iletişim diğer adıyla<br> + RTC (Real-Time Communication) olarak hizmet verir.</dd> +</dl> + +<h2 id="OFFLİNE_STORAGE_çevrimdışılık_ve_depolama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">OFFLİNE & STORAGE (çevrimdışılık ve depolama)</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Çevrim Dışı Kaynaklar: Uygulama Önbelleği</a></dt> + <dd>Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> + <dd>Firefox 3, bağlantının bittiğinin yahut devam ettiğinin tespiti kadar etkili bir şekilde uygulama ve eklentilere, aktif internet bağlantısının olup olmadığını tespit edebilecekleri çevrimiçi ve çevrimdışı WHATWG yani Web Hypertext Aplication Tecnology Working Group<br> + ( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)</a></dt> + <dd>İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> (İndexlenmiş Veri Tabanı)</dt> + <dd>Tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veri indeksini kullanarak yüksek performanslı erişimin sağlanabileceği bir weeb standardıdır.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Web Uygulamalarında Dosyaların Kullanılması</a></dt> + <dd>Dosya API desteğinin yeni HTML5 için gecko'ya eklenmesi web uygulamalrı için kullanıcının seçtiği yerel dosyalara ulaşmasının mümkün kılmıştır. Bu içerik HTML elemanlarının çoklu ve yeni özelliklerle {{ HTMLElement("input") }} şeklinin (<a href="https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a>) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader<br> + (Dosya okuyucu) olarak bilinir. </dd> +</dl> + +<p> </p> + +<h2 id="MULTIMEDIA_çoklu_ortam" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA (çoklu ortam)</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Ses ve Videonun Kullanılması</a></dt> + <dd>HTML5 için {{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanları gömülebilir ve yeni multimedya içeriğinin üzerinde manipülasyon yapılabilmesine izin verir.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd>RTC (Real Time Communication) "Gerçek zamanlı iletişim" olarak sunulan bu teknoloji, eklenti ve harici uygulamaya gerek duymaksızın diğer kişilerle direkt olarak iletişime ve tarayıcı içinde video konferansın kontrol edilmesine imkan verir.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" style="font-weight: bold;" title="/en-US/docs/DOM/Using_the_Camera_API">Kamera API Kullanımı</a><strong style="font-weight: bold;"> </strong></dt> + <dd><a href="http://sosyalmedya.co/api-nedir/">API Nedir</a>: İngilizce <strong>Aplication Programming Interface </strong> kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.<br> + <br> + Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.</dd> + <dt>Traklar ve WebVTT</dt> + <dd>WebVTT demek Web Video Text Tracks yani Webdeki videoların yazı formudur. {{HTMLElement("track")}} elemanı videolarda altyazı ve bölümlere izin verir. <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> bir yazı formatıdır.</dd> +</dl> + +<h2 id="sect1" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"> </h2> + +<h2 id="3d_ÜÇ_BOYUTLU_grafikler_ve_efektler" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3d (ÜÇ BOYUTLU) grafikler ve efektler</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Elemanının Kullanımına Örnekler</a></dt> + <dd>Firefox' da yeni {{ HTMLElement("canvas") }} elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code> elemanı için HTML5 Yazı API' leri</a> </dt> + <dd>Artık HTML5 yazı API' lerini {{ HTMLElement("canvas") }} elemanı tarafından desteklenmektedir.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> (Web Graphic Library)</dt> + <dd>WebGL, Web Grafik Kütüphanesi anlamındadır. WebGL, web platformuna, HTML5 {{ HTMLElement("canvas") }} elemanları içinde kullanılabilecek OpenGL ES 2.0 ile yakından uyumlu bir API sunarak, Üç boyutlu grafik kullanım imkanı sunmuştur.</dd> + <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="performans_ve_entegrasyon" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">performans ve entegrasyon</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Webte Çalışanlar</a></dt> + <dd>İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.</dd> + <dd><code>2.Seviye <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code><br> + Sayfanın bazı bölümlerinden, zaman bağlı kalmadan bilgi çekmek mümkündür. Bu da değişken olan zaman ve kullanıcı eylemlerine göre dinamik içeriği görüntülemeye imkan verir. Bu <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a><br> + arkasındaki teknolojidir.</dd> + <dt>JavaScript Motorunun Anında Derlenmesi ( JIT-Compiling ) </dt> + <dd>Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history"> Tarayıcı Geçmiş Bilgisi API' si</a></dt> + <dd>Tarayıcının belleğinde kalmış bilgiler üzerinde manipülasyon yapmaya imkan verir. Bu özellikle web sayfaları için etkileşimli bilgileri yüklemek için yararlıdır.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable </a>elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme</dt> + <dd>HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag ve Drop</a> (Sürükle-Bırak) Özelliği </dt> + <dd>HTML5, sürükle-bırak özelliği web siteleri içi ve web sayfaları arasında öğeleri sürükleme özelliğini destekler. Bu aynı zamanda daha basit API' lerin uzantılar ve mozilla tabanlı uygulamalar için kullanılabilmesini sağlar.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML Focus Yönetimi </a>(Odaklama)</dt> + <dd>Yeni HTML5, <strong><code>activeElement</code></strong> ve <strong><code>hasFocus()</code></strong> özelliklerini desteklemektedir.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web Tabanlı Protokol İşleyicileri</a></dt> + <dd>Şimdi web uygulamalarını,<br> + <code><strong>navigator.registerProtocolHandler()</strong></code><br> + metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>En iyi performansı almak için animasyonların render kontrolüne imkan tanır.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Tam Ekran API'si</a></dt> + <dd>Tarayıcı UI (User Interface) yani kullanıcı arabirimi olmaksızın bir web sayfası yahut uygulama için ekranın bütününü denetler.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi Kilitlenme (Lock) API' si</a></dt> + <dd>İşaretçinin pencere sınırını aşabileceği durumlarda, çoğu oyun ve benzeri uygulamaların bütünlüğünü kaybetmemesi için işaretçinin web sayfasının içeriğine kilitlenmesine (Ya kısıtlanmasına yahut hareketinin sınırlandırılmasına) imkan verir.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> + <dd>Çevrimdışı özelliği barındıran iyi bir web uygulaması oluşturabilmeniz için uygulamanın ne zaman çevrimdışı olduğunu bunun yanında uygulamanızın ne zaman tekrar çevrim içi duruma döndüğünü bilmeniz gerekir.</dd> +</dl> + +<h2 id="cihaz_erişimi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">cihaz erişimi</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API"> Kamera API'sinin Kullanımı</a></dt> + <dd>Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Dokunmatik Olaylar</a></dt> + <dd>Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Konum Bilgisinin (GeoLocation) Kullanılması</a></dt> + <dd>Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Cihaz Yönünü Saptama</a></dt> + <dd>Cihazın çalıştığı tarayıcıyla ilgili yön değişiklikleri hakkında bilgi alınabilir. Bu bir giriş cihazı olarak (örneğin cihazın yer değiştirmesine bağlı oyunlar yapmak) veya ekranın yönünün sayfanın düzenine bağlı olarak (yatay ve dikey) olarak adapte edilebilmesi için kullanışlıdır.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi (Kilitleme-Sabitleme) API'si</a></dt> + <dd>İşaretçi ekranın dışına ulaştığında birçok oyun ve benzeri uygulamaların merkezinin kaybolmaması amacıyla işaretçinin içerik için sabitlenmesine olanak verir.</dd> +</dl> + +<h2 id="Stİller" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stİller</h2> + +<p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; <br> + 1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.</p> + +<dl> + <dt>Yeni Arkaplan Stil Özellikleri</dt> + <dd>{{ cssxref("box-shadow") }} komutuyla bir kutuya gölge efekti vermek ve <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">çoklu arkaplan</a> ayarlamaya izin vermiştir.</dd> + <dt>Daha Süslü Çerçeveler</dt> + <dd>Sadece {{ cssxref("border-image") }} ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.<br> + {{ cssxref("border-radius") }} özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.</dd> + <dt>Stillerinizin Animasyonlaştırılması</dt> + <dd>Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS animasyonları</a> kullanarak animasyon yapmada <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a> (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz </dd> + <dt>Tipoğrafi İyileştirmeleri</dt> + <dd>Web tasarımcıları mükemmel tipoğrafiye (Ekrana Basma) ulaşmak için güçlü kontrole sahip olurlar. Bu kontroller için {{ cssxref("text-overflow") }} ve <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">hyphenation</a>, <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">shadow</a> (gölge) ekleyerek veya daha detaylı şekillendirmelerde <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">decorations</a> (şekillendirme) komutlarını kullanabilirler. Bu iyileştirme varsayılan yazı tiplerini içerir bu na da {{ cssxref("@font-face") }} kurallar topluluğuyla imkan tanır. </dd> + <dt>Yeni Sunum Düzenleri</dt> + <dd>Tasarım etkinliğini arttırmak için, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a> <br> + (CSS Çoklu Satır Düzenleri) ve <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexible box layout</a> (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme <a href="https://indonesianlanguagetranslator.com/our-services/">eklendi</a>.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div> +<div class="ImTranslatorLogo" id="SL_button" style="display: none;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator"> +<div id="SL_planshet" style="background: rgb(244, 245, 245);"> +<div id="SL_TB"> +<div class="ImTranslatorLogo" id="bubblelogo"> </div> + +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" title="Switch languages"> </div> + </td> + <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option selected value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> + <td class="SL_td"> </td> + <td class="SL_td"> + <div id="SL_TTS_voice" title="Listen to the translation"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" title="Copy translation"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" title="Font size"> </div> + </td> + <td class="SL_td"> + <div id="SL_TH" title="Translation history"> </div> + </td> + <td class="SL_td"> </td> + <td class="SL_td"> + <div id="SL_pin" title="Pin pup-up bubble"> </div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result" style="background: rgb(255, 255, 255);"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">Text-to-speech function is limited to 100 characters</div> + +<div id="SL_bbl_donate" title="Make a small contribution"> </div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255);"><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation history">History</a> : <a class="SL_options" href="http://about.imtranslator.net/add-ons/chrome-extension/" title="ImTranslator Help">Help</a> : <a class="SL_options" title="Feedback">Feedback</a></div> +</div> +</div> |