From 8f2731905212f6e7eb2d9793ad20b8b448c54ccf Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:31 +0100 Subject: unslug tr: move --- files/tr/web/api/canvas_api/index.html | 173 ++++++ files/tr/web/api/tuval_arabirimi/index.html | 173 ------ files/tr/web/bildiri/index.html | 93 --- files/tr/web/css/box_model/index.html | 67 --- files/tr/web/css/class_selectors/index.html | 124 ++++ .../introduction_to_the_css_box_model/index.html | 67 +++ .../using_css_counters/index.html | 102 ++++ files/tr/web/css/css_selectors/index.html | 232 ++++++++ files/tr/web/css/margin/index.html | 224 +++++++ files/tr/web/css/marjin/index.html | 224 ------- .../index.html" | 124 ---- files/tr/web/css/tip_secicileri/index.html | 125 ---- files/tr/web/css/type_selectors/index.html | 125 ++++ .../cascading_and_inheritance/index.html | 147 ----- .../guide/css/getting_started/css_nedir/index.html | 118 ---- .../css/getting_started/how_css_works/index.html | 135 ----- files/tr/web/guide/css/getting_started/index.html | 53 -- .../css/getting_started/why_use_css/index.html | 113 ---- .../tr/web/guide/css/saya\303\247lar/index.html" | 102 ---- files/tr/web/guide/graphics/index.html | 53 ++ files/tr/web/guide/html/html5/index.html | 254 ++++++++ "files/tr/web/guide/\303\247izgeler/index.html" | 53 -- "files/tr/web/g\303\274venlik/index.html" | 16 - .../transport_layer_security/index.html" | 115 ---- files/tr/web/html-alani/index.html | 103 ---- files/tr/web/html/element/aside/index.html | 154 +++++ files/tr/web/html/element/head/index.html | 138 +++++ files/tr/web/html/element/hgroup/index.html | 135 +++++ files/tr/web/html/element/index.html | 241 ++++++++ files/tr/web/html/element/li/index.html | 205 +++++++ files/tr/web/html/element/link/index.html | 402 +++++++++++++ files/tr/web/html/html5/index.html | 254 -------- files/tr/web/http/methods/index.html | 72 +++ files/tr/web/http/metotlar/index.html | 72 --- files/tr/web/http/oturum/index.html | 173 ------ files/tr/web/http/session/index.html | 173 ++++++ files/tr/web/javascript/data_structures/index.html | 298 ++++++++++ .../control_flow_and_error_handling/index.html | 419 +++++++++++++ .../web/javascript/guide/fonksiyonlar/index.html | 662 --------------------- files/tr/web/javascript/guide/functions/index.html | 662 +++++++++++++++++++++ files/tr/web/javascript/guide/ifadeler/index.html | 419 ------------- .../index.html" | 504 ---------------- .../guide/working_with_objects/index.html | 504 ++++++++++++++++ .../global_objects/array/prototype/index.html | 205 ------- .../global_objects/boolean/prototype/index.html | 77 --- .../global_objects/map/prototype/index.html | 85 --- .../reference/operators/function_star_/index.html | 84 +++ .../web/javascript/reference/operators/index.html | 277 +++++++++ .../reference/operators/instanceof/index.html | 207 +++++++ .../reference/operators/super/index.html | 165 +++++ .../javascript/reference/operators/this/index.html | 347 +++++++++++ .../reference/operators/typeof/index.html | 259 ++++++++ .../arithmetic_operators/index.html" | 294 --------- .../bitwise_operators/index.html" | 565 ------------------ .../operat\303\266rler/function_star_/index.html" | 84 --- .../reference/operat\303\266rler/index.html" | 277 --------- .../operat\303\266rler/instanceof/index.html" | 207 ------- .../mantiksal_operatorler/index.html" | 312 ---------- .../reference/operat\303\266rler/super/index.html" | 165 ----- .../reference/operat\303\266rler/this/index.html" | 347 ----------- .../operat\303\266rler/typeof/index.html" | 259 -------- .../veri_yap\304\261s\304\261/index.html" | 298 ---------- files/tr/web/manifest/index.html | 93 +++ files/tr/web/security/index.html | 16 + files/tr/web/security/mixed_content/index.html | 44 ++ .../security/transport_layer_security/index.html | 115 ++++ .../security/weak_signature_algorithm/index.html | 18 + 67 files changed, 6382 insertions(+), 7020 deletions(-) create mode 100644 files/tr/web/api/canvas_api/index.html delete mode 100644 files/tr/web/api/tuval_arabirimi/index.html delete mode 100644 files/tr/web/bildiri/index.html delete mode 100644 files/tr/web/css/box_model/index.html create mode 100644 files/tr/web/css/class_selectors/index.html create mode 100644 files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/tr/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/tr/web/css/css_selectors/index.html create mode 100644 files/tr/web/css/margin/index.html delete mode 100644 files/tr/web/css/marjin/index.html delete mode 100644 "files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" delete mode 100644 files/tr/web/css/tip_secicileri/index.html create mode 100644 files/tr/web/css/type_selectors/index.html delete mode 100644 files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/tr/web/guide/css/getting_started/css_nedir/index.html delete mode 100644 files/tr/web/guide/css/getting_started/how_css_works/index.html delete mode 100644 files/tr/web/guide/css/getting_started/index.html delete mode 100644 files/tr/web/guide/css/getting_started/why_use_css/index.html delete mode 100644 "files/tr/web/guide/css/saya\303\247lar/index.html" create mode 100644 files/tr/web/guide/graphics/index.html create mode 100644 files/tr/web/guide/html/html5/index.html delete mode 100644 "files/tr/web/guide/\303\247izgeler/index.html" delete mode 100644 "files/tr/web/g\303\274venlik/index.html" delete mode 100644 "files/tr/web/g\303\274venlik/transport_layer_security/index.html" delete mode 100644 files/tr/web/html-alani/index.html create mode 100644 files/tr/web/html/element/aside/index.html create mode 100644 files/tr/web/html/element/head/index.html create mode 100644 files/tr/web/html/element/hgroup/index.html create mode 100644 files/tr/web/html/element/index.html create mode 100644 files/tr/web/html/element/li/index.html create mode 100644 files/tr/web/html/element/link/index.html delete mode 100644 files/tr/web/html/html5/index.html create mode 100644 files/tr/web/http/methods/index.html delete mode 100644 files/tr/web/http/metotlar/index.html delete mode 100644 files/tr/web/http/oturum/index.html create mode 100644 files/tr/web/http/session/index.html create mode 100644 files/tr/web/javascript/data_structures/index.html create mode 100644 files/tr/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/tr/web/javascript/guide/fonksiyonlar/index.html create mode 100644 files/tr/web/javascript/guide/functions/index.html delete mode 100644 files/tr/web/javascript/guide/ifadeler/index.html delete mode 100644 "files/tr/web/javascript/guide/nesneler_ile_\303\247al\304\261\305\237mak/index.html" create mode 100644 files/tr/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/map/prototype/index.html create mode 100644 files/tr/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/tr/web/javascript/reference/operators/index.html create mode 100644 files/tr/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/tr/web/javascript/reference/operators/super/index.html create mode 100644 files/tr/web/javascript/reference/operators/this/index.html create mode 100644 files/tr/web/javascript/reference/operators/typeof/index.html delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/arithmetic_operators/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/bitwise_operators/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/function_star_/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/instanceof/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/mantiksal_operatorler/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/super/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/this/index.html" delete mode 100644 "files/tr/web/javascript/reference/operat\303\266rler/typeof/index.html" delete mode 100644 "files/tr/web/javascript/veri_yap\304\261s\304\261/index.html" create mode 100644 files/tr/web/manifest/index.html create mode 100644 files/tr/web/security/index.html create mode 100644 files/tr/web/security/mixed_content/index.html create mode 100644 files/tr/web/security/transport_layer_security/index.html create mode 100644 files/tr/web/security/weak_signature_algorithm/index.html (limited to 'files/tr/web') diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html new file mode 100644 index 0000000000..f6a9a2f8d7 --- /dev/null +++ b/files/tr/web/api/canvas_api/index.html @@ -0,0 +1,173 @@ +--- +title: Tuval Arabirimi +slug: Web/API/Tuval_Arabirimi +tags: + - Arabirim + - Canvas + - Genel Bakış + - JavaScript + - Kaynak + - Tuval +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Tuval anlamına gelen canvas, HTML5 de eklenmiştir, {{HTMLElement("canvas")}} adlı HTML ögesi JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. 

