From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/tr/web/guide/ajax/index.html | 121 +++++++++++++++++ .../cascading_and_inheritance/index.html | 146 +++++++++++++++++++++ .../guide/css/getting_started/css_nedir/index.html | 117 +++++++++++++++++ .../css/getting_started/how_css_works/index.html | 134 +++++++++++++++++++ files/tr/web/guide/css/getting_started/index.html | 52 ++++++++ .../css/getting_started/why_use_css/index.html | 112 ++++++++++++++++ .../tr/web/guide/css/saya\303\247lar/index.html" | 102 ++++++++++++++ files/tr/web/guide/index.html | 29 ++++ "files/tr/web/guide/\303\247izgeler/index.html" | 53 ++++++++ 9 files changed, 866 insertions(+) create mode 100644 files/tr/web/guide/ajax/index.html create mode 100644 files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html create mode 100644 files/tr/web/guide/css/getting_started/css_nedir/index.html create mode 100644 files/tr/web/guide/css/getting_started/how_css_works/index.html create mode 100644 files/tr/web/guide/css/getting_started/index.html create mode 100644 files/tr/web/guide/css/getting_started/why_use_css/index.html create mode 100644 "files/tr/web/guide/css/saya\303\247lar/index.html" create mode 100644 files/tr/web/guide/index.html create mode 100644 "files/tr/web/guide/\303\247izgeler/index.html" (limited to 'files/tr/web/guide') diff --git a/files/tr/web/guide/ajax/index.html b/files/tr/web/guide/ajax/index.html new file mode 100644 index 0000000000..7aece12816 --- /dev/null +++ b/files/tr/web/guide/ajax/index.html @@ -0,0 +1,121 @@ +--- +title: Ajax +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +
Başlarken
+Ajax'a giriş.
+ +
+

Asenkronize JavaScript + XML, aslında bir teknoloji değil, 2005 yılında Jesse James tarafından geliştirilmiştir. AJAX,  HTML , XHTML , Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT ve  en önemlisi  XMLHttpRequest object gibi mevcut birçok teknolojinin bir arada kullanılmasıyla tanımlanır.

+ +

Web uygulamaları Ajax modelinde bu teknolojilerle birleştirildiğinde, tarayıcının sayfayı yeniden yükleme olmadan kullanıcı arayüzü hızlı, eklenmiş güncelleştirmeler yapmak mümkün. Böylece uygulama daha hızlı ve daha iyi olarak kullanıcı eylemlerine yanıt verir.

+ +

Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.

+
+ +
+
+

Documentation

+ +
+
Getting Started
+
This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.
+
Using the XMLHttpRequest API
+
The XMLHttpRequest API is the core of Ajax. This article will explain you how to use some Ajax techniques, like: + +
+
Server-sent events
+
Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page. See also:  Using server-sent events.
+
Pure-Ajax navigation example
+
This article provides a working (minimalist) example of a pure-Ajax web site composed only of three pages.
+
Sending and Receiving Binary Data
+
The responseType property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". The response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string. This article will show some Ajax I/O techniques.
+
XML
+
The Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.
+
JXON
+
JXON stands for lossless Javascript XML Object Notation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.
+
Parsing and serializing XML
+
How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.
+
XPath
+
XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.
+
The FileReader API
+
The FileReader API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
+
HTML in XMLHttpRequest
+
The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using XMLHttpRequest.
+
Other resources
+
Other Ajax resources you may find useful.
+
+ +

View All...

+ +

See also

+ +
+
Alternate Ajax Techniques
+
Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.
+
Ajax: A New Approach to Web Applications
+
Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing Ajax and its related concepts.
+
A Simpler Ajax Path
+
"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."
+
Fixing the Back Button and Enabling Bookmarking for Ajax Apps
+
Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing Ajax applications.
+
Ajax Mistakes
+
Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.
+
Tutorial with examples.
+
+
XMLHttpRequest specification
+
W3C Working draft
+
+
+ +
+

Community

+ +
    +
  • View Mozilla forums...
    • +
+ +
{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}
+ + + +

Tools

+ + + +

View All...

+ +

Examples

+ + + + + +

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Same Origin Policy

+
+
+ +

{{ListSubpages}}

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 new file mode 100644 index 0000000000..799d91f85c --- /dev/null +++ b/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,146 @@ +--- +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 +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}This is the fourth section of the CSS Getting Started 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.