+ +

Mozilla uygulamaları Gecko 1.8 (bkz. Firefox 1.5) ile birlikte <canvas> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX  gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <canvas> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği Explorer Canvas tasarısı <canvas> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <canvas> desteği vardır.

+ +

WebGL de donanım tarafından hızlandırılmış 3 Boyutlu Web Çizgeleri çizmek için <canvas> ögesini kullanır. 

+ +

Örnek

+ +

 {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:

+ +

HTML

+ +
<canvas id="tuval"></canvas>
+
+ +

JavaScript

+ +
var tuval = document.getElementById('tuval');
+var bağlam = tuval.getContext('2d');
+
+bağlam.fillStyle = 'green';
+bağlam.fillRect(10, 10, 100, 100);
+
+ +

Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Atıflar

+ +
+ +
+ +

WebGLRenderingContext ile ilgili atıflar WebGL altında verilmiştir.

+ +

{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.

+ +

Kılavuz ve yönergeler

+ +
+
Canvas kılavuzu
+
<canvas> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.
+
Kod Parçacıkları: Canvas
+
<canvas> ile ilgili yazılmış kod parçacıkları...
+
Gösteri: Yalın ışıklandırma
+
Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...
+
Tuval üzerine DOM ögeleri çizmek
+
Belgede bulunan DOM ögeleri tuval üzerine çizimi.
+
canvas kullanarak görüntü işleme
+
{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme
+
+ +

Kaynaklar

+ +

Kapsamlı

+ + + +

Kütüphaneler

+ + + +

Tanımlamalar

+ + + + + + + + + + + + + + + + +
TanımDurumYorum
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

Ayrıca bkz.

+ + diff --git a/files/tr/web/api/tuval_arabirimi/index.html b/files/tr/web/api/tuval_arabirimi/index.html deleted file mode 100644 index f6a9a2f8d7..0000000000 --- a/files/tr/web/api/tuval_arabirimi/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Tuval Arabirimi -slug: Web/API/Tuval_Arabirimi -tags: - - Arabirim - - Canvas - - Genel Bakış - - JavaScript - - Kaynak - - Tuval -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Tuval anlamına gelen canvas, HTML5 de eklenmiştir, {{HTMLElement("canvas")}} adlı HTML ögesi JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. 

- -

Mozilla uygulamaları Gecko 1.8 (bkz. Firefox 1.5) ile birlikte <canvas> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX  gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <canvas> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği Explorer Canvas tasarısı <canvas> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <canvas> desteği vardır.

- -

WebGL de donanım tarafından hızlandırılmış 3 Boyutlu Web Çizgeleri çizmek için <canvas> ögesini kullanır. 

- -

Örnek

- -

 {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:

- -

HTML

- -
<canvas id="tuval"></canvas>
-
- -

JavaScript

- -
var tuval = document.getElementById('tuval');
-var bağlam = tuval.getContext('2d');
-
-bağlam.fillStyle = 'green';
-bağlam.fillRect(10, 10, 100, 100);
-
- -

Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Atıflar

- -
- -
- -

WebGLRenderingContext ile ilgili atıflar WebGL altında verilmiştir.

- -

{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.

- -

Kılavuz ve yönergeler

- -
-
Canvas kılavuzu
-
<canvas> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.
-
Kod Parçacıkları: Canvas
-
<canvas> ile ilgili yazılmış kod parçacıkları...
-
Gösteri: Yalın ışıklandırma
-
Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...
-
Tuval üzerine DOM ögeleri çizmek
-
Belgede bulunan DOM ögeleri tuval üzerine çizimi.
-
canvas kullanarak görüntü işleme
-
{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme
-
- -

Kaynaklar

- -

Kapsamlı

- - - -

Kütüphaneler

- - - -

Tanımlamalar

- - - - - - - - - - - - - - - - -
TanımDurumYorum
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

Ayrıca bkz.

- - diff --git a/files/tr/web/bildiri/index.html b/files/tr/web/bildiri/index.html deleted file mode 100644 index 3bc751b238..0000000000 --- a/files/tr/web/bildiri/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Web Uygulama Bildirisi -slug: Web/Bildiri -tags: - - Ağ - - Bildiri - - Süreğen Ağ Uygulamaları - - Uygulama -translation_of: Web/Manifest ---- -

Web uygulama bildirisi uygulamayla ilgili bilgiler (ad, yazar, açıklama...) veren bir JSON dosyasıdır. 

- -

Web uygulama bildirileri süreğen ağ uygulamaları için belirlenen ölçünlerin bir parçasıdır. 

- - - -

Web uygulama bildirileri HTML belgesindeki head bölümüne link ögesi eklenerek çağrılır.

- -
<link rel="manifest" href="/bildiri.webmanifest">
- -
-

Bilgi: .webmanifest uzantısı bildirgedeki Ortam türü kaydı bölümünde bildirilmiştir ama tarayıcılar genellikle diğer uygun uzantıları (.json) da destekler.

-
- -

Örnek bildiri

- -
{
- "short_name": "Otağ JS",
- "name": "Otağ JavaScript Çatısı Ağ Yerliği",
- "start_url":"https://otagjs.org/#/belge",
- "display":"standalone",
- "theme_color":"#000",
- "background_color":"#FAFAFA",
- "icons": [
-  {
-   "src": "img/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image/png",
-   "density": "0.75"
-  },
-  {
-   "src": "img/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image/png",
-   "density": "1.0"
-  },
-  {
-   "src": "img/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image/png",
-   "density": "1.5"
-  },
-  {
-   "src": "img/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image/png",
-   "density": "2.0"
-  },
-  {
-   "src": "img/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image/png",
-   "density": "3.0"
-  }
- ]
-}
- -

Özellikler

- -

background_color

- -

Uygulamanın ardalan rengini belirler. Burada CSS belgesinde belirtilen değer yinelenebilir. Bu belirtim, tarayıcınız uygulamayı başlatırken biçim belgeniz daha hazır değilken bile ardalan rengini çizebilmesini sağlar ve içerik yüklenirken yumuşak bir geçiş oluşturur. 

- -
"background_color": "#F00"
- -
-

Bilgi: background_color özelliği yalnızca içerik yüklenirken kullanıcı deneyimini artırmak amacıyla düşünülmüştür. Süreğen ağ uygulamanızın biçim(CSS) belgesi yüklendikten sonra background color geçersiz kılınacaktır.

-
- -

description

- -

Ana ekrana eklenen uygulamanızın ne yaptığını anlatan "açıklama" alanıdır.

- -
"description": "Bu uygulama yerleşim alanları arar."
- -

dir

- -

name, short_name, description alanlarında belirttiğiniz bilgilerin yazım yönünü belirler.
- lang (doğal dil) üyesiyle birlikte sağdan sola dillerin doğru görüntülenmesini sağlar.

- -
"dir": "rtl",
-"lang": "otk",
-"short_name": "
diff --git a/files/tr/web/css/box_model/index.html b/files/tr/web/css/box_model/index.html deleted file mode 100644 index 38245c8af4..0000000000 --- a/files/tr/web/css/box_model/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

Özet

- -

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

- -

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

- -

CSS Box model

- -

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

- -

Eğer CSS'in  {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.

- -

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

- -

Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.

- -

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.

- -

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

- -

Margin alanının boyutları  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

- -

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

- -

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.

- -

Özellikleri

- - - - - - - - - - - - - - - - - - - - - -
ÖzellikDurumComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }} -

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

-
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Bunlara da bakın

- - diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html new file mode 100644 index 0000000000..d735ceed7c --- /dev/null +++ b/files/tr/web/css/class_selectors/index.html @@ -0,0 +1,124 @@ +--- +title: Sınıf seçicileri +slug: Web/CSS/Sınıf_seçicileri +tags: + - CSS + - CSS Referans + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Sınıf (class) seçicisi, bir HTML belgesindeki elementin {{htmlattrxref("class")}} özniteliğinin içeriği ile eşleşir. {{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.

+ +

Sözdizimi

+ +
.sınıfismi { style properties }
+ +

Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=sınıfismi] { style properties }
+ +

Örnek

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Here's a span with some text.</span>
+<span>Here's another.</span>
+
+ +

{{EmbedLiveSample('Example', 200, 50)}}

+ +

Spesifikasyon

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..38245c8af4 --- /dev/null +++ b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,67 @@ +--- +title: Kutu modeli +slug: Web/CSS/box_model +tags: + - CSS + - Kutu Modeli +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Özet

+ +

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

+ +

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

+ +

CSS Box model

+ +

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

+ +

Eğer CSS'in  {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.

+ +

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

+ +

Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.

+ +

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.

+ +

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

+ +

Margin alanının boyutları  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

+ +

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

+ +

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.

+ +

Özellikleri

+ + + + + + + + + + + + + + + + + + + + + +
ÖzellikDurumComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }} +

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

+
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
+ +

Bunlara da bakın

+ + diff --git a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..d31a159a27 --- /dev/null +++ b/files/tr/web/css/css_lists_and_counters/using_css_counters/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/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a7f89d5c85 --- /dev/null +++ b/files/tr/web/css/css_selectors/index.html @@ -0,0 +1,232 @@ +--- +title: CSS seçiciler +slug: Öğren/CSS/CSS_yapi_taslari/Selectors +tags: + - Başlangıç + - CSS + - Nitelik + - Sozde + - id + - oğrenin + - seçiciler + - sınıf +translation_of: Web/CSS/CSS_Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız

+ + + + + + + + + + + + +
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek
+ +

Seçici nedir?

+ +

Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin konusu olarak anılır.

+ +

Some code with the h1 highlighted.

+ +

Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici h1 veya sınıf seçici .special gibi.

+ +

CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler spesifikasyonunda tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.

+ +

Seçici listeleri

+ +

Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi,  bir seçici listesinde birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan h1 eleman seçicim ve .special sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.

+ +
h1, .special {
+  color: blue;
+}
+ +

Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.

+ +

Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa h1 şekillendirmesi hala uygulanacaktır.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de h1 elemanı biçimlendirilmez

+ +
h1, ..special {
+  color: blue;
+}
+ +

Seçici türleri

+ +

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..

+ +

Tür, sınıf ve kimlik seçicileri

+ +

Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <h1>:

+ +
h1 { }
+ +

Ayrıca bir sınıfı hedefleyen seçicileri de içerir class:

+ +
.box { }
+ +

veya bir kimlik id:

+ +
#unique { }
+ +

Nitelik seçiciler

+ +

Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:

+ +
a[title] { }
+ +

Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:

+ +
a[href="https://example.com"] { }
+ +

Sözde sınıflar ve sözde elemanlar

+ +

Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin :hover sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:

+ +
a:hover { }
+ +

Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin ::first-line her zaman bir elemanın içindeki ilk metin satırını seçer (<p> şağıdaki durumda, sanki ilk satırın etrafı <span> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.

+ +
p::first-line { }
+ +

Birleştiriciler

+ +

Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <article> eleman etiketi  (>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:

+ +
article > p { }
+ +

Sonraki adımlar

+ +

Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya tür, sınıf ve kimlik seçicileri makalesine devam ederek yolculuğunuza başlayabilirsiniz.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Seçicilerin referans tablosu

+ +

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeçiciÖrnekCSS makaleleri
Tür seçicih1 {  }Tür seçiciler
Evrensel seçici* {  }Evrensel seçici
Sınıf seçici.box {  }Sınıf seçici
Kimlik seçici#unique { }Kimlik seçici
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicip:first-child { }Sözde sınıflar
Sözde elelman seçicip::first-line { }Sözde eleman
Torun birleştiricisiarticle pTorun birleştirici
Çocuk birleştiricisiarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricisih1 + pBitişik kardeş
Genel kardeş birleştiricisih1 ~ pGenel kardeş
+ +

Bu kısımda

+ +
    +
  1. Kaynak sırası ve miras
    2. +
  2. CSS seçicileri + +
    3. +
  3. Kutu modeli
    4. +
  4. Arka planlar ve kenarlıklar
    5. +
  5. Farklı metin yönleri kullanma
    6. +
  6. Taşan içerik
    7. +
  7. Değerler ve birimler
    8. +
  8. CSS'de elemanların boyutları
    9. +
  9. Görseller, medya ve form öğeleri
    10. +
  10. Tabloları şekillendirme
    11. +
  11. CSS'de hata ayıklama
    12. +
  12. CSS'inizi düzenleme
    13. +
diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html new file mode 100644 index 0000000000..356c738f48 --- /dev/null +++ b/files/tr/web/css/margin/index.html @@ -0,0 +1,224 @@ +--- +title: marjin +slug: Web/CSS/marjin +tags: + - CSS + - CSS özelliği + - Referans +translation_of: Web/CSS/margin +translation_of_original: Web/CSS/margin-new +--- +
{{CSSRef}}
+ +

Özet

+ +

 

+ +

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.

+ +

Eksi değerlere müsade edilir.

+ +

{{cssinfo}}

+ +

Sözdizimi

+ +
/* Her dört kenara uygulanır */
+margin: 1em;
+
+/* dikey | yatay */
+margin: 5% auto;
+
+/* üst | yatay | alt */
+margin: 1em auto 2em;
+
+/* üst | sağ | alt | sol */
+margin: 2px 1em 0 auto;
+
+/* Genel değerler */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

Değer Atamaları

+ +

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

+ +
+
<length>
+
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .
+
<percentage>
+
{{cssxref("<percentage>")}} içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
+
auto
+
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
+ div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
+
+ + + +

Formel sözdizimi

+ +
{{csssyntax}}
+ +

Örnekler

+ +

Basit bir örnek

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

başka bir örnek daha

+ +
margin: 5%;                /* tüm kenarlar 5% marjinli */
+
+margin: 10px;              /* tüm kenarlar 10px marjinli */
+
+margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
+
+margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
+
+margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
+
+margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
+
+margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
+
+ +

Yatay olarak merkeze konumlama margin: 0 auto;

+ +

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

+ +

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

+ +

Spesifikasyonlar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Belirgin değişiklik yok
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}"margin" transitions ta animasyon özellikiği kullanılabilir
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Inline elementeki efekleri kaldırıldı
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}başlangic değeri atandı
+ +

Tarayıcı Uyumluluğu

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Ayrıca bakınız

+ + diff --git a/files/tr/web/css/marjin/index.html b/files/tr/web/css/marjin/index.html deleted file mode 100644 index 356c738f48..0000000000 --- a/files/tr/web/css/marjin/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: marjin -slug: Web/CSS/marjin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -
{{CSSRef}}
- -

Özet

- -

 

- -

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.

- -

Eksi değerlere müsade edilir.

- -

{{cssinfo}}

- -

Sözdizimi

- -
/* Her dört kenara uygulanır */
-margin: 1em;
-
-/* dikey | yatay */
-margin: 5% auto;
-
-/* üst | yatay | alt */
-margin: 1em auto 2em;
-
-/* üst | sağ | alt | sol */
-margin: 2px 1em 0 auto;
-
-/* Genel değerler */
-margin: inherit;
-margin: initial;
-margin: unset;
-
- -

Değer Atamaları

- -

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

- -
-
<length>
-
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .
-
<percentage>
-
{{cssxref("<percentage>")}} içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
-
auto
-
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
- div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
-
- - - -

Formel sözdizimi

- -
{{csssyntax}}
- -

Örnekler

- -

Basit bir örnek

- -

HTML

- -
<div class="ex1">
-  margin:     auto;
-  background: gold;
-  width:      66%;
-</div>
-<div class="ex2">
-  margin:     20px 0 0 -20px;
-  background: gold;
-  width:      66%;
-</div>
- -

CSS

- -
.ex1 {
-  margin: auto;
-  background: gold;
-  width: 66%;
-}
-.ex2 {
-  margin: 20px 0px 0 -20px;
-  background: gold;
-  width: 66%;
-}
- -

{{ EmbedLiveSample('Simple_example') }}

- -

başka bir örnek daha

- -
margin: 5%;                /* tüm kenarlar 5% marjinli */
-
-margin: 10px;              /* tüm kenarlar 10px marjinli */
-
-margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
-
-margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
-
-margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
-
-margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
-
-margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
-
- -

Yatay olarak merkeze konumlama margin: 0 auto;

- -

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

- -

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Belirgin değişiklik yok
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}"margin" transitions ta animasyon özellikiği kullanılabilir
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Inline elementeki efekleri kaldırıldı
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}başlangic değeri atandı
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
-
- -

Ayrıca bakınız

- - diff --git "a/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" "b/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" deleted file mode 100644 index d735ceed7c..0000000000 --- "a/files/tr/web/css/s\304\261n\304\261f_se\303\247icileri/index.html" +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Sınıf_seçicileri -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef("Selectors")}}
- -

Sınıf (class) seçicisi, bir HTML belgesindeki elementin {{htmlattrxref("class")}} özniteliğinin içeriği ile eşleşir. {{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.

- -

Sözdizimi

- -
.sınıfismi { style properties }
- -

Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=sınıfismi] { style properties }
- -

Örnek

- -

CSS

- -
span.classy {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<span class="classy">Here's a span with some text.</span>
-<span>Here's another.</span>
-
- -

{{EmbedLiveSample('Example', 200, 50)}}

- -

Spesifikasyon

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/css/tip_secicileri/index.html b/files/tr/web/css/tip_secicileri/index.html deleted file mode 100644 index f24f899681..0000000000 --- a/files/tr/web/css/tip_secicileri/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Tip_secicileri -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef("Selectors")}}
- -

Tanım

- -

Tip (type) seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden HTML tags diye de bahsedilebilir. Örneğin, HTML'de <h1>, <a>, <p> tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.

- -

Sözdizim

- -
element { stil özellikleri }
-
- -

Örnek

- -

CSS

- -
span {
-  background-color: DodgerBlue;
-  color: #ffffff;
-}
- -

HTML

- -
<span>span elementi</span>
-<p>p (paragraf) elementi</p>
-<span>tekrar span elementi</span>
- -

{{ EmbedLiveSample('Örnek', 200, 150) }}