+ +

Basamaklama(Cascading) ve kalıtım(Inheritance)

+ +

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.

+ +

Basamaklama ile gelen stillerin üç ana kaynağı vardır :

+ + + +

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.

+ +
+
Örnek
+ +

Bu kurstaki belgeleri okuyorken, stillerin bir kısmı, tarayıcınızın HTML için belirlediğini default stillerden gelir.

+ +

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 userContent.css stil dosyasından düzenlenebilir.

+ +

Stillerin çoğu kısmı ise, server'da bulunan stil belgesinden gelmektedir.

+
+ +

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

+ +

{{ HTMLElement("strong") }} elementleri kırmızıdır. Bu stil sizin belirttiğiniz stildir.

+ +

Ayrıca {{ HTMLElement("strong") }} elementleri {{HTMLElement("p") }} elementinin stillerini devralırlar. Aynı şekilde {{ HTMLElement("p") }} elementi de {{ HTMLElement("body") }} elementinin stillerinin varisidir.

+ +

Yazarın stilleri önceliğe sahiptir, ardından okuyucunun stilleri ve sonra tarayıcının defaul stilleri gelir.

+ +

Kalıtsal stillemede, en ufak elementin stili ( mesela {{ HTMLElement("strong") }} elementi ) ebeveyni olan elementin stillerinden daha önceliklidir.

+ +

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.

+ +
+

Detay

+ +

CSS, !important kelimesi yardımıyla okuyucuya stillerinde yazardan üstünlük sağlayabilir.

+ +

Bunun belgenin yazarı için anlamı, belgeyi okuyucunun nasıl gördüğünün kesin olarak bilinemeyeceğidir.

+ +

Eğer basamaklama ve kalıtım ile ilgili daha fazla detay öğenmek istiyorsanız, CSS Spesifikasyonu'ndaki Assigning property values, Cascading, and Inheritance belgesine göz atın.

+
+ +

Çalışma: Kalıtımın kullanımı

+ +
    +
  1. Editörünüzde örnek CSS dosyanızı açın.
    2. +
  2. 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: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Tarayıcınızı yenileyin ve örnek belgenizdeki değişikliği görün. text-decoration: underline 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.
    4. +
+ +

Öncesi

+ +

HTML içeriği

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

CSS içeriği

+ +
strong {color:red}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Sonrası

+ +

HTML içeriği

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

CSS içeriği

+ +
p {color:blue; text-decoration:underline}
+strong {color:red}
+ +

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Ödev
+Şablonunuzu sadece kırmızı harflerin altıçizili olması için değiştirin: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Ödevin çözümünü gör.
+ +

 

+ +

Bir sonraki?

+ +

{{ 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 seçici yollar ile nasıl belirtebileceğinizi öğreneceksiniz.

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 new file mode 100644 index 0000000000..ee8835416b --- /dev/null +++ b/files/tr/web/guide/css/getting_started/css_nedir/index.html @@ -0,0 +1,117 @@ +--- +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 +--- +
Css {{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} This first section of the CSS Getting Started tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.

+ +

Bilgi: CSS nedir

+ +

Cascading Style Sheets (CSS), belgelerin kullanıcılara nasıl sunulacağını özelleştiren bir dildir.

+ +

Belge, bir imleme(markup) dili kullanılarak yapılandırılmış bilgi yığınıdır.

+ +

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.

+ +
+

Örnekler

+ + +
+ +

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.

+ +
+
Daha fazla ayrıntı
+ +

Bir belge, dosya ile aynı değildir. Bir belgeyi ancak bir dosyanın içerisinde saklayabilirsiniz.

+ +

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

+ +

Bu sitenin diğer sayfalarında imleme dilleri hakkında bilgi bulabilirsiniz;

+ + + + + + + + + + + + + + + + + + + + +
HTMLweb sayfaları için
XMLbelgeleri genel olarak yapılandırma için
SVGÇizgeler için
XULMozilla'da kullanıcı arayüzleri için
+ +

Bu eğiticinin ikinci bölümünde bu imleme dillerini göreceksiniz.

+
+ +
Daha fazla ayrıntı + +

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.

+ +

CSS'e ilişkin resmi terimleri için, World Wide Web Consortium (W3C) dan sağlanan CSS şartnamelerinin deyişlerine göz atın.W3C web için açık standartları hazırlayan uluslararası bir topluluktur.

+
+ +

Çalışma: Bir belge yaratmak

+ +
    +
  1. Bilgisayarınızda bir dizin oluşturun ve alıştırmalarınızı düzenleyin.
    2. +
  2. Yazı düzenleyicinizi açın.
    3. +
  3. Aşağıda gördüğünüz HTML kodlarını kopyalayıp yapıştırın. belge1.html adı ile kaydedin. + 
    <!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>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'Yukarıdaki Örneği Görüntüle') }}

    +
    4. +
  4. Tarayıcınızda kaydettiğiniz belgeyi açın. +

    Tarayıcıda, aşağıdaki gibi ilk harfleri kalın olan yazıyı göreceksiniz;

    + + + + + + + +
    Cascading Style Sheets
    + +

    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.

    +
    5. +
+ +

Bir sonraki adım?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Belgenizde henüz CSS kullanmadınız. Bir sonraki bölüm'de, belgenizde CSS kullanacaksınız.

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 new file mode 100644 index 0000000000..cb301d65d5 --- /dev/null +++ b/files/tr/web/guide/css/getting_started/how_css_works/index.html @@ -0,0 +1,134 @@ +--- +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 +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }}This third section of the CSS Getting Started 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.

+ +

Bilgi: CSS nasıl çalışır

+ +

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:

+ +
    +
  1. Tarayıcı markup (HTML gibi) dilini ve DOM (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.
    2. +
  2. Tarayıcı DOM içeriğini gösterir.
    3. +
+ +

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;

+ +

<elementinismi>

+ +

Bu elementte kullanacağınız içerik bu ikisi arasında yer almalıdır.

+ +

</elementinismi>

+ +

Depending on the markup language, some elements have only a start tag, or a single tag where the '/' 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.

+ +

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.

+ +

DOM'u anlamak size CSS'te kolaylık sağlar, çünkü DOM, CSS'inizin ve belge içeriğinizin birleştiği yerdedir.

+ +
+
Örnek
+ +
 
+Örnek belgenizde, Başlama <p> ve onun bitişi </p> kullanılmak üzerei bir alan (container) yaratır: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

 

+ +

{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}

+ +

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
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Çalışma: DOM'u incelemek

+ +

DOM denetçisi

+ +

DOM'u incelemek için, özel bir yazılıma ihtiyacınız var. Mozilla'nın DOM Inspector (DOMi) eklentisini kullanabilirsiniz. Eklenti ufak bir kurulum gerektirir. Aşağıda detaylıdır;

+ +
    +
  1. Örnek belgenizi Mozilla tarayıcısını kullanarak açın.
    2. +
  2. Tarayıcınızın menü kısmından, Araçlar > DOM Denetçisi, ya da Araçlar > Web Geliştirme > DOM Denetçisi. +
    +
    Daha fazla detay
    + +

    Mozilla'nızda DOMi yoksa eklentiler sitesinden yükleyin ve bu öğreticiye geri dönün.

    + +

    DOMi yüklemek istemiyorsanız veya Mozilla'dan farklı bir tarayıcı kullanıyorsanız..............

    +
    +
    3. +
  3. In DOMi, expand your document's nodes by clicking on their arrows. +

    Note:  Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.

    + +

    Part of the result might look like this, depending on which nodes you have expanded:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    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.

    + +

    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.

    +
    4. +
+ +
+
Challenge
+ +

In DOMi, click on a STRONG node.

+ +

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.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+See a solution for the challenge.
+ +

Using Web X-Ray Goggles

+ +

Web X-Ray Goggles shows less information than DOM Inspector, but is simpler to install and use.

+ +
    +
  1. Go to the home page for Web X-Ray Goggles.
    2. +
  2. Drag the bookmarklet link in that page to your browser toolbar.
    3. +
  3. Open your sample HTML document.
    4. +
  4. Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.
    5. +
  5. Move your mouse pointer around over your document to see the elements in the document.
    6. +
+ +

Sonra?

+ +

{{ 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 next page explains more about these interactions.

diff --git a/files/tr/web/guide/css/getting_started/index.html b/files/tr/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..b8b8239171 --- /dev/null +++ b/files/tr/web/guide/css/getting_started/index.html @@ -0,0 +1,52 @@ +--- +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 +--- +

Bu eğitimde Cascading Style Sheets (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.

+ +

Bu eğitici CSS'e yeni başlayanlar için bir kılavuz niteliğindedir. Eğer daha fazla deneyiminiz varsa, CSS anasayfasında daha kapsamlı kaynaklar mevcuttur.

+ + + +

Başlarken neler gerekli?

+ + + +

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.

+ +

Eğitici nasıl kullanılır

+ +

Bu eğiticiyi kullanmak için, sayfaları dikkatlice ve sırasıyla okuyun. Eğer bir sayfayı atlarsanız, sonraki sayfaları anlamanız zorlaşabilir.

+ +

Bölüm I: CSS'in Temelleri

+ +

CSS'in nasıl çalıştığını kavrayabilmek için bilgi bölümünü kullanın. CSS'i kendi bilgisayarınızda kullanmayı denemek için çalışma bölümünü deneyin.

+ +

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.

+ +

Bölüm II: CSS'in Kapsamı

+ +

Eğiticinin ikinci bölümü, CSS'in diğer web bileşenleriyle ve Mozilla teknolojileriyle olan kapsamını gösterir. Örnekler sağlar.

+ +
    +
  1. JavaScript
    2. +
  2. SVG çizgeleri
    3. +
  3. XML veri
    4. +
  4. XBL bağlamaları
    5. +
  5. XUL kullanıcı arayüzleri
    6. +
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 new file mode 100644 index 0000000000..d7ae66775d --- /dev/null +++ b/files/tr/web/guide/css/getting_started/why_use_css/index.html @@ -0,0 +1,112 @@ +--- +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 +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/tr/docs/Web/Guide/CSS/Getting_Started/CSS_Nedir", "CSS Nedir?") }}CSS Başlangıç 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.

+ +

Bilgi: Neden CSS kullanılır?

+ +

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ı <head> 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, <head> ögesi içerisine bağlantı vermeniz gerekir.

+ +

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:

+ + + +
+
Örnek
+ +

h2 ögesi için oluşturduğunuz biçim kuralı ile, tanımladığınız bütün h2 ögerlerini tek bir yerden denetleyebilirsiniz.

+ +

Kullanıcı bir ağ sayfasını görüntülediğinde, sayfanın içeriğiyle birllikte tanımlanmış biçim kuralları yüklenir.

+ +

Kullanıcı bir ağ sayfasını yazdırdığında, tanımladığınız özel biçim kuralları ile sayfanın okunabilirliğini artırabilirsiniz.

+
+ +

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.

+ +
+
Daha fazla ayrıntı
+ +

HTML gibi bir imleme dili biçim tanımlamak için bir kaç yol sağlar.

+ +

Örneğin, HTML içerisinde <b> ögesini, yazıyı kalınlaştırmak için kullanabilirsiniz ve ardalan rengini <body> ögesi içerisinde tanımlayabilirsiniz.

+ +

CSS ile bu özellikleri kullanamazsınız fakat bunlara gerek de kalmaz. Kullanmanız gereken bütün kodları tek bir yerde kullanabilirsiniz.

+
+ +

Çalışma: Bir kalıp hazırlamak

+ +
    +
  1. Birinci bölümde eklediğiniz belge1.html ile aynı dizine bir belge daha ekleyin.
    2. +
  2. Eklediğiniz belgeyi bicim1.css olarak adlandırın. Bu sizin biçim belgeniz olacak.
    3. +
  3. CSS belgesi içerisine aşağıdaki satırı ekleyip kaydedin:
    4. +
  4. + 
    strong {color: red;}
+
    +
    5. +
+ +

Biçim belgesi ile bağlantılamak

+ +
    +
  1. Biçim belgeniz ile HTML'inizi ilişkilendirmek için, HTML belgesini düzenleyin. Aşağıdaki işaretli satırı ekleyin: + 
    <!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>
+
    +
    2. +
  2. Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır: + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +
+
Alıştırma
+ +

CSS bazı renkler için rengin ingilizcesine izin verir.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+Alıştırmanın yanıtını görün.
+ +

Sıradaki

+ +

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

+ +

Şimdi tarayıcınızın, sayfayı oluştururken bunları nasıl birleştirdiğini öğrenebilirsiniz.

diff --git "a/files/tr/web/guide/css/saya\303\247lar/index.html" "b/files/tr/web/guide/css/saya\303\247lar/index.html" new file mode 100644 index 0000000000..d31a159a27 --- /dev/null +++ "b/files/tr/web/guide/css/saya\303\247lar/index.html" @@ -0,0 +1,102 @@ +--- +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 +--- +

{{CSSRef}}

+

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. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

+

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 counter() or counters() function of the content property.

+

Sayaçları kullanmak

+

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

+
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 */
+}
+
+

Örnek:

+
<h3>Giriş</h3>
+<h3>Gövde</h3>
+<h3>Sonuç</h3>
+

{{ EmbedLiveSample('Using_counters', 300,200) }}

+

Nesting counters

+

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 counters() function, a string can be inserted between different levels of nested counters. For example this 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 ','
+}
+
+

Combined with the following 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>
+

Yields this result:

+

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}} 
+

See also

+ +

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

+

 

diff --git a/files/tr/web/guide/index.html b/files/tr/web/guide/index.html new file mode 100644 index 0000000000..ca1aeaaa1c --- /dev/null +++ b/files/tr/web/guide/index.html @@ -0,0 +1,29 @@ +--- +title: Geliştirici kılavuzları +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Bu makaleler belirli teknolojileri ve API'ler faydalanmak nasıl yapılır yardımına bilgi sağlarlar.

+ +
+

Not: Bu sayfa, içeriği göç tamamlayana kadar bir süre için bir karışıklık olacak. Özürlerimizi!

+
+ +
{{LandingPageListSubpages}}
+ +
+
JavaScript
+
JavaScript Web için uygulamalar oluşturmak için kullanılan güçlü bir betik dilidir.
+
+ +

Ayrıca bakınız

+ + diff --git "a/files/tr/web/guide/\303\247izgeler/index.html" "b/files/tr/web/guide/\303\247izgeler/index.html" new file mode 100644 index 0000000000..c72c02d2b5 --- /dev/null +++ "b/files/tr/web/guide/\303\247izgeler/index.html" @@ -0,0 +1,53 @@ +--- +title: Web Çizgeleri +slug: Web/Guide/Çizgeler +tags: + - 2B + - 3B + - Canvas + - Gerçek Zamanlı İletişim + - HTML5 + - SVG + - Tuval + - Web Grafik + - Web Çizgeleri + - WebGL + - WebRTC + - Çizge + - Ölçeklenebilir Görüntü +translation_of: Web/Guide/Graphics +--- +

Web siteleri ve uygulamaların bazen çizge göstermeleri gerekir.Durağan görseller {{HTMLElement("img")}} ögesi kullanılarak kolayca gösterilebilir, ya da ögenin ardalan görseli CSS {{cssxref("background-image")}} özelliğiyle belirlenebilir. Oluşturulmuş çizgelerin üzerinde de anlık oynamalar yapabilirsiniz. Buradaki gönderiler sizler bunları nasıl yapacağınızı anlatır.

+ +
+
+

2B Çizgeler

+ +
+
Canvas(Tuval)
+
{{HTMLElement("canvas")}} adlı HTML ögesi JavaScript ile 2 Boyutlu çizgeler oluşturabilmeniz için arabirim sunar.
+
SVG
+
Scalable Vector Graphics (Ölçeklenebilir Vektör Çizgeleri); çizge işlemeniz için, çizgi, kıvrım, dikdörtgen gibi geometrik biçimleri kullanabilmenizi sağlar. Vektörel çizim ile herhangi bir ölçekte temiz görüntüler elde edebilirsiniz.
+
+ +

Tümünü Görüntüle...

+
+ +
+

3B Çizgeler

+ +
+
WebGL
+
Web'in 3 Boyutlu çizge arabirimi WEBGL'e başlamak için bir kılavuz. Bu uygu(teknoloji) web üzerinde OpenGL kullanmanıza olanak tanır.
+
+ +

Video

+ +
+
HTML5 izleti ve sesleri kullanmak
+
Bir web sayfasına izleti ya da ses gömüp oynatımını denetlemek.
+
WebRTC
+
WebRTC'deki RTC Gerçek Zamanlı İletişim anlamına gelir. Bu uygu(teknoloji) tarayıcı istemcileri arasında anlık olarak görüntü ve ses akışına ve veri paylaşımına olanak tanır.
+
+
+
-- cgit v1.2.3-54-g00ecf