- -

 

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasyonDurumYorum
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Değişiklik yok
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Baştaki tanım
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid için ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Temel destek{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html new file mode 100644 index 0000000000..f24f899681 --- /dev/null +++ b/files/tr/web/css/type_selectors/index.html @@ -0,0 +1,125 @@ +--- +title: Tip Seçicileri +slug: Web/CSS/Tip_secicileri +tags: + - CSS + - CSS referansı + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Tanım

+ +

Tip (type) seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden HTML tags diye de bahsedilebilir. Örneğin, HTML'de <h1>, <a>, <p> tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.

+ +

Sözdizim

+ +
element { stil özellikleri }
+
+ +

Örnek

+ +

CSS

+ +
span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+ +

HTML

+ +
<span>span elementi</span>
+<p>p (paragraf) elementi</p>
+<span>tekrar span elementi</span>
+ +

{{ EmbedLiveSample('Örnek', 200, 150) }}

+ +

 

+ +

Spesifikasyonlar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasyonDurumYorum
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Değişiklik yok
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Baştaki tanım
+ +

Tarayıcı uyumluluğu

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ÖzellikAndroidAndroid için ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Temel destek{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
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 ---- -

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

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

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

{{ 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" deleted file mode 100644 index d31a159a27..0000000000 --- "a/files/tr/web/guide/css/saya\303\247lar/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 ---- -

{{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/graphics/index.html b/files/tr/web/guide/graphics/index.html new file mode 100644 index 0000000000..c72c02d2b5 --- /dev/null +++ b/files/tr/web/guide/graphics/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.
+
+
+
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 +--- +

HTML5 , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:

+ + + +

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:

+ + + +
+
+

semantik (Kurgulama)

+ +
+
HTML5 Bölüm ve Anahatlar
+
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ış.
+
HTML5 Video ve Ses Elemanlarının Kullanılması 
+
{{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.
+
HTML5 Formlar
+
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ış.
+
Yeni Kurgu (Semantic) Elemanları
+
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 geçerli HTML5 elemanları  içerisine dahil edilen yeni birçok eleman vardır.
+
{{HTMLElement("iframe")}} İyileştirmesi
+
Ş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. 
+
 MathML 
+
Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.
+
HTML5' e Giriş
+
Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.
+
HTML5 -Compliant Parser (HTML5 - Uyumlu Ayrıştırıcılar) 
+
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.
+
+ +

CONNECTİVİTY (BAğlanılabilirlik)

+ +
+
Web Soketleri
+
Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.
+
Sunucu - Gönderim Olayları
+
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.
+
WebRTC (Real-Time Communication) 
+
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
+ RTC (Real-Time Communication) olarak hizmet verir.
+
+ +

OFFLİNE & STORAGE (çevrimdışılık ve depolama)

+ +
+
Çevrim Dışı Kaynaklar: Uygulama Önbelleği
+
Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.
+
Çevrimiçi ve Çevrimdışı Olaylar
+
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
+ ( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.
+
WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)
+
İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.
+
IndexedDB (İndexlenmiş Veri Tabanı)
+
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.
+
Web Uygulamalarında Dosyaların Kullanılması
+
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 (type) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader
+ (Dosya okuyucu) olarak bilinir. 
+
+ +

 

+ +

MULTIMEDIA (çoklu ortam)

+ +
+
HTML5 Ses ve Videonun Kullanılması
+
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.
+
+ +
+
WebRTC
+
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.
+
Kamera API Kullanımı 
+
API Nedir: İngilizce Aplication Programming Interface  kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.
+
+ Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.
+
Traklar ve WebVTT
+
WebVTT demek Web Video Text Tracks yani  Webdeki videoların yazı formudur. {{HTMLElement("track")}} elemanı videolarda altyazı ve bölümlere izin verir. WebVTT bir yazı formatıdır.
+
+ +

 

+ +

3d (ÜÇ BOYUTLU) grafikler ve efektler

+ +
+
Canvas Elemanının Kullanımına Örnekler
+
Firefox' da yeni {{ HTMLElement("canvas") }} elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.
+
<canvas> elemanı için HTML5 Yazı API' leri 
+
Artık HTML5 yazı API' lerini {{ HTMLElement("canvas") }} elemanı tarafından desteklenmektedir.
+
WebGL (Web Graphic Library)
+
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.
+
SVG (Scalable Vector Graphics)
+
Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.
+
+
+ +
+

performans ve entegrasyon

+ +
+
Webte Çalışanlar
+
İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.
+
2.Seviye XMLHttpRequest
+ 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  Ajax
+ arkasındaki teknolojidir.
+
JavaScript Motorunun Anında Derlenmesi  ( JIT-Compiling ) 
+
Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.
+
 Tarayıcı Geçmiş Bilgisi API' si
+
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.
+
contentEditable elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme
+
HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.
+
Drag ve Drop (Sürükle-Bırak) Özelliği 
+
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.
+
HTML Focus Yönetimi (Odaklama)
+
Yeni HTML5, activeElement ve hasFocus() özelliklerini desteklemektedir.
+
Web Tabanlı Protokol İşleyicileri
+
Şimdi web uygulamalarını,
+  navigator.registerProtocolHandler()
+ metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.
+
requestAnimationFrame
+
En iyi performansı almak için animasyonların render kontrolüne imkan tanır.
+
Tam Ekran API'si
+
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.
+
İşaretçi Kilitlenme (Lock) API' si
+
İş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.
+
Çevrimiçi ve Çevrimdışı Olaylar
+
Ç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.
+
+ +

cihaz erişimi

+ +
+
 Kamera API'sinin Kullanımı
+
Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.
+
Dokunmatik Olaylar
+
Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.
+
Konum Bilgisinin (GeoLocation) Kullanılması
+
Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.
+
Cihaz Yönünü Saptama
+
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.
+
İşaretçi (Kilitleme-Sabitleme) API'si
+
İş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.
+
+ +

Stİller

+ +

CSS çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. CSS3 olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; 
+ 1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.

+ +
+
Yeni Arkaplan Stil Özellikleri
+
{{ cssxref("box-shadow") }} komutuyla bir kutuya gölge efekti vermek ve çoklu arkaplan ayarlamaya izin vermiştir.
+
Daha Süslü Çerçeveler
+
Sadece {{ cssxref("border-image") }} ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.
+ {{ cssxref("border-radius") }} özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.
+
Stillerinizin Animasyonlaştırılması
+
Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde CSS animasyonları kullanarak animasyon yapmada CSS Transitions (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz  
+
Tipoğrafi İyileştirmeleri
+
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 hyphenation, shadow (gölge) ekleyerek veya daha detaylı şekillendirmelerde  decorations (ş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. 
+
Yeni Sunum Düzenleri
+
Tasarım etkinliğini arttırmak için,  CSS multi-column layout 
+ (CSS Çoklu Satır Düzenleri) ve CSS flexible box layout (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme eklendi.
+
+
+
+ +

 

+ +
+ + + + +
+
+
+ + + + + + + + + + + + + + + + + + +
+
 
+ 		  +
 
+ 		+
 
+ 		+
 
+ +
 
+ 		+
 
+ 		  +
 
+
+
+
+ +
 
+ +
 
+ +
Text-to-speech function is limited to 100 characters
+ +
 
+ + +
+
diff --git "a/files/tr/web/guide/\303\247izgeler/index.html" "b/files/tr/web/guide/\303\247izgeler/index.html" deleted file mode 100644 index c72c02d2b5..0000000000 --- "a/files/tr/web/guide/\303\247izgeler/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -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.
-
-
-
diff --git "a/files/tr/web/g\303\274venlik/index.html" "b/files/tr/web/g\303\274venlik/index.html" deleted file mode 100644 index 1543d6a3db..0000000000 --- "a/files/tr/web/g\303\274venlik/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Web güvenliği -slug: Web/Güvenlik -tags: - - Güvenlik - - Landing - - Web -translation_of: Web/Security ---- -
-

Websitenizin ya da uygulamanızın güvenliğini garantiye almak çok önemli. Küçük hatalar bile gizli verilerin sızmasına sebep olabilir ve dışarıdaki kötü niyetliler, verilerinizi çalmanın yollarını arıyorlar. Bu makaleler kodunuzu daha güvenli hale getirmeniz için size yardımcı olabilir.

-
- -

{{LandingPageListSubpages}}

- -

{{QuickLinksWithSubpages}}

diff --git "a/files/tr/web/g\303\274venlik/transport_layer_security/index.html" "b/files/tr/web/g\303\274venlik/transport_layer_security/index.html" deleted file mode 100644 index 5ba269b7cc..0000000000 --- "a/files/tr/web/g\303\274venlik/transport_layer_security/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Transport Layer Security -slug: Web/Güvenlik/Transport_Layer_Security -translation_of: Web/Security/Transport_Layer_Security ---- -

Aktarım Katmanı Güvenliği (TLS) kullanan herhangi bir bağlantının güvenliği büyük ölçüde seçilen şifre paketlerine ve seçilen güvenlik parametrelerine bağlıdır. Bu makalenin amacı, istemci ve sunucu arasındaki gizlilik ve bütünlük iletişimini sağlamak için bu kararları almanıza yardımcı olmaktır. Mozilla Operasyon Güvenliği (OpSec) ekibi , sunucular için referans yapılandırmaları olan bir wiki girişi tutar .

- -

Aktarım Katmanı Güvenliği (TLS) protokolü, iki ağa bağlı uygulamanın veya cihazın özel ve sağlam bir şekilde bilgi alışverişi yapmalarını sağlayan standarttır. TLS kullanan uygulamalar, verilerin güvenliği ve güvenilirliği üzerinde önemli bir etkisi olabilecek güvenlik parametrelerini seçebilir. Bu makale, TLS'ye ve içeriğinizi güvenceye alırken vermeniz gereken kararlara genel bir bakış sunmaktadır.

- -

Tarih

- -

HTTPS tanıtıldığında, Netscape tarafından sunulan bir teknoloji olan Güvenli Yuva Katmanı (SSL) 2.0'a dayanıyordu. Kısa bir süre sonra SSL 3.0'a güncellendi ve kullanımı genişledikçe, tüm web tarayıcıları ve sunucular arasında birlikte çalışabilirliği sağlamak için ortak, standart bir şifreleme teknolojisinin belirtilmesi gerektiği anlaşıldı. Internet Engineering Task Force (IETF) 'de TLS 1.0 belirtilmiş {{RFC (2246)}} Ocak 1999 yılında TLS mevcut sürümü olan 1.3 ({{RFC (8446)}}).

- -
-

Despite the fact that the web now uses TLS for encryption, many people still refer to it as "SSL" out of habit.

-
- -

Although TLS can be used on top of any low-level transport protocol, the original goal of the protocol was to encrypt HTTP traffic. HTTP encrypted using TLS is commonly referred to as {{Glossary("HTTPS")}}. TLS-encrypted web traffic is by convention exchanged on port 443 by default, while unencrypted HTTP uses port 80 by default. HTTPS remains an important use case for TLS.

- -

HTTP over TLS

- -

TLS provides three primary services that help ensure the safety and security of data exchanged with it:

- -
-
Authentication
-
Authentication lets each party to the communication verify that the other party is who they claim to be.
-
Encryption
-
Data is encrypted while being transmitted between the user agent and the server, in order to prevent it from being read and interpreted by unauthorized parties.
-
Integrity
-
TLS ensures that between encrypting, transmitting, and decrypting the data, no information is lost, damaged, tampered with, or falsified.
-
- -

A TLS connection starts with a handshake phase where a client and server agree on a shared secret and important parameters, like cipher suites, are negotiated. Once parameters and a data exchange mode where application data, such HTTP, is exchanged.

- -

Cipher suites

- -

The primary parameters that the TLS handshake negotiates is a {{interwiki("wikipedia", "cipher suite")}}.

- -

In TLS 1.2 and earlier, the negotiated cipher suite includes a set of cryptographic algorithms that together provide the negotiation of the shared secret, the means by which a server is authenticated, and the method that will be used to encrypt data.

- -

The cipher suite in TLS 1.3 primarily governs the encryption of data, separate negotiation methods are used for key agreement and authentication.

- -

Different software might use different names for the same cipher suites. For instance, the names used in OpenSSL and GnuTLS differ from those in the TLS standards. The cipher names correspondence table on the Mozilla OpSec team's article on TLS configurations lists these names as well as information about compatibility and security levels.

- -

Configuring your server

- -

Correctly configuring your server is crucial. In general, you should try to limit cipher support to the newest ciphers possible which are compatible with the browsers you want to be able to connect to your site. The Mozilla OpSec guide to TLS configurations provides more information on recommended configurations.

- -

To assist you in configuring your site, Mozilla provides a helpful TLS configuration generator that will generate configuration files for the following Web servers:

- - - -

Using the configurator is a recommended way to create the configuration to meet your needs; then copy and paste it into the appropriate file on your server and restart the server to pick up the changes. The configuration file may need some adjustments to include custom settings, so be sure to review the generated configuration before using it; installing the configuration file without ensuring any references to domain names and the like are correct will result in a server that just doesn't work.

- -

TLS 1.3

- -

{{RFC("8446", "TLS 1.3")}} is a major revision to TLS. TLS 1.3 includes numerous changes that improve security and performance. The goals of TLS 1.3 are:

- - - -

TLS 1.3 changes much of the protocol fundamentals, but preserves almost all of the basic capabilities as previous versions of TLS. For the web, TLS 1.3 can be enabled without affecting compatibility with some rare exceptions (see below).

- -

The major changes in TLS 1.3 are:

- - - -

Implementations of draft versions of TLS 1.3 are available. TLS 1.3 is enabled in some browsers, including the 0-RTT mode. Web servers that enable TLS 1.3 might need to adjust configuration to allow TLS 1.3 to operate successfully.

- -

TLS 1.3 adds just one significant new use case. The 0-RTT handshake can provide significant performance gains for latency sensitive applications, like the web. Enabling 0-RTT requires additional steps, both to ensure successful deployment and to manage the risks of replay attacks.

- -

The removal of renegotiation in TLS 1.3 might affect some web servers that rely on client authentication using certificates. Some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested. For the privacy of client certificates, the encryption of the TLS 1.3 handshake ensures that client certificates are encrypted; however this might require some software changes. Reactive client authentication using certificates is supported by TLS 1.3 but not widely implemented. Alternative mechanisms are in the process of being developed, which will also support HTTP/2.

- -

Retiring old TLS versions

- -

Daha modern, daha güvenli bir web üzerinde çalışmanıza yardımcı olmak için, TLS 1.0 ve 1.1 desteği, 201'in ikinci çeyreğindeki tüm büyük tarayıcılardan kaldırılacaktır . Web sunucunuzun, ileride TLS 1.2 veya 1.3'ü desteklediğinden emin olmanız gerekir.

- -

74 sürümünden itibaren Firefox , eski TLS sürümlerini ({{bug (1606734)}}) kullanan sunuculara bağlanırken Güvenli Bağlantı Başarısız hatası döndürecektir.

- -

TLS el sıkışma zaman aşımı değerleri

- -

TLS anlaşması bir sebepten dolayı yavaşlamaya veya yanıt vermemeye başlarsa, kullanıcının deneyimi önemli ölçüde etkilenebilir. Bu sorunu hafifletmek için, modern tarayıcılar el sıkışma zaman aşımlarını uygulamıştır:

- - - -

Ayrıca bakınız

- - - -

{{QuickLinksWithSubpages ( "/ tr / docs / Web / Güvenlik")}}

diff --git a/files/tr/web/html-alani/index.html b/files/tr/web/html-alani/index.html deleted file mode 100644 index 06153ac1c1..0000000000 --- a/files/tr/web/html-alani/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'HTML: Hypertext Markup Language' -slug: Web/HTML-Alani -tags: - - HTML - - HTML5 - - Web ---- -
{{HTMLSidebar}}
- -

HTML (HyperText Markup Language), Web’in en temel yapı taşıdır. Web içeriğinin anlamını ve yapısını tanımlar. HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (CSS) veya işlevselliğini / davranışını (JavaScript) tanımlamak için kullanılır.

- -

"HyperText" (köprü metni, üst metin, hiper metin olarak  da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.

- -

HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.

- -

HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.

- -

Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <title> etiketi <Title>, <TITLE> veya başka bir şekilde yazılabilir.

- -

Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.

- -
- - -
-
-

Temel Düzey Dersleri

- -

HTML Ögrenme Alanımız HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.

- -
-
HTML'e Giriş
-
Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.
-
Multimedia ekleme ve gömme (embed etme) İşlemleri
-
Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.
-
HTML tabloları
-
Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.
-
HTML formları
-
Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.
-
Yaygın HTML problemlerinin çözümleri
-
Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.
-
- -

İleri Düzey Konular

- -
-
CORS olarak etkinleştirilmiş resim
-
{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.
-
CORS ayarları özellikleri
-
{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi CORS desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir crossorigin özelliği (crossOrigin özelliği) bulunur.
-
HTML'de Focus yönetimi
-
activeElement DOM özelliği ve hasFocus() DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.
-
rel="preload" ile içeriği önceden yükleme
-
{{htmlelement("link")}} elementinin preload değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.
-
-
- -
-

HTML öğeleri

- -
-
HTML öğeleri
-
HTML, her biri belirli sayıda özellik (attribute) tarafından özelleştirilebilen elementlerden (HTML elementi) oluşur. HTML belgeleri birbirine linkler ile bağlanır.
-
HTML elementleri
-
Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!
-
HTML özellikleri (attribute)
-
HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.
-
Global özellikler (attributes)
-
Global özellikler standart olmayan elementler dahil tüm HTML elementlerini belirler. Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.
-
Inline elementler ve block-level elementler
-
HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.
-
Link tipleri
-
HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.
-
HTML audio ve video elementleri tarafından desteklenen media formatları
-
{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.
-
HTML içeriğinin çeşitleri
-
HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.
-
-
Quirks mod(garip mod) and standard mod
-
Quirk mod and standard mod hakkında tarihi bilgiler.
-
- -

İlgili Konular

- -
-
HTML elementlerini CSS kullanarak renklendirmek
-
Bu makale HTML içeriklerine  CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.
-
-
-
-Tümünü Görüntüle...
diff --git a/files/tr/web/html/element/aside/index.html b/files/tr/web/html/element/aside/index.html new file mode 100644 index 0000000000..234d56a434 --- /dev/null +++ b/files/tr/web/html/element/aside/index.html @@ -0,0 +1,154 @@ +--- +title